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

package/src/features/KnowledgeManager/Home/RecentFiles.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import { FileListItem } from '@/types/files';
+
+import RecentFileCard from './RecentFileCard';
+import RecentFilesSkeleton from './RecentFilesSkeleton';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+  `,
+  fadeEdge: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0 0;
+    inset-inline-end: 0;
+
+    width: 80px;
+
+    background: linear-gradient(to left, ${token.colorBgContainerSecondary}, transparent);
+  `,
+  scrollContainer: css`
+    scroll-behavior: smooth;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+
+    overflow: auto hidden;
+    display: flex;
+    gap: 16px;
+
+    padding-block-end: 8px;
+    padding-inline-end: 80px;
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `,
+}));
+
+interface RecentFilesProps {
+  files: FileListItem[];
+  isLoading?: boolean;
+  onOpenFile: (id: string) => void;
+}
+
+const RecentFiles = memo<RecentFilesProps>(({ files, isLoading, onOpenFile }) => {
+  const { styles } = useStyles();
+
+  if (isLoading) {
+    return <RecentFilesSkeleton />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.scrollContainer}>
+        {files.map((file) => (
+          <RecentFileCard file={file} key={file.id} onClick={() => onOpenFile(file.id)} />
+        ))}
+      </div>
+      <div className={styles.fadeEdge} />
+    </div>
+  );
+});
+
+export default RecentFiles;

package/src/features/KnowledgeManager/Home/RecentFilesSkeleton.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    flex-shrink: 0;
+
+    width: 280px;
+    padding: 12px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorBgContainer};
+  `,
+  container: css`
+    position: relative;
+    overflow: hidden;
+  `,
+  fadeEdge: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0 0;
+    inset-inline-end: 0;
+
+    width: 80px;
+
+    background: linear-gradient(to left, ${token.colorBgLayout}, transparent);
+  `,
+  previewSkeleton: css`
+    width: 100%;
+    height: 160px;
+    margin-block-end: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    background: ${token.colorFillQuaternary};
+  `,
+  scrollContainer: css`
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+
+    overflow-x: auto;
+    display: flex;
+    gap: 16px;
+
+    padding-block-end: 8px;
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `,
+}));
+
+const RecentFilesSkeleton = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.scrollContainer}>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <Flexbox className={styles.card} gap={12} key={index}>
+            <div className={styles.previewSkeleton} />
+            <Flexbox gap={6}>
+              <Skeleton active paragraph={false} title={{ width: '90%' }} />
+              <Skeleton active paragraph={false} title={{ style: { height: 12 }, width: '70%' }} />
+            </Flexbox>
+          </Flexbox>
+        ))}
+      </div>
+      <div className={styles.fadeEdge} />
+    </div>
+  );
+});
+
+export default RecentFilesSkeleton;
+

package/src/features/KnowledgeManager/Home/UploadEntries.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { FileTypeIcon, Icon } from '@lobehub/ui';
+import { Upload } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { ArrowUpIcon, FolderUp, PlusIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
+
+import { useFileStore } from '@/store/file';
+
+const ICON_SIZE = 64;
+
+const useStyles = createStyles(({ css, token }) => ({
+  actionTitle: css`
+    margin-block-start: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: ${token.colorTextSecondary};
+  `,
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 200px;
+    min-height: 120px;
+    padding: 16px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    font-weight: 500;
+    text-align: center;
+
+    background: ${token.colorBgContainer};
+
+    transition: all ${token.motionDurationMid} ${token.motionEaseInOut};
+
+    &:hover {
+      border-color: ${token.colorPrimary};
+      box-shadow: ${token.boxShadowTertiary};
+    }
+  `,
+  glow: css`
+    position: absolute;
+    inset-block-end: -12px;
+    inset-inline-end: 0;
+
+    width: 48px;
+    height: 48px;
+
+    opacity: 0.3;
+    filter: blur(24px);
+  `,
+  grid: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    justify-content: left;
+  `,
+  icon: css`
+    position: absolute;
+    z-index: 1;
+    inset-block-end: -16px;
+    inset-inline-end: 8px;
+
+    flex: none;
+  `,
+  uploadWrapper: css`
+    /* Make the wrapper transparent so hover passes through to the card */
+    & > span {
+      display: block;
+    }
+  `,
+}));
+
+interface UploadEntriesProps {
+  knowledgeBaseId?: string;
+}
+
+const UploadEntries = memo<UploadEntriesProps>(({ knowledgeBaseId }) => {
+  const { t } = useTranslation('file');
+  const theme = useTheme();
+  const { styles } = useStyles();
+  const navigate = useNavigate();
+
+  const createDocument = useFileStore((s) => s.createDocument);
+  const pushDockFileList = useFileStore((s) => s.pushDockFileList);
+  // const { open } = useCreateNewModal();
+
+  const handleCreateNote = async () => {
+    try {
+      const newDoc = await createDocument({
+        content: '',
+        knowledgeBaseId,
+        title: t('home.uploadEntries.newDocument.title'),
+      });
+      // Navigate to the newly created document
+      // The KnowledgeHomePage will automatically set category to 'documents' when it detects the id param
+      navigate(`/${newDoc.id}`);
+    } catch (error) {
+      console.error('Failed to create document:', error);
+    }
+  };
+
+  // const handleCreateKnowledgeBase = () => {
+  //   open({
+  //     onSuccess: (id) => {
+  //       navigate(`/bases/${id}`);
+  //     },
+  //   });
+  // };
+
+  const handleUploadFiles = async (file: File) => {
+    try {
+      await pushDockFileList([file], knowledgeBaseId);
+    } catch (error) {
+      console.error('Failed to upload file:', error);
+    }
+    return false;
+  };
+
+  const handleUploadFolder = async (file: File) => {
+    try {
+      await pushDockFileList([file], knowledgeBaseId);
+    } catch (error) {
+      console.error('Failed to upload folder:', error);
+    }
+    return false;
+  };
+
+  return (
+    <div className={styles.grid}>
+      {/* Create New Note */}
+      <Flexbox className={styles.card} onClick={handleCreateNote} padding={16}>
+        <span className={styles.actionTitle}>{t('home.uploadEntries.newDocument.title')}</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={'file'}
+        />
+      </Flexbox>
+
+      {/* Create Knowledge Base */}
+      {/* <Flexbox className={styles.card} onClick={handleCreateKnowledgeBase} padding={16}>
+        <span className={styles.actionTitle}>{t('home.uploadEntries.knowledgeBase.title')}</span>
+        <div className={styles.glow} style={{ background: theme.colorPrimary }} />
+        <FileTypeIcon
+          className={styles.icon}
+          color={theme.colorPrimary}
+          icon={<Icon color={'#fff'} icon={LibraryBig} />}
+          size={ICON_SIZE}
+          type={'file'}
+        />
+      </Flexbox> */}
+
+      {/* Upload Files */}
+      <Upload
+        beforeUpload={handleUploadFiles}
+        className={styles.uploadWrapper}
+        multiple
+        showUploadList={false}
+      >
+        <Flexbox className={styles.card} padding={16}>
+          <span className={styles.actionTitle}>{t('home.uploadEntries.files.title')}</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={'file'}
+          />
+        </Flexbox>
+      </Upload>
+
+      {/* Upload Folder */}
+      <Upload
+        beforeUpload={handleUploadFolder}
+        className={styles.uploadWrapper}
+        directory
+        multiple
+        showUploadList={false}
+      >
+        <Flexbox className={styles.card} padding={16}>
+          <span className={styles.actionTitle}>{t('home.uploadEntries.folder.title')}</span>
+          <div className={styles.glow} style={{ background: theme.green }} />
+          <FileTypeIcon
+            className={styles.icon}
+            color={theme.green}
+            icon={<Icon color={'#fff'} icon={FolderUp} />}
+            size={ICON_SIZE}
+            type={'file'}
+          />
+        </Flexbox>
+      </Upload>
+    </div>
+  );
+});
+
+export default UploadEntries;

package/src/features/KnowledgeManager/Home/index.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { ActionIcon, Dropdown, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Clock, FileTextIcon, MoreHorizontal } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
+
+import { useFileCategory } from '@/app/[variants]/(main)/knowledge/hooks/useFileCategory';
+import { useFileStore } from '@/store/file';
+import { FilesTabs } from '@/types/files';
+
+import RecentDocuments from './RecentDocuments';
+import RecentFiles from './RecentFiles';
+import UploadEntries from './UploadEntries';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding-block: 20px 48px;
+    padding-inline: 24px;
+  `,
+  content: css`
+    width: 100%;
+    max-width: 1200px;
+    margin-block: 0;
+    margin-inline: auto;
+  `,
+  greeting: css`
+    font-size: 24px;
+    font-weight: 600;
+    color: ${token.colorText};
+    text-align: start;
+  `,
+  section: css`
+    margin-block: 6px 36px;
+  `,
+  sectionActions: css`
+    transition: opacity ${token.motionDurationMid} ${token.motionEaseInOut};
+  `,
+  sectionTitle: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    margin-block-end: 24px;
+
+    font-size: 18px;
+    font-weight: 600;
+    color: ${token.colorTextSecondary};
+    text-align: start;
+  `,
+  sectionTitleWrapper: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    min-height: 36px;
+    margin-block-end: 24px;
+  `,
+}));
+
+interface HomeProps {
+  knowledgeBaseId?: string;
+  onOpenFile: (id: string) => void;
+}
+
+const Home = memo<HomeProps>(({ knowledgeBaseId, onOpenFile }) => {
+  const { t } = useTranslation('file');
+  const { styles } = useStyles();
+  const navigate = useNavigate();
+  const [, setActiveKey] = useFileCategory();
+  const [isDocumentsMenuOpen, setIsDocumentsMenuOpen] = useState(false);
+  const [isDocumentsSectionHovered, setIsDocumentsSectionHovered] = useState(false);
+  const [isFilesMenuOpen, setIsFilesMenuOpen] = useState(false);
+  const [isFilesSectionHovered, setIsFilesSectionHovered] = useState(false);
+
+  const useFetchKnowledgeItems = useFileStore((s) => s.useFetchKnowledgeItems);
+
+  // Fetch all items (all categories, sorted by updatedAt)
+  const { data: allItems, isLoading } = useFetchKnowledgeItems({
+    category: FilesTabs.All,
+    knowledgeBaseId,
+    sortType: 'desc',
+    sorter: 'createdAt',
+  });
+
+  // Get top 10 recent files (filter by sourceType === 'file')
+  const topRecentFiles = useMemo(() => {
+    if (!allItems) return [];
+    const files = allItems.filter((item) => item.sourceType === 'file');
+    return files.slice(0, 10);
+  }, [allItems]);
+
+  // Get top 10 recent documents (filter by sourceType === 'document')
+  const topRecentDocuments = useMemo(() => {
+    if (!allItems) return [];
+    const documents = allItems.filter((item) => item.sourceType === 'document');
+    return documents.slice(0, 10);
+  }, [allItems]);
+
+  // Handle document click - navigate to document explorer
+  const handleDocumentClick = (documentId: string) => {
+    // Navigate to the document in the explorer
+    // The KnowledgeHomePage will automatically set category to 'documents' when it detects the id param
+    navigate(`/${documentId}`);
+  };
+
+  return (
+    <div className={styles.container}>
+      <Flexbox className={styles.content}>
+        {/* Greeting Section */}
+        <Flexbox className={styles.section}>
+          <Text className={styles.greeting}>{t('home.greeting')}</Text>
+        </Flexbox>
+
+        {/* Upload Entries Section */}
+        <Flexbox className={styles.section}>
+          <UploadEntries knowledgeBaseId={knowledgeBaseId} />
+        </Flexbox>
+
+        {/* Recent Files Section */}
+        {(isLoading || topRecentFiles.length > 0) && (
+          <div
+            className={styles.section}
+            onMouseEnter={() => {
+              setIsFilesSectionHovered(true);
+            }}
+            onMouseLeave={() => {
+              setIsFilesSectionHovered(false);
+            }}
+          >
+            <div className={styles.sectionTitleWrapper}>
+              <Text className={styles.sectionTitle} style={{ marginBottom: 0 }}>
+                <Clock size={18} />
+                {t('home.recentFiles')}
+              </Text>
+              <div
+                className={styles.sectionActions}
+                style={{
+                  opacity: isFilesSectionHovered || isFilesMenuOpen ? 1 : 0,
+                }}
+              >
+                <Dropdown
+                  menu={{
+                    items: [
+                      {
+                        key: 'all-files',
+                        label: t('menu.allFiles'),
+                        onClick: () => {
+                          setActiveKey(FilesTabs.All);
+                        },
+                      },
+                    ],
+                  }}
+                  onOpenChange={setIsFilesMenuOpen}
+                  open={isFilesMenuOpen}
+                >
+                  <ActionIcon icon={MoreHorizontal} size="small" />
+                </Dropdown>
+              </div>
+            </div>
+            <RecentFiles files={topRecentFiles} isLoading={isLoading} onOpenFile={onOpenFile} />
+          </div>
+        )}
+
+        {/* Recent Documents Section */}
+        {(isLoading || topRecentDocuments.length > 0) && (
+          <div
+            className={styles.section}
+            onMouseEnter={() => {
+              setIsDocumentsSectionHovered(true);
+            }}
+            onMouseLeave={() => {
+              setIsDocumentsSectionHovered(false);
+            }}
+          >
+            <div className={styles.sectionTitleWrapper}>
+              <Text className={styles.sectionTitle} style={{ marginBottom: 0 }}>
+                <FileTextIcon size={18} />
+                {t('home.recentDocuments')}
+              </Text>
+              <div
+                className={styles.sectionActions}
+                style={{
+                  opacity: isDocumentsSectionHovered || isDocumentsMenuOpen ? 1 : 0,
+                }}
+              >
+                <Dropdown
+                  menu={{
+                    items: [
+                      {
+                        key: 'all-documents',
+                        label: t('menu.allDocuments'),
+                        onClick: () => {
+                          setActiveKey(FilesTabs.Documents);
+                        },
+                      },
+                    ],
+                  }}
+                  onOpenChange={setIsDocumentsMenuOpen}
+                  open={isDocumentsMenuOpen}
+                >
+                  <ActionIcon icon={MoreHorizontal} size="small" />
+                </Dropdown>
+              </div>
+            </div>
+            <RecentDocuments
+              documents={topRecentDocuments}
+              isLoading={isLoading}
+              onOpenDocument={handleDocumentClick}
+            />
+          </div>
+        )}
+      </Flexbox>
+    </div>
+  );
+});
+
+export default Home;

package/src/features/KnowledgeManager/index.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { Text } from '@lobehub/ui';
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { FilesTabs } from '@/types/files';
+
+import DocumentExplorer from './DocumentExplorer';
+import FileExplorer from './FileExplorer';
+import Header from './Header';
+import Home from './Home';
+import UploadDock from './UploadDock';
+
+const ChunkDrawer = dynamic(() => import('./ChunkDrawer'), { ssr: false });
+
+interface KnowledgeManagerProps {
+  category?: string;
+  // Directly open a document if provided
+  documentId?: string;
+  knowledgeBaseId?: string;
+  onOpenFile: (id: string) => void;
+  title: string;
+}
+
+/**
+ * Manage knowledge items. Can be all items or certian knowledge base.
+ *
+ * DocumentExplorer: For the "documents" category.
+ * Home: For the "home" category.
+ * FileExplorer: For other categories.
+ */
+const KnowledgeManager = memo<KnowledgeManagerProps>(
+  ({ title, knowledgeBaseId, category, onOpenFile, documentId }) => {
+    const isDocumentsView = category === FilesTabs.Pages;
+    const isHomeView = category === FilesTabs.Home;
+
+    if (isHomeView) {
+      return (
+        <>
+          <Home knowledgeBaseId={knowledgeBaseId} onOpenFile={onOpenFile} />
+          <UploadDock />
+          <ChunkDrawer />
+        </>
+      );
+    }
+
+    return (
+      <>
+        {!isDocumentsView && <Header knowledgeBaseId={knowledgeBaseId} />}
+        <Flexbox gap={12} height={'100%'}>
+          {!isDocumentsView && (
+            <Text strong style={{ fontSize: 16, marginBlock: 16, marginInline: 24 }}>
+              {title}
+            </Text>
+          )}
+          {isDocumentsView ? (
+            <DocumentExplorer documentId={documentId} knowledgeBaseId={knowledgeBaseId} />
+          ) : (
+            <FileExplorer
+              category={category}
+              knowledgeBaseId={knowledgeBaseId}
+              onOpenFile={onOpenFile}
+            />
+          )}
+        </Flexbox>
+        <UploadDock />
+        <ChunkDrawer />
+      </>
+    );
+  },
+);
+
+export default KnowledgeManager;

package/src/features/Portal/FilePreview/Body/index.tsx

@@ -18,7 +18,7 @@ enum FilePreviewTab {
 const FilePreview = () => {
   const previewFileId = useChatStore(chatPortalSelectors.previewFileId);
   const chunkText = useChatStore(chatPortalSelectors.chunkText);
-  const useFetchFileItem = useFileStore((s) => s.useFetchFileItem);
+  const useFetchFileItem = useFileStore((s) => s.useFetchKnowledgeItem);
   const { t } = useTranslation('portal');
 
   const [tab, setTab] = useState<FilePreviewTab>(FilePreviewTab.File);

package/src/features/Portal/FilePreview/Header.tsx

@@ -14,7 +14,7 @@ const Header = () => {
     chatPortalSelectors.previewFileId(s),
   ]);
 
-  const useFetchFileItem = useFileStore((s) => s.useFetchFileItem);
+  const useFetchFileItem = useFileStore((s) => s.useFetchKnowledgeItem);
 
   const { data, isLoading } = useFetchFileItem(previewFileId);
 

package/src/locales/default/common.ts

@@ -289,6 +289,7 @@ export default {
   oauth: 'SSO 登录',
   officialSite: '官方网站',
   ok: '确定',
+  or: '或',
   password: '密码',
   pin: '置顶',
   pinOff: '取消置顶',