@lobehub/lobehub 2.0.0-next.323 → 2.0.0-next.325

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

@@ -18,19 +18,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} />
-    </>
+    <StatusContent content={content} messageId={messageId} taskDetail={taskDetail} />
   );
 });
 

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>
     );
   },
 );

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

@@ -1,29 +1,22 @@
 import { Flexbox, TooltipGroup } from '@lobehub/ui';
 import type { FC } from 'react';
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
 
 import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 
-import {
-  FOOTER_HEIGHT,
-  INITIAL_RENDER_COUNT,
-  ITEM_HEIGHT,
-  MAX_PANEL_HEIGHT,
-  TOOLBAR_HEIGHT,
-} from '../../const';
-import { useBuildVirtualItems } from '../../hooks/useBuildVirtualItems';
-import { useDelayedRender } from '../../hooks/useDelayedRender';
+import { FOOTER_HEIGHT, ITEM_HEIGHT, MAX_PANEL_HEIGHT, TOOLBAR_HEIGHT } from '../../const';
+import { useBuildListItems } from '../../hooks/useBuildListItems';
 import { useModelAndProvider } from '../../hooks/useModelAndProvider';
 import { usePanelHandlers } from '../../hooks/usePanelHandlers';
 import { styles } from '../../styles';
 import type { GroupMode } from '../../types';
-import { getVirtualItemKey, menuKey } from '../../utils';
-import { VirtualItemRenderer } from './VirtualItemRenderer';
+import { menuKey } from '../../utils';
+import { ListItemRenderer } from './ListItemRenderer';
 
 interface ListProps {
   groupMode: GroupMode;
-  isOpen: boolean;
   model?: string;
   onModelChange?: (params: { model: string; provider: string }) => Promise<void>;
   onOpenChange?: (open: boolean) => void;
@@ -33,7 +26,6 @@ interface ListProps {
 
 export const List: FC<ListProps> = ({
   groupMode,
-  isOpen,
   model: modelProp,
   onModelChange: onModelChangeProp,
   onOpenChange,
@@ -43,25 +35,15 @@ export const List: FC<ListProps> = ({
   const { t: tCommon } = useTranslation('common');
   const newLabel = tCommon('new');
 
-  // Get enabled models list
+  const [isScrolling, setIsScrolling] = useState(false);
   const enabledList = useEnabledChatModels();
-
-  // Get delayed render state
-  const renderAll = useDelayedRender(isOpen);
-
-  // Get model and provider
   const { model, provider } = useModelAndProvider(modelProp, providerProp);
-
-  // Get handlers
   const { handleModelChange, handleClose } = usePanelHandlers({
     onModelChange: onModelChangeProp,
     onOpenChange,
   });
+  const listItems = useBuildListItems(enabledList, groupMode, searchKeyword);
 
-  // Build virtual items
-  const virtualItems = useBuildVirtualItems(enabledList, groupMode, searchKeyword);
-
-  // Calculate panel height
   const panelHeight = useMemo(
     () =>
       enabledList.length === 0
@@ -70,31 +52,48 @@ export const List: FC<ListProps> = ({
     [enabledList.length],
   );
 
-  // Calculate active key
   const activeKey = menuKey(provider, model);
 
+  const handleScrollingStateChange = useCallback((scrolling: boolean) => {
+    setIsScrolling(scrolling);
+  }, []);
+
+  const itemContent = useCallback(
+    (index: number) => {
+      const item = listItems[index];
+      return (
+        <ListItemRenderer
+          activeKey={activeKey}
+          isScrolling={isScrolling}
+          item={item}
+          newLabel={newLabel}
+          onClose={handleClose}
+          onModelChange={handleModelChange}
+        />
+      );
+    },
+    [activeKey, handleClose, handleModelChange, isScrolling, listItems, newLabel],
+  );
+
+  const listHeight = panelHeight - TOOLBAR_HEIGHT - FOOTER_HEIGHT;
+
   return (
     <Flexbox
       className={styles.list}
       flex={1}
       style={{
-        height: panelHeight - TOOLBAR_HEIGHT - FOOTER_HEIGHT,
+        height: listHeight,
         paddingBlock: groupMode === 'byModel' ? 8 : 0,
       }}
     >
       <TooltipGroup>
-        {virtualItems
-          .slice(0, renderAll ? virtualItems.length : INITIAL_RENDER_COUNT)
-          .map((item) => (
-            <VirtualItemRenderer
-              activeKey={activeKey}
-              item={item}
-              key={getVirtualItemKey(item)}
-              newLabel={newLabel}
-              onClose={handleClose}
-              onModelChange={handleModelChange}
-            />
-          ))}
+        <Virtuoso
+          isScrolling={handleScrollingStateChange}
+          itemContent={itemContent}
+          overscan={200}
+          style={{ height: listHeight }}
+          totalCount={listItems.length}
+        />
       </TooltipGroup>
     </Flexbox>
   );