@lobehub/lobehub 2.0.0-next.324 → 2.0.0-next.326

package/src/features/ChatInput/ActionBar/Knowledge/useControls.tsx

@@ -33,28 +33,6 @@ export const useControls = ({
   ]);
 
   const items: ItemType[] = [
-    // {
-    //   children: [
-    //     {
-    //       icon: <RepoIcon />,
-    //       key: 'allFiles',
-    //       label: <KnowledgeBaseItem id={'all'} label={t('knowledgeBase.allFiles')} />,
-    //     },
-    //     {
-    //       icon: <RepoIcon />,
-    //       key: 'allRepos',
-    //       label: <KnowledgeBaseItem id={'all'} label={t('knowledgeBase.allLibraries')} />,
-    //     },
-    //   ],
-    //   key: 'all',
-    //   label: (
-    //     <Flexbox horizontal justify={'space-between'}>
-    //       {t('knowledgeBase.all')}
-    //       {/*<Link href={'/files'}>{t('knowledgeBase.more')}</Link>*/}
-    //     </Flexbox>
-    //   ),
-    //   type: 'group',
-    // },
     {
       children: [
         // first the files

package/src/features/ChatInput/store/action.ts

@@ -15,8 +15,6 @@ export interface Action {
 
 export type Store = Action & State;
 
-// const t = setNamespace('ChatInput');
-
 type CreateStore = (
   initState?: Partial<PublicState>,
 ) => StateCreator<Store, [['zustand/devtools', never]]>;

package/src/features/Conversation/Messages/Task/TaskDetailPanel/index.tsx

@@ -17,21 +17,7 @@ interface TaskDetailPanelProps {
 }
 
 const TaskDetailPanel = memo<TaskDetailPanelProps>(({ taskDetail, content, messageId }) => {
-  return (
-    <>
-      {/* Instruction Header */}
-      {/*{instruction && (*/}
-      {/*  <Block padding={12}>*/}
-      {/*    <Text fontSize={13} type={'secondary'}>*/}
-      {/*      {instruction}*/}
-      {/*    </Text>*/}
-      {/*  </Block>*/}
-      {/*)}*/}
-
-      {/* Status Content */}
-      <StatusContent content={content} messageId={messageId} taskDetail={taskDetail} />
-    </>
-  );
+  return <StatusContent content={content} messageId={messageId} taskDetail={taskDetail} />;
 });
 
 TaskDetailPanel.displayName = 'TaskDetailPanel';

package/src/features/DataImporter/ImportDetail.tsx

@@ -170,26 +170,6 @@ const ImportPreviewModal = ({
               size="small"
             />
           </div>
-
-          {/*<Flexbox>*/}
-          {/*  重复数据处理方式：*/}
-          {/*  <div className={styles.duplicateOptions}>*/}
-          {/*    <Radio.Group*/}
-          {/*      onChange={(e) => setDuplicateAction(e.target.value)}*/}
-          {/*      value={duplicateAction}*/}
-          {/*    >*/}
-          {/*      <Space>*/}
-          {/*        <Radio value="skip">跳过</Radio>*/}
-          {/*        <Radio value="overwrite">覆盖</Radio>*/}
-          {/*      </Space>*/}
-          {/*    </Radio.Group>*/}
-          {/*  </div>*/}
-          {/*  <div className={styles.duplicateDescription}>*/}
-          {/*    {duplicateAction === 'skip'*/}
-          {/*      ? '选择跳过将仅导入不重复的数据，保留现有数据不变。'*/}
-          {/*      : '选择覆盖将使用导入数据替换系统中具有相同 ID 的现有记录。'}*/}
-          {/*  </div>*/}
-          {/*</Flexbox>*/}
         </Flexbox>
       </div>
     </Modal>

package/src/features/DevPanel/features/Table/TableCell.tsx

@@ -2,27 +2,6 @@ import dayjs from 'dayjs';
 import { get, isDate } from 'es-toolkit/compat';
 import React, { useMemo } from 'react';
 
-// import TooltipContent from './TooltipContent';
-
-// const { Text } = Typography;
-
-// const useStyles = createStyles(({ token, css }) => ({
-//   cell: css`
-//     font-family: ${token.fontFamilyCode};
-//     font-size: ${token.fontSizeSM}px;
-//   `,
-//   tooltip: css`
-//     border: 1px solid ${token.colorBorder};
-//
-//     font-family: ${token.fontFamilyCode};
-//     font-size: ${token.fontSizeSM}px;
-//     color: ${token.colorText} !important;
-//     word-break: break-all;
-//
-//     background: ${token.colorBgElevated} !important;
-//   `,
-// }));
-
 interface TableCellProps {
   column: string;
   dataItem: any;
@@ -30,7 +9,6 @@ interface TableCellProps {
 }
 
 const TableCell = ({ dataItem, column, rowIndex }: TableCellProps) => {
-  // const { styles } = useStyles();
   const data = get(dataItem, column);
   const content = useMemo(() => {
     if (isDate(data)) return dayjs(data).format('YYYY-MM-DD HH:mm:ss');
@@ -52,21 +30,8 @@ const TableCell = ({ dataItem, column, rowIndex }: TableCellProps) => {
 
   return (
     <td key={column} onDoubleClick={() => console.log('Edit cell:', rowIndex, column)}>
-      {content}
-
       {/* 不能使用 antd 的 Text， 会有大量的重渲染导致滚动极其卡顿 */}
-      {/*<Text*/}
-      {/*  className={styles.cell}*/}
-      {/*  ellipsis={{*/}
-      {/*    tooltip: {*/}
-      {/*      arrow: false,*/}
-      {/*      classNames: { body: styles.tooltip },*/}
-      {/*      title: <TooltipContent>{content}</TooltipContent>,*/}
-      {/*    },*/}
-      {/*  }}*/}
-      {/*>*/}
-      {/*  {content}*/}
-      {/*</Text>*/}
+      {content}
     </td>
   );
 };

package/src/features/DevPanel/index.tsx

@@ -15,15 +15,6 @@ const FloatPanel = dynamic(() => import('./features/FloatPanel'), {
 const DevPanel = () => (
   <FloatPanel
     items={[
-      // ...(isDesktop
-      //   ? [
-      //       {
-      //         children: <PostgresViewer />,
-      //         icon: <DatabaseIcon size={16} />,
-      //         key: 'Postgres Viewer',
-      //       },
-      //     ]
-      //   : []),
       {
         children: <MetadataViewer />,
         icon: <BookText size={16} />,

package/src/features/ModelSwitchPanel/__mocks__/mockEnabledChatModels.ts

@@ -0,0 +1,159 @@
+import type { AiModelForSelect } from 'model-bank';
+
+import type { EnabledProviderWithModels } from '@/types/aiProvider';
+
+/**
+ * Mock data for testing ModelSwitchPanel
+ *
+ * This data includes:
+ * - Multiple providers (OpenAI, Azure, Ollama)
+ * - Same model provided by multiple providers (gpt-4o -> model-item-multiple)
+ * - Single provider model (llama3 -> model-item-single)
+ */
+export const mockEnabledChatModels: EnabledProviderWithModels[] = [
+  {
+    children: [
+      {
+        abilities: {
+          functionCall: true,
+          reasoning: false,
+          vision: true,
+        },
+        contextWindowTokens: 128_000,
+        displayName: 'GPT-4o',
+        id: 'gpt-4o',
+        maxOutput: 16_384,
+        releasedAt: '2024-05-13',
+        type: 'chat',
+      } as AiModelForSelect,
+      {
+        abilities: {
+          functionCall: true,
+          reasoning: false,
+          vision: true,
+        },
+        contextWindowTokens: 128_000,
+        displayName: 'GPT-4o Mini',
+        id: 'gpt-4o-mini',
+        maxOutput: 16_384,
+        releasedAt: '2024-07-18',
+        type: 'chat',
+      } as AiModelForSelect,
+      {
+        abilities: {
+          functionCall: true,
+          reasoning: true,
+          vision: false,
+        },
+        contextWindowTokens: 200_000,
+        displayName: 'o1',
+        id: 'o1',
+        maxOutput: 100_000,
+        releasedAt: '2024-12-17',
+        type: 'chat',
+      } as AiModelForSelect,
+    ],
+    id: 'openai',
+    logo: 'https://registry.npmmirror.com/@lobehub/icons-static-png/1.45.0/files/dark/openai.png',
+    name: 'OpenAI',
+    source: 'builtin',
+  },
+  {
+    children: [
+      {
+        // Same displayName as OpenAI's gpt-4o -> will create model-item-multiple
+        abilities: {
+          functionCall: true,
+          reasoning: false,
+          vision: true,
+        },
+        contextWindowTokens: 128_000,
+        displayName: 'GPT-4o',
+        id: 'gpt-4o',
+        maxOutput: 16_384,
+        type: 'chat',
+      } as AiModelForSelect,
+      {
+        // Same displayName as OpenAI's gpt-4o-mini -> will create model-item-multiple
+        abilities: {
+          functionCall: true,
+          reasoning: false,
+          vision: true,
+        },
+        contextWindowTokens: 128_000,
+        displayName: 'GPT-4o Mini',
+        id: 'gpt-4o-mini',
+        maxOutput: 16_384,
+        type: 'chat',
+      } as AiModelForSelect,
+    ],
+    id: 'azure',
+    logo: 'https://registry.npmmirror.com/@lobehub/icons-static-png/1.45.0/files/dark/azure.png',
+    name: 'Azure OpenAI',
+    source: 'builtin',
+  },
+  {
+    children: [
+      {
+        // Unique model -> will create model-item-single
+        abilities: {
+          functionCall: true,
+          reasoning: false,
+          vision: false,
+        },
+        contextWindowTokens: 128_000,
+        displayName: 'Llama 3.3 70B',
+        id: 'llama3.3:70b',
+        maxOutput: 8192,
+        type: 'chat',
+      } as AiModelForSelect,
+      {
+        abilities: {
+          functionCall: false,
+          reasoning: false,
+          vision: true,
+        },
+        contextWindowTokens: 128_000,
+        displayName: 'Llava',
+        id: 'llava:latest',
+        maxOutput: 4096,
+        type: 'chat',
+      } as AiModelForSelect,
+    ],
+    id: 'ollama',
+    logo: 'https://registry.npmmirror.com/@lobehub/icons-static-png/1.45.0/files/dark/ollama.png',
+    name: 'Ollama',
+    source: 'builtin',
+  },
+  {
+    children: [
+      {
+        // Same as OpenAI's o1 -> will create model-item-multiple
+        abilities: {
+          functionCall: true,
+          reasoning: true,
+          vision: false,
+        },
+        contextWindowTokens: 200_000,
+        displayName: 'o1',
+        id: 'o1',
+        maxOutput: 100_000,
+        type: 'chat',
+      } as AiModelForSelect,
+    ],
+    id: 'openrouter',
+    logo: 'https://registry.npmmirror.com/@lobehub/icons-static-png/1.45.0/files/dark/openrouter.png',
+    name: 'OpenRouter',
+    source: 'builtin',
+  },
+];
+
+/**
+ * Expected result when groupMode = 'byModel':
+ *
+ * - GPT-4o (model-item-multiple) -> OpenAI, Azure
+ * - GPT-4o Mini (model-item-multiple) -> OpenAI, Azure
+ * - Llama 3.3 70B (model-item-single) -> Ollama
+ * - Llava (model-item-single) -> Ollama
+ * - o1 (model-item-multiple) -> OpenAI, OpenRouter
+ */

package/src/features/ModelSwitchPanel/components/List/{VirtualItemRenderer.tsx → ListItemRenderer.tsx}

@@ -9,21 +9,22 @@ import urlJoin from 'url-join';
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
 
 import { styles } from '../../styles';
-import type { VirtualItem } from '../../types';
+import type { ListItem } from '../../types';
 import { menuKey } from '../../utils';
 import { MultipleProvidersModelItem } from './MultipleProvidersModelItem';
 import { SingleProviderModelItem } from './SingleProviderModelItem';
 
-interface VirtualItemRendererProps {
+interface ListItemRendererProps {
   activeKey: string;
-  item: VirtualItem;
+  isScrolling: boolean;
+  item: ListItem;
   newLabel: string;
   onClose: () => void;
   onModelChange: (modelId: string, providerId: string) => Promise<void>;
 }
 
-export const VirtualItemRenderer = memo<VirtualItemRendererProps>(
-  ({ activeKey, item, newLabel, onModelChange, onClose }) => {
+export const ListItemRenderer = memo<ListItemRendererProps>(
+  ({ activeKey, isScrolling, item, newLabel, onModelChange, onClose }) => {
     const { t } = useTranslation('components');
     const navigate = useNavigate();
 
@@ -145,27 +146,16 @@ export const VirtualItemRenderer = memo<VirtualItemRendererProps>(
       }
 
       case 'model-item-multiple': {
-        // Check if any provider of this model is active
-        const activeProvider = item.data.providers.find(
-          (p) => menuKey(p.id, item.data.model.id) === activeKey,
-        );
-        const isActive = !!activeProvider;
-
         return (
-          <Block
-            className={styles.menuItem}
-            clickable
+          <MultipleProvidersModelItem
+            activeKey={activeKey}
+            data={item.data}
+            isScrolling={isScrolling}
             key={item.data.displayName}
-            variant={isActive ? 'filled' : 'borderless'}
-          >
-            <MultipleProvidersModelItem
-              activeKey={activeKey}
-              data={item.data}
-              newLabel={newLabel}
-              onClose={onClose}
-              onModelChange={onModelChange}
-            />
-          </Block>
+            newLabel={newLabel}
+            onClose={onClose}
+            onModelChange={onModelChange}
+          />
         );
       }
 
@@ -176,4 +166,4 @@ export const VirtualItemRenderer = memo<VirtualItemRendererProps>(
   },
 );
 
-VirtualItemRenderer.displayName = 'VirtualItemRenderer';
+ListItemRenderer.displayName = 'ListItemRenderer';

package/src/features/ModelSwitchPanel/components/List/MultipleProvidersModelItem.tsx

@@ -1,6 +1,21 @@
-import { ActionIcon, type DropdownItem, DropdownMenu } from '@lobehub/ui';
+import {
+  ActionIcon,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuItemExtra,
+  DropdownMenuItemIcon,
+  DropdownMenuItemLabel,
+  DropdownMenuPopup,
+  DropdownMenuPortal,
+  DropdownMenuPositioner,
+  DropdownMenuSubmenuRoot,
+  DropdownMenuSubmenuTrigger,
+  menuSharedStyles,
+} from '@lobehub/ui';
+import { cx } from 'antd-style';
 import { Check, LucideBolt } from 'lucide-react';
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import urlJoin from 'url-join';
@@ -14,85 +29,96 @@ import { menuKey } from '../../utils';
 interface MultipleProvidersModelItemProps {
   activeKey: string;
   data: ModelWithProviders;
+  isScrolling: boolean;
   newLabel: string;
   onClose: () => void;
   onModelChange: (modelId: string, providerId: string) => Promise<void>;
 }
 
 export const MultipleProvidersModelItem = memo<MultipleProvidersModelItemProps>(
-  ({ activeKey, data, newLabel, onModelChange, onClose }) => {
+  ({ activeKey, data, isScrolling, newLabel, onModelChange, onClose }) => {
     const { t } = useTranslation('components');
     const navigate = useNavigate();
+    const [submenuOpen, setSubmenuOpen] = useState(false);
 
-    const items = useMemo(
-      () =>
-        [
-          {
-            key: 'header',
-            label: t('ModelSwitchPanel.useModelFrom'),
-            type: 'group',
-          },
-          ...data.providers.map((p) => {
-            const key = menuKey(p.id, data.model.id);
+    useEffect(() => {
+      if (isScrolling) {
+        setSubmenuOpen(false);
+      }
+    }, [isScrolling]);
 
-            return {
-              extra: (
-                <ActionIcon
-                  className={'settings-icon'}
-                  icon={LucideBolt}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    const url = urlJoin('/settings/provider', p.id || 'all');
-                    if (e.ctrlKey || e.metaKey) {
-                      window.open(url, '_blank');
-                    } else {
-                      navigate(url);
-                    }
-                  }}
-                  size={'small'}
-                  title={t('ModelSwitchPanel.goToSettings')}
-                />
-              ),
-              icon: activeKey === key ? Check : undefined,
-              key,
-              label: (
-                <ProviderItemRender
-                  logo={p.logo}
-                  name={p.name}
-                  provider={p.id}
-                  size={20}
-                  source={p.source}
-                  type={'avatar'}
-                />
-              ),
-              onClick: async () => {
-                onModelChange(data.model.id, p.id);
-                onClose();
-              },
-            };
-          }),
-        ] as DropdownItem[],
-      [activeKey, data.model.id, data.providers, navigate, onModelChange, onClose, t],
-    );
+    const isActive = data.providers.some((p) => menuKey(p.id, data.model.id) === activeKey);
 
     return (
-      <DropdownMenu
-        items={items}
-        placement="rightTop"
-        popupProps={{ className: styles.dropdownMenu }}
-        positionerProps={{
-          alignOffset: -48,
-          sideOffset: 12,
-        }}
-      >
-        <ModelItemRender
-          {...data.model}
-          {...data.model.abilities}
-          newBadgeLabel={newLabel}
-          showInfoTag={true}
-        />
-      </DropdownMenu>
+      <DropdownMenuSubmenuRoot onOpenChange={setSubmenuOpen} open={submenuOpen}>
+        <DropdownMenuSubmenuTrigger
+          className={cx(menuSharedStyles.item, isActive && styles.menuItemActive)}
+        >
+          <ModelItemRender
+            {...data.model}
+            {...data.model.abilities}
+            newBadgeLabel={newLabel}
+            showInfoTag={true}
+          />
+        </DropdownMenuSubmenuTrigger>
+        <DropdownMenuPortal>
+          <DropdownMenuPositioner anchor={null} placement="rightTop" sideOffset={-4}>
+            <DropdownMenuPopup className={styles.dropdownMenu}>
+              <DropdownMenuGroup>
+                <DropdownMenuGroupLabel>
+                  {t('ModelSwitchPanel.useModelFrom')}
+                </DropdownMenuGroupLabel>
+                {data.providers.map((p) => {
+                  const key = menuKey(p.id, data.model.id);
+                  const isProviderActive = activeKey === key;
+
+                  return (
+                    <DropdownMenuItem
+                      key={key}
+                      onClick={async () => {
+                        await onModelChange(data.model.id, p.id);
+                        onClose();
+                      }}
+                    >
+                      <DropdownMenuItemIcon>
+                        {isProviderActive ? <Check size={16} /> : null}
+                      </DropdownMenuItemIcon>
+                      <DropdownMenuItemLabel>
+                        <ProviderItemRender
+                          logo={p.logo}
+                          name={p.name}
+                          provider={p.id}
+                          size={20}
+                          source={p.source}
+                          type={'avatar'}
+                        />
+                      </DropdownMenuItemLabel>
+                      <DropdownMenuItemExtra>
+                        <ActionIcon
+                          className={'settings-icon'}
+                          icon={LucideBolt}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            const url = urlJoin('/settings/provider', p.id || 'all');
+                            if (e.ctrlKey || e.metaKey) {
+                              window.open(url, '_blank');
+                            } else {
+                              navigate(url);
+                            }
+                          }}
+                          size={'small'}
+                          title={t('ModelSwitchPanel.goToSettings')}
+                        />
+                      </DropdownMenuItemExtra>
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuGroup>
+            </DropdownMenuPopup>
+          </DropdownMenuPositioner>
+        </DropdownMenuPortal>
+      </DropdownMenuSubmenuRoot>
     );
   },
 );