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

package/packages/types/src/document/index.ts

@@ -11,6 +11,8 @@ export interface LobeDocument {
    */
   createdAt: Date;
 
+  editorData: Record<string, any> | null;
+
   /**
    * File type or extension
    */
@@ -54,7 +56,12 @@ export interface LobeDocument {
   source: string;
 
   /**
-   * Document title (if available)
+   * 文档来源类型
+   */
+  sourceType: DocumentSourceType;
+
+  /**
+   * 文档标题 (如果可用)。
    */
   title?: string;
 
@@ -161,7 +168,12 @@ export enum DocumentSourceType {
   API = 'api',
 
   /**
-   * Local or uploaded files
+   * 编辑器创建的文档
+   */
+  EDITOR = 'editor',
+
+  /**
+   * 本地或上传的文件
    */
   FILE = 'file',
 

package/packages/types/src/files/index.ts

@@ -2,7 +2,9 @@ export enum FilesTabs {
   All = 'all',
   Audios = 'audios',
   Documents = 'documents',
+  Home = 'home',
   Images = 'images',
+  Pages = 'pages',
   Videos = 'videos',
   Websites = 'websites',
 }

package/packages/types/src/files/list.ts

@@ -6,14 +6,24 @@ export interface FileListItem {
   chunkCount: number | null;
   chunkingError: any | null;
   chunkingStatus?: AsyncTaskStatus | null;
+  /**
+   * Text content of the document (for notes/documents)
+   */
+  content?: string | null;
   createdAt: Date;
+  editorData?: Record<string, any> | null;
   embeddingError: any | null;
   embeddingStatus?: AsyncTaskStatus | null;
   fileType: string;
   finishEmbedding: boolean;
   id: string;
+  /**
+   * Metadata (for notes/documents)
+   */
+  metadata?: Record<string, any> | null;
   name: string;
   size: number;
+  sourceType: string;
   updatedAt: Date;
   url: string;
 }

package/packages/types/src/llm.ts

@@ -1,4 +1,4 @@
-import { ModelParamsSchema , AiModelType, Pricing } from 'model-bank';
+import { AiModelType, ModelParamsSchema, Pricing } from 'model-bank';
 import { ReactNode } from 'react';
 
 import { AiProviderSettings } from './aiProvider';

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ModelSelect/ImageModelItem.tsx

@@ -0,0 +1,93 @@
+import { ModelIcon } from '@lobehub/icons';
+import { Text } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { createStyles } from 'antd-style';
+import { AiModelForSelect } from 'model-bank';
+import numeral from 'numeral';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const POPOVER_MAX_WIDTH = 320;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  descriptionText: css`
+    color: ${isDarkMode ? token.colorText : token.colorTextSecondary};
+  `,
+  popover: css`
+    .ant-popover-inner {
+      background: ${isDarkMode ? token.colorBgSpotlight : token.colorBgElevated};
+    }
+  `,
+  priceText: css`
+    font-weight: 500;
+    color: ${isDarkMode ? token.colorTextLightSolid : token.colorTextTertiary};
+  `,
+}));
+
+type ImageModelItemProps = AiModelForSelect & {
+  /**
+   * Whether to show popover on hover
+   * @default true
+   */
+  showPopover?: boolean;
+};
+
+const ImageModelItem = memo<ImageModelItemProps>(
+  ({ approximatePricePerImage, description, pricePerImage, showPopover = true, ...model }) => {
+    const { styles } = useStyles();
+
+    const priceLabel = useMemo(() => {
+      // Priority 1: Use exact price
+      if (typeof pricePerImage === 'number') {
+        return `${numeral(pricePerImage).format('$0,0.00[000]')} / image`;
+      }
+
+      // Priority 2: Use approximate price with prefix
+      if (typeof approximatePricePerImage === 'number') {
+        return `~ ${numeral(approximatePricePerImage).format('$0,0.00[000]')} / image`;
+      }
+
+      return undefined;
+    }, [approximatePricePerImage, pricePerImage]);
+
+    const popoverContent = useMemo(() => {
+      if (!description && !priceLabel) return null;
+
+      return (
+        <Flexbox gap={8} style={{ maxWidth: POPOVER_MAX_WIDTH }}>
+          {description && <Text className={styles.descriptionText}>{description}</Text>}
+          {priceLabel && <Text className={styles.priceText}>{priceLabel}</Text>}
+        </Flexbox>
+      );
+    }, [description, priceLabel, styles.descriptionText, styles.priceText]);
+
+    const content = (
+      <Flexbox align={'center'} gap={8} horizontal style={{ overflow: 'hidden' }}>
+        <ModelIcon model={model.id} size={20} />
+        <Text ellipsis title={model.displayName || model.id}>
+          {model.displayName || model.id}
+        </Text>
+      </Flexbox>
+    );
+
+    if (!showPopover || !popoverContent) return content;
+
+    return (
+      <Popover
+        align={{
+          offset: [24, -10],
+        }}
+        arrow={false}
+        classNames={{ root: styles.popover }}
+        content={popoverContent}
+        placement="rightTop"
+      >
+        {content}
+      </Popover>
+    );
+  },
+);
+
+ImageModelItem.displayName = 'ImageModelItem';
+
+export default ImageModelItem;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/{ModelSelect.tsx → ModelSelect/index.tsx}

@@ -7,7 +7,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+import { ProviderItemRender } from '@/components/ModelSelect';
 import { isDeprecatedEdition } from '@/const/version';
 import { useAiInfraStore } from '@/store/aiInfra';
 import { aiProviderSelectors } from '@/store/aiInfra/slices/aiProvider/selectors';
@@ -16,6 +16,8 @@ import { imageGenerationConfigSelectors } from '@/store/image/slices/generationC
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { EnabledProviderWithModels } from '@/types/aiProvider';
 
+import ImageModelItem from './ImageModelItem';
+
 const useStyles = createStyles(({ css, prefixCls }) => ({
   popup: css`
     &.${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped {
@@ -48,7 +50,7 @@ const ModelSelect = memo(() => {
   const options = useMemo<SelectProps['options']>(() => {
     const getImageModels = (provider: EnabledProviderWithModels) => {
       const modelOptions = provider.children.map((model) => ({
-        label: <ModelItemRender {...model} {...model.abilities} showInfoTag={false} />,
+        label: <ImageModelItem {...model} />,
         provider: provider.id,
         value: `${provider.id}/${model.id}`,
       }));
@@ -133,11 +135,24 @@ const ModelSelect = memo(() => {
     }));
   }, [enabledImageModelList, showLLM, t, theme.colorTextTertiary, router]);
 
+  const labelRender: SelectProps['labelRender'] = (props) => {
+    const modelInfo = enabledImageModelList
+      .flatMap((provider) =>
+        provider.children.map((model) => ({ ...model, providerId: provider.id })),
+      )
+      .find((model) => props.value === `${model.providerId}/${model.id}`);
+
+    if (!modelInfo) return props.label;
+
+    return <ImageModelItem {...modelInfo} showPopover={false} />;
+  };
+
   return (
     <Select
       classNames={{
         root: styles.popup,
       }}
+      labelRender={labelRender}
       onChange={(value, option) => {
         // Skip onChange for disabled options (empty states)
         if (value === 'no-provider' || value.includes('/empty')) return;

package/src/app/[variants]/(main)/knowledge/KnowledgeRouter.tsx

@@ -53,8 +53,9 @@ const KnowledgeRouter = memo(() => {
       <MemoryRouter initialEntries={[getInitialPath()]} initialIndex={0}>
         <UrlSynchronizer />
         <Routes>
-          {/* Knowledge home - file list page */}
+          {/* Knowledge home */}
           <Route element={<KnowledgeHomePage />} path="/" />
+          <Route element={<KnowledgeHomePage />} path="/:id" />
 
           {/* Knowledge bases routes */}
           <Route element={<KnowledgeBasesListPage />} path="/bases" />

package/src/app/[variants]/(main)/knowledge/components/KnowledgeBaseItem/index.tsx

@@ -16,8 +16,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   `,
   container: css`
     cursor: pointer;
-
-    margin-inline: 8px;
     padding-block: 4px;
     padding-inline: 8px;
     border-radius: ${token.borderRadius}px;

package/src/app/[variants]/(main)/knowledge/hooks/useFileCategory.ts

@@ -1,4 +1,4 @@
-import { useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 
 import { FilesTabs } from '@/types/files';
 
@@ -8,15 +8,18 @@ import { FilesTabs } from '@/types/files';
  */
 export const useFileCategory = (): [string, (value: string) => void] => {
   const [searchParams, setSearchParams] = useSearchParams();
+  const { id } = useParams<{ id: string }>();
 
-  const category = searchParams.get('category') ?? FilesTabs.All;
+  // If there's an ID in the path, default to Pages instead of Home
+  const defaultCategory = id ? FilesTabs.Pages : FilesTabs.Home;
+  const category = searchParams.get('category') ?? defaultCategory;
 
   const setCategory = (value: string) => {
     setSearchParams(
       (prev) => {
         const newParams = new URLSearchParams(prev);
 
-        if (value === FilesTabs.All) {
+        if (value === FilesTabs.Home) {
           // Clear on default
           newParams.delete('category');
         } else {

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeBaseDetail/index.tsx

@@ -6,8 +6,8 @@ import { useParams } from 'react-router-dom';
 
 import FileModalQueryRoute from '@/app/[variants]/(main)/knowledge/shared/FileModalQueryRoute';
 import { useSetFileModalId } from '@/app/[variants]/(main)/knowledge/shared/useFileQueryParam';
-import FileManager from '@/features/FileManager';
 import FilePanel from '@/features/FileSidePanel';
+import KnowledgeItemManager from '@/features/KnowledgeManager';
 import { knowledgeBaseSelectors, useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
 import { useKnowledgeBaseItem } from '../../hooks/useKnowledgeItem';
@@ -35,7 +35,7 @@ const KnowledgeBaseDetailPage = memo(() => {
         <Menu id={id} />
       </FilePanel>
       <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
-        <FileManager knowledgeBaseId={id} onOpenFile={setFileModalId} title={name} />
+        <KnowledgeItemManager knowledgeBaseId={id} onOpenFile={setFileModalId} title={name} />
       </Flexbox>
       <FileModalQueryRoute />
     </>

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeBaseDetail/menu/{MenuItems.tsx → CategoryMenu.tsx}

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import Menu from '@/components/Menu';
 import type { MenuProps } from '@/components/Menu';
 
-const MenuItems = () => {
+const CategoryMenu = () => {
   const { t } = useTranslation('knowledgeBase');
 
   const items: MenuProps['items'] = useMemo(
@@ -30,6 +30,6 @@ const MenuItems = () => {
   );
 };
 
-MenuItems.displayName = 'MenuItems';
+CategoryMenu.displayName = 'MenuItems';
 
-export default MenuItems;
+export default CategoryMenu;

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeBaseDetail/menu/Menu.tsx

@@ -3,14 +3,14 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import CategoryMenu from './CategoryMenu';
 import Head from './Head';
-import MenuItems from './MenuItems';
 
 const Menu = memo<{ id: string }>(({ id }) => {
   return (
     <Flexbox gap={16} height={'100%'} paddingInline={12} style={{ paddingTop: 12 }}>
       <Head id={id} />
-      <MenuItems />
+      <CategoryMenu />
     </Flexbox>
   );
 });

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

@@ -5,11 +5,13 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { useMediaQuery } from 'react-responsive';
+import { useParams } from 'react-router-dom';
 
 import NProgress from '@/components/NProgress';
 import PanelTitle from '@/components/PanelTitle';
-import FileManager from '@/features/FileManager';
 import FilePanel from '@/features/FileSidePanel';
+import KnowledgeItemManager from '@/features/KnowledgeManager';
+import TogglePanelButton from '@/features/KnowledgeManager/Header/TogglePanelButton';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { FilesTabs } from '@/types/files';
 
@@ -18,8 +20,8 @@ import FileModalQueryRoute from '../../shared/FileModalQueryRoute';
 import { useSetFileModalId } from '../../shared/useFileQueryParam';
 import Container from './layout/Container';
 import RegisterHotkeys from './layout/RegisterHotkeys';
-import FileMenu from './menu/FileMenu';
-import KnowledgeBase from './menu/KnowledgeBase';
+import CategoryMenu from './menu/CategoryMenu';
+import Collection from './menu/KnowledgeBase';
 
 const useStyles = createStyles(({ css, token }) => ({
   main: css`
@@ -27,42 +29,63 @@ const useStyles = createStyles(({ css, token }) => ({
     overflow: hidden;
     background: ${token.colorBgLayout};
   `,
+  sidebar: css`
+    position: relative;
+
+    &:hover .toggle-button {
+      opacity: 1;
+    }
+  `,
+  toggleButton: css`
+    position: absolute;
+    z-index: 10;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+
+    opacity: 0;
+
+    transition: opacity ${token.motionDurationSlow};
+  `,
 }));
 
-// Menu content component
-const MenuContent = memo(() => {
+const Sidebar = memo(() => {
   const { t } = useTranslation('file');
+  const { styles } = useStyles();
 
   return (
-    <Flexbox gap={16} height={'100%'}>
+    <Flexbox className={styles.sidebar} gap={16} height={'100%'}>
+      <div className={`${styles.toggleButton} toggle-button`}>
+        <TogglePanelButton />
+      </div>
       <Flexbox paddingInline={8}>
         <PanelTitle desc={t('desc')} title={t('title')} />
-        <FileMenu />
+        <CategoryMenu />
       </Flexbox>
-      <KnowledgeBase />
+      <Collection />
     </Flexbox>
   );
 });
 
-MenuContent.displayName = 'MenuContent';
+Sidebar.displayName = 'Sidebar';
 
 // Main files list component
-const FilesListPage = memo(() => {
+const MainContent = memo(() => {
+  const { id } = useParams<{ id: string }>();
   const [category] = useFileCategory();
   const setFileModalId = useSetFileModalId();
 
   return (
-    <FileManager
+    <KnowledgeItemManager
       category={category}
+      documentId={id}
       onOpenFile={setFileModalId}
       title={`${category as FilesTabs}`}
     />
   );
 });
 
-FilesListPage.displayName = 'FilesListPage';
+MainContent.displayName = 'FilesListPage';
 
-// Desktop layout
 const DesktopLayout = memo(() => {
   return (
     <>
@@ -74,10 +97,10 @@ const DesktopLayout = memo(() => {
         width={'100%'}
       >
         <FilePanel>
-          <MenuContent />
+          <Sidebar />
         </FilePanel>
         <Container>
-          <FilesListPage />
+          <MainContent />
         </Container>
       </Flexbox>
       <RegisterHotkeys />
@@ -88,7 +111,6 @@ const DesktopLayout = memo(() => {
 
 DesktopLayout.displayName = 'DesktopLayout';
 
-// Mobile layout
 const MobileLayout = memo(() => {
   const showMobileWorkspace = useShowMobileWorkspace();
   const { styles } = useStyles();
@@ -102,7 +124,7 @@ const MobileLayout = memo(() => {
         style={showMobileWorkspace ? { display: 'none' } : undefined}
         width="100%"
       >
-        <MenuContent />
+        <Sidebar />
       </Flexbox>
       <Flexbox
         className={styles.main}
@@ -110,7 +132,7 @@ const MobileLayout = memo(() => {
         style={showMobileWorkspace ? undefined : { display: 'none' }}
         width="100%"
       >
-        <FilesListPage />
+        <MainContent />
       </Flexbox>
       <FileModalQueryRoute />
     </>

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeHome/layout/Container.tsx

@@ -12,7 +12,7 @@ const Container = memo<PropsWithChildren>(({ children }) => {
       flex={1}
       style={{
         background: theme.colorBgContainerSecondary,
-        overflow: 'hidden',
+        overflowY: 'auto',
         position: 'relative',
       }}
     >

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

@@ -0,0 +1,148 @@
+'use client';
+
+import { CaretDownFilled } from '@ant-design/icons';
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { motion } from 'framer-motion';
+import { FilePenIcon, FileText, FolderOpen, ImageIcon, Mic2, SquarePlay } 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 Menu from '@/components/Menu';
+import type { MenuProps } from '@/components/Menu';
+import { FilesTabs } from '@/types/files';
+
+import { useFileCategory } from '../../../hooks/useFileCategory';
+
+const useStyles = createStyles(({ css, token }) => ({
+  header: css`
+    cursor: pointer;
+    border-radius: ${token.borderRadius}px;
+    color: ${token.colorTextSecondary};
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: ${token.colorFillTertiary};
+    }
+  `,
+  headerActive: css`
+    color: ${token.colorText};
+    background-color: ${token.colorFillSecondary};
+  `,
+  indentedMenu: css`
+    padding-inline-start: 24px;
+  `,
+}));
+
+const CategoryMenu = memo(() => {
+  const { t } = useTranslation('file');
+  const { styles, cx } = useStyles();
+  const [activeKey] = useFileCategory();
+  const [showCollapsed, setShowCollapsed] = useState(activeKey !== FilesTabs.Home);
+  const navigate = useNavigate();
+
+  const collapsedItems: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={FolderOpen} />,
+        key: FilesTabs.All,
+        label: t('tab.all'),
+      },
+      {
+        icon: <Icon icon={FileText} />,
+        key: FilesTabs.Documents,
+        label: t('tab.documents'),
+      },
+      {
+        icon: <Icon icon={FilePenIcon} />,
+        key: FilesTabs.Pages,
+        label: t('tab.pages'),
+      },
+      {
+        icon: <Icon icon={ImageIcon} />,
+        key: FilesTabs.Images,
+        label: t('tab.images'),
+      },
+      {
+        icon: <Icon icon={Mic2} />,
+        key: FilesTabs.Audios,
+        label: t('tab.audios'),
+      },
+      {
+        icon: <Icon icon={SquarePlay} />,
+        key: FilesTabs.Videos,
+        label: t('tab.videos'),
+      },
+      // {
+      //   icon: <Icon icon={Globe} />,
+      //   key: FilesTabs.Websites,
+      //   label: t('tab.websites'),
+      // },
+    ],
+    [t],
+  );
+
+  const isHomeActive = activeKey === FilesTabs.Home;
+
+  return (
+    <Flexbox gap={4}>
+      <Flexbox
+        align={'center'}
+        className={cx(styles.header, isHomeActive && styles.headerActive)}
+        horizontal
+        onClick={() => {
+          navigate('/', { replace: true });
+        }}
+        paddingBlock={6}
+        paddingInline={8}
+      >
+        <Flexbox align={'center'} flex={1} gap={8} horizontal>
+          <motion.div
+            animate={{ rotate: showCollapsed ? 0 : -90 }}
+            transition={{ duration: 0.2, ease: 'easeInOut' }}
+          >
+            <ActionIcon
+              icon={CaretDownFilled as any}
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowCollapsed(!showCollapsed);
+              }}
+              size={'small'}
+            />
+          </motion.div>
+          <div style={{ flex: 1, lineHeight: '14px' }}>{t('tab.home')}</div>
+        </Flexbox>
+      </Flexbox>
+
+      <motion.div
+        animate={{
+          height: showCollapsed ? 'auto' : 0,
+          opacity: showCollapsed ? 1 : 0,
+        }}
+        initial={false}
+        style={{ overflow: 'hidden' }}
+        transition={{ duration: 0.2, ease: 'easeInOut' }}
+      >
+        <Flexbox>
+          <Menu
+            compact
+            items={collapsedItems}
+            onClick={({ key }) => {
+              // Navigate to home route and set category
+              const categoryParam = key === FilesTabs.Home ? '' : `?category=${key}`;
+              navigate(`/${categoryParam}`, { replace: true });
+            }}
+            selectable
+            selectedKeys={[activeKey]}
+          />
+        </Flexbox>
+      </motion.div>
+    </Flexbox>
+  );
+});
+
+CategoryMenu.displayName = 'CategoryMenu';
+
+export default CategoryMenu;