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

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

package/src/features/ModelSwitchPanel/components/PanelContent.tsx

@@ -13,7 +13,6 @@ import { List } from './List';
 import { Toolbar } from './Toolbar';
 
 interface PanelContentProps {
-  isOpen: boolean;
   model?: string;
   onModelChange?: (params: { model: string; provider: string }) => Promise<void>;
   onOpenChange?: (open: boolean) => void;
@@ -21,19 +20,13 @@ interface PanelContentProps {
 }
 
 export const PanelContent: FC<PanelContentProps> = ({
-  isOpen,
   model: modelProp,
   onModelChange: onModelChangeProp,
   onOpenChange,
   provider: providerProp,
 }) => {
-  // Get enabled models list
   const enabledList = useEnabledChatModels();
-
-  // Search keyword state
   const [searchKeyword, setSearchKeyword] = useState('');
-
-  // Hooks for state management
   const { groupMode, handleGroupModeChange } = usePanelState();
   const { panelHeight, panelWidth, handlePanelWidthChange } = usePanelSize(enabledList.length);
   const { handleClose } = usePanelHandlers({
@@ -62,7 +55,6 @@ export const PanelContent: FC<PanelContentProps> = ({
       />
       <List
         groupMode={groupMode}
-        isOpen={isOpen}
         model={modelProp}
         onModelChange={onModelChangeProp}
         onOpenChange={onOpenChange}

package/src/features/ModelSwitchPanel/hooks/{useBuildVirtualItems.ts → useBuildListItems.ts}

@@ -2,26 +2,25 @@ import { useMemo } from 'react';
 
 import type { EnabledProviderWithModels } from '@/types/aiProvider';
 
-import type { GroupMode, ModelWithProviders, VirtualItem } from '../types';
+import type { GroupMode, ListItem, ModelWithProviders } from '../types';
 
-export const useBuildVirtualItems = (
+export const useBuildListItems = (
   enabledList: EnabledProviderWithModels[],
   groupMode: GroupMode,
   searchKeyword: string = '',
-): VirtualItem[] => {
+): ListItem[] => {
   return useMemo(() => {
     if (enabledList.length === 0) {
-      return [{ type: 'no-provider' }] as VirtualItem[];
+      return [{ type: 'no-provider' }] as ListItem[];
     }
 
-    // Filter function for search
     const matchesSearch = (text: string): boolean => {
       if (!searchKeyword.trim()) return true;
       const keyword = searchKeyword.toLowerCase().trim();
       return text.toLowerCase().includes(keyword);
     };
 
-    // Sort providers: lobehub first, then others
+    // lobehub first, then others
     const sortedProviders = [...enabledList].sort((a, b) => {
       const aIsLobehub = a.id === 'lobehub';
       const bIsLobehub = b.id === 'lobehub';
@@ -31,14 +30,12 @@ export const useBuildVirtualItems = (
     });
 
     if (groupMode === 'byModel') {
-      // Group models by display name
       const modelMap = new Map<string, ModelWithProviders>();
 
       for (const providerItem of sortedProviders) {
         for (const modelItem of providerItem.children) {
           const displayName = modelItem.displayName || modelItem.id;
 
-          // Filter by search keyword
           if (!matchesSearch(displayName) && !matchesSearch(providerItem.name)) {
             continue;
           }
@@ -61,7 +58,7 @@ export const useBuildVirtualItems = (
         }
       }
 
-      // Sort providers within each model: lobehub first
+      // lobehub first
       const modelArray = Array.from(modelMap.values());
       for (const model of modelArray) {
         model.providers.sort((a, b) => {
@@ -73,7 +70,6 @@ export const useBuildVirtualItems = (
         });
       }
 
-      // Convert to array and sort by display name
       return modelArray
         .sort((a, b) => a.displayName.localeCompare(b.displayName))
         .map((data) => ({
@@ -84,27 +80,21 @@ export const useBuildVirtualItems = (
               : ('model-item-multiple' as const),
         }));
     } else {
-      // Group by provider (original structure)
-      const items: VirtualItem[] = [];
+      const items: ListItem[] = [];
 
       for (const providerItem of sortedProviders) {
-        // Filter models by search keyword
         const filteredModels = providerItem.children.filter(
           (modelItem) =>
             matchesSearch(modelItem.displayName || modelItem.id) ||
             matchesSearch(providerItem.name),
         );
 
-        // Only add provider group header if there are matching models or if search is empty
         if (filteredModels.length > 0 || !searchKeyword.trim()) {
-          // Add provider group header
           items.push({ provider: providerItem, type: 'group-header' });
 
           if (filteredModels.length === 0) {
-            // Add empty model placeholder
             items.push({ provider: providerItem, type: 'empty-model' });
           } else {
-            // Add each filtered model item
             for (const modelItem of filteredModels) {
               items.push({
                 model: modelItem,