@lobehub/lobehub 2.0.0-next.54 → 2.0.0-next.55

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeHome/menu/KnowledgeBase.tsx

@@ -13,11 +13,19 @@ import KnowledgeBaseList from '../../../components/KnowledgeBaseList';
 
 const useStyles = createStyles(({ css, token }) => ({
   header: css`
-    color: ${token.colorTextDescription};
+    cursor: pointer;
+    border-radius: ${token.borderRadius}px;
+    color: ${token.colorTextSecondary};
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: ${token.colorFillTertiary};
+    }
   `,
 }));
 
-const KnowledgeBase = () => {
+// TODO: Rename to Collection
+const Collection = () => {
   const { t } = useTranslation('file');
   const { styles } = useStyles();
   const navigate = useNavigate();
@@ -35,13 +43,14 @@ const KnowledgeBase = () => {
   };
 
   return (
-    <Flexbox flex={1} gap={8}>
+    <Flexbox flex={1} gap={8} paddingInline={8}>
       <Flexbox
         align={'center'}
         className={styles.header}
         horizontal
         justify={'space-between'}
-        paddingInline={'16px 12px'}
+        paddingBlock={6}
+        paddingInline={8}
       >
         <Flexbox align={'center'} gap={8} horizontal>
           <ActionIcon
@@ -51,7 +60,7 @@ const KnowledgeBase = () => {
             }}
             size={'small'}
           />
-          <div style={{ lineHeight: '14px' }}>{t('knowledgeBase.title')}</div>
+          <div style={{ flex: 1, lineHeight: '14px' }}>{t('knowledgeBase.title')}</div>
         </Flexbox>
         <ActionIcon
           icon={PlusIcon}
@@ -61,9 +70,13 @@ const KnowledgeBase = () => {
         />
       </Flexbox>
 
-      {showList && <KnowledgeBaseList />}
+      {showList && (
+        <Flexbox flex={1}>
+          <KnowledgeBaseList />
+        </Flexbox>
+      )}
     </Flexbox>
   );
 };
 
-export default KnowledgeBase;
+export default Collection;

package/src/components/FileIcon/index.tsx

@@ -11,7 +11,7 @@ interface FileListProps {
   variant?: 'raw' | 'file' | 'folder';
 }
 
-const FileIcon = memo<FileListProps>(({ fileName, size, variant = 'file', isDirectory }) => {
+const FileIcon = memo<FileListProps>(({ fileName, size, variant = 'raw', isDirectory }) => {
   if (isDirectory)
     return <FileTypeIcon color={'gold'} size={size} type={'folder'} variant={'color'} />;
 
@@ -28,6 +28,8 @@ const FileIcon = memo<FileListProps>(({ fileName, size, variant = 'file', isDire
     );
   }
 
+  console.log('FileIcon', fileName);
+
   return <MaterialFileTypeIcon filename={fileName} size={size} type={'file'} variant={variant} />;
 });
 

package/src/features/ChatInput/ActionBar/Knowledge/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import TipGuide from '@/components/TipGuide';
 import { LOBE_CHAT_CLOUD } from '@/const/branding';
 import { isServerMode } from '@/const/version';
-import { AssignKnowledgeBaseModal } from '@/features/KnowledgeBaseModal';
+import { AttachKnowledgeModal } from '@/features/KnowledgeBaseModal';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
@@ -69,7 +69,7 @@ const Knowledge = memo(() => {
       ) : (
         content
       )}
-      <AssignKnowledgeBaseModal open={modalOpen} setOpen={setModalOpen} />
+      <AttachKnowledgeModal open={modalOpen} setOpen={setModalOpen} />
     </Suspense>
   );
 });

package/src/features/FileSidePanel/index.tsx

@@ -55,7 +55,7 @@ const FileSidePanel = memo<PropsWithChildren>(({ children }) => {
       className={styles.panel}
       defaultSize={{ width: tmpWidth }}
       expand={showFilePanel}
-      maxWidth={320}
+      maxWidth={280}
       minWidth={FOLDER_WIDTH}
       mode={md ? 'fixed' : 'float'}
       onExpandChange={handleExpand}

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/Item/MasonryItem.tsx

@@ -0,0 +1,80 @@
+import { Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import KnowledgeIcon from '@/components/KnowledgeIcon';
+import { KnowledgeItem } from '@/types/knowledgeBase';
+
+import Actions from './Action';
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    padding: 12px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorBgContainer};
+
+    transition: all ${token.motionDurationMid};
+
+    &:hover {
+      border-color: ${token.colorPrimary};
+      box-shadow: ${token.boxShadowTertiary};
+    }
+  `,
+  desc: css`
+    margin: 0 !important;
+    font-size: 12px;
+    line-height: 1.4;
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin: 0 !important;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+  `,
+}));
+
+const MasonryItem = memo<KnowledgeItem>(({ id, fileType, name, type, description, enabled }) => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.card}>
+      <Flexbox gap={12} style={{ position: 'relative' }}>
+        <Flexbox align={'center'} gap={12} horizontal>
+          <KnowledgeIcon
+            fileType={fileType}
+            name={name}
+            size={{ file: 48, repo: 48 }}
+            type={type}
+          />
+          <Flexbox flex={1} gap={6} style={{ overflow: 'hidden', position: 'relative' }}>
+            <Text className={styles.title} ellipsis={{ rows: 2 }}>
+              {name}
+            </Text>
+          </Flexbox>
+        </Flexbox>
+        {description && (
+          <Text className={styles.desc} ellipsis={{ rows: 3 }}>
+            {description}
+          </Text>
+        )}
+        <Flexbox align={'center'} justify={'flex-end'}>
+          <Actions enabled={enabled} id={id} type={type} />
+        </Flexbox>
+      </Flexbox>
+    </div>
+  );
+});
+
+MasonryItem.displayName = 'MasonryItem';
+
+export default MasonryItem;

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/Item/MasonryItemWrapper.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+
+import { KnowledgeItem } from '@/types/knowledgeBase';
+
+import MasonryItem from './MasonryItem';
+
+interface MasonryItemWrapperProps {
+  data: KnowledgeItem;
+  index: number;
+}
+
+const MasonryItemWrapper = memo<MasonryItemWrapperProps>(({ data: item }) => {
+  // Safety check: return null if item is undefined
+  if (!item || !item.id) {
+    return null;
+  }
+
+  return (
+    <div style={{ padding: '8px 4px' }}>
+      <MasonryItem {...item} />
+    </div>
+  );
+});
+
+MasonryItemWrapper.displayName = 'MasonryItemWrapper';
+
+export default MasonryItemWrapper;

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/List.tsx

@@ -1,15 +1,20 @@
 import { Icon } from '@lobehub/ui';
+import { VirtuosoMasonry } from '@virtuoso.dev/masonry';
 import { Empty } from 'antd';
 import { ServerCrash } from 'lucide-react';
-import { memo } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 import { Virtuoso } from 'react-virtuoso';
 
 import { useAgentStore } from '@/store/agent';
+import { useGlobalStore } from '@/store/global';
 
 import Item from './Item';
+import MasonryItemWrapper from './Item/MasonryItemWrapper';
 import Loading from './Loading';
+import MasonrySkeleton from './MasonrySkeleton';
+import ViewSwitcher, { ViewMode } from './ViewSwitcher';
 
 export const List = memo(() => {
   const { t } = useTranslation('file');
@@ -18,31 +23,107 @@ export const List = memo(() => {
 
   const { isLoading, error, data } = useFetchFilesAndKnowledgeBases();
 
+  const [columnCount, setColumnCount] = useState(2);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  const viewMode = useGlobalStore((s) => s.status.knowledgeBaseModalViewMode || 'list') as ViewMode;
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+  const setViewMode = (mode: ViewMode) => {
+    setIsTransitioning(true);
+    updateSystemStatus({ knowledgeBaseModalViewMode: mode });
+  };
+
+  // Update column count based on window size (max 2 columns for modal)
+  const updateColumnCount = React.useCallback(() => {
+    const width = window.innerWidth;
+    if (width < 480) {
+      setColumnCount(1);
+    } else {
+      setColumnCount(2);
+    }
+  }, []);
+
+  // Initialize column count on mount
+  React.useEffect(() => {
+    updateColumnCount();
+  }, [updateColumnCount]);
+
+  // Set up resize listener when in masonry mode
+  React.useEffect(() => {
+    if (viewMode === 'masonry') {
+      window.addEventListener('resize', updateColumnCount);
+      return () => window.removeEventListener('resize', updateColumnCount);
+    }
+  }, [viewMode, updateColumnCount]);
+
+  // Handle view transition with a brief delay to show skeleton
+  React.useEffect(() => {
+    if (isTransitioning && data) {
+      requestAnimationFrame(() => {
+        const timer = setTimeout(() => {
+          setIsTransitioning(false);
+        }, 100);
+        return () => clearTimeout(timer);
+      });
+    }
+  }, [isTransitioning, viewMode, data]);
+
   const isEmpty = data && data.length === 0;
 
-  return isLoading ? (
-    <Loading />
-  ) : isEmpty ? (
-    <Center gap={12} padding={40}>
-      {error ? (
-        <>
-          <Icon icon={ServerCrash} size={80} />
-          {t('networkError')}
-        </>
+  const masonryContext = useMemo(() => ({}), []);
+
+  return (
+    <Flexbox height={500}>
+      <Flexbox paddingInline={16} style={{ paddingBlockEnd: 12 }}>
+        <Flexbox align={'center'} horizontal justify={'flex-end'}>
+          <ViewSwitcher onViewChange={setViewMode} view={viewMode} />
+        </Flexbox>
+      </Flexbox>
+      {isLoading || isTransitioning ? (
+        viewMode === 'masonry' ? (
+          <MasonrySkeleton columnCount={columnCount} />
+        ) : (
+          <Loading />
+        )
+      ) : isEmpty ? (
+        <Center gap={12} padding={40}>
+          {error ? (
+            <>
+              <Icon icon={ServerCrash} size={80} />
+              {t('networkError')}
+            </>
+          ) : (
+            <Empty description={t('empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          )}
+        </Center>
+      ) : viewMode === 'list' ? (
+        <Virtuoso
+          itemContent={(index) => {
+            const item = data![index];
+            return <Item key={item.id} {...item} />;
+          }}
+          overscan={400}
+          style={{ flex: 1, marginInline: -16 }}
+          totalCount={data!.length}
+        />
       ) : (
-        <Empty description={t('empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        <div style={{ flex: 1, overflow: 'hidden' }}>
+          <div style={{ height: '100%', overflowY: 'auto' }}>
+            <div style={{ paddingInline: 16 }}>
+              <VirtuosoMasonry
+                ItemContent={MasonryItemWrapper}
+                columnCount={columnCount}
+                context={masonryContext}
+                data={data || []}
+                style={{
+                  gap: '16px',
+                }}
+              />
+            </div>
+          </div>
+        </div>
       )}
-    </Center>
-  ) : (
-    <Virtuoso
-      itemContent={(index) => {
-        const item = data![index];
-        return <Item key={item.id} {...item} />;
-      }}
-      overscan={400}
-      style={{ height: 500, marginInline: -16 }}
-      totalCount={data!.length}
-    />
+    </Flexbox>
   );
 });
 

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/MasonrySkeleton.tsx

@@ -0,0 +1,62 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    padding: 12px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+    background: ${token.colorBgContainer};
+  `,
+  grid: css`
+    display: grid;
+    gap: 16px;
+    padding-block: 12px;
+  `,
+}));
+
+interface MasonrySkeletonProps {
+  columnCount: number;
+}
+
+const MasonrySkeleton = memo<MasonrySkeletonProps>(({ columnCount }) => {
+  const { styles } = useStyles();
+  // Generate varying heights for more natural masonry look
+  const heights = [160, 180, 170, 160, 190, 170, 160, 180];
+
+  // Calculate number of items based on column count (max 2 columns for modal)
+  const itemCount = Math.min(columnCount * 3, 8);
+
+  return (
+    <div
+      className={styles.grid}
+      style={{
+        gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+      }}
+    >
+      {Array.from({ length: itemCount }).map((_, index) => (
+        <div className={styles.card} key={index}>
+          <Skeleton
+            active
+            avatar={{ shape: 'square', size: 48 }}
+            paragraph={{
+              rows: 3,
+              width: ['100%', '90%', '70%'],
+            }}
+            style={{
+              height: heights[index % heights.length],
+            }}
+            title={{
+              width: '80%',
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+});
+
+MasonrySkeleton.displayName = 'MasonrySkeleton';
+
+export default MasonrySkeleton;

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/index.tsx

@@ -7,11 +7,12 @@ import { useServerConfigStore } from '@/store/serverConfig';
 
 import List from './List';
 
-interface AssignKnowledgeBaseProps {
+interface AttachKnowledgeModalProps {
   open?: boolean;
   setOpen: (open: boolean) => void;
 }
-export const AssignKnowledgeBaseModal = memo<AssignKnowledgeBaseProps>(({ setOpen, open }) => {
+
+export const AttachKnowledgeModal = memo<AttachKnowledgeModalProps>(({ setOpen, open }) => {
   const { t } = useTranslation('chat');
   const mobile = useServerConfigStore((s) => s.isMobile);
 

package/src/features/KnowledgeBaseModal/CreateNew/CreateForm.tsx

@@ -21,11 +21,11 @@ const CreateForm = memo<CreateFormProps>(({ onClose, onSuccess }) => {
     try {
       const id = await createNewKnowledgeBase(values);
       setLoading(false);
-      onClose?.();
 
       // Call onSuccess callback if provided, otherwise navigate directly
       if (onSuccess) {
         onSuccess(id);
+        onClose?.();
       } else {
         window.location.href = `/knowledge/bases/${id}`;
       }

package/src/features/KnowledgeManager/DocumentExplorer/DocumentActions.tsx

@@ -0,0 +1,111 @@
+import { ActionIcon, Dropdown, Icon } from '@lobehub/ui';
+import { App } from 'antd';
+import { Copy, CopyPlus, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useFileStore } from '@/store/file';
+
+interface DocumentActionsProps {
+  documentContent?: string;
+  documentId: string;
+  onDelete?: () => void;
+  onRename?: () => void;
+}
+
+const DocumentActions = memo<DocumentActionsProps>(
+  ({ documentId, documentContent, onDelete, onRename }) => {
+    const { t } = useTranslation(['common', 'file']);
+    const { message, modal } = App.useApp();
+    const [loading, setLoading] = useState(false);
+    const removeDocument = useFileStore((s) => s.removeDocument);
+    const duplicateDocument = useFileStore((s) => s.duplicateDocument);
+
+    const handleDelete = () => {
+      modal.confirm({
+        cancelText: t('cancel'),
+        content: t('documentEditor.deleteConfirm.content', { ns: 'file' }),
+        okButtonProps: { danger: true },
+        okText: t('delete'),
+        onOk: async () => {
+          setLoading(true);
+          try {
+            await removeDocument(documentId);
+            message.success(t('documentEditor.deleteSuccess', { ns: 'file' }));
+            onDelete?.();
+          } catch (error) {
+            console.error('Failed to delete document:', error);
+            message.error(t('documentEditor.deleteError', { ns: 'file' }));
+          } finally {
+            setLoading(false);
+          }
+        },
+        title: t('documentEditor.deleteConfirm.title', { ns: 'file' }),
+      });
+    };
+
+    const handleCopy = async () => {
+      if (documentContent) {
+        try {
+          await navigator.clipboard.writeText(documentContent);
+        } catch (error) {
+          console.error('Failed to copy document:', error);
+        }
+      }
+    };
+
+    const handleDuplicate = async () => {
+      setLoading(true);
+      try {
+        await duplicateDocument(documentId);
+      } catch (error) {
+        console.error('Failed to duplicate document:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    return (
+      <Flexbox align={'center'} horizontal onClick={(e) => e.stopPropagation()}>
+        <Dropdown
+          menu={{
+            items: [
+              {
+                icon: <Icon icon={Pencil} />,
+                key: 'rename',
+                label: t('rename'),
+                onClick: () => onRename?.(),
+              },
+              {
+                icon: <Icon icon={Copy} />,
+                key: 'copy',
+                label: t('documentList.copyContent', { ns: 'file' }),
+                onClick: handleCopy,
+              },
+              {
+                icon: <Icon icon={CopyPlus} />,
+                key: 'duplicate',
+                label: t('documentList.duplicate', { ns: 'file' }),
+                onClick: handleDuplicate,
+              },
+              {
+                danger: true,
+                icon: <Icon icon={Trash2} />,
+                key: 'delete',
+                label: t('delete'),
+                onClick: handleDelete,
+              },
+            ],
+          }}
+          placement="bottomRight"
+          trigger={['click']}
+        >
+          <ActionIcon icon={MoreHorizontal} loading={loading} size="small" variant="borderless" />
+        </Dropdown>
+      </Flexbox>
+    );
+  },
+);
+
+export default DocumentActions;