Merge pull request #688 from refly-ai/feat/project

Feat/project

Author: pftom

packages/ai-workspace-common/src/components/canvas-template/template-list.tsx

@@ -71,9 +71,7 @@ export const TemplateCard = ({
             <div className="font-light truncate text-xs text-gray-500">{`@${template.shareUser?.name}`}</div>
           </div>
         </div>
-      ) : (
-        <div className="mx-2 mb-2 px-2 h-[26px]" />
-      )}
+      ) : null}
 
       <div className="mx-2 px-2 h-[50px]">
         <Typography.Paragraph

packages/ai-workspace-common/src/components/common/header-actions.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Popconfirm, Button, Input, Tooltip } from 'antd';
+import { Popconfirm, Button, Input, Tooltip, Affix } from 'antd';
 import {
   IconDelete,
   IconRemove,
@@ -29,6 +29,8 @@ export interface HeaderActionsProps {
   onAddSelectedSourcesToCanvas?: () => void;
   addButtonNode?: ReactNode;
   itemCountText?: string;
+  useAffix?: boolean;
+  target: () => HTMLElement;
 }
 
 const HeaderActions = ({
@@ -46,6 +48,8 @@ const HeaderActions = ({
   onAddSelectedSourcesToCanvas,
   addButtonNode,
   itemCountText,
+  useAffix = false,
+  target,
 }: HeaderActionsProps) => {
   const { t } = useTranslation();
 
@@ -169,16 +173,28 @@ const HeaderActions = ({
     addButtonNode,
     onAddItem,
     t,
+    source,
+    onAddSelectedSourcesToCanvas,
   ]);
 
-  return (
+  const headerContent = (
     <div
-      className={`mb-2 px-3 ${isMultiSelectMode || isSearchMode ? '' : 'flex justify-between items-center'}`}
+      className={`mb-2 px-3 ${isMultiSelectMode || isSearchMode ? '' : 'flex justify-between items-center'} ${useAffix ? 'bg-white py-2 z-20 w-full shadow-sm' : ''}`}
     >
       {itemCountText && <div className="text-[10px] text-gray-500">{itemCountText}</div>}
       {actions}
     </div>
   );
+
+  if (useAffix) {
+    return (
+      <Affix offsetTop={0} className="z-20 w-full" target={target}>
+        <div className="w-full overflow-hidden">{headerContent}</div>
+      </Affix>
+    );
+  }
+
+  return headerContent;
 };
 
 export default React.memo(HeaderActions);

packages/ai-workspace-common/src/components/project/project-directory/index.tsx

@@ -150,7 +150,7 @@ export const ProjectDirectory = ({ projectId, source }: ProjectDirectoryProps) =
         source === 'sider' ? 'h-[calc(100vh)]' : 'h-[calc(100vh-100px)] rounded-r-lg',
       )}
     >
-      <div className="project-directory flex h-full flex-col py-3 pb-0 overflow-y-auto">
+      <div className="project-directory flex h-full flex-col py-3 pb-0 overflow-y-auto overflow-x-hidden">
         <ProjectSettings
           source={source}
           setCollapse={setCollapse}
@@ -162,7 +162,7 @@ export const ProjectDirectory = ({ projectId, source }: ProjectDirectoryProps) =
 
         <Divider className="my-2" />
 
-        <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto overflow-x-hidden project-directory-content">
           <CanvasMenu
             isFetching={isLoadingCanvas}
             canvasList={canvasList}

packages/ai-workspace-common/src/components/project/project-settings/index.tsx

@@ -113,7 +113,7 @@ export const ProjectSettings = ({
         {data?.customInstructions && (
           <Paragraph
             className="text-xs p-1 mt-1 !mb-0 bg-gray-50 text-gray-400 rounded-md"
-            ellipsis={{ rows: 1, tooltip: { placement: 'right' } }}
+            ellipsis={{ rows: 3, tooltip: { placement: 'right' } }}
           >
             {data?.customInstructions}
           </Paragraph>

packages/ai-workspace-common/src/components/project/source-menu/index.tsx

@@ -485,7 +485,7 @@ export const SourcesMenu = ({
               </div>
             ),
             children: (
-              <div className="h-full flex flex-col">
+              <div className="h-full flex flex-col overflow-hidden">
                 <HeaderActions
                   source="source"
                   isSearchMode={isSearchMode}
@@ -501,8 +501,10 @@ export const SourcesMenu = ({
                   onAddSelectedSourcesToCanvas={addSelectedSourcesToCanvas}
                   itemCountText={itemCountText}
                   addButtonNode={addButtonNode}
+                  useAffix={true}
+                  target={() => document.querySelector('.project-directory-content') as HTMLElement}
                 />
-                <div className="flex-grow overflow-y-auto px-3">
+                <div className="flex-grow overflow-y-auto px-3 source-list-container">
                   {isFetching ? (
                     <div className="flex justify-center h-full pt-4">
                       <Skeleton active paragraph={{ rows: 8 }} title={false} />