@lobehub/chat 1.11.9 → 1.12.0

package/src/features/FileManager/ChunkDrawer/ChunkList/ChunkItem.tsx

@@ -0,0 +1,61 @@
+import { createStyles } from 'antd-style';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useFileStore } from '@/store/file';
+import { FileChunk } from '@/types/chunk';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding-block: 12px;
+    padding-inline: 8px;
+    border-block-end: 1px dashed ${token.colorBorderSecondary};
+    border-radius: 4px;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  text: css`
+    font-size: 14px;
+    line-height: 24px;
+  `,
+  title: css`
+    font-size: 18px;
+  `,
+}));
+
+type ChunkItemProps = FileChunk;
+
+const ChunkItem = memo<ChunkItemProps>(({ text, type, id }) => {
+  const { styles, cx } = useStyles();
+
+  const highlightChunks = useFileStore((s) => s.highlightChunks);
+
+  const typeClassName = useMemo(() => {
+    switch (type) {
+      default: {
+        return styles.text;
+      }
+      case 'Title': {
+        return styles.title;
+      }
+    }
+  }, [type]);
+
+  return (
+    <Flexbox
+      className={cx(styles.container, typeClassName)}
+      onMouseEnter={() => {
+        highlightChunks([id]);
+      }}
+      onMouseLeave={() => {
+        highlightChunks([]);
+      }}
+    >
+      {text}
+    </Flexbox>
+  );
+});
+
+export default ChunkItem;

package/src/features/FileManager/ChunkDrawer/ChunkList/index.tsx

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Virtuoso } from 'react-virtuoso';
+
+import { lambdaQuery } from '@/libs/trpc/client';
+
+import SkeletonLoading from '../Loading';
+import ChunkItem from './ChunkItem';
+
+interface ChunkListProps {
+  fileId: string;
+}
+const ChunkList = memo<ChunkListProps>(({ fileId }) => {
+  const { data, isLoading, fetchNextPage } = lambdaQuery.chunk.getChunksByFileId.useInfiniteQuery(
+    { id: fileId },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    },
+  );
+
+  const dataSource = data?.pages.flatMap((page) => page.items) || [];
+
+  return isLoading ? (
+    <SkeletonLoading />
+  ) : (
+    <Flexbox flex={1}>
+      <Virtuoso
+        data={dataSource}
+        endReached={() => {
+          fetchNextPage();
+        }}
+        itemContent={(index, item) => (
+          <Flexbox key={item.id} paddingInline={12}>
+            <ChunkItem {...item} index={index} />
+          </Flexbox>
+        )}
+      />
+    </Flexbox>
+  );
+});
+
+export default ChunkList;

package/src/features/FileManager/ChunkDrawer/Content.tsx

@@ -0,0 +1,38 @@
+import { SearchBar } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useFileStore } from '@/store/file';
+import { fileChunkSelectors } from '@/store/file/slices/chunk';
+
+import ChunkList from './ChunkList';
+import SimilaritySearchList from './SimilaritySearchList';
+
+const Content = memo(() => {
+  const [fileId, showSimilaritySearch, semanticSearch] = useFileStore((s) => [
+    fileChunkSelectors.enabledChunkFileId(s),
+    fileChunkSelectors.showSimilaritySearchResult(s),
+    s.semanticSearch,
+  ]);
+
+  if (!fileId) return;
+
+  return (
+    <Flexbox gap={8} height={'100%'} paddingBlock={'16px 0'}>
+      <Flexbox paddingInline={12}>
+        <SearchBar
+          onChange={(text) => {
+            if (!text) useFileStore.setState({ isSimilaritySearch: false });
+          }}
+          onSearch={async (text) => {
+            useFileStore.setState({ isSimilaritySearch: !!text });
+            semanticSearch(text, fileId);
+          }}
+        />
+      </Flexbox>
+      {showSimilaritySearch ? <SimilaritySearchList /> : <ChunkList fileId={fileId} />}
+    </Flexbox>
+  );
+});
+
+export default Content;

package/src/features/FileManager/ChunkDrawer/Loading/index.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const SkeletonLoading = memo(() => (
+  <Flexbox padding={12}>
+    <Skeleton active paragraph={{ width: '70%' }} title={false} />
+    <Skeleton active paragraph={{ width: '40%' }} title={false} />
+    <Skeleton active paragraph={{ width: '80%' }} title={false} />
+    <Skeleton active paragraph={{ width: '30%' }} title={false} />
+    <Skeleton active paragraph={{ width: '50%' }} title={false} />
+    <Skeleton active paragraph={{ width: '70%' }} title={false} />
+  </Flexbox>
+));
+
+export default SkeletonLoading;

package/src/features/FileManager/ChunkDrawer/SimilaritySearchList/Item.tsx

@@ -0,0 +1,62 @@
+import { Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { SemanticSearchChunk } from '@/types/chunk';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding-block: 12px;
+    padding-inline: 8px;
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+    border-radius: 4px;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  pageNumber: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  text: css`
+    font-size: 14px;
+    line-height: 24px;
+  `,
+  title: css`
+    font-size: 18px;
+  `,
+}));
+
+interface ChunkItemProps extends Omit<SemanticSearchChunk, 'index'> {
+  index: number;
+}
+
+const SearchItem = memo<ChunkItemProps>(({ text, pageNumber, type, similarity }) => {
+  const { styles, cx } = useStyles();
+
+  const typeClassName = useMemo(() => {
+    switch (type) {
+      default: {
+        return styles.text;
+      }
+      case 'Title': {
+        return styles.title;
+      }
+    }
+  }, [type]);
+
+  return (
+    <Flexbox className={cx(styles.container, typeClassName)} gap={8}>
+      {text}
+
+      <Flexbox align={'center'} distribution={'space-between'} horizontal>
+        <Tag bordered={false}>{similarity.toFixed(2)}</Tag>
+        <Flexbox className={styles.pageNumber}>第 {pageNumber} 页</Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default SearchItem;

package/src/features/FileManager/ChunkDrawer/SimilaritySearchList/index.tsx

@@ -0,0 +1,31 @@
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Virtuoso } from 'react-virtuoso';
+
+import { useFileStore } from '@/store/file';
+
+import SkeletonLoading from '../Loading';
+import ChunkItem from './Item';
+
+const SimilaritySearchList = memo(() => {
+  const isSimilaritySearching = useFileStore((s) => s.isSimilaritySearching);
+  const dataSource = useFileStore((s) => s.similaritySearchChunks, isEqual);
+
+  return isSimilaritySearching ? (
+    <SkeletonLoading />
+  ) : (
+    <Flexbox flex={1}>
+      <Virtuoso
+        data={dataSource}
+        itemContent={(index, item) => (
+          <Flexbox key={item.id} paddingInline={12}>
+            <ChunkItem {...item} index={index} />
+          </Flexbox>
+        )}
+      />
+    </Flexbox>
+  );
+});
+
+export default SimilaritySearchList;

package/src/features/FileManager/ChunkDrawer/index.tsx

@@ -0,0 +1,48 @@
+import { Drawer } from 'antd';
+import { useTheme } from 'antd-style';
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+
+import Content from './Content';
+
+const FileViewer = dynamic(() => import('@/features/FileViewer'), { ssr: false });
+
+const ChunkDrawer = memo(() => {
+  const [fileId, open, closeChunkDrawer] = useFileStore((s) => [
+    s.chunkDetailId,
+    !!s.chunkDetailId,
+    s.closeChunkDrawer,
+  ]);
+  const file = useFileStore(fileManagerSelectors.getFileById(fileId));
+
+  const theme = useTheme();
+  return (
+    <Drawer
+      onClose={() => {
+        closeChunkDrawer();
+      }}
+      open={open}
+      styles={{
+        body: { padding: 0 },
+      }}
+      title={file?.name}
+      width={'90%'}
+    >
+      <Flexbox height={'100%'} horizontal style={{ overflow: 'hidden' }}>
+        {file && (
+          <Flexbox flex={2} style={{ overflow: 'scroll' }}>
+            <FileViewer {...file} />
+          </Flexbox>
+        )}
+        <Flexbox flex={1} style={{ borderInlineStart: `1px solid ${theme.colorSplit}` }}>
+          <Content />
+        </Flexbox>
+      </Flexbox>
+    </Drawer>
+  );
+});
+
+export default ChunkDrawer;

package/src/features/FileManager/FileList/EmptyStatus.tsx

@@ -0,0 +1,153 @@
+import { FileTypeIcon, Icon } from '@lobehub/ui';
+import { Typography, Upload } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { ArrowUpIcon, PlusIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useCreateNewModal } from '@/features/KnowledgeBaseModal';
+import { useFileStore } from '@/store/file';
+
+const ICON_SIZE = 80;
+
+const useStyles = createStyles(({ css, token }) => ({
+  actionTitle: css`
+    margin-block-start: 12px;
+    font-size: 16px;
+    color: ${token.colorTextSecondary};
+  `,
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 200px;
+    height: 140px;
+
+    font-weight: 500;
+    text-align: center;
+
+    background: ${token.colorFillTertiary};
+    border-radius: ${token.borderRadiusLG}px;
+    box-shadow: 0 0 0 1px ${token.colorFillTertiary} inset;
+
+    transition: background 0.3s ease-in-out;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  glow: css`
+    position: absolute;
+    inset-block-end: -12px;
+    inset-inline-end: 0;
+
+    width: 48px;
+    height: 48px;
+
+    opacity: 0.5;
+    filter: blur(24px);
+  `,
+  icon: css`
+    position: absolute;
+    z-index: 1;
+    inset-block-end: -24px;
+    inset-inline-end: 8px;
+
+    flex: none;
+  `,
+}));
+
+interface EmptyStatusProps {
+  knowledgeBaseId?: string;
+  showKnowledgeBase: boolean;
+}
+const EmptyStatus = ({ showKnowledgeBase, knowledgeBaseId }: EmptyStatusProps) => {
+  const { t } = useTranslation('components');
+  const theme = useTheme();
+  const { styles } = useStyles();
+
+  const pushDockFileList = useFileStore((s) => s.pushDockFileList);
+
+  const { open } = useCreateNewModal();
+
+  return (
+    <Center gap={24} height={'100%'} style={{ paddingBottom: 100 }} width={'100%'}>
+      <Flexbox justify={'center'} style={{ textAlign: 'center' }}>
+        <Typography.Title level={4}>{t('FileManager.emptyStatus.title')}</Typography.Title>
+        <Typography.Text type={'secondary'}>{t('FileManager.emptyStatus.or')}</Typography.Text>
+      </Flexbox>
+      <Flexbox gap={12} horizontal>
+        {showKnowledgeBase && (
+          <Flexbox
+            className={styles.card}
+            onClick={() => {
+              open();
+            }}
+            padding={16}
+          >
+            <span className={styles.actionTitle}>
+              {t('FileManager.emptyStatus.actions.knowledgeBase')}
+            </span>
+            <div className={styles.glow} style={{ background: theme.purple }} />
+            <FileTypeIcon
+              className={styles.icon}
+              color={theme.purple}
+              icon={<Icon color={'#fff'} icon={PlusIcon} />}
+              size={ICON_SIZE}
+              type={'folder'}
+            />
+          </Flexbox>
+        )}
+        <Upload
+          beforeUpload={async (_, fileList) => {
+            await pushDockFileList(Array.from(fileList), knowledgeBaseId);
+
+            return false;
+          }}
+          multiple={true}
+          showUploadList={false}
+        >
+          <Flexbox className={styles.card} padding={16}>
+            <span className={styles.actionTitle}>{t('FileManager.emptyStatus.actions.file')}</span>
+            <div className={styles.glow} style={{ background: theme.gold }} />
+            <FileTypeIcon
+              className={styles.icon}
+              color={theme.gold}
+              icon={<Icon color={'#fff'} icon={ArrowUpIcon} />}
+              size={ICON_SIZE}
+            />
+          </Flexbox>
+        </Upload>
+        <Upload
+          beforeUpload={async (_, fileList) => {
+            await pushDockFileList(Array.from(fileList), knowledgeBaseId);
+
+            return false;
+          }}
+          directory
+          multiple={true}
+          showUploadList={false}
+        >
+          <Flexbox className={styles.card} padding={16}>
+            <span className={styles.actionTitle}>
+              {t('FileManager.emptyStatus.actions.folder')}
+            </span>
+            <div className={styles.glow} style={{ background: theme.geekblue }} />
+            <FileTypeIcon
+              className={styles.icon}
+              color={theme.geekblue}
+              icon={<Icon color={'#fff'} icon={ArrowUpIcon} />}
+              size={ICON_SIZE}
+              type={'folder'}
+            />
+          </Flexbox>
+        </Upload>
+      </Flexbox>
+    </Center>
+  );
+};
+
+export default EmptyStatus;

package/src/features/FileManager/FileList/FileListItem/ChunkTag.tsx

@@ -0,0 +1,35 @@
+import { memo } from 'react';
+
+import FileParsingStatusTag from '@/components/FileParsingStatus';
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+import { FileParsingTask } from '@/types/asyncTask';
+
+interface ChunkTagProps extends FileParsingTask {
+  id: string;
+}
+
+const ChunksBadge = memo<ChunkTagProps>(({ id, ...res }) => {
+  const [isCreatingChunkEmbeddingTask, embeddingChunks, reParseFile, openChunkDrawer] =
+    useFileStore((s) => [
+      fileManagerSelectors.isCreatingChunkEmbeddingTask(id)(s),
+      s.embeddingChunks,
+      s.reParseFile,
+      s.openChunkDrawer,
+    ]);
+
+  return (
+    <FileParsingStatusTag
+      onClick={(status) => {
+        if (status === 'success') openChunkDrawer(id);
+      }}
+      onEmbeddingClick={() => embeddingChunks([id])}
+      onErrorClick={(task) => {
+        if (task === 'chunking') reParseFile(id);
+      }}
+      preparingEmbedding={isCreatingChunkEmbeddingTask}
+      {...res}
+    />
+  );
+});
+
+export default ChunksBadge;

package/src/features/FileManager/FileList/FileListItem/DropdownMenu.tsx

@@ -0,0 +1,150 @@
+import { ActionIcon, Icon, copyToClipboard } from '@lobehub/ui';
+import { App, Dropdown } from 'antd';
+import { ItemType } from 'antd/es/menu/interface';
+import {
+  BookMinusIcon,
+  BookPlusIcon,
+  DownloadIcon,
+  LinkIcon,
+  MoreHorizontalIcon,
+  Trash,
+} from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAddFilesToKnowledgeBaseModal } from '@/features/KnowledgeBaseModal';
+import { useFileStore } from '@/store/file';
+import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+import { downloadFile } from '@/utils/downloadFile';
+
+interface DropdownMenuProps {
+  filename: string;
+  id: string;
+  knowledgeBaseId?: string;
+  url: string;
+}
+
+const DropdownMenu = memo<DropdownMenuProps>(({ id, knowledgeBaseId, url, filename }) => {
+  const { t } = useTranslation(['components', 'common']);
+  const { message, modal } = App.useApp();
+
+  const [removeFile] = useFileStore((s) => [s.removeFileItem]);
+  const [removeFilesFromKnowledgeBase] = useKnowledgeBaseStore((s) => [
+    s.removeFilesFromKnowledgeBase,
+  ]);
+
+  const inKnowledgeBase = !!knowledgeBaseId;
+  const { open } = useAddFilesToKnowledgeBaseModal();
+
+  const items = useMemo(() => {
+    const knowledgeBaseActions = (
+      inKnowledgeBase
+        ? [
+            {
+              icon: <Icon icon={BookPlusIcon} />,
+              key: 'addToOtherKnowledgeBase',
+              label: t('FileManager.actions.addToOtherKnowledgeBase'),
+              onClick: async ({ domEvent }) => {
+                domEvent.stopPropagation();
+
+                open({ fileIds: [id], knowledgeBaseId });
+              },
+            },
+            {
+              icon: <Icon icon={BookMinusIcon} />,
+              key: 'removeFromKnowledgeBase',
+              label: t('FileManager.actions.removeFromKnowledgeBase'),
+              onClick: async ({ domEvent }) => {
+                domEvent.stopPropagation();
+
+                modal.confirm({
+                  okButtonProps: {
+                    danger: true,
+                  },
+                  onOk: async () => {
+                    await removeFilesFromKnowledgeBase(knowledgeBaseId, [id]);
+
+                    message.success(t('FileManager.actions.removeFromKnowledgeBaseSuccess'));
+                  },
+                  title: t('FileManager.actions.confirmRemoveFromKnowledgeBase', {
+                    count: 1,
+                  }),
+                });
+              },
+            },
+          ]
+        : [
+            {
+              icon: <Icon icon={BookPlusIcon} />,
+              key: 'addToKnowledgeBase',
+              label: t('FileManager.actions.addToKnowledgeBase'),
+              onClick: async ({ domEvent }) => {
+                domEvent.stopPropagation();
+                open({ fileIds: [id] });
+              },
+            },
+          ]
+    ) as ItemType[];
+
+    return (
+      [
+        ...knowledgeBaseActions,
+        {
+          type: 'divider',
+        },
+        {
+          icon: <Icon icon={LinkIcon} />,
+          key: 'copyUrl',
+          label: t('FileManager.actions.copyUrl'),
+          onClick: async ({ domEvent }) => {
+            domEvent.stopPropagation();
+            await copyToClipboard(url);
+            message.success(t('FileManager.actions.copyUrlSuccess'));
+          },
+        },
+        {
+          icon: <Icon icon={DownloadIcon} />,
+          key: 'download',
+          label: t('download', { ns: 'common' }),
+          onClick: async ({ domEvent }) => {
+            domEvent.stopPropagation();
+            const key = 'file-downloading';
+            message.loading({
+              content: t('FileManager.actions.downloading'),
+              duration: 0,
+              key,
+            });
+            await downloadFile(url, filename);
+            message.destroy(key);
+          },
+        },
+        {
+          type: 'divider',
+        },
+        {
+          danger: true,
+          icon: <Icon icon={Trash} />,
+          key: 'delete',
+          label: t('delete', { ns: 'common' }),
+          onClick: async ({ domEvent }) => {
+            domEvent.stopPropagation();
+            modal.confirm({
+              content: t('FileManager.actions.confirmDelete'),
+              okButtonProps: { danger: true },
+              onOk: async () => {
+                await removeFile(id);
+              },
+            });
+          },
+        },
+      ] as ItemType[]
+    ).filter(Boolean);
+  }, [inKnowledgeBase]);
+  return (
+    <Dropdown menu={{ items }}>
+      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
+    </Dropdown>
+  );
+});
+
+export default DropdownMenu;