refactor: unify model picker behavior

Share model picker UI across chat, agents, and multi-run Prefer live provider limits with metadata fallback
2026-05-20 16:26:40 +03:00
parent d3be82e3d7
commit 966f35da6c
5 changed files with 1082 additions and 1799 deletions
@@ -1,16 +1,14 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { ProviderLogo } from '@/components/ui/ProviderLogo';
 import { Icon } from "@/components/icon/Icon";
 import { cn } from '@/lib/utils';
-import { isIMECompositionEvent } from '@/lib/ime';
 import { useConfigStore } from '@/stores/useConfigStore';
+import { useUIStore } from '@/stores/useUIStore';
 import { useModelLists } from '@/hooks/useModelLists';
-import type { ModelMetadata } from '@/types';
 import { useI18n } from '@/lib/i18n';
+import { ModelPickerList, type ModelPickerEntry, type ModelPickerProvider } from '@/components/model-picker/ModelPickerList';

 /** Chip height class - shared between chips and add button */
 const CHIP_HEIGHT_CLASS = 'h-7';
@@ -37,24 +35,6 @@ export const generateInstanceId = (): string => {
  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 };

-const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  compactDisplay: 'short',
-  maximumFractionDigits: 1,
-  minimumFractionDigits: 0,
-});
-
-const formatTokens = (value?: number | null) => {
-  if (typeof value !== 'number' || Number.isNaN(value)) {
-    return '';
-  }
-  if (value === 0) {
-    return '0';
-  }
-  const formatted = COMPACT_NUMBER_FORMATTER.format(value);
-  return formatted.endsWith('.0') ? formatted.slice(0, -2) : formatted;
-};
-
 /**
 * Model selection chip with remove button.
 * Shows instance index (e.g., "(2)") when same model is selected multiple times.
@@ -129,17 +109,16 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
  triggerIcon,
 }) => {
  const { t } = useI18n();
-  const providers = useConfigStore((state) => state.providers);
+  const providers = useConfigStore((state) => state.providers) as ModelPickerProvider[];
  const modelsMetadata = useConfigStore((state) => state.modelsMetadata);
+  const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
+  const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
  const { favoriteModelsList, recentModelsList } = useModelLists();
  const [isOpen, setIsOpen] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState('');
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
  const [availableHeight, setAvailableHeight] = React.useState<number | null>(null);
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
  const dropdownRef = React.useRef<HTMLDivElement>(null);
  const triggerRef = React.useRef<HTMLButtonElement>(null);
-  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
  const isSingleSelect = maxModels === 1;
  const canAddModel = maxModels === undefined || selectedModels.length < maxModels || isSingleSelect;

@@ -161,66 +140,6 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
    return sameModels.findIndex(m => m.instanceId === model.instanceId) + 1;
  }, [selectedModels]);

-  const getModelMetadata = (provId: string, modId: string): ModelMetadata | undefined => {
-    const key = `${provId}/${modId}`;
-    return modelsMetadata.get(key);
-  };
-
-  const getModelDisplayName = (model: Record<string, unknown>) => {
-    const name = model?.name || model?.id || '';
-    const nameStr = String(name);
-    if (nameStr.length > 40) {
-      return nameStr.substring(0, 37) + '...';
-    }
-    return nameStr;
-  };
-
-  // Filter helper
-  const filterByQuery = React.useCallback((modelName: string, providerName: string) => {
-    if (!searchQuery.trim()) return true;
-    const lowerQuery = searchQuery.toLowerCase();
-    return (
-      modelName.toLowerCase().includes(lowerQuery) ||
-      providerName.toLowerCase().includes(lowerQuery)
-    );
-  }, [searchQuery]);
-
-  // Filter favorites
-  const filteredFavorites = React.useMemo(() => {
-    return favoriteModelsList.filter(({ model, providerID }) => {
-      const provider = providers.find(p => p.id === providerID);
-      const providerName = provider?.name || providerID;
-      const modelName = getModelDisplayName(model);
-      return filterByQuery(modelName, providerName);
-    });
-  }, [favoriteModelsList, providers, filterByQuery]);
-
-  // Filter recents
-  const filteredRecents = React.useMemo(() => {
-    return recentModelsList.filter(({ model, providerID }) => {
-      const provider = providers.find(p => p.id === providerID);
-      const providerName = provider?.name || providerID;
-      const modelName = getModelDisplayName(model);
-      return filterByQuery(modelName, providerName);
-    });
-  }, [recentModelsList, providers, filterByQuery]);
-
-  // Filter providers
-  const filteredProviders = React.useMemo(() => {
-    return providers
-      .map((provider) => {
-        const models = Array.isArray(provider.models) ? provider.models : [];
-        const filteredModels = models.filter((model) => {
-          const modelName = getModelDisplayName(model);
-          return filterByQuery(modelName, provider.name || provider.id || '');
-        });
-        return { ...provider, models: filteredModels };
-      })
-      .filter((provider) => provider.models.length > 0);
-  }, [providers, filterByQuery]);
-
-  const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0;
-
  // Calculate available height: multi-run opens upward inside a scroller; fusion opens downward and may extend past the dialog.
  React.useEffect(() => {
    if (!isOpen || !triggerRef.current) return;
@@ -255,18 +174,10 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
    setAvailableHeight(Math.max(150, Math.min(300, spaceAbove)));
  }, [dropdownSide, isOpen]);

-  // Focus search input when opened
-  React.useEffect(() => {
-    if (isOpen && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [isOpen]);
-
  React.useEffect(() => {
    if (!canAddModel && isOpen) {
      setIsOpen(false);
      setSearchQuery('');
-      setSelectedIndex(0);
    }
  }, [canAddModel, isOpen]);

@@ -278,7 +189,6 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
        setSearchQuery('');
-        setSelectedIndex(0);
      }
    };

@@ -286,85 +196,39 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [isOpen]);

-  // Reset selection when search query changes
-  React.useEffect(() => {
-    setSelectedIndex(0);
-  }, [searchQuery]);
+  const handleSelectModel = React.useCallback((entry: ModelPickerEntry) => {
+    const nextModel = {
+      providerID: entry.providerID,
+      modelID: entry.modelID,
+      displayName: (entry.model.name as string) || entry.modelID,
+      instanceId: generateInstanceId(),
+    };
+    if (isSingleSelect && selectedModels.length > 0 && onUpdate) {
+      onUpdate(0, nextModel);
+    } else {
+      onAdd(nextModel);
+    }
+    if (isSingleSelect) {
+      setIsOpen(false);
+      setSearchQuery('');
+    }
+  }, [isSingleSelect, onAdd, onUpdate, selectedModels.length]);

-  // Render a model row
-  const renderModelRow = (
-    model: Record<string, unknown>,
-    providerID: string,
-    modelID: string,
-    keyPrefix: string,
-    flatIndex: number,
-    isHighlighted: boolean
-  ) => {
-    const key = `${providerID}:${modelID}`;
-    const selectionCount = modelCounts.get(key) || 0;
-    const metadata = getModelMetadata(providerID, modelID);
-    const contextTokens = formatTokens(metadata?.limit?.context);
-
-    const showProviderLogo = keyPrefix === 'fav' || keyPrefix === 'recent';
-
-    return (
-      <button
-        key={`${keyPrefix}-${key}`}
-        ref={(el) => { itemRefs.current[flatIndex] = el; }}
-        type="button"
-        disabled={!canAddModel}
-        onClick={() => {
-          const nextModel = {
-            providerID,
-            modelID,
-            displayName: (model.name as string) || modelID,
-            instanceId: generateInstanceId(),
-          };
-          if (isSingleSelect && selectedModels.length > 0 && onUpdate) {
-            onUpdate(0, nextModel);
-            setIsOpen(false);
-            setSearchQuery('');
-            setSelectedIndex(0);
-            return;
-          }
-          onAdd({
-            ...nextModel,
-          });
-          if (isSingleSelect) {
-            setIsOpen(false);
-            setSearchQuery('');
-            setSelectedIndex(0);
-          }
-          // Don't close dropdown - allow selecting multiple
-        }}
-        onMouseEnter={() => setSelectedIndex(flatIndex)}
-        className={cn(
-          'w-full text-left px-2 py-1.5 rounded-md typography-meta transition-colors flex items-center gap-2',
-          canAddModel && (isHighlighted ? 'bg-interactive-selection' : 'hover:bg-interactive-hover/50'),
-          !canAddModel && 'cursor-not-allowed opacity-60'
-        )}
-      >
-        <div className="flex items-center gap-1.5 flex-1 min-w-0">
-          {showProviderLogo && (
-            <ProviderLogo providerId={providerID} className="h-3.5 w-3.5 flex-shrink-0" />
-          )}
-          <span className="font-medium truncate">
-            {getModelDisplayName(model)}
-          </span>
-          {contextTokens && (
-            <span className="typography-micro text-muted-foreground flex-shrink-0">
-              {contextTokens}
-            </span>
-          )}
-        </div>
-        {selectionCount > 0 && (
-          <span className="typography-micro text-muted-foreground flex-shrink-0">
-            ×{selectionCount}
-          </span>
-        )}
-      </button>
-    );
-  };
+  const labels = React.useMemo(() => ({
+    searchPlaceholder: t('multirun.modelMultiSelect.search.placeholder'),
+    noResults: t('multirun.modelMultiSelect.search.noResults'),
+    favorites: t('multirun.modelMultiSelect.sections.favorites'),
+    recent: t('multirun.modelMultiSelect.sections.recent'),
+    keyboardHint: t('multirun.modelMultiSelect.keyboard.hint'),
+    favorite: t('settings.agents.modelSelector.actions.favorite'),
+    unfavorite: t('settings.agents.modelSelector.actions.unfavorite'),
+    capabilities: t('chat.modelControls.capabilities'),
+    capabilityToolCalling: t('chat.modelControls.capability.toolCalling'),
+    capabilityReasoning: t('chat.modelControls.capability.reasoning'),
+    input: t('chat.modelControls.input'),
+    output: t('chat.modelControls.output'),
+    costPerMillion: t('chat.modelControls.costPerMillion'),
+  }), [t]);

  return (
    <div className="space-y-2">
@@ -390,179 +254,41 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
            {addButtonLabel ?? t('multirun.modelMultiSelect.actions.addModel')}
          </Button>

-          {isOpen && (() => {
-            // Build flat list for keyboard navigation
-            type FlatModelItem = { model: Record<string, unknown>; providerID: string; modelID: string; section: string };
-            const flatModelList: FlatModelItem[] = [];
-
-            filteredFavorites.forEach(({ model, providerID, modelID }) => {
-              flatModelList.push({ model, providerID, modelID, section: 'fav' });
-            });
-            filteredRecents.forEach(({ model, providerID, modelID }) => {
-              flatModelList.push({ model, providerID, modelID, section: 'recent' });
-            });
-            filteredProviders.forEach((provider) => {
-              provider.models.forEach((model) => {
-                flatModelList.push({ model, providerID: provider.id, modelID: model.id as string, section: 'provider' });
-              });
-            });
-
-            const totalItems = flatModelList.length;
-
-            // Handle keyboard navigation
-            const handleKeyDown = (e: React.KeyboardEvent) => {
-              if (isIMECompositionEvent(e)) {
-                return;
-              }
-              if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                e.stopPropagation();
-                const nextIndex = (selectedIndex + 1) % Math.max(1, totalItems);
-                setSelectedIndex(nextIndex);
-                setTimeout(() => {
-                  itemRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                }, 0);
-              } else if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                e.stopPropagation();
-                const prevIndex = (selectedIndex - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems);
-                setSelectedIndex(prevIndex);
-                setTimeout(() => {
-                  itemRefs.current[prevIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                }, 0);
-              } else if (e.key === 'Enter') {
-                e.preventDefault();
-                e.stopPropagation();
-                const selectedItem = flatModelList[selectedIndex];
-                if (selectedItem && canAddModel) {
-                  const nextModel = {
-                    providerID: selectedItem.providerID,
-                    modelID: selectedItem.modelID,
-                    displayName: (selectedItem.model.name as string) || selectedItem.modelID,
-                    instanceId: generateInstanceId(),
-                  };
-                  if (isSingleSelect && selectedModels.length > 0 && onUpdate) {
-                    onUpdate(0, nextModel);
-                  } else {
-                    onAdd(nextModel);
-                  }
-                  if (isSingleSelect) {
-                    setIsOpen(false);
-                    setSearchQuery('');
-                    setSelectedIndex(0);
-                  }
-                }
-              } else if (e.key === 'Escape') {
-                e.preventDefault();
-                e.stopPropagation();
-                setIsOpen(false);
-                setSearchQuery('');
-                setSelectedIndex(0);
-              }
-            };
-
-            let currentFlatIndex = 0;
-
-            return (
-              <div
-                className={cn(
-                  'absolute left-0 z-50 w-[min(420px,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] flex flex-col overflow-hidden rounded-xl border border-border/50 shadow-lg',
-                  dropdownSide === 'top' ? 'bottom-full mb-1' : 'top-full mt-1',
-                  dropdownClassName,
-                )}
-                style={{
-                  background: 'linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))',
+          {isOpen ? (
+            <div
+              className={cn(
+                'absolute left-0 z-50 w-[min(420px,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] flex flex-col overflow-hidden rounded-xl border border-border/50 shadow-lg',
+                dropdownSide === 'top' ? 'bottom-full mb-1' : 'top-full mt-1',
+                dropdownClassName,
+              )}
+              style={{
+                background: 'linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))',
+              }}
+            >
+              <ModelPickerList
+                providers={providers}
+                favoriteModels={favoriteModelsList}
+                recentModels={recentModelsList}
+                modelsMetadata={modelsMetadata}
+                searchQuery={searchQuery}
+                onSearchQueryChange={setSearchQuery}
+                onSelect={handleSelectModel}
+                labels={labels}
+                selectionCount={(entry) => modelCounts.get(`${entry.providerID}:${entry.modelID}`) || 0}
+                disabled={!canAddModel}
+                maxHeightClassName="flex-1"
+                maxHeightStyle={{ maxHeight: availableHeight ? `${availableHeight}px` : '300px' }}
+                stickyHeaders
+                tooltipsEnabled={isOpen}
+                isFavorite={(entry) => isFavoriteModel(entry.providerID, entry.modelID)}
+                onToggleFavorite={(entry) => toggleFavoriteModel(entry.providerID, entry.modelID)}
+                onEscape={() => {
+                  setIsOpen(false);
+                  setSearchQuery('');
                }}
-              >
-                {/* Search input */}
-                <div className="p-2 border-b border-border/40">
-                  <div className="relative">
-                    <Icon name="search" className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-                    <Input
-                      ref={searchInputRef}
-                      type="text"
-                      placeholder={t('multirun.modelMultiSelect.search.placeholder')}
-                      value={searchQuery}
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                      onKeyDown={handleKeyDown}
-                      className="h-8 pl-8 typography-meta"
-                    />
-                  </div>
-                </div>
-
-                {/* Models list */}
-                <ScrollableOverlay
-                  outerClassName="flex-1"
-                  style={{ maxHeight: availableHeight ? `${availableHeight}px` : '300px' }}
-                >
-                  <div className="p-1">
-                    {!hasResults && (
-                      <div className="px-2 py-4 text-center typography-meta text-muted-foreground">
-                        {t('multirun.modelMultiSelect.search.noResults')}
-                      </div>
-                    )}
-
-                    {/* Favorites Section */}
-                    {filteredFavorites.length > 0 && (
-                      <>
-                        <div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider sticky top-0 z-10 -mx-1 flex items-center gap-2 border-b border-border/30 px-3 py-1.5 [background:linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))]">
-                          <Icon name="star-fill" className="h-4 w-4 text-primary" />
-                          {t('multirun.modelMultiSelect.sections.favorites')}
-                        </div>
-                        {filteredFavorites.map(({ model, providerID, modelID }) => {
-                          const idx = currentFlatIndex++;
-                          return renderModelRow(model, providerID, modelID, 'fav', idx, selectedIndex === idx);
-                        })}
-                      </>
-                    )}
-
-                    {/* Recents Section */}
-                    {filteredRecents.length > 0 && (
-                      <>
-                        {filteredFavorites.length > 0 && <div className="h-px bg-border/40 my-1" />}
-                        <div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider sticky top-0 z-10 -mx-1 flex items-center gap-2 border-b border-border/30 px-3 py-1.5 [background:linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))]">
-                          <Icon name="time" className="h-4 w-4" />
-                          {t('multirun.modelMultiSelect.sections.recent')}
-                        </div>
-                        {filteredRecents.map(({ model, providerID, modelID }) => {
-                          const idx = currentFlatIndex++;
-                          return renderModelRow(model, providerID, modelID, 'recent', idx, selectedIndex === idx);
-                        })}
-                      </>
-                    )}
-
-                    {/* Separator before providers */}
-                    {(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 && (
-                      <div className="h-px bg-border/40 my-1" />
-                    )}
-
-                    {/* All Providers - Flat List */}
-                    {filteredProviders.map((provider, index) => (
-                      <React.Fragment key={provider.id}>
-                        {index > 0 && <div className="h-px bg-border/40 my-1" />}
-                        <div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider sticky top-0 z-10 -mx-1 flex items-center gap-2 border-b border-border/30 px-3 py-1.5 [background:linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))]">
-                          <ProviderLogo
-                            providerId={provider.id}
-                            className="h-4 w-4 flex-shrink-0"
-                          />
-                          {provider.name}
-                        </div>
-                        {provider.models.map((model) => {
-                          const idx = currentFlatIndex++;
-                          return renderModelRow(model, provider.id, model.id as string, 'provider', idx, selectedIndex === idx);
-                        })}
-                      </React.Fragment>
-                    ))}
-                  </div>
-                </ScrollableOverlay>
-
-                {/* Keyboard hints footer */}
-                <div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
-                  {t('multirun.modelMultiSelect.keyboard.hint')}
-                </div>
-              </div>
-            );
-          })()}
+              />
+            </div>
+          ) : null}
        </div>

        {/* Selected models */}
@@ -574,7 +300,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
              const instanceIndex = getInstanceIndex(model);

              const provider = providers.find((p) => p.id === model.providerID);
-              const providerModel = provider?.models.find((m: Record<string, unknown>) => (m as { id?: string }).id === model.modelID) as
+              const providerModel = provider?.models?.find((m: Record<string, unknown>) => (m as { id?: string }).id === model.modelID) as
                | { variants?: Record<string, unknown> }
                | undefined;
              const variantKeys = providerModel?.variants ? Object.keys(providerModel.variants) : [];