@lobehub/chat 1.11.9 → 1.12.1

package/src/features/FileManager/Header/FilesSearchBar.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { SearchBar } from '@lobehub/ui';
+import { useQueryState } from 'nuqs';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const FilesSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { t } = useTranslation('file');
+
+  const [keywords, setKeywords] = useState<string>('');
+
+  const [, setQuery] = useQueryState('q', {
+    clearOnDefault: true,
+  });
+
+  return (
+    <SearchBar
+      allowClear
+      enableShortKey={!mobile}
+      // loading={isValidating}
+      onChange={(e) => {
+        setKeywords(e.target.value);
+
+        if (!e.target.value) {
+          setQuery(null);
+        }
+      }}
+      onPressEnter={() => {
+        setQuery(keywords);
+      }}
+      placeholder={t('searchFilePlaceholder')}
+      shortKey={'k'}
+      spotlight={!mobile}
+      style={{ width: 320 }}
+      value={keywords}
+    />
+  );
+});
+
+export default FilesSearchBar;

package/src/features/FileManager/Header/UploadFileButton.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Button, Dropdown, MenuProps, Upload } from 'antd';
+import { css, cx } from 'antd-style';
+import { FileUp, FolderUp, PlusCircleIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DragUpload from '@/components/DragUpload';
+import { useFileStore } from '@/store/file';
+
+const hotArea = css`
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: transparent;
+  }
+`;
+
+const UploadFileButton = ({ knowledgeBaseId }: { knowledgeBaseId?: string }) => {
+  const { t } = useTranslation('file');
+
+  const pushDockFileList = useFileStore((s) => s.pushDockFileList);
+  const items = useMemo<MenuProps['items']>(
+    () => [
+      {
+        icon: <Icon icon={FileUp} />,
+        key: 'upload-file',
+        label: (
+          <Upload
+            beforeUpload={async (_, fileList) => {
+              await pushDockFileList(Array.from(fileList), knowledgeBaseId);
+
+              return false;
+            }}
+            multiple={true}
+            showUploadList={false}
+          >
+            <div className={cx(hotArea)}>{t('header.actions.uploadFile')}</div>
+          </Upload>
+        ),
+      },
+      {
+        icon: <Icon icon={FolderUp} />,
+        key: 'upload-folder',
+        label: (
+          <Upload
+            beforeUpload={async (_, fileList) => {
+              await pushDockFileList(Array.from(fileList), knowledgeBaseId);
+
+              return false;
+            }}
+            directory
+            multiple={true}
+            showUploadList={false}
+          >
+            <div className={cx(hotArea)}>{t('header.actions.uploadFolder')}</div>
+          </Upload>
+        ),
+      },
+    ],
+    [],
+  );
+  return (
+    <>
+      <Dropdown menu={{ items }} placement="bottomRight">
+        <Button icon={<Icon icon={PlusCircleIcon} />}>{t('header.uploadButton')}</Button>
+      </Dropdown>
+      <DragUpload
+        enabledFiles
+        onUploadFiles={(files) => pushDockFileList(files, knowledgeBaseId)}
+      />
+    </>
+  );
+};
+
+export default UploadFileButton;

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

@@ -0,0 +1,39 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { DESKTOP_HEADER_ICON_SIZE, FOLDER_WIDTH } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+import FilesSearchBar from './FilesSearchBar';
+import UploadFileButton from './UploadFileButton';
+
+const Header = memo<{ knowledgeBaseId?: string }>(({ knowledgeBaseId }) => {
+  const showFilePanel = useGlobalStore(systemStatusSelectors.showFilePanel);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  return (
+    <Flexbox distribution={'space-between'} horizontal paddingBlock={12} paddingInline={24}>
+      <Flexbox gap={8} horizontal>
+        <ActionIcon
+          icon={showFilePanel ? PanelLeftClose : PanelLeftOpen}
+          onClick={() => {
+            updateSystemStatus({
+              filePanelWidth: showFilePanel ? 0 : FOLDER_WIDTH,
+              showFilePanel: !showFilePanel,
+            });
+          }}
+          size={DESKTOP_HEADER_ICON_SIZE}
+        />
+        <FilesSearchBar />
+      </Flexbox>
+      <UploadFileButton knowledgeBaseId={knowledgeBaseId} />
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/features/FileManager/UploadDock/Item.tsx

@@ -0,0 +1,124 @@
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { UploadFileItem } from '@/types/files/upload';
+import { formatSize, formatSpeed, formatTime } from '@/utils/format';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    progress: css`
+      position: absolute;
+      inset-block: 0 0;
+      inset-inline: 0 1%;
+
+      height: 100%;
+
+      background: ${token.colorFillTertiary};
+      border-block-end: 3px solid ${token.geekblue};
+    `,
+    title: css`
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+
+      font-size: 15px;
+      text-overflow: ellipsis;
+    `,
+  };
+});
+
+type UploadItemProps = UploadFileItem;
+
+const UploadItem = memo<UploadItemProps>(({ file, status, uploadState }) => {
+  const { t } = useTranslation('file');
+  const { styles } = useStyles();
+  const { type, name, size } = file;
+
+  const desc: ReactNode = useMemo(() => {
+    switch (status) {
+      case 'uploading': {
+        const textArray = [
+          uploadState?.speed ? formatSpeed(uploadState.speed) : '',
+          uploadState?.restTime
+            ? t('uploadDock.body.item.restTime', {
+                time: formatTime(uploadState?.restTime),
+              })
+            : '',
+        ].filter(Boolean);
+
+        return (
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {uploadState?.progress ? formatSize(size * (uploadState.progress / 100)) : '-'}/
+            {formatSize(size)}
+            {textArray.length === 0 ? '' : ' · ' + textArray.join(' · ')}
+          </Typography.Text>
+        );
+      }
+      case 'pending': {
+        return (
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {formatSize(size)} · {t('uploadDock.body.item.pending')}
+          </Typography.Text>
+        );
+      }
+
+      case 'processing': {
+        return (
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {formatSize(size)} · {t('uploadDock.body.item.processing')}
+          </Typography.Text>
+        );
+      }
+
+      case 'success': {
+        return (
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {formatSize(size)} · {t('uploadDock.body.item.done')}
+          </Typography.Text>
+        );
+      }
+      case 'error': {
+        return (
+          <Typography.Text style={{ fontSize: 12 }} type={'danger'}>
+            {formatSize(size)} · {t('uploadDock.body.item.error')}
+          </Typography.Text>
+        );
+      }
+      default: {
+        return '';
+      }
+    }
+  }, [status, uploadState]);
+
+  return (
+    <Flexbox
+      align={'center'}
+      gap={4}
+      horizontal
+      key={name}
+      paddingBlock={8}
+      paddingInline={12}
+      style={{ position: 'relative' }}
+    >
+      <FileIcon fileName={name} fileType={type} />
+      <Flexbox style={{ overflow: 'hidden' }}>
+        <div className={styles.title}>{name}</div>
+        {desc}
+      </Flexbox>
+
+      {status === 'uploading' && !!uploadState && (
+        <div
+          className={styles.progress}
+          style={{ insetInlineEnd: `${100 - uploadState.progress}%` }}
+        />
+      )}
+    </Flexbox>
+  );
+});
+
+export default UploadItem;

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

@@ -0,0 +1,183 @@
+import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { UploadIcon, XIcon } from 'lucide-react';
+import { lighten } from 'polished';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+import { convertAlphaToSolid } from '@/utils/colorUtils';
+
+import Item from './Item';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    body: css`
+      height: 400px;
+      background: ${lighten(0.05, token.colorBgLayout)};
+      border-radius: 8px;
+    `,
+    container: css`
+      position: fixed;
+      z-index: 100;
+      inset-block-end: 24px;
+      inset-inline-end: 24px;
+
+      overflow: hidden;
+
+      width: 360px;
+
+      border: 1px solid ${token.colorSplit};
+      border-radius: 8px;
+      box-shadow: ${token.boxShadow};
+    `,
+    header: css`
+      cursor: pointer;
+
+      padding-block: 8px;
+      padding-inline: 24px 12px;
+
+      background: ${token.colorBgContainer};
+      border-radius: 8px;
+
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        background: ${convertAlphaToSolid(token.colorFillTertiary, token.colorBgContainer)};
+      }
+    `,
+    progress: css`
+      pointer-events: none;
+
+      position: absolute;
+      inset-block: 0 0;
+      inset-inline: 0 1%;
+
+      height: 100%;
+
+      background: ${token.colorFillTertiary};
+      border-block-end: 3px solid ${token.geekblue};
+    `,
+    title: css`
+      height: 36px;
+      font-size: 16px;
+      color: ${token.colorText};
+    `,
+  };
+});
+
+const UploadDock = memo(() => {
+  const { styles, theme } = useStyles();
+  const { t } = useTranslation('file');
+  const [expand, setExpand] = useState(true);
+  const [show, setShow] = useState(true);
+
+  const dispatchDockFileList = useFileStore((s) => s.dispatchDockFileList);
+  const totalUploadingProgress = useFileStore(fileManagerSelectors.overviewUploadingProgress);
+  const fileList = useFileStore(fileManagerSelectors.dockFileList, isEqual);
+  const overviewUploadingStatus = useFileStore(
+    fileManagerSelectors.overviewUploadingStatus,
+    isEqual,
+  );
+  const isUploading = overviewUploadingStatus === 'uploading';
+
+  const icon = useMemo(() => {
+    switch (overviewUploadingStatus) {
+      case 'success': {
+        return <CheckCircleFilled style={{ color: theme.colorSuccess }} />;
+      }
+      case 'error': {
+        return <CloseCircleFilled style={{ color: theme.colorError }} />;
+      }
+
+      default: {
+        return <Icon icon={UploadIcon} />;
+      }
+    }
+  }, [overviewUploadingStatus]);
+
+  const count = fileList.length;
+
+  useEffect(() => {
+    if (show) return;
+    if (isUploading) setShow(true);
+  }, [isUploading, show]);
+
+  if (count === 0 || !show) return;
+
+  return (
+    <Flexbox className={styles.container}>
+      <Flexbox
+        align={'center'}
+        className={styles.header}
+        horizontal
+        justify={'space-between'}
+        onClick={() => {
+          setExpand(!expand);
+        }}
+        style={{
+          borderBottom: expand ? `1px solid ${theme.colorSplit}` : undefined,
+          borderBottomLeftRadius: expand ? 0 : undefined,
+          borderBottomRightRadius: expand ? 0 : undefined,
+        }}
+      >
+        <Flexbox align={'center'} className={styles.title} gap={16} horizontal>
+          {icon}
+          {t(`uploadDock.uploadStatus.${overviewUploadingStatus}`)} ·{' '}
+          {t('uploadDock.totalCount', { count })}
+        </Flexbox>
+        {!isUploading && (
+          <ActionIcon
+            icon={XIcon}
+            onClick={() => {
+              setShow(false);
+              dispatchDockFileList({ ids: fileList.map((item) => item.id), type: 'removeFiles' });
+            }}
+          />
+        )}
+      </Flexbox>
+
+      {expand ? (
+        <Flexbox className={styles.body} justify={'space-between'}>
+          <Flexbox gap={8} paddingBlock={16} style={{ overflowY: 'scroll' }}>
+            {fileList.map((item) => (
+              <Item key={item.id} {...item} />
+            ))}
+          </Flexbox>
+          <Center style={{ height: 40, minHeight: 40 }}>
+            <Typography.Text
+              onClick={() => {
+                setExpand(false);
+              }}
+              style={{ cursor: 'pointer' }}
+              type={'secondary'}
+            >
+              {t('uploadDock.body.collapse')}
+            </Typography.Text>
+          </Center>
+        </Flexbox>
+      ) : (
+        overviewUploadingStatus !== 'pending' && (
+          <div
+            className={styles.progress}
+            style={{
+              borderColor:
+                overviewUploadingStatus === 'success'
+                  ? theme.colorSuccess
+                  : overviewUploadingStatus === 'error'
+                    ? theme.colorError
+                    : undefined,
+              insetInlineEnd: `${100 - totalUploadingProgress}%`,
+            }}
+          />
+        )
+      )}
+    </Flexbox>
+  );
+});
+
+export default UploadDock;

package/src/features/FileManager/index.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Typography } from 'antd';
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileList from './FileList';
+import Header from './Header';
+import UploadDock from './UploadDock';
+
+const ChunkDrawer = dynamic(() => import('./ChunkDrawer'), { ssr: false });
+
+interface FileManagerProps {
+  category?: string;
+  knowledgeBaseId?: string;
+  title: string;
+}
+const FileManager = memo<FileManagerProps>(({ title, knowledgeBaseId, category }) => {
+  return (
+    <>
+      <Header knowledgeBaseId={knowledgeBaseId} />
+      <Flexbox gap={12} height={'100%'}>
+        <Typography.Text
+          style={{ fontSize: 16, fontWeight: 'bold', marginBlock: 16, marginInline: 24 }}
+        >
+          {title}
+        </Typography.Text>
+
+        <FileList category={category} knowledgeBaseId={knowledgeBaseId} />
+      </Flexbox>
+      <UploadDock />
+      <ChunkDrawer />
+    </>
+  );
+});
+
+export default FileManager;

package/src/features/FileSidePanel/index.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
+
+import { FOLDER_WIDTH } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  panel: css`
+    height: 100%;
+    background: ${token.colorBgContainer};
+  `,
+}));
+
+const FileSidePanel = memo<PropsWithChildren>(({ children }) => {
+  const { md = true } = useResponsive();
+
+  const { styles } = useStyles();
+  const [filePanelWidth, showFilePanel, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.filePanelWidth(s),
+    systemStatusSelectors.showFilePanel(s),
+    s.updateSystemStatus,
+  ]);
+
+  const [tmpWidth, setWidth] = useState(filePanelWidth);
+  if (tmpWidth !== filePanelWidth) setWidth(filePanelWidth);
+  const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showFilePanel));
+
+  const handleExpand = (expand: boolean) => {
+    if (isEqual(expand, showFilePanel)) return;
+    updateSystemStatus({ showFilePanel: expand });
+    setCacheExpand(expand);
+  };
+  useEffect(() => {
+    if (md && cacheExpand) updateSystemStatus({ showFilePanel: true });
+    if (!md) updateSystemStatus({ showFilePanel: false });
+  }, [md, cacheExpand]);
+
+  const handleSizeChange: DraggablePanelProps['onSizeChange'] = (_, size) => {
+    if (!size) return;
+    const nextWidth = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
+    if (!nextWidth) return;
+
+    if (isEqual(nextWidth, filePanelWidth)) return;
+    setWidth(nextWidth);
+    updateSystemStatus({ filePanelWidth: nextWidth });
+  };
+
+  return (
+    <DraggablePanel
+      className={styles.panel}
+      defaultSize={{ width: tmpWidth }}
+      expand={showFilePanel}
+      maxWidth={320}
+      minWidth={FOLDER_WIDTH}
+      mode={md ? 'fixed' : 'float'}
+      onExpandChange={handleExpand}
+      onSizeChange={handleSizeChange}
+      placement="left"
+      size={{ height: '100%', width: filePanelWidth }}
+    >
+      <DraggablePanelContainer
+        style={{
+          flex: 'none',
+          height: '100%',
+          minWidth: FOLDER_WIDTH,
+        }}
+      >
+        {children}
+      </DraggablePanelContainer>
+    </DraggablePanel>
+  );
+});
+
+export default FileSidePanel;

package/src/features/FileViewer/NotSupport/index.tsx

@@ -0,0 +1,54 @@
+import { IDocument } from '@cyntler/react-doc-viewer';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { ComponentType, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { downloadFile } from '@/utils/downloadFile';
+
+const useStyles = createStyles(({ css, token }) => ({
+  page: css`
+    width: 100%;
+    margin: 12px;
+    padding: 24px;
+
+    background: ${token.colorBgContainer};
+    border-radius: 4px;
+    box-shadow: ${token.boxShadowTertiary};
+  `,
+}));
+
+const NotSupport: ComponentType<{
+  document: IDocument | undefined;
+  fileName: string;
+}> = ({ fileName, document: doc }) => {
+  const { styles } = useStyles();
+
+  const { t } = useTranslation(['file', 'common']);
+
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Flexbox className={styles.page} id="txt-renderer">
+      <Center height={'100%'}>
+        <Flexbox align={'center'} gap={12}>
+          {t('preview.unsupportedFile')}
+          <Button
+            loading={loading}
+            onClick={async () => {
+              if (!doc) return;
+              setLoading(true);
+              await downloadFile(doc.uri, fileName);
+              setLoading(false);
+            }}
+          >
+            {t('download', { ns: 'common' })}
+          </Button>
+        </Flexbox>
+      </Center>
+    </Flexbox>
+  );
+};
+
+export default NotSupport;