@lobehub/lobehub 2.0.0-next.205 → 2.0.0-next.207

package/src/features/ModelSwitchPanel/index.tsx

@@ -1,7 +1,15 @@
-import { ActionIcon, Flexbox, Icon, TooltipGroup } from '@lobehub/ui';
+import { ActionIcon, Flexbox, Icon, Segmented, TooltipGroup } from '@lobehub/ui';
+import { ProviderIcon } from '@lobehub/ui/icons';
 import { Dropdown } from 'antd';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { LucideArrowRight, LucideBolt } from 'lucide-react';
+import {
+  Brain,
+  LucideArrowRight,
+  LucideBolt,
+  LucideCheck,
+  LucideChevronRight,
+  LucideSettings,
+} from 'lucide-react';
 import { type AiModelForSelect } from 'model-bank';
 import { type ReactNode, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,21 +24,26 @@ import { agentSelectors } from '@/store/agent/selectors';
 import { type EnabledProviderWithModels } from '@/types/aiProvider';
 
 const STORAGE_KEY = 'MODEL_SWITCH_PANEL_WIDTH';
-const DEFAULT_WIDTH = 320;
+const STORAGE_KEY_MODE = 'MODEL_SWITCH_PANEL_MODE';
+const DEFAULT_WIDTH = 430;
 const MIN_WIDTH = 280;
 const MAX_WIDTH = 600;
-const MAX_PANEL_HEIGHT = 550;
+const MAX_PANEL_HEIGHT = 460;
+const TOOLBAR_HEIGHT = 40;
+const FOOTER_HEIGHT = 48;
 
 const INITIAL_RENDER_COUNT = 15;
 const RENDER_ALL_DELAY_MS = 500;
 
 const ITEM_HEIGHT = {
-  'empty-model': 38,
-  'group-header': 40,
-  'model-item': 38,
-  'no-provider': 38,
+  'empty-model': 32,
+  'group-header': 32,
+  'model-item': 32,
+  'no-provider': 32,
 } as const;
 
+type GroupMode = 'byModel' | 'byProvider';
+
 const ENABLE_RESIZING = {
   bottom: false,
   bottomLeft: false,
@@ -54,9 +67,44 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     background: ${cssVar.colorBgElevated};
     box-shadow: ${cssVar.boxShadowSecondary};
   `,
+  footer: css`
+    position: sticky;
+    z-index: 10;
+    inset-block-end: 0;
+
+    padding-block: 6px;
+    padding-inline: 0;
+    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+
+    background: ${cssVar.colorBgElevated};
+  `,
+  footerButton: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+
+    box-sizing: border-box;
+    margin-inline: 8px;
+    padding-block: 6px;
+    padding-inline: 8px;
+    border-radius: ${cssVar.borderRadiusSM};
+
+    color: ${cssVar.colorTextSecondary};
+
+    transition: all 0.2s;
+
+    &:hover {
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillTertiary};
+    }
+  `,
   groupHeader: css`
-    padding-block: 8px;
-    padding-inline: 12px;
+    margin-inline: 8px;
+    padding-block: 6px;
+    padding-inline: 8px;
     color: ${cssVar.colorTextSecondary};
   `,
   menuItem: css`
@@ -67,26 +115,84 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     align-items: center;
 
     box-sizing: border-box;
-    padding-block: 8px;
-    padding-inline: 12px;
+    margin-inline: 8px;
+    padding-block: 6px;
+    padding-inline: 8px;
+    border-radius: ${cssVar.borderRadiusSM};
 
     white-space: nowrap;
 
     &:hover {
       background: ${cssVar.colorFillTertiary};
+
+      .settings-icon {
+        opacity: 1;
+      }
     }
   `,
   menuItemActive: css`
     background: ${cssVar.colorFillTertiary};
   `,
+  settingsIcon: css`
+    opacity: 0;
+  `,
+  submenu: css`
+    .ant-dropdown-menu {
+      padding: 4px;
+    }
+
+    .ant-dropdown-menu-item {
+      margin-inline: 0;
+      padding-block: 6px;
+      padding-inline: 8px;
+      border-radius: ${cssVar.borderRadiusSM};
+    }
+
+    .ant-dropdown-menu-item-group-title {
+      padding-block: 6px;
+      padding-inline: 8px;
+      font-size: 12px;
+      color: ${cssVar.colorTextSecondary};
+    }
+  `,
   tag: css`
     cursor: pointer;
   `,
+  toolbar: css`
+    position: sticky;
+    z-index: 10;
+    inset-block-start: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    padding-block: 6px;
+    padding-inline: 8px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+
+    background: ${cssVar.colorBgElevated};
+  `,
 }));
 
 const menuKey = (provider: string, model: string) => `${provider}-${model}`;
 
+interface ModelWithProviders {
+  displayName: string;
+  model: AiModelForSelect;
+  providers: Array<{
+    id: string;
+    logo?: string;
+    name: string;
+    source?: EnabledProviderWithModels['source'];
+  }>;
+}
+
 type VirtualItem =
+  | {
+      data: ModelWithProviders;
+      type: 'model-item';
+    }
   | {
       provider: EnabledProviderWithModels;
       type: 'group-header';
@@ -94,7 +200,7 @@ type VirtualItem =
   | {
       model: AiModelForSelect;
       provider: EnabledProviderWithModels;
-      type: 'model-item';
+      type: 'provider-model-item';
     }
   | {
       provider: EnabledProviderWithModels;
@@ -148,6 +254,12 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
       return stored ? Number(stored) : DEFAULT_WIDTH;
     });
 
+    const [groupMode, setGroupMode] = useState<GroupMode>(() => {
+      if (typeof window === 'undefined') return 'byModel';
+      const stored = localStorage.getItem(STORAGE_KEY_MODE);
+      return (stored as GroupMode) || 'byModel';
+    });
+
     const [renderAll, setRenderAll] = useState(false);
     const [internalOpen, setInternalOpen] = useState(false);
 
@@ -198,41 +310,74 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
       [onModelChange, updateAgentConfig],
     );
 
-    // Flatten the provider/model tree into a flat list for virtual scrolling
-    const { virtualItems, panelHeight } = useMemo(() => {
+    // Build virtual items based on group mode
+    const virtualItems = useMemo(() => {
       if (enabledList.length === 0) {
-        return {
-          panelHeight: ITEM_HEIGHT['no-provider'],
-          virtualItems: [{ type: 'no-provider' }] as VirtualItem[],
-        };
+        return [{ type: 'no-provider' }] as VirtualItem[];
       }
 
-      const items: VirtualItem[] = [];
-      let totalHeight = 0;
-
-      for (const providerItem of enabledList) {
-        // Add provider group header
-        items.push({ provider: providerItem, type: 'group-header' });
-        totalHeight += ITEM_HEIGHT['group-header'];
+      if (groupMode === 'byModel') {
+        // Group models by display name
+        const modelMap = new Map<string, ModelWithProviders>();
 
-        if (providerItem.children.length === 0) {
-          // Add empty model placeholder
-          items.push({ provider: providerItem, type: 'empty-model' });
-          totalHeight += ITEM_HEIGHT['empty-model'];
-        } else {
-          // Add each model item
+        for (const providerItem of enabledList) {
           for (const modelItem of providerItem.children) {
-            items.push({ model: modelItem, provider: providerItem, type: 'model-item' });
-            totalHeight += ITEM_HEIGHT['model-item'];
+            const displayName = modelItem.displayName || modelItem.id;
+
+            if (!modelMap.has(displayName)) {
+              modelMap.set(displayName, {
+                displayName,
+                model: modelItem,
+                providers: [],
+              });
+            }
+
+            const entry = modelMap.get(displayName)!;
+            entry.providers.push({
+              id: providerItem.id,
+              logo: providerItem.logo,
+              name: providerItem.name,
+              source: providerItem.source,
+            });
+          }
+        }
+
+        // Convert to array and sort by display name
+        return Array.from(modelMap.values())
+          .sort((a, b) => a.displayName.localeCompare(b.displayName))
+          .map((data) => ({ data, type: 'model-item' as const }));
+      } else {
+        // Group by provider (original structure)
+        const items: VirtualItem[] = [];
+
+        for (const providerItem of enabledList) {
+          // Add provider group header
+          items.push({ provider: providerItem, type: 'group-header' });
+
+          if (providerItem.children.length === 0) {
+            // Add empty model placeholder
+            items.push({ provider: providerItem, type: 'empty-model' });
+          } else {
+            // Add each model item
+            for (const modelItem of providerItem.children) {
+              items.push({
+                model: modelItem,
+                provider: providerItem,
+                type: 'provider-model-item',
+              });
+            }
           }
         }
+
+        return items;
       }
+    }, [enabledList, groupMode]);
 
-      return {
-        panelHeight: Math.min(totalHeight, MAX_PANEL_HEIGHT),
-        virtualItems: items,
-      };
-    }, [enabledList]);
+    // Use a fixed panel height to prevent shifting when switching modes
+    const panelHeight =
+      enabledList.length === 0
+        ? TOOLBAR_HEIGHT + ITEM_HEIGHT['no-provider'] + FOOTER_HEIGHT
+        : MAX_PANEL_HEIGHT;
 
     const activeKey = menuKey(provider, model);
 
@@ -299,7 +444,7 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
             );
           }
 
-          case 'model-item': {
+          case 'provider-model-item': {
             const key = menuKey(item.provider.id, item.model.id);
             const isActive = key === activeKey;
 
@@ -315,7 +460,7 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
                 <ModelItemRender
                   {...item.model}
                   {...item.model.abilities}
-                  infoTagTooltipOnHover
+                  infoTagTooltip={false}
                   newBadgeLabel={newLabel}
                   showInfoTag
                 />
@@ -323,6 +468,167 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
             );
           }
 
+          case 'model-item': {
+            const { data } = item;
+            const hasSingleProvider = data.providers.length === 1;
+
+            // Check if this model is currently active and find active provider
+            const activeProvider = data.providers.find(
+              (p) => menuKey(p.id, data.model.id) === activeKey,
+            );
+            const isActive = !!activeProvider;
+            // Use active provider if found, otherwise use first provider for settings link
+            const settingsProvider = activeProvider || data.providers[0];
+
+            // Single provider - direct click without submenu
+            if (hasSingleProvider) {
+              const singleProvider = data.providers[0];
+              const key = menuKey(singleProvider.id, data.model.id);
+
+              return (
+                <div className={cx(styles.menuItem, isActive && styles.menuItemActive)} key={key}>
+                  <Flexbox
+                    align={'center'}
+                    gap={8}
+                    horizontal
+                    justify={'space-between'}
+                    onClick={async () => {
+                      await handleModelChange(data.model.id, singleProvider.id);
+                      handleOpenChange(false);
+                    }}
+                    style={{ flex: 1, minWidth: 0 }}
+                  >
+                    <ModelItemRender
+                      {...data.model}
+                      {...data.model.abilities}
+                      infoTagTooltip={false}
+                      newBadgeLabel={newLabel}
+                      showInfoTag={false}
+                    />
+                  </Flexbox>
+                  <div className={cx(styles.settingsIcon, 'settings-icon')}>
+                    <ActionIcon
+                      icon={LucideBolt}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const url = urlJoin('/settings/provider', settingsProvider.id || 'all');
+                        if (e.ctrlKey || e.metaKey) {
+                          window.open(url, '_blank');
+                        } else {
+                          navigate(url);
+                        }
+                      }}
+                      size={'small'}
+                      title={t('ModelSwitchPanel.goToSettings')}
+                    />
+                  </div>
+                </div>
+              );
+            }
+
+            // Multiple providers - show submenu on hover
+            return (
+              <Dropdown
+                align={{ offset: [4, 0] }}
+                arrow={false}
+                dropdownRender={(menu) => (
+                  <div className={styles.submenu} style={{ minWidth: 240 }}>
+                    {menu}
+                  </div>
+                )}
+                key={data.displayName}
+                menu={{
+                  items: [
+                    {
+                      key: 'header',
+                      label: t('ModelSwitchPanel.useModelFrom'),
+                      type: 'group',
+                    },
+                    ...data.providers.map((p) => {
+                      const isCurrentProvider = menuKey(p.id, data.model.id) === activeKey;
+                      return {
+                        key: menuKey(p.id, data.model.id),
+                        label: (
+                          <Flexbox
+                            align={'center'}
+                            gap={8}
+                            horizontal
+                            justify={'space-between'}
+                            style={{ minWidth: 0 }}
+                          >
+                            <Flexbox align={'center'} gap={8} horizontal style={{ minWidth: 0 }}>
+                              <div style={{ flexShrink: 0, width: 16 }}>
+                                {isCurrentProvider && (
+                                  <Icon
+                                    icon={LucideCheck}
+                                    size={16}
+                                    style={{ color: cssVar.colorPrimary }}
+                                  />
+                                )}
+                              </div>
+                              <ProviderItemRender
+                                logo={p.logo}
+                                name={p.name}
+                                provider={p.id}
+                                source={p.source}
+                              />
+                            </Flexbox>
+                            <ActionIcon
+                              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')}
+                            />
+                          </Flexbox>
+                        ),
+                        onClick: async () => {
+                          await handleModelChange(data.model.id, p.id);
+                          handleOpenChange(false);
+                        },
+                      };
+                    }),
+                  ],
+                }}
+                // @ts-ignore
+                placement="rightTop"
+                trigger={['hover']}
+              >
+                <div className={cx(styles.menuItem, isActive && styles.menuItemActive)}>
+                  <Flexbox
+                    align={'center'}
+                    gap={8}
+                    horizontal
+                    justify={'space-between'}
+                    style={{ width: '100%' }}
+                  >
+                    <ModelItemRender
+                      {...data.model}
+                      {...data.model.abilities}
+                      infoTagTooltip={false}
+                      newBadgeLabel={newLabel}
+                      showInfoTag={false}
+                    />
+                    <Icon
+                      icon={LucideChevronRight}
+                      size={16}
+                      style={{ color: cssVar.colorTextSecondary, flexShrink: 0 }}
+                    />
+                  </Flexbox>
+                </div>
+              </Dropdown>
+            );
+          }
+
           default: {
             return null;
           }
@@ -354,11 +660,56 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
               size={{ height: panelHeight, width: panelWidth }}
               style={{ position: 'relative' }}
             >
-              <div style={{ height: panelHeight, overflow: 'auto', width: '100%' }}>
+              <div className={styles.toolbar}>
+                <Segmented
+                  onChange={(value) => {
+                    const mode = value as GroupMode;
+                    setGroupMode(mode);
+                    localStorage.setItem(STORAGE_KEY_MODE, mode);
+                  }}
+                  options={[
+                    {
+                      icon: <Icon icon={Brain} />,
+                      title: t('ModelSwitchPanel.byModel'),
+                      value: 'byModel',
+                    },
+                    {
+                      icon: <Icon icon={ProviderIcon} />,
+                      title: t('ModelSwitchPanel.byProvider'),
+                      value: 'byProvider',
+                    },
+                  ]}
+                  size="small"
+                  value={groupMode}
+                />
+              </div>
+              <div
+                style={{
+                  height: panelHeight - TOOLBAR_HEIGHT - FOOTER_HEIGHT,
+                  overflow: 'auto',
+                  paddingBlock: groupMode === 'byModel' ? 8 : 0,
+                  width: '100%',
+                }}
+              >
                 {(renderAll ? virtualItems : virtualItems.slice(0, INITIAL_RENDER_COUNT)).map(
                   renderVirtualItem,
                 )}
               </div>
+              <div className={styles.footer}>
+                <div
+                  className={styles.footerButton}
+                  onClick={() => {
+                    navigate('/settings/provider/all');
+                    handleOpenChange(false);
+                  }}
+                >
+                  <Flexbox align={'center'} gap={8} horizontal style={{ flex: 1 }}>
+                    <Icon icon={LucideSettings} size={16} />
+                    {t('ModelSwitchPanel.manageProvider')}
+                  </Flexbox>
+                  <Icon icon={LucideArrowRight} size={16} />
+                </div>
+              </div>
             </Rnd>
           )}
         >

package/src/locales/default/components.ts

@@ -107,11 +107,15 @@ export default {
   'ModelSelect.featureTag.vision': 'This model supports visual recognition.',
   'ModelSelect.removed':
     'The model is not in the list. It will be automatically removed if deselected.',
+  'ModelSwitchPanel.byModel': 'By Model',
+  'ModelSwitchPanel.byProvider': 'By Provider',
   'ModelSwitchPanel.emptyModel': 'No enabled model. Please go to settings to enable.',
   'ModelSwitchPanel.emptyProvider': 'No enabled providers. Please go to settings to enable one.',
   'ModelSwitchPanel.goToSettings': 'Go to settings',
+  'ModelSwitchPanel.manageProvider': 'Manage Provider',
   'ModelSwitchPanel.provider': 'Provider',
   'ModelSwitchPanel.title': 'Model',
+  'ModelSwitchPanel.useModelFrom': 'Use this model from:',
   'MultiImagesUpload.actions.uploadMore': 'Click or drag to upload more',
   'MultiImagesUpload.modal.complete': 'Done',
   'MultiImagesUpload.modal.newFileIndicator': 'New',

package/src/store/aiInfra/slices/aiModel/selectors.test.ts

@@ -62,6 +62,7 @@ describe('aiModelSelectors', () => {
     ],
     activeProviderModelList: [],
     aiProviderConfigUpdatingIds: [],
+    aiProviderDetailMap: {},
     aiProviderList: [],
     aiProviderLoadingIds: [],
     providerSearchKeyword: '',

package/src/store/aiInfra/slices/aiProvider/__tests__/selectors.test.ts

@@ -10,11 +10,13 @@ describe('aiProviderSelectors', () => {
       { id: 'provider3', enabled: true, sort: 0, source: 'builtin' },
       { id: 'custom1', enabled: false, sort: 3, source: 'custom' },
     ],
-    aiProviderDetail: {
-      id: 'provider1',
-      keyVaults: {
-        baseURL: 'https://api.example.com',
-        apiKey: 'test-key',
+    aiProviderDetailMap: {
+      provider1: {
+        id: 'provider1',
+        keyVaults: {
+          baseURL: 'https://api.example.com',
+          apiKey: 'test-key',
+        },
       },
     },
     aiProviderLoadingIds: ['loading-provider'],
@@ -97,20 +99,37 @@ describe('aiProviderSelectors', () => {
     });
   });
 
+  describe('providerDetailById', () => {
+    it('should return provider detail by id', () => {
+      expect(aiProviderSelectors.providerDetailById('provider1')(mockState)).toEqual(
+        mockState.aiProviderDetailMap.provider1,
+      );
+    });
+
+    it('should return undefined for non-existing provider', () => {
+      expect(aiProviderSelectors.providerDetailById('non-existing')(mockState)).toBeUndefined();
+    });
+  });
+
   describe('activeProviderConfig', () => {
-    it('should return active provider config', () => {
+    it('should return active provider config from map', () => {
       expect(aiProviderSelectors.activeProviderConfig(mockState)).toEqual(
-        mockState.aiProviderDetail,
+        mockState.aiProviderDetailMap.provider1,
       );
     });
+
+    it('should return undefined when no active provider', () => {
+      const stateWithoutActive = { ...mockState, activeAiProvider: undefined };
+      expect(aiProviderSelectors.activeProviderConfig(stateWithoutActive)).toBeUndefined();
+    });
   });
 
   describe('isAiProviderConfigLoading', () => {
-    it('should return true if provider id does not match active provider', () => {
+    it('should return true if provider is not in detail map (not loaded)', () => {
       expect(aiProviderSelectors.isAiProviderConfigLoading('provider2')(mockState)).toBe(true);
     });
 
-    it('should return false if provider id matches active provider', () => {
+    it('should return false if provider is in detail map (loaded)', () => {
       expect(aiProviderSelectors.isAiProviderConfigLoading('provider1')(mockState)).toBe(false);
     });
   });
@@ -123,7 +142,9 @@ describe('aiProviderSelectors', () => {
     it('should return false when no endpoint info exists', () => {
       const stateWithoutEndpoint = {
         ...mockState,
-        aiProviderDetail: { keyVaults: {} },
+        aiProviderDetailMap: {
+          provider1: { id: 'provider1', keyVaults: {} },
+        },
       };
       expect(aiProviderSelectors.isActiveProviderEndpointNotEmpty(stateWithoutEndpoint)).toBe(
         false,
@@ -139,7 +160,9 @@ describe('aiProviderSelectors', () => {
     it('should return false when no api key exists', () => {
       const stateWithoutApiKey = {
         ...mockState,
-        aiProviderDetail: { keyVaults: {} },
+        aiProviderDetailMap: {
+          provider1: { id: 'provider1', keyVaults: {} },
+        },
       };
       expect(aiProviderSelectors.isActiveProviderApiKeyNotEmpty(stateWithoutApiKey)).toBe(false);
     });

package/src/store/aiInfra/slices/aiProvider/action.ts

@@ -29,6 +29,7 @@ import {
   type UpdateAiProviderParams,
 } from '@/types/aiProvider';
 
+
 export type ProviderModelListItem = {
   abilities: ModelAbilities;
   approximatePricePerImage?: number;
@@ -293,7 +294,14 @@ export const createAiProviderSlice: StateCreator<
         onSuccess: (data) => {
           if (!data) return;
 
-          set({ activeAiProvider: id, aiProviderDetail: data }, false, 'useFetchAiProviderItem');
+          set(
+            (state) => ({
+              activeAiProvider: id,
+              aiProviderDetailMap: { ...state.aiProviderDetailMap, [id]: data },
+            }),
+            false,
+            'useFetchAiProviderItem',
+          );
         },
       },
     ),