@lobehub/chat 1.11.8 → 1.12.0

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

@@ -0,0 +1,211 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Button, Checkbox } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { isNull } from 'lodash-es';
+import { FileBoxIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+import { FileListItem } from '@/types/files';
+import { formatSize } from '@/utils/format';
+
+import ChunksBadge from './ChunkTag';
+import DropdownMenu from './DropdownMenu';
+
+dayjs.extend(relativeTime);
+
+export const FILE_DATE_WIDTH = 160;
+export const FILE_SIZE_WIDTH = 140;
+
+const useStyles = createStyles(({ css, token, cx, isDarkMode }) => {
+  const hover = css`
+    opacity: 0;
+  `;
+  return {
+    checkbox: hover,
+    container: css`
+      cursor: pointer;
+      margin-inline: 24px;
+      border-block-end: 1px solid ${isDarkMode ? token.colorSplit : rgba(token.colorSplit, 0.06)};
+
+      &:hover {
+        background: ${token.colorFillTertiary};
+
+        .${cx(hover)} {
+          opacity: 1;
+        }
+      }
+
+      .chunk-tag {
+        opacity: 1;
+      }
+    `,
+
+    hover,
+    item: css`
+      padding-block: 0;
+      padding-inline: 0 24px;
+      color: ${token.colorTextSecondary};
+    `,
+    name: css`
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+
+      margin-inline-start: 12px;
+
+      color: ${token.colorText};
+    `,
+    selected: css`
+      background: ${token.colorFillTertiary};
+
+      &:hover {
+        background: ${token.colorFillSecondary};
+      }
+    `,
+  };
+});
+
+interface FileRenderItemProps extends FileListItem {
+  index: number;
+  knowledgeBaseId?: string;
+  onSelectedChange: (id: string, selected: boolean) => void;
+  selected?: boolean;
+}
+
+const FileRenderItem = memo<FileRenderItemProps>(
+  ({
+    size,
+    chunkingError,
+    embeddingError,
+    embeddingStatus,
+    finishEmbedding,
+    chunkCount,
+    url,
+    name,
+    fileType,
+    id,
+    createdAt,
+    selected,
+    chunkingStatus,
+    onSelectedChange,
+    knowledgeBaseId,
+  }) => {
+    const { t } = useTranslation('components');
+    const { styles, cx } = useStyles();
+    const router = useRouter();
+    const [isCreatingFileParseTask, parseFiles] = useFileStore((s) => [
+      fileManagerSelectors.isCreatingFileParseTask(id)(s),
+      s.parseFilesToChunks,
+    ]);
+
+    const displayTime =
+      dayjs().diff(dayjs(createdAt), 'd') < 7
+        ? dayjs(createdAt).fromNow()
+        : dayjs(createdAt).format('YYYY-MM-DD');
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={cx(styles.container, selected && styles.selected)}
+        height={64}
+        horizontal
+      >
+        <Flexbox
+          align={'center'}
+          className={styles.item}
+          distribution={'space-between'}
+          flex={1}
+          horizontal
+          onClick={() => {
+            router.push(`/files/${id}`);
+          }}
+        >
+          <Flexbox align={'center'} horizontal>
+            <Center
+              height={48}
+              onClick={(e) => {
+                e.stopPropagation();
+
+                onSelectedChange(id, !selected);
+              }}
+              style={{ paddingInline: 4 }}
+            >
+              <Checkbox
+                checked={selected}
+                className={selected ? '' : styles.hover}
+                style={{ borderRadius: '50%' }}
+              />
+            </Center>
+            <FileIcon fileName={name} fileType={fileType} />
+            <span className={styles.name}>{name}</span>
+          </Flexbox>
+          <Flexbox
+            align={'center'}
+            gap={8}
+            horizontal
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {isCreatingFileParseTask || isNull(chunkingStatus) || !chunkingStatus ? (
+              <div className={isCreatingFileParseTask ? undefined : styles.hover}>
+                <Tooltip
+                  overlayStyle={{ pointerEvents: 'none' }}
+                  title={t('FileManager.actions.chunkingTooltip')}
+                >
+                  <Button
+                    icon={<Icon icon={FileBoxIcon} />}
+                    loading={isCreatingFileParseTask}
+                    onClick={() => {
+                      parseFiles([id]);
+                    }}
+                    size={'small'}
+                    type={'text'}
+                  >
+                    {t(
+                      isCreatingFileParseTask
+                        ? 'FileManager.actions.createChunkingTask'
+                        : 'FileManager.actions.chunking',
+                    )}
+                  </Button>
+                </Tooltip>
+              </div>
+            ) : (
+              <div style={{ cursor: 'default' }}>
+                <ChunksBadge
+                  chunkCount={chunkCount}
+                  chunkingError={chunkingError}
+                  chunkingStatus={chunkingStatus}
+                  embeddingError={embeddingError}
+                  embeddingStatus={embeddingStatus}
+                  finishEmbedding={finishEmbedding}
+                  id={id}
+                />
+              </div>
+            )}
+            <div className={styles.hover}>
+              <DropdownMenu filename={name} id={id} knowledgeBaseId={knowledgeBaseId} url={url} />
+            </div>
+          </Flexbox>
+        </Flexbox>
+        <Flexbox className={styles.item} width={FILE_DATE_WIDTH}>
+          {displayTime}
+        </Flexbox>
+        <Flexbox className={styles.item} width={FILE_SIZE_WIDTH}>
+          {formatSize(size)}
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default FileRenderItem;

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

@@ -0,0 +1,25 @@
+import { Skeleton } from 'antd';
+import { Flexbox } from 'react-layout-kit';
+
+import { FILE_DATE_WIDTH, FILE_SIZE_WIDTH } from './FileListItem';
+
+const FileSkeleton = () => (
+  <Flexbox style={{ marginInline: 24 }}>
+    {Array.from({ length: 4 }).map((_, index) => (
+      <Flexbox align={'center'} distribution={'space-between'} height={64} horizontal key={index}>
+        <Flexbox align={'center'} flex={1} gap={12} horizontal paddingInline={12}>
+          <Skeleton.Avatar active size={'large'} />
+          <Skeleton.Button active style={{ height: 20, width: 300 }} />
+        </Flexbox>
+        <Flexbox paddingInline={24} width={FILE_DATE_WIDTH}>
+          <Skeleton.Button active style={{ height: 20 }} />
+        </Flexbox>
+        <Flexbox paddingInline={24} width={FILE_SIZE_WIDTH}>
+          <Skeleton.Button active style={{ height: 20 }} />
+        </Flexbox>
+      </Flexbox>
+    ))}
+  </Flexbox>
+);
+
+export default FileSkeleton;

package/src/features/FileManager/FileList/ToolBar/Config.tsx

@@ -0,0 +1,28 @@
+import { Switch } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+interface ConfigProps {
+  config: { showFilesInKnowledgeBase: boolean };
+  onConfigChange: (config: { showFilesInKnowledgeBase: boolean }) => void;
+}
+
+const Config = memo<ConfigProps>(({ config, onConfigChange }) => {
+  const { t } = useTranslation('components');
+
+  return (
+    <Flexbox
+      gap={6}
+      horizontal
+      onClick={() => {
+        onConfigChange({ showFilesInKnowledgeBase: !config.showFilesInKnowledgeBase });
+      }}
+    >
+      <Switch size={'small'} value={config.showFilesInKnowledgeBase} />
+      {t('FileManager.config.showFilesInKnowledgeBase')}
+    </Flexbox>
+  );
+});
+
+export default Config;

package/src/features/FileManager/FileList/ToolBar/MultiSelectActions.tsx

@@ -0,0 +1,152 @@
+import { Icon } from '@lobehub/ui';
+import { App, Button, Checkbox, Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { BookMinusIcon, BookPlusIcon, FileBoxIcon, Trash2Icon } from 'lucide-react';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    height: 40px;
+    padding-block-end: 12px;
+    border-block-end: 1px solid ${isDarkMode ? token.colorSplit : rgba(token.colorSplit, 0.06)};
+  `,
+  total: css`
+    cursor: pointer;
+    height: 27px;
+  `,
+}));
+
+export type MultiSelectActionType =
+  | 'addToKnowledgeBase'
+  | 'delete'
+  | 'batchChunking'
+  | 'removeFromKnowledgeBase'
+  | 'addToOtherKnowledgeBase';
+
+interface MultiSelectActionsProps {
+  isInKnowledgeBase?: boolean;
+  onActionClick: (type: MultiSelectActionType) => Promise<void>;
+  onClickCheckbox: () => void;
+  selectCount: number;
+  total?: number;
+}
+
+const MultiSelectActions = memo<MultiSelectActionsProps>(
+  ({ selectCount, isInKnowledgeBase, total, onActionClick, onClickCheckbox }) => {
+    const { t } = useTranslation(['components', 'common']);
+    const { styles } = useStyles();
+
+    const isSelectedFiles = selectCount > 0;
+    const { modal, message } = App.useApp();
+    return (
+      <Flexbox align={'center'} gap={12} horizontal>
+        <Flexbox
+          align={'center'}
+          className={styles.total}
+          gap={8}
+          horizontal
+          onClick={onClickCheckbox}
+          paddingInline={4}
+        >
+          <Checkbox
+            checked={selectCount === total}
+            indeterminate={isSelectedFiles && selectCount !== total}
+          />
+          {typeof total === 'undefined' ? (
+            <Skeleton
+              active
+              paragraph={{ rows: 1, style: { marginBottom: 0, width: 60 }, width: '100%' }}
+              title={false}
+            />
+          ) : (
+            <div style={{ height: 18 }}>
+              {isSelectedFiles
+                ? t('FileManager.total.selectedCount', { count: selectCount })
+                : t('FileManager.total.fileCount', { count: total })}
+            </div>
+          )}
+        </Flexbox>
+        {isSelectedFiles && (
+          <Flexbox gap={8} horizontal>
+            {isInKnowledgeBase ? (
+              <>
+                <Button
+                  icon={<Icon icon={BookMinusIcon} />}
+                  onClick={() => {
+                    modal.confirm({
+                      okButtonProps: {
+                        danger: true,
+                      },
+                      onOk: async () => {
+                        await onActionClick('removeFromKnowledgeBase');
+                        message.success(t('FileManager.actions.removeFromKnowledgeBaseSuccess'));
+                      },
+                      title: t('FileManager.actions.confirmRemoveFromKnowledgeBase', {
+                        count: selectCount,
+                      }),
+                    });
+                  }}
+                  size={'small'}
+                >
+                  {t('FileManager.actions.removeFromKnowledgeBase')}
+                </Button>
+                <Button
+                  icon={<Icon icon={BookPlusIcon} />}
+                  onClick={() => {
+                    onActionClick('addToOtherKnowledgeBase');
+                  }}
+                  size={'small'}
+                >
+                  {t('FileManager.actions.addToOtherKnowledgeBase')}
+                </Button>
+              </>
+            ) : (
+              <Button
+                icon={<Icon icon={BookPlusIcon} />}
+                onClick={() => {
+                  onActionClick('addToKnowledgeBase');
+                }}
+                size={'small'}
+              >
+                {t('FileManager.actions.addToKnowledgeBase')}
+              </Button>
+            )}
+            <Button
+              icon={<Icon icon={FileBoxIcon} />}
+              onClick={async () => {
+                await onActionClick('batchChunking');
+              }}
+              size={'small'}
+            >
+              {t('FileManager.actions.batchChunking')}
+            </Button>
+            <Button
+              danger
+              icon={<Icon icon={Trash2Icon} />}
+              onClick={async () => {
+                modal.confirm({
+                  okButtonProps: {
+                    danger: true,
+                  },
+                  onOk: async () => {
+                    await onActionClick('delete');
+                    message.success(t('FileManager.actions.deleteSuccess'));
+                  },
+                  title: t('FileManager.actions.confirmDeleteMultiFiles', { count: selectCount }),
+                });
+              }}
+              size={'small'}
+            >
+              {t('batchDelete', { ns: 'common' })}
+            </Button>
+          </Flexbox>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default MultiSelectActions;

package/src/features/FileManager/FileList/ToolBar/index.tsx

@@ -0,0 +1,114 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAddFilesToKnowledgeBaseModal } from '@/features/KnowledgeBaseModal';
+import { useFileStore } from '@/store/file';
+import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+
+import Config from './Config';
+import MultiSelectActions, { MultiSelectActionType } from './MultiSelectActions';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    height: 40px;
+    padding-block-end: 12px;
+    border-block-end: 1px solid ${isDarkMode ? token.colorSplit : rgba(token.colorSplit, 0.06)};
+  `,
+}));
+
+interface MultiSelectActionsProps {
+  config: { showFilesInKnowledgeBase: boolean };
+  knowledgeBaseId?: string;
+  onConfigChange: (config: { showFilesInKnowledgeBase: boolean }) => void;
+  selectCount: number;
+  selectFileIds: string[];
+  setSelectedFileIds: (ids: string[]) => void;
+  showConfig?: boolean;
+  total?: number;
+  totalFileIds: string[];
+}
+
+const ToolBar = memo<MultiSelectActionsProps>(
+  ({
+    selectCount,
+    showConfig,
+    setSelectedFileIds,
+    selectFileIds,
+    total,
+    totalFileIds,
+    config,
+    onConfigChange,
+    knowledgeBaseId,
+  }) => {
+    const { styles } = useStyles();
+
+    const [removeFiles, parseFilesToChunks] = useFileStore((s) => [
+      s.removeFiles,
+      s.parseFilesToChunks,
+    ]);
+    const [removeFromKnowledgeBase] = useKnowledgeBaseStore((s) => [
+      s.removeFilesFromKnowledgeBase,
+    ]);
+
+    const { open } = useAddFilesToKnowledgeBaseModal();
+
+    const onActionClick = async (type: MultiSelectActionType) => {
+      switch (type) {
+        case 'delete': {
+          await removeFiles(selectFileIds);
+          setSelectedFileIds([]);
+
+          return;
+        }
+        case 'removeFromKnowledgeBase': {
+          if (!knowledgeBaseId) return;
+
+          await removeFromKnowledgeBase(knowledgeBaseId, selectFileIds);
+          setSelectedFileIds([]);
+          return;
+        }
+        case 'addToKnowledgeBase': {
+          open({
+            fileIds: selectFileIds,
+            onClose: () => setSelectedFileIds([]),
+          });
+          return;
+        }
+        case 'addToOtherKnowledgeBase': {
+          open({
+            fileIds: selectFileIds,
+            knowledgeBaseId,
+            onClose: () => setSelectedFileIds([]),
+          });
+          return;
+        }
+
+        case 'batchChunking': {
+          await parseFilesToChunks(selectFileIds, { skipExist: true });
+          setSelectedFileIds([]);
+          return;
+        }
+      }
+    };
+
+    const isInKnowledgeBase = !!knowledgeBaseId;
+    return (
+      <Flexbox align={'center'} className={styles.container} horizontal justify={'space-between'}>
+        <MultiSelectActions
+          isInKnowledgeBase={isInKnowledgeBase}
+          onActionClick={onActionClick}
+          onClickCheckbox={() => {
+            setSelectedFileIds(selectCount === total ? [] : totalFileIds);
+          }}
+          selectCount={selectCount}
+          total={total}
+        />
+        {showConfig && <Config config={config} onConfigChange={onConfigChange} />}
+      </Flexbox>
+    );
+  },
+);
+
+export default ToolBar;

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

@@ -0,0 +1,143 @@
+'use client';
+
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { useQueryState } from 'nuqs';
+import { rgba } from 'polished';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import { Virtuoso } from 'react-virtuoso';
+
+import { useFileStore } from '@/store/file';
+import { SortType } from '@/types/files';
+
+import EmptyStatus from './EmptyStatus';
+import FileListItem, { FILE_DATE_WIDTH, FILE_SIZE_WIDTH } from './FileListItem';
+import FileSkeleton from './FileSkeleton';
+import ToolBar from './ToolBar';
+import { useCheckTaskStatus } from './useCheckTaskStatus';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  header: css`
+    height: 40px;
+    min-height: 40px;
+    color: ${token.colorTextDescription};
+    border-block-end: 1px solid ${isDarkMode ? token.colorSplit : rgba(token.colorSplit, 0.06)};
+  `,
+  headerItem: css`
+    padding-block: 0;
+    padding-inline: 0 24px;
+  `,
+  total: css`
+    padding-block-end: 12px;
+    border-block-end: 1px solid ${isDarkMode ? token.colorSplit : rgba(token.colorSplit, 0.06)};
+  `,
+}));
+
+interface FileListProps {
+  category?: string;
+  knowledgeBaseId?: string;
+}
+
+const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
+  const { t } = useTranslation('components');
+  const { styles } = useStyles();
+
+  const [selectFileIds, setSelectedFileIds] = useState<string[]>([]);
+  const [viewConfig, setViewConfig] = useState({ showFilesInKnowledgeBase: false });
+
+  const [query] = useQueryState('q', {
+    clearOnDefault: true,
+  });
+
+  const [sorter] = useQueryState('sorter', {
+    clearOnDefault: true,
+    defaultValue: 'createdAt',
+  });
+  const [sortType] = useQueryState('sortType', {
+    clearOnDefault: true,
+    defaultValue: SortType.Desc,
+  });
+
+  const useFetchFileManage = useFileStore((s) => s.useFetchFileManage);
+
+  const { data, isLoading } = useFetchFileManage({
+    category,
+    knowledgeBaseId,
+    q: query,
+    sortType,
+    sorter,
+    ...viewConfig,
+  });
+
+  useCheckTaskStatus(data);
+
+  return !isLoading && data?.length === 0 ? (
+    <EmptyStatus knowledgeBaseId={knowledgeBaseId} showKnowledgeBase={!knowledgeBaseId} />
+  ) : (
+    <Flexbox height={'100%'}>
+      <Flexbox style={{ fontSize: 12, marginInline: 24 }}>
+        <ToolBar
+          config={viewConfig}
+          key={selectFileIds.join('-')}
+          knowledgeBaseId={knowledgeBaseId}
+          onConfigChange={setViewConfig}
+          selectCount={selectFileIds.length}
+          selectFileIds={selectFileIds}
+          setSelectedFileIds={setSelectedFileIds}
+          showConfig={!knowledgeBaseId}
+          total={data?.length}
+          totalFileIds={data?.map((item) => item.id) || []}
+        />
+        <Flexbox align={'center'} className={styles.header} horizontal>
+          <Flexbox className={styles.headerItem} flex={1} style={{ paddingInline: 32 }}>
+            {t('FileManager.title.title')}
+          </Flexbox>
+          <Flexbox className={styles.headerItem} width={FILE_DATE_WIDTH}>
+            {t('FileManager.title.createdAt')}
+          </Flexbox>
+          <Flexbox className={styles.headerItem} width={FILE_SIZE_WIDTH}>
+            {t('FileManager.title.size')}
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+      {isLoading ? (
+        <FileSkeleton />
+      ) : (
+        <Virtuoso
+          components={{
+            Footer: () => (
+              <Center style={{ height: 64 }}>
+                <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+                  {t('FileManager.bottom')}
+                </Typography.Text>
+              </Center>
+            ),
+          }}
+          data={data}
+          itemContent={(index, item) => (
+            <FileListItem
+              index={index}
+              key={item.id}
+              knowledgeBaseId={knowledgeBaseId}
+              onSelectedChange={(id, checked) => {
+                setSelectedFileIds((prev) => {
+                  if (checked) {
+                    return [...prev, id];
+                  }
+                  return prev.filter((item) => item !== id);
+                });
+              }}
+              selected={selectFileIds.includes(item.id)}
+              {...item}
+            />
+          )}
+          style={{ flex: 1 }}
+        />
+      )}
+    </Flexbox>
+  );
+});
+
+export default FileList;

package/src/features/FileManager/FileList/useCheckTaskStatus.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+import { useFileStore } from '@/store/file';
+import { AsyncTaskStatus } from '@/types/asyncTask';
+import { FileListItem } from '@/types/files';
+
+export const useCheckTaskStatus = (data: FileListItem[] | undefined) => {
+  const [refreshFileList] = useFileStore((s) => [s.refreshFileList]);
+  const hasProcessingChunkTask = data?.some(
+    (item) => item.chunkingStatus === AsyncTaskStatus.Processing,
+  );
+  const hasProcessingEmbeddingTask = data?.some(
+    (item) => item.embeddingStatus === AsyncTaskStatus.Processing,
+  );
+
+  const isProcessing = hasProcessingChunkTask || hasProcessingEmbeddingTask;
+
+  // every 3s to check if the chunking status is changed
+  useEffect(() => {
+    if (!isProcessing) return;
+
+    const interval = setInterval(refreshFileList, 5000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isProcessing]);
+};