@lobehub/lobehub 2.0.0-next.221 → 2.0.0-next.222

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

@@ -0,0 +1,54 @@
+import { Flexbox, Icon, SearchBar, Segmented } from '@lobehub/ui';
+import { ProviderIcon } from '@lobehub/ui/icons';
+import { Brain } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { styles } from '../styles';
+import type { GroupMode } from '../types';
+
+interface ToolbarProps {
+  groupMode: GroupMode;
+  onGroupModeChange: (mode: GroupMode) => void;
+  onSearchKeywordChange: (keyword: string) => void;
+  searchKeyword: string;
+}
+
+export const Toolbar = memo<ToolbarProps>(
+  ({ groupMode, onGroupModeChange, searchKeyword, onSearchKeywordChange }) => {
+    const { t } = useTranslation('components');
+
+    return (
+      <Flexbox className={styles.toolbar} gap={4} horizontal paddingBlock={8} paddingInline={8}>
+        <SearchBar
+          allowClear
+          onChange={(e) => onSearchKeywordChange(e.target.value)}
+          placeholder={t('ModelSwitchPanel.searchPlaceholder')}
+          size="small"
+          style={{ flex: 1 }}
+          value={searchKeyword}
+          variant="borderless"
+        />
+        <Segmented
+          onChange={(value) => onGroupModeChange(value as GroupMode)}
+          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}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+Toolbar.displayName = 'Toolbar';

package/src/features/ModelSwitchPanel/const.ts

@@ -0,0 +1,29 @@
+export const STORAGE_KEY = 'MODEL_SWITCH_PANEL_WIDTH';
+export const STORAGE_KEY_MODE = 'MODEL_SWITCH_PANEL_MODE';
+export const DEFAULT_WIDTH = 430;
+export const MIN_WIDTH = 280;
+export const MAX_WIDTH = 600;
+export const MAX_PANEL_HEIGHT = 460;
+export const TOOLBAR_HEIGHT = 40;
+export const FOOTER_HEIGHT = 48;
+
+export const INITIAL_RENDER_COUNT = 15;
+export const RENDER_ALL_DELAY_MS = 500;
+
+export const ITEM_HEIGHT = {
+  'empty-model': 32,
+  'group-header': 32,
+  'model-item': 32,
+  'no-provider': 32,
+} as const;
+
+export const ENABLE_RESIZING = {
+  bottom: false,
+  bottomLeft: false,
+  bottomRight: false,
+  left: false,
+  right: true,
+  top: false,
+  topLeft: false,
+  topRight: false,
+} as const;

package/src/features/ModelSwitchPanel/hooks/useBuildVirtualItems.ts

@@ -0,0 +1,122 @@
+import { useMemo } from 'react';
+
+import type { EnabledProviderWithModels } from '@/types/aiProvider';
+
+import type { GroupMode, ModelWithProviders, VirtualItem } from '../types';
+
+export const useBuildVirtualItems = (
+  enabledList: EnabledProviderWithModels[],
+  groupMode: GroupMode,
+  searchKeyword: string = '',
+): VirtualItem[] => {
+  return useMemo(() => {
+    if (enabledList.length === 0) {
+      return [{ type: 'no-provider' }] as VirtualItem[];
+    }
+
+    // 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
+    const sortedProviders = [...enabledList].sort((a, b) => {
+      const aIsLobehub = a.id === 'lobehub';
+      const bIsLobehub = b.id === 'lobehub';
+      if (aIsLobehub && !bIsLobehub) return -1;
+      if (!aIsLobehub && bIsLobehub) return 1;
+      return 0;
+    });
+
+    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;
+          }
+
+          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,
+          });
+        }
+      }
+
+      // Sort providers within each model: lobehub first
+      const modelArray = Array.from(modelMap.values());
+      for (const model of modelArray) {
+        model.providers.sort((a, b) => {
+          const aIsLobehub = a.id === 'lobehub';
+          const bIsLobehub = b.id === 'lobehub';
+          if (aIsLobehub && !bIsLobehub) return -1;
+          if (!aIsLobehub && bIsLobehub) return 1;
+          return 0;
+        });
+      }
+
+      // Convert to array and sort by display name
+      return modelArray
+        .sort((a, b) => a.displayName.localeCompare(b.displayName))
+        .map((data) => ({
+          data,
+          type:
+            data.providers.length === 1
+              ? ('model-item-single' as const)
+              : ('model-item-multiple' as const),
+        }));
+    } else {
+      // Group by provider (original structure)
+      const items: VirtualItem[] = [];
+
+      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,
+                provider: providerItem,
+                type: 'provider-model-item',
+              });
+            }
+          }
+        }
+      }
+
+      return items;
+    }
+  }, [enabledList, groupMode, searchKeyword]);
+};

package/src/features/ModelSwitchPanel/hooks/useCurrentModelName.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+
+import type { EnabledProviderWithModels } from '@/types/aiProvider';
+
+export const useCurrentModelName = (
+  enabledList: EnabledProviderWithModels[],
+  model: string,
+): string => {
+  return useMemo(() => {
+    for (const providerItem of enabledList) {
+      const modelItem = providerItem.children.find((m) => m.id === model);
+      if (modelItem) {
+        return modelItem.displayName || modelItem.id;
+      }
+    }
+    return model;
+  }, [enabledList, model]);
+};

package/src/features/ModelSwitchPanel/hooks/useDelayedRender.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+import { RENDER_ALL_DELAY_MS } from '../const';
+
+export const useDelayedRender = (isOpen: boolean) => {
+  const [renderAll, setRenderAll] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && !renderAll) {
+      const timer = setTimeout(() => {
+        setRenderAll(true);
+      }, RENDER_ALL_DELAY_MS);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, renderAll]);
+
+  return renderAll;
+};

package/src/features/ModelSwitchPanel/hooks/useModelAndProvider.ts

@@ -0,0 +1,14 @@
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+
+export const useModelAndProvider = (modelProp?: string, providerProp?: string) => {
+  const [storeModel, storeProvider] = useAgentStore((s) => [
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentModelProvider(s),
+  ]);
+
+  const model = modelProp ?? storeModel;
+  const provider = providerProp ?? storeProvider;
+
+  return { model, provider };
+};

package/src/features/ModelSwitchPanel/hooks/usePanelHandlers.ts

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+
+import { useAgentStore } from '@/store/agent';
+
+interface UsePanelHandlersProps {
+  onModelChange?: (params: { model: string; provider: string }) => Promise<void>;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const usePanelHandlers = ({
+  onModelChange: onModelChangeProp,
+  onOpenChange,
+}: UsePanelHandlersProps) => {
+  const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
+
+  const handleModelChange = useCallback(
+    async (modelId: string, providerId: string) => {
+      const params = { model: modelId, provider: providerId };
+      if (onModelChangeProp) {
+        onModelChangeProp(params);
+      } else {
+        updateAgentConfig(params);
+      }
+    },
+    [onModelChangeProp, updateAgentConfig],
+  );
+
+  const handleClose = useCallback(() => {
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+
+  return { handleClose, handleModelChange };
+};

package/src/features/ModelSwitchPanel/hooks/usePanelSize.ts

@@ -0,0 +1,33 @@
+import { useCallback, useMemo } from 'react';
+
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors/systemStatus';
+
+import {
+  FOOTER_HEIGHT,
+  ITEM_HEIGHT,
+  MAX_PANEL_HEIGHT,
+  TOOLBAR_HEIGHT,
+} from '../const';
+
+export const usePanelSize = (enabledListLength: number) => {
+  const panelWidth = useGlobalStore(systemStatusSelectors.modelSwitchPanelWidth);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  const panelHeight = useMemo(
+    () =>
+      enabledListLength === 0
+        ? TOOLBAR_HEIGHT + ITEM_HEIGHT['no-provider'] + FOOTER_HEIGHT
+        : MAX_PANEL_HEIGHT,
+    [enabledListLength],
+  );
+
+  const handlePanelWidthChange = useCallback(
+    (width: number) => {
+      updateSystemStatus({ modelSwitchPanelWidth: width });
+    },
+    [updateSystemStatus],
+  );
+
+  return { handlePanelWidthChange, panelHeight, panelWidth };
+};

package/src/features/ModelSwitchPanel/hooks/usePanelState.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors/systemStatus';
+
+import type { GroupMode } from '../types';
+
+export const usePanelState = () => {
+  const groupMode = useGlobalStore(systemStatusSelectors.modelSwitchPanelGroupMode) as GroupMode;
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  const handleGroupModeChange = useCallback(
+    (mode: GroupMode) => {
+      updateSystemStatus({ modelSwitchPanelGroupMode: mode });
+    },
+    [updateSystemStatus],
+  );
+
+  return { groupMode, handleGroupModeChange };
+};