refactor: unify model picker behavior
Share model picker UI across chat, agents, and multi-run Prefer live provider limits with metadata fallback
This commit is contained in:
Bohdan Triapitsyn
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,708 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
DndContext,
|
||||
PointerSensor,
|
||||
closestCenter,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
} from '@dnd-kit/core';
|
||||
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { CSS as DndCSS } from '@dnd-kit/utilities';
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { mergeModelMetadataWithLiveModel } from '@/lib/modelMetadata';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ModelMetadata } from '@/types';
|
||||
|
||||
export type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
|
||||
|
||||
export type ModelPickerProvider = {
|
||||
id: string;
|
||||
name?: string;
|
||||
models?: ProviderModel[];
|
||||
};
|
||||
|
||||
export type ModelPickerEntry = {
|
||||
model: ProviderModel;
|
||||
providerID: string;
|
||||
modelID: string;
|
||||
};
|
||||
|
||||
export type ModelPickerFavoriteEntry = ModelPickerEntry;
|
||||
|
||||
type HiddenModel = { providerID: string; modelID: string };
|
||||
|
||||
type IndexSelectionStore = {
|
||||
getSnapshot: () => number;
|
||||
subscribe: (listener: () => void) => () => void;
|
||||
subscribeIndex: (index: number, listener: () => void) => () => void;
|
||||
set: (value: number) => void;
|
||||
};
|
||||
|
||||
const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
|
||||
notation: 'compact',
|
||||
compactDisplay: 'short',
|
||||
maximumFractionDigits: 1,
|
||||
minimumFractionDigits: 0,
|
||||
});
|
||||
|
||||
const CURRENCY_FORMATTER = new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
maximumFractionDigits: 4,
|
||||
minimumFractionDigits: 2,
|
||||
});
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
const formatModelContextTokens = (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;
|
||||
};
|
||||
|
||||
const formatCost = (value?: number | null) => {
|
||||
if (typeof value !== 'number' || !Number.isFinite(value)) return '—';
|
||||
return CURRENCY_FORMATTER.format(value);
|
||||
};
|
||||
|
||||
const hasTooltipMetadata = (metadata?: ModelMetadata) => {
|
||||
if (!metadata) return false;
|
||||
return Boolean(
|
||||
metadata.tool_call ||
|
||||
metadata.reasoning ||
|
||||
metadata.cost?.input !== undefined ||
|
||||
metadata.cost?.output !== undefined ||
|
||||
(metadata.modalities?.input?.length ?? 0) > 0 ||
|
||||
(metadata.modalities?.output?.length ?? 0) > 0,
|
||||
);
|
||||
};
|
||||
|
||||
const ModelPickerRowTooltip: React.FC<{
|
||||
metadata?: ModelMetadata;
|
||||
active: boolean;
|
||||
labels: ModelPickerListProps['labels'];
|
||||
children: React.ReactElement;
|
||||
}> = ({ metadata, active, labels, children }) => {
|
||||
const [delayedActive, setDelayedActive] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!active) {
|
||||
setDelayedActive(false);
|
||||
return;
|
||||
}
|
||||
const timeout = window.setTimeout(() => setDelayedActive(true), 450);
|
||||
return () => window.clearTimeout(timeout);
|
||||
}, [active]);
|
||||
|
||||
if (!hasTooltipMetadata(metadata)) return children;
|
||||
|
||||
const inputModalities = metadata?.modalities?.input ?? [];
|
||||
const outputModalities = metadata?.modalities?.output ?? [];
|
||||
const capabilities = [
|
||||
metadata?.tool_call ? labels.capabilityToolCalling : null,
|
||||
metadata?.reasoning ? labels.capabilityReasoning : null,
|
||||
].filter(Boolean);
|
||||
|
||||
return (
|
||||
<Tooltip delayDuration={0} open={active && delayedActive} onOpenChange={() => {}}>
|
||||
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
||||
{active && delayedActive ? (
|
||||
<TooltipContent side="right" sideOffset={8} className="max-w-xs text-left transition-none data-[starting-style]:opacity-100 data-[starting-style]:scale-100 data-[ending-style]:opacity-100 data-[ending-style]:scale-100">
|
||||
<div className="flex flex-col gap-2 text-left text-xs">
|
||||
{capabilities.length > 0 ? (
|
||||
<div className="flex items-center justify-between gap-3 text-muted-foreground">
|
||||
<span className="typography-meta font-medium">{labels.capabilities}</span>
|
||||
<span className="typography-meta text-foreground">{capabilities.join(', ')}</span>
|
||||
</div>
|
||||
) : null}
|
||||
{inputModalities.length > 0 ? (
|
||||
<div className="flex items-center justify-between gap-3 text-muted-foreground">
|
||||
<span className="typography-meta font-medium">{labels.input}</span>
|
||||
<span className="typography-meta text-foreground">{inputModalities.join(', ')}</span>
|
||||
</div>
|
||||
) : null}
|
||||
{outputModalities.length > 0 ? (
|
||||
<div className="flex items-center justify-between gap-3 text-muted-foreground">
|
||||
<span className="typography-meta font-medium">{labels.output}</span>
|
||||
<span className="typography-meta text-foreground">{outputModalities.join(', ')}</span>
|
||||
</div>
|
||||
) : null}
|
||||
{(metadata?.cost?.input !== undefined || metadata?.cost?.output !== undefined) ? (
|
||||
<div className="flex items-center justify-between gap-3 text-muted-foreground">
|
||||
<span className="typography-meta font-medium">{labels.costPerMillion}</span>
|
||||
<span className="typography-meta text-foreground">In {formatCost(metadata?.cost?.input)} · Out {formatCost(metadata?.cost?.output)}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
) : null}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
const createIndexSelectionStore = (): IndexSelectionStore => {
|
||||
let value = 0;
|
||||
const listeners = new Set<() => void>();
|
||||
const listenersByIndex = new Map<number, Set<() => void>>();
|
||||
const notify = (index: number) => {
|
||||
const listeners = listenersByIndex.get(index);
|
||||
if (!listeners) return;
|
||||
for (const listener of listeners) listener();
|
||||
};
|
||||
|
||||
return {
|
||||
getSnapshot: () => value,
|
||||
subscribe: (listener) => {
|
||||
listeners.add(listener);
|
||||
return () => listeners.delete(listener);
|
||||
},
|
||||
subscribeIndex: (index, listener) => {
|
||||
let listeners = listenersByIndex.get(index);
|
||||
if (!listeners) {
|
||||
listeners = new Set();
|
||||
listenersByIndex.set(index, listeners);
|
||||
}
|
||||
listeners.add(listener);
|
||||
return () => {
|
||||
listeners.delete(listener);
|
||||
if (listeners.size === 0) listenersByIndex.delete(index);
|
||||
};
|
||||
},
|
||||
set: (nextValue) => {
|
||||
if (value === nextValue) return;
|
||||
const previousValue = value;
|
||||
value = nextValue;
|
||||
notify(previousValue);
|
||||
notify(nextValue);
|
||||
for (const listener of listeners) listener();
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const ModelPickerRowHighlight: React.FC<{
|
||||
store: IndexSelectionStore;
|
||||
index: number;
|
||||
renderVersion?: number;
|
||||
children: (isHighlighted: boolean) => React.ReactNode;
|
||||
}> = React.memo(({ store, index, children }) => {
|
||||
const [isHighlighted, setIsHighlighted] = React.useState(() => store.getSnapshot() === index);
|
||||
|
||||
React.useEffect(() => {
|
||||
const sync = () => setIsHighlighted(store.getSnapshot() === index);
|
||||
sync();
|
||||
return store.subscribeIndex(index, sync);
|
||||
}, [index, store]);
|
||||
|
||||
return <>{children(isHighlighted)}</>;
|
||||
});
|
||||
|
||||
const ModelPickerFooter: React.FC<{
|
||||
store: IndexSelectionStore;
|
||||
flatModelList: ModelPickerEntry[];
|
||||
footerContent: ModelPickerListProps['footerContent'];
|
||||
fallback: React.ReactNode;
|
||||
}> = ({ store, flatModelList, footerContent, fallback }) => {
|
||||
const [selectedIndex, setSelectedIndex] = React.useState(() => store.getSnapshot());
|
||||
|
||||
React.useEffect(() => store.subscribe(() => setSelectedIndex(store.getSnapshot())), [store]);
|
||||
|
||||
const activeEntry = flatModelList[selectedIndex];
|
||||
return <>{typeof footerContent === 'function' ? footerContent(activeEntry) : (footerContent ?? fallback)}</>;
|
||||
};
|
||||
|
||||
type SortableFavoriteHandleProps = {
|
||||
attributes: ReturnType<typeof useSortable>['attributes'];
|
||||
listeners: ReturnType<typeof useSortable>['listeners'];
|
||||
setActivatorNodeRef: ReturnType<typeof useSortable>['setActivatorNodeRef'];
|
||||
isDragging: boolean;
|
||||
};
|
||||
|
||||
const SortableFavoriteModelRow: React.FC<{
|
||||
id: string;
|
||||
disabled?: boolean;
|
||||
children: (dragHandleProps: SortableFavoriteHandleProps) => React.ReactNode;
|
||||
}> = ({ id, disabled = false, children }) => {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
setActivatorNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id, disabled });
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={{
|
||||
transform: DndCSS.Transform.toString(transform),
|
||||
transition,
|
||||
}}
|
||||
className={cn(isDragging && 'opacity-60')}
|
||||
>
|
||||
{children({ attributes, listeners, setActivatorNodeRef, isDragging })}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const STICKY_HEADER_OFFSET = 32;
|
||||
|
||||
const scrollIntoView = (container: HTMLElement | null, node: HTMLElement | null) => {
|
||||
if (!node) return;
|
||||
if (!container) {
|
||||
node.scrollIntoView({ block: 'nearest' });
|
||||
return;
|
||||
}
|
||||
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const nodeRect = node.getBoundingClientRect();
|
||||
const top = nodeRect.top - containerRect.top + container.scrollTop;
|
||||
const bottom = top + nodeRect.height;
|
||||
const viewTop = container.scrollTop;
|
||||
const viewBottom = viewTop + container.clientHeight;
|
||||
const viewTopWithHeader = viewTop + STICKY_HEADER_OFFSET;
|
||||
const target = top < viewTopWithHeader
|
||||
? top - STICKY_HEADER_OFFSET
|
||||
: bottom > viewBottom
|
||||
? bottom - container.clientHeight
|
||||
: viewTop;
|
||||
const max = Math.max(0, container.scrollHeight - container.clientHeight);
|
||||
container.scrollTop = Math.max(0, Math.min(target, max));
|
||||
};
|
||||
|
||||
interface ModelPickerListProps {
|
||||
providers: ModelPickerProvider[];
|
||||
favoriteModels: ModelPickerFavoriteEntry[];
|
||||
recentModels: ModelPickerFavoriteEntry[];
|
||||
modelsMetadata: Map<string, ModelMetadata>;
|
||||
searchQuery: string;
|
||||
onSearchQueryChange: (value: string) => void;
|
||||
onSelect: (entry: ModelPickerEntry) => void;
|
||||
labels: {
|
||||
searchPlaceholder: string;
|
||||
noResults: string;
|
||||
favorites: string;
|
||||
recent: string;
|
||||
keyboardHint: string;
|
||||
notSelected?: string;
|
||||
favorite?: string;
|
||||
unfavorite?: string;
|
||||
capabilities?: string;
|
||||
capabilityToolCalling?: string;
|
||||
capabilityReasoning?: string;
|
||||
input?: string;
|
||||
output?: string;
|
||||
costPerMillion?: string;
|
||||
};
|
||||
selectedModel?: { providerID: string; modelID: string } | null;
|
||||
hiddenModels?: HiddenModel[];
|
||||
allowedProviderIds?: string[];
|
||||
includeNotSelected?: boolean;
|
||||
onSelectNone?: () => void;
|
||||
selectionCount?: (entry: ModelPickerEntry) => number;
|
||||
disabled?: boolean;
|
||||
maxHeightClassName?: string;
|
||||
maxHeightStyle?: React.CSSProperties;
|
||||
sectionHeaderClassName?: string;
|
||||
rowClassName?: string;
|
||||
stickyHeaders?: boolean;
|
||||
autoFocus?: boolean;
|
||||
onEscape?: () => void;
|
||||
isFavorite?: (entry: ModelPickerEntry) => boolean;
|
||||
onToggleFavorite?: (entry: ModelPickerEntry) => void;
|
||||
renderRowEnd?: (entry: ModelPickerEntry, state: { isHighlighted: boolean; isSelected: boolean }) => React.ReactNode;
|
||||
onActiveKeyDown?: (event: React.KeyboardEvent, entry: ModelPickerEntry | undefined) => void;
|
||||
onActiveEntryChange?: (entry: ModelPickerEntry | undefined) => void;
|
||||
onVariantKey?: (event: React.KeyboardEvent, entry: ModelPickerEntry) => boolean;
|
||||
onReorderFavorite?: (active: ModelPickerEntry, over: ModelPickerEntry) => void;
|
||||
reorderFavoriteAriaLabel?: string;
|
||||
reorderFavoriteTitle?: string;
|
||||
footerContent?: React.ReactNode | ((activeEntry: ModelPickerEntry | undefined) => React.ReactNode);
|
||||
renderVersion?: number;
|
||||
tooltipsEnabled?: boolean;
|
||||
}
|
||||
|
||||
export const ModelPickerList: React.FC<ModelPickerListProps> = ({
|
||||
providers,
|
||||
favoriteModels,
|
||||
recentModels,
|
||||
modelsMetadata,
|
||||
searchQuery,
|
||||
onSearchQueryChange,
|
||||
onSelect,
|
||||
labels,
|
||||
selectedModel,
|
||||
hiddenModels = [],
|
||||
allowedProviderIds,
|
||||
includeNotSelected = false,
|
||||
onSelectNone,
|
||||
selectionCount,
|
||||
disabled = false,
|
||||
maxHeightClassName = 'max-h-[min(400px,calc(100dvh-12rem))] flex-1',
|
||||
maxHeightStyle,
|
||||
sectionHeaderClassName,
|
||||
rowClassName,
|
||||
stickyHeaders = true,
|
||||
autoFocus = true,
|
||||
onEscape,
|
||||
isFavorite,
|
||||
onToggleFavorite,
|
||||
renderRowEnd,
|
||||
onActiveKeyDown,
|
||||
onActiveEntryChange,
|
||||
onVariantKey,
|
||||
onReorderFavorite,
|
||||
reorderFavoriteAriaLabel,
|
||||
reorderFavoriteTitle,
|
||||
footerContent,
|
||||
renderVersion,
|
||||
tooltipsEnabled = true,
|
||||
}) => {
|
||||
const selectionStoreRef = React.useRef<IndexSelectionStore | null>(null);
|
||||
if (!selectionStoreRef.current) selectionStoreRef.current = createIndexSelectionStore();
|
||||
const selectionStore = selectionStoreRef.current;
|
||||
const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
|
||||
const scrollRef = React.useRef<HTMLElement | null>(null);
|
||||
const keyboardOwnsSelectionRef = React.useRef(false);
|
||||
const lastMousePositionRef = React.useRef<{ x: number; y: number } | null>(null);
|
||||
const [collapsedSections, setCollapsedSections] = React.useState<Set<string>>(() => new Set());
|
||||
const favoriteRowSensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
|
||||
);
|
||||
|
||||
const allowedProviderSet = React.useMemo(() => {
|
||||
if (!allowedProviderIds || allowedProviderIds.length === 0) return null;
|
||||
return new Set(allowedProviderIds);
|
||||
}, [allowedProviderIds]);
|
||||
|
||||
const providerById = React.useMemo(() => new Map(providers.map((provider) => [provider.id, provider])), [providers]);
|
||||
|
||||
const isHidden = React.useCallback((providerID: string, modelID: string) => {
|
||||
return hiddenModels.some((hidden) => hidden.providerID === providerID && hidden.modelID === modelID);
|
||||
}, [hiddenModels]);
|
||||
|
||||
const matchesQuery = React.useCallback((modelName: string, providerName: string) => {
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
if (!query) return true;
|
||||
return modelName.toLowerCase().includes(query) || providerName.toLowerCase().includes(query);
|
||||
}, [searchQuery]);
|
||||
|
||||
const filteredFavorites = React.useMemo(() => favoriteModels.filter(({ model, providerID, modelID }) => {
|
||||
if (allowedProviderSet && !allowedProviderSet.has(providerID)) return false;
|
||||
if (isHidden(providerID, modelID)) return false;
|
||||
const providerName = providerById.get(providerID)?.name || providerID;
|
||||
return matchesQuery(getModelDisplayName(model), providerName);
|
||||
}), [allowedProviderSet, favoriteModels, isHidden, matchesQuery, providerById]);
|
||||
|
||||
const filteredRecents = React.useMemo(() => recentModels.filter(({ model, providerID, modelID }) => {
|
||||
if (allowedProviderSet && !allowedProviderSet.has(providerID)) return false;
|
||||
if (isHidden(providerID, modelID)) return false;
|
||||
const providerName = providerById.get(providerID)?.name || providerID;
|
||||
return matchesQuery(getModelDisplayName(model), providerName);
|
||||
}), [allowedProviderSet, isHidden, matchesQuery, providerById, recentModels]);
|
||||
|
||||
const filteredProviders = React.useMemo(() => providers
|
||||
.filter((provider) => !allowedProviderSet || allowedProviderSet.has(provider.id))
|
||||
.map((provider) => {
|
||||
const models = Array.isArray(provider.models) ? provider.models : [];
|
||||
const filteredModels = models.filter((model) => {
|
||||
const modelID = typeof model.id === 'string' ? model.id : '';
|
||||
if (!modelID || isHidden(provider.id, modelID)) return false;
|
||||
return matchesQuery(getModelDisplayName(model), provider.name || provider.id);
|
||||
});
|
||||
return { ...provider, models: filteredModels };
|
||||
})
|
||||
.filter((provider) => provider.models.length > 0), [allowedProviderSet, isHidden, matchesQuery, providers]);
|
||||
|
||||
const flatModelList = React.useMemo(() => {
|
||||
const items: ModelPickerEntry[] = [];
|
||||
if (!collapsedSections.has('favorites')) filteredFavorites.forEach((entry) => items.push(entry));
|
||||
if (!collapsedSections.has('recent')) filteredRecents.forEach((entry) => items.push(entry));
|
||||
filteredProviders.forEach((provider) => {
|
||||
if (collapsedSections.has(`provider:${provider.id}`)) return;
|
||||
provider.models.forEach((model) => items.push({ model, providerID: provider.id, modelID: model.id as string }));
|
||||
});
|
||||
return items;
|
||||
}, [collapsedSections, filteredFavorites, filteredProviders, filteredRecents]);
|
||||
|
||||
const hasResults = flatModelList.length > 0;
|
||||
const favoriteSortingEnabled = Boolean(onReorderFavorite) && searchQuery.trim().length === 0 && filteredFavorites.length > 1;
|
||||
const favoriteLookup: Map<string, ModelPickerEntry> = React.useMemo(() => new Map(
|
||||
filteredFavorites.map((entry) => [`${entry.providerID}:${entry.modelID}`, entry] as const),
|
||||
), [filteredFavorites]);
|
||||
|
||||
React.useEffect(() => {
|
||||
selectionStore.set(0);
|
||||
}, [searchQuery, selectionStore]);
|
||||
|
||||
const selectIndex = React.useCallback((index: number) => {
|
||||
selectionStore.set(index);
|
||||
onActiveEntryChange?.(flatModelList[index]);
|
||||
}, [flatModelList, onActiveEntryChange, selectionStore]);
|
||||
|
||||
const moveSelection = React.useCallback((direction: 1 | -1) => {
|
||||
const total = flatModelList.length;
|
||||
if (total === 0) return;
|
||||
keyboardOwnsSelectionRef.current = true;
|
||||
lastMousePositionRef.current = null;
|
||||
const currentIndex = selectionStore.getSnapshot();
|
||||
const nextIndex = (currentIndex + direction + total) % total;
|
||||
selectionStore.set(nextIndex);
|
||||
onActiveEntryChange?.(flatModelList[nextIndex]);
|
||||
requestAnimationFrame(() => scrollIntoView(scrollRef.current, itemRefs.current[nextIndex]));
|
||||
}, [flatModelList, onActiveEntryChange, selectionStore]);
|
||||
|
||||
React.useEffect(() => {
|
||||
onActiveEntryChange?.(flatModelList[selectionStore.getSnapshot()]);
|
||||
}, [flatModelList, onActiveEntryChange, selectionStore]);
|
||||
|
||||
const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
|
||||
if (event.defaultPrevented) return;
|
||||
event.stopPropagation();
|
||||
if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
|
||||
const selected = flatModelList[selectionStore.getSnapshot()];
|
||||
if (selected && onVariantKey?.(event, selected)) return;
|
||||
}
|
||||
onActiveKeyDown?.(event, flatModelList[selectionStore.getSnapshot()]);
|
||||
if (event.defaultPrevented) return;
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
moveSelection(1);
|
||||
return;
|
||||
}
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
moveSelection(-1);
|
||||
return;
|
||||
}
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
const selected = flatModelList[selectionStore.getSnapshot()];
|
||||
if (selected && !disabled) onSelect(selected);
|
||||
return;
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
onEscape?.();
|
||||
}
|
||||
}, [disabled, flatModelList, moveSelection, onActiveKeyDown, onEscape, onSelect, onVariantKey, selectionStore]);
|
||||
|
||||
const headerClassName = cn(
|
||||
'typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 border-b border-border/30',
|
||||
stickyHeaders && 'sticky top-0 z-10 [background:linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))]',
|
||||
sectionHeaderClassName,
|
||||
);
|
||||
|
||||
let currentFlatIndex = 0;
|
||||
|
||||
const renderRow = (entry: ModelPickerEntry, keyPrefix: string, showProviderLogo: boolean, rowIndex: number, dragHandleProps?: SortableFavoriteHandleProps | null) => {
|
||||
const metadata = mergeModelMetadataWithLiveModel(entry.providerID, entry.model, modelsMetadata.get(`${entry.providerID}/${entry.modelID}`));
|
||||
const contextTokens = formatModelContextTokens(metadata?.limit?.context);
|
||||
const count = selectionCount?.(entry) ?? 0;
|
||||
const isSelected = selectedModel?.providerID === entry.providerID && selectedModel.modelID === entry.modelID;
|
||||
const favorite = isFavorite?.(entry) ?? false;
|
||||
|
||||
const handleMouseActivity = (event: React.MouseEvent) => {
|
||||
const nextPosition = { x: event.clientX, y: event.clientY };
|
||||
const previousPosition = lastMousePositionRef.current;
|
||||
const pointerMoved = !previousPosition || previousPosition.x !== nextPosition.x || previousPosition.y !== nextPosition.y;
|
||||
lastMousePositionRef.current = nextPosition;
|
||||
|
||||
if (keyboardOwnsSelectionRef.current && !previousPosition) return;
|
||||
if (keyboardOwnsSelectionRef.current && !pointerMoved) return;
|
||||
if (keyboardOwnsSelectionRef.current && pointerMoved) keyboardOwnsSelectionRef.current = false;
|
||||
selectIndex(rowIndex);
|
||||
};
|
||||
|
||||
return (
|
||||
<ModelPickerRowHighlight key={`${keyPrefix}-${entry.providerID}-${entry.modelID}`} store={selectionStore} index={rowIndex} renderVersion={renderVersion}>
|
||||
{(isHighlighted) => {
|
||||
const rowElement = (
|
||||
<div
|
||||
ref={(el) => { itemRefs.current[rowIndex] = el; }}
|
||||
role="option"
|
||||
aria-selected={isSelected}
|
||||
aria-disabled={disabled || undefined}
|
||||
tabIndex={-1}
|
||||
onClick={() => { if (!disabled) onSelect(entry); }}
|
||||
onKeyDown={(event) => {
|
||||
if (disabled) return;
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
onSelect(entry);
|
||||
}
|
||||
}}
|
||||
onMouseEnter={handleMouseActivity}
|
||||
onMouseMove={handleMouseActivity}
|
||||
className={cn(
|
||||
'w-full text-left px-2 py-1.5 rounded-md typography-meta flex items-center gap-2 cursor-pointer',
|
||||
!disabled && (isHighlighted ? 'bg-interactive-selection' : 'hover:bg-interactive-hover/50'),
|
||||
disabled && 'cursor-not-allowed opacity-60',
|
||||
rowClassName,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
{dragHandleProps ? (
|
||||
<button type="button" ref={dragHandleProps.setActivatorNodeRef} {...dragHandleProps.attributes} {...dragHandleProps.listeners} disabled={disabled} onClick={(event) => { event.preventDefault(); event.stopPropagation(); }} className="model-favorite-drag-handle flex size-4 flex-shrink-0 items-center justify-center text-muted-foreground hover:text-foreground disabled:pointer-events-none" aria-label={reorderFavoriteAriaLabel} title={reorderFavoriteTitle}>
|
||||
<Icon name="draggable" className="size-3.5" />
|
||||
</button>
|
||||
) : null}
|
||||
{showProviderLogo ? <ProviderLogo providerId={entry.providerID} className="h-3.5 w-3.5 flex-shrink-0" /> : null}
|
||||
<span className="font-medium truncate">{getModelDisplayName(entry.model)}</span>
|
||||
{contextTokens ? <span className="typography-micro text-muted-foreground flex-shrink-0">{contextTokens}</span> : null}
|
||||
</div>
|
||||
{count > 0 ? <span className="typography-micro text-muted-foreground flex-shrink-0">x{count}</span> : null}
|
||||
{renderRowEnd?.(entry, { isHighlighted, isSelected })}
|
||||
{isSelected ? <Icon name="check" className="h-4 w-4 text-primary flex-shrink-0" /> : null}
|
||||
{onToggleFavorite ? (
|
||||
<button type="button" disabled={disabled} onClick={(event) => { event.preventDefault(); event.stopPropagation(); onToggleFavorite(entry); }} className={cn('model-favorite-button flex h-4 w-4 items-center justify-center hover:text-primary/80 flex-shrink-0 disabled:pointer-events-none', favorite ? 'text-primary' : 'text-muted-foreground')} aria-label={favorite ? labels.unfavorite : labels.favorite} title={favorite ? labels.unfavorite : labels.favorite}>
|
||||
<Icon name={favorite ? 'star-fill' : 'star'} className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
return <ModelPickerRowTooltip metadata={metadata} active={tooltipsEnabled && isHighlighted} labels={labels}>{rowElement}</ModelPickerRowTooltip>;
|
||||
}}
|
||||
</ModelPickerRowHighlight>
|
||||
);
|
||||
};
|
||||
|
||||
const handleFavoriteDragEnd = (event: DragEndEvent) => {
|
||||
if (!onReorderFavorite) return;
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
const activeFavorite = favoriteLookup.get(String(active.id));
|
||||
const overFavorite = favoriteLookup.get(String(over.id));
|
||||
if (!activeFavorite || !overFavorite) return;
|
||||
|
||||
onReorderFavorite(activeFavorite, overFavorite);
|
||||
};
|
||||
|
||||
const isSectionCollapsed = (key: string) => collapsedSections.has(key);
|
||||
const toggleSectionCollapsed = (key: string) => {
|
||||
setCollapsedSections((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(key)) next.delete(key);
|
||||
else next.add(key);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const renderSectionHeader = (key: string, icon: React.ReactNode, label: React.ReactNode) => {
|
||||
const collapsed = isSectionCollapsed(key);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(headerClassName, 'w-full text-left cursor-pointer')}
|
||||
onClick={() => toggleSectionCollapsed(key)}
|
||||
aria-expanded={!collapsed}
|
||||
>
|
||||
{icon}
|
||||
<span className="min-w-0 truncate">{label}</span>
|
||||
<span className="ml-auto flex size-4 flex-shrink-0 items-center justify-center text-muted-foreground">
|
||||
<Icon name={collapsed ? 'arrow-right-s' : 'arrow-down-s'} className="size-4" />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="px-2 py-1 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
|
||||
type="text"
|
||||
placeholder={labels.searchPlaceholder}
|
||||
value={searchQuery}
|
||||
onChange={(event) => onSearchQueryChange(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="h-7 rounded-none bg-transparent pl-8 pr-0 typography-meta ring-0 hover:[&:not(:focus)]:bg-transparent focus:ring-0 focus-visible:ring-0"
|
||||
autoFocus={autoFocus}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollableOverlay ref={scrollRef} outerClassName={maxHeightClassName} className="overlay-scrollbar-target--no-gutter" style={maxHeightStyle}>
|
||||
<div className="p-1">
|
||||
{includeNotSelected ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 typography-meta text-muted-foreground hover:bg-interactive-hover/50"
|
||||
onClick={onSelectNone}
|
||||
>
|
||||
<Icon name="close" className="h-3.5 w-3.5" />
|
||||
<span>{labels.notSelected}</span>
|
||||
{!selectedModel ? <Icon name="check" className="h-4 w-4 text-primary ml-auto" /> : null}
|
||||
</button>
|
||||
<div className="h-px bg-border/40 my-1" />
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{!hasResults ? (
|
||||
<div className="px-2 py-4 text-center typography-meta text-muted-foreground">{labels.noResults}</div>
|
||||
) : null}
|
||||
|
||||
{filteredFavorites.length > 0 ? (
|
||||
<div>
|
||||
{renderSectionHeader('favorites', <Icon name="star-fill" className="h-4 w-4 text-primary" />, labels.favorites)}
|
||||
{!isSectionCollapsed('favorites') && (favoriteSortingEnabled ? (
|
||||
<DndContext sensors={favoriteRowSensors} collisionDetection={closestCenter} onDragEnd={handleFavoriteDragEnd}>
|
||||
<SortableContext items={filteredFavorites.map((entry) => `${entry.providerID}:${entry.modelID}`)} strategy={verticalListSortingStrategy}>
|
||||
{filteredFavorites.map((entry) => {
|
||||
const rowIndex = currentFlatIndex++;
|
||||
return (
|
||||
<SortableFavoriteModelRow key={`fav-sortable-${entry.providerID}-${entry.modelID}`} id={`${entry.providerID}:${entry.modelID}`} disabled={disabled}>
|
||||
{(dragHandleProps) => renderRow(entry, 'fav', true, rowIndex, dragHandleProps)}
|
||||
</SortableFavoriteModelRow>
|
||||
);
|
||||
})}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
) : filteredFavorites.map((entry) => renderRow(entry, 'fav', true, currentFlatIndex++)))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{filteredRecents.length > 0 ? (
|
||||
<div>
|
||||
{filteredFavorites.length > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
|
||||
{renderSectionHeader('recent', <Icon name="time" className="h-4 w-4" />, labels.recent)}
|
||||
{!isSectionCollapsed('recent') ? filteredRecents.map((entry) => renderRow(entry, 'recent', true, currentFlatIndex++)) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
|
||||
|
||||
{filteredProviders.map((provider, providerIndex) => (
|
||||
<div key={provider.id}>
|
||||
{providerIndex > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
|
||||
{renderSectionHeader(`provider:${provider.id}`, <ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />, provider.name || provider.id)}
|
||||
{!isSectionCollapsed(`provider:${provider.id}`)
|
||||
? provider.models.map((model) => renderRow({ model, providerID: provider.id, modelID: model.id as string }, 'provider', false, currentFlatIndex++))
|
||||
: null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollableOverlay>
|
||||
|
||||
<div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
|
||||
<ModelPickerFooter store={selectionStore} flatModelList={flatModelList} footerContent={footerContent} fallback={labels.keyboardHint} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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) : [];
|
||||
|
||||
@@ -2,26 +2,19 @@ import React from 'react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useConfigStore } from '@/stores/useConfigStore';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
|
||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { Icon } from "@/components/icon/Icon";
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { useModelLists } from '@/hooks/useModelLists';
|
||||
import type { ModelMetadata } from '@/types';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { useOpenCodeReadiness } from '@/hooks/useOpenCodeReadiness';
|
||||
|
||||
type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useConfigStore } from '@/stores/useConfigStore';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { ModelPickerList, type ModelPickerEntry, type ModelPickerProvider } from '@/components/model-picker/ModelPickerList';
|
||||
|
||||
interface ModelSelectorProps {
|
||||
providerId: string;
|
||||
@@ -32,38 +25,20 @@ interface ModelSelectorProps {
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
providerId,
|
||||
modelId,
|
||||
onChange,
|
||||
className,
|
||||
allowedProviderIds,
|
||||
placeholder
|
||||
placeholder,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const { isReady, isUnavailable } = useOpenCodeReadiness();
|
||||
const providers = useConfigStore((state) => state.providers);
|
||||
const providers = useConfigStore((state) => state.providers) as ModelPickerProvider[];
|
||||
const modelsMetadata = useConfigStore((state) => state.modelsMetadata);
|
||||
const isMobile = useUIStore(state => state.isMobile);
|
||||
const hiddenModels = useUIStore(state => state.hiddenModels);
|
||||
const isMobile = useUIStore((state) => state.isMobile);
|
||||
const hiddenModels = useUIStore((state) => state.hiddenModels);
|
||||
const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
|
||||
const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
|
||||
const addRecentModel = useUIStore((state) => state.addRecentModel);
|
||||
@@ -72,429 +47,71 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
const isActuallyMobile = isMobile || deviceIsMobile;
|
||||
|
||||
const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
|
||||
const [expandedMobileProviders, setExpandedMobileProviders] = React.useState<Set<string>>(new Set());
|
||||
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
||||
const itemRefs = React.useRef<(HTMLElement | null)[]>([]);
|
||||
|
||||
const allowedProviderSet = React.useMemo(() => {
|
||||
if (!Array.isArray(allowedProviderIds) || allowedProviderIds.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return new Set(allowedProviderIds);
|
||||
}, [allowedProviderIds]);
|
||||
|
||||
const visibleProviders = React.useMemo(() => {
|
||||
const baseProviders = allowedProviderSet
|
||||
? providers.filter((provider) => allowedProviderSet.has(String(provider.id)))
|
||||
: providers;
|
||||
|
||||
return baseProviders
|
||||
.map((provider) => {
|
||||
const providerModels = Array.isArray(provider.models) ? provider.models : [];
|
||||
const filteredModels = providerModels.filter((model: ProviderModel) => {
|
||||
const modelId = typeof model?.id === 'string' ? model.id : '';
|
||||
return !hiddenModels.some(
|
||||
(hidden) => hidden.providerID === String(provider.id) && hidden.modelID === modelId
|
||||
);
|
||||
});
|
||||
return { ...provider, models: filteredModels };
|
||||
})
|
||||
.filter((provider) => provider.models.length > 0);
|
||||
}, [providers, allowedProviderSet, hiddenModels]);
|
||||
|
||||
const closeMobilePanel = () => setIsMobilePanelOpen(false);
|
||||
const toggleMobileProviderExpansion = (provId: string) => {
|
||||
setExpandedMobileProviders(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(provId)) {
|
||||
newSet.delete(provId);
|
||||
} else {
|
||||
newSet.add(provId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
// Reset search and selection when dropdown closes
|
||||
React.useEffect(() => {
|
||||
if (!isDropdownOpen) {
|
||||
setSearchQuery('');
|
||||
setSelectedIndex(0);
|
||||
}
|
||||
}, [isDropdownOpen]);
|
||||
|
||||
// Reset selection when search query changes
|
||||
React.useEffect(() => {
|
||||
setSelectedIndex(0);
|
||||
}, [searchQuery]);
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
const getModelMetadata = (provId: string, modId: string): ModelMetadata | undefined => {
|
||||
const key = `${provId}/${modId}`;
|
||||
return modelsMetadata.get(key);
|
||||
};
|
||||
|
||||
const handleProviderAndModelChange = (newProviderId: string, newModelId: string) => {
|
||||
onChange(newProviderId, newModelId);
|
||||
if (newProviderId && newModelId) {
|
||||
addRecentModel(newProviderId, newModelId);
|
||||
}
|
||||
const closePicker = React.useCallback(() => {
|
||||
setIsMobilePanelOpen(false);
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
setSearchQuery('');
|
||||
}, []);
|
||||
|
||||
// Filter helper
|
||||
const filterByQuery = (modelName: string, providerName: string) => {
|
||||
if (!searchQuery.trim()) return true;
|
||||
const lowerQuery = searchQuery.toLowerCase();
|
||||
const handleSelect = React.useCallback((entry: ModelPickerEntry) => {
|
||||
onChange(entry.providerID, entry.modelID);
|
||||
addRecentModel(entry.providerID, entry.modelID);
|
||||
closePicker();
|
||||
}, [addRecentModel, closePicker, onChange]);
|
||||
|
||||
const handleSelectNone = React.useCallback(() => {
|
||||
onChange('', '');
|
||||
closePicker();
|
||||
}, [closePicker, onChange]);
|
||||
|
||||
const labels = React.useMemo(() => ({
|
||||
searchPlaceholder: t('settings.agents.modelSelector.searchPlaceholder'),
|
||||
noResults: t('settings.agents.modelSelector.state.noModelsFound'),
|
||||
favorites: t('settings.agents.modelSelector.section.favorites'),
|
||||
recent: t('settings.agents.modelSelector.section.recent'),
|
||||
keyboardHint: t('settings.agents.modelSelector.keyboardHints'),
|
||||
notSelected: placeholder || t('settings.agents.modelSelector.notSelected'),
|
||||
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'),
|
||||
}), [placeholder, t]);
|
||||
|
||||
const selectedModel = providerId && modelId ? { providerID: providerId, modelID: modelId } : null;
|
||||
const triggerLabel = providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.notSelected'));
|
||||
|
||||
const picker = (
|
||||
<ModelPickerList
|
||||
providers={providers}
|
||||
favoriteModels={favoriteModelsList}
|
||||
recentModels={recentModelsList}
|
||||
modelsMetadata={modelsMetadata}
|
||||
searchQuery={searchQuery}
|
||||
onSearchQueryChange={setSearchQuery}
|
||||
onSelect={handleSelect}
|
||||
labels={labels}
|
||||
selectedModel={selectedModel}
|
||||
hiddenModels={hiddenModels}
|
||||
allowedProviderIds={allowedProviderIds}
|
||||
includeNotSelected
|
||||
onSelectNone={handleSelectNone}
|
||||
onEscape={closePicker}
|
||||
tooltipsEnabled={isActuallyMobile ? isMobilePanelOpen : isDropdownOpen}
|
||||
isFavorite={(entry) => isFavoriteModel(entry.providerID, entry.modelID)}
|
||||
onToggleFavorite={(entry) => toggleFavoriteModel(entry.providerID, entry.modelID)}
|
||||
/>
|
||||
);
|
||||
|
||||
if (isActuallyMobile) {
|
||||
return (
|
||||
modelName.toLowerCase().includes(lowerQuery) ||
|
||||
providerName.toLowerCase().includes(lowerQuery)
|
||||
);
|
||||
};
|
||||
|
||||
// Render a model row for desktop dropdown
|
||||
const renderModelRow = (
|
||||
model: ProviderModel,
|
||||
provID: string,
|
||||
modID: string,
|
||||
keyPrefix: string,
|
||||
flatIndex: number,
|
||||
isHighlighted: boolean
|
||||
) => {
|
||||
const metadata = getModelMetadata(provID, modID);
|
||||
const contextTokens = formatTokens(metadata?.limit?.context);
|
||||
const isSelected = providerId === provID && modelId === modID;
|
||||
const isFavorite = isFavoriteModel(provID, modID);
|
||||
|
||||
const showProviderLogo = keyPrefix === 'fav' || keyPrefix === 'recent';
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={`${keyPrefix}-${provID}-${modID}`}
|
||||
ref={(el) => { itemRefs.current[flatIndex] = el; }}
|
||||
className={cn(
|
||||
"group flex items-center gap-2",
|
||||
isHighlighted && "bg-interactive-selection"
|
||||
)}
|
||||
onSelect={() => handleProviderAndModelChange(provID, modID)}
|
||||
onMouseEnter={() => setSelectedIndex(flatIndex)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
{showProviderLogo && (
|
||||
<ProviderLogo providerId={provID} 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>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{isSelected && (
|
||||
<Icon name="check" className="h-4 w-4 text-primary" />
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(provID, modID);
|
||||
}}
|
||||
className={cn(
|
||||
"model-favorite-button flex h-4 w-4 items-center justify-center hover:text-primary/80",
|
||||
isFavorite ? "text-primary" : "text-muted-foreground"
|
||||
)}
|
||||
aria-label={isFavorite ? t('settings.agents.modelSelector.actions.unfavorite') : t('settings.agents.modelSelector.actions.favorite')}
|
||||
title={isFavorite ? t('settings.agents.modelSelector.actions.removeFromFavorites') : t('settings.agents.modelSelector.actions.addToFavorites')}
|
||||
>
|
||||
{isFavorite ? (
|
||||
<Icon name="star-fill" className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<Icon name="star" className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
// Filter data for desktop dropdown
|
||||
const filteredFavorites = favoriteModelsList.filter(({ model, providerID }) => {
|
||||
if (allowedProviderSet && !allowedProviderSet.has(providerID)) {
|
||||
return false;
|
||||
}
|
||||
const provider = providers.find(p => p.id === providerID);
|
||||
const providerName = provider?.name || providerID;
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, providerName);
|
||||
});
|
||||
|
||||
const filteredRecents = recentModelsList.filter(({ model, providerID }) => {
|
||||
if (allowedProviderSet && !allowedProviderSet.has(providerID)) {
|
||||
return false;
|
||||
}
|
||||
const provider = providers.find(p => p.id === providerID);
|
||||
const providerName = provider?.name || providerID;
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, providerName);
|
||||
});
|
||||
|
||||
const filteredProviders = visibleProviders
|
||||
.map((provider) => {
|
||||
const providerModels = Array.isArray(provider.models) ? provider.models : [];
|
||||
const filteredModels = providerModels.filter((model: ProviderModel) => {
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, provider.name || provider.id || '');
|
||||
});
|
||||
return { ...provider, models: filteredModels };
|
||||
})
|
||||
.filter((provider) => provider.models.length > 0);
|
||||
|
||||
const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0;
|
||||
|
||||
const renderMobileModelPanel = () => {
|
||||
if (!isActuallyMobile) return null;
|
||||
|
||||
return (
|
||||
<MobileOverlayPanel
|
||||
open={isMobilePanelOpen}
|
||||
onClose={closeMobilePanel}
|
||||
title={t('settings.agents.modelSelector.title')}
|
||||
>
|
||||
<div className="space-y-1">
|
||||
{/* Favorites Section for Mobile */}
|
||||
{favoriteModelsList.length > 0 && (
|
||||
<div className="rounded-xl border border-border/40 bg-[var(--surface-elevated)] mb-2">
|
||||
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
{t('settings.agents.modelSelector.section.favorites')}
|
||||
</div>
|
||||
<div className="border-t border-border/20">
|
||||
{favoriteModelsList.map(({ model, providerID, modelID }) => {
|
||||
const isSelectedModel = providerID === providerId && modelID === modelId;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`fav-mobile-${providerID}-${modelID}`}
|
||||
className={cn(
|
||||
'flex w-full items-center justify-between px-2 py-1.5 text-left',
|
||||
'typography-meta',
|
||||
isSelectedModel ? 'bg-primary/10 text-primary' : 'text-foreground'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 flex flex-col min-w-0 mr-2"
|
||||
onClick={() => {
|
||||
handleProviderAndModelChange(providerID, modelID);
|
||||
closeMobilePanel();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<ProviderLogo
|
||||
providerId={providerID}
|
||||
className="h-3 w-3 flex-shrink-0"
|
||||
/>
|
||||
<span className="font-medium truncate">{getModelDisplayName(model)}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(providerID, modelID);
|
||||
}}
|
||||
className="model-favorite-button flex h-8 w-8 items-center justify-center text-primary hover:text-primary/80 active:scale-95 touch-manipulation"
|
||||
aria-label={t('settings.agents.modelSelector.actions.unfavorite')}
|
||||
>
|
||||
<Icon name="star-fill" className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recents Section for Mobile */}
|
||||
{recentModelsList.length > 0 && (
|
||||
<div className="rounded-xl border border-border/40 bg-[var(--surface-elevated)] mb-2">
|
||||
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
{t('settings.agents.modelSelector.section.recents')}
|
||||
</div>
|
||||
<div className="border-t border-border/20">
|
||||
{recentModelsList.map(({ model, providerID, modelID }) => {
|
||||
const isSelectedModel = providerID === providerId && modelID === modelId;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`recent-mobile-${providerID}-${modelID}`}
|
||||
className={cn(
|
||||
'flex w-full items-center justify-between px-2 py-1.5 text-left',
|
||||
'typography-meta',
|
||||
isSelectedModel ? 'bg-primary/10 text-primary' : 'text-foreground'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 flex flex-col min-w-0 mr-2"
|
||||
onClick={() => {
|
||||
handleProviderAndModelChange(providerID, modelID);
|
||||
closeMobilePanel();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<ProviderLogo
|
||||
providerId={providerID}
|
||||
className="h-3 w-3 flex-shrink-0"
|
||||
/>
|
||||
<span className="font-medium truncate">{getModelDisplayName(model)}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(providerID, modelID);
|
||||
}}
|
||||
className="model-favorite-button flex h-8 w-8 items-center justify-center text-muted-foreground/50 hover:text-primary/80 active:scale-95 touch-manipulation"
|
||||
aria-label={t('settings.agents.modelSelector.actions.favorite')}
|
||||
>
|
||||
<Icon name="star" className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{visibleProviders.map((provider) => {
|
||||
const providerModels = Array.isArray(provider.models) ? provider.models : [];
|
||||
if (providerModels.length === 0) return null;
|
||||
|
||||
const isActiveProvider = provider.id === providerId;
|
||||
const isExpanded = expandedMobileProviders.has(provider.id);
|
||||
|
||||
return (
|
||||
<div key={provider.id} className="rounded-xl border border-border/40 bg-[var(--surface-elevated)]">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between gap-1.5 px-2 py-1.5 text-left"
|
||||
onClick={() => toggleMobileProviderExpansion(provider.id)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<ProviderLogo
|
||||
providerId={provider.id}
|
||||
className="h-3.5 w-3.5"
|
||||
/>
|
||||
<span className="typography-meta font-medium text-foreground">
|
||||
{provider.name}
|
||||
</span>
|
||||
{isActiveProvider && (
|
||||
<span className="typography-micro text-primary/80">{t('settings.agents.modelSelector.badge.current')}</span>
|
||||
)}
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<Icon name="arrow-down-s" className="h-3 w-3 text-muted-foreground" />
|
||||
) : (
|
||||
<Icon name="arrow-right-s" className="h-3 w-3 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="border-t border-border/20">
|
||||
{providerModels.map((modelItem: ProviderModel) => {
|
||||
const isSelectedModel = provider.id === providerId && modelItem.id === modelId;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={modelItem.id as string}
|
||||
className={cn(
|
||||
'flex w-full items-center justify-between px-2 py-1.5 text-left',
|
||||
'typography-meta',
|
||||
isSelectedModel ? 'bg-primary/10 text-primary' : 'text-foreground'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 flex flex-col min-w-0 mr-2"
|
||||
onClick={() => {
|
||||
handleProviderAndModelChange(provider.id as string, modelItem.id as string);
|
||||
closeMobilePanel();
|
||||
}}
|
||||
>
|
||||
<span className="font-medium truncate">{getModelDisplayName(modelItem)}</span>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(provider.id as string, modelItem.id as string);
|
||||
}}
|
||||
className={cn(
|
||||
"flex h-8 w-8 items-center justify-center active:scale-95 touch-manipulation hover:text-primary/80",
|
||||
isFavoriteModel(provider.id as string, modelItem.id as string)
|
||||
? "text-primary"
|
||||
: "text-muted-foreground/50"
|
||||
)}
|
||||
aria-label={isFavoriteModel(provider.id as string, modelItem.id as string)
|
||||
? t('settings.agents.modelSelector.actions.unfavorite')
|
||||
: t('settings.agents.modelSelector.actions.favorite')}
|
||||
>
|
||||
{isFavoriteModel(provider.id as string, modelItem.id as string) ? (
|
||||
<Icon name="star-fill" className="h-4 w-4" />
|
||||
) : (
|
||||
<Icon name="star" className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isSelectedModel && (
|
||||
<div className="h-2 w-2 rounded-full bg-primary" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between rounded-lg border border-border/40 bg-[var(--surface-elevated)] px-2 py-1.5 text-left"
|
||||
onClick={() => {
|
||||
handleProviderAndModelChange('', '');
|
||||
closeMobilePanel();
|
||||
}}
|
||||
>
|
||||
<span className="typography-meta text-muted-foreground">{placeholder || t('settings.agents.modelSelector.noModelOptional')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</MobileOverlayPanel>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isActuallyMobile ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={isReady ? () => setIsMobilePanelOpen(true) : undefined}
|
||||
@@ -502,226 +119,62 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
className={cn(
|
||||
'flex w-full items-center justify-between gap-2 rounded-lg border border-border/40 bg-[var(--surface-elevated)] px-2 py-1.5 text-left',
|
||||
!isReady && 'opacity-60 cursor-not-allowed',
|
||||
className
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
{!isReady ? (
|
||||
<>
|
||||
<Icon name="loader-4" className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
|
||||
<span className="typography-meta text-muted-foreground">{isUnavailable ? t('common.unavailable') : t('common.loading')}</span>
|
||||
</>
|
||||
) : providerId ? (
|
||||
<ProviderLogo
|
||||
providerId={providerId}
|
||||
className="h-3.5 w-3.5"
|
||||
/>
|
||||
<ProviderLogo providerId={providerId} className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
) : (
|
||||
<Icon name="pencil-ai" className="h-3 w-3 text-muted-foreground" />
|
||||
)}
|
||||
{isReady && (
|
||||
<span className="typography-meta font-medium text-foreground">
|
||||
{providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.selectPlaceholder'))}
|
||||
</span>
|
||||
)}
|
||||
{isReady ? <span className="typography-meta font-medium text-foreground truncate">{triggerLabel}</span> : null}
|
||||
</div>
|
||||
<Icon name="arrow-down-s" className="h-3 w-3 text-muted-foreground" />
|
||||
<Icon name="arrow-down-s" className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
|
||||
</button>
|
||||
) : (
|
||||
<DropdownMenu open={isReady && isDropdownOpen} onOpenChange={isReady ? setIsDropdownOpen : undefined}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className={cn(
|
||||
'border-input data-[placeholder]:text-muted-foreground flex items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none hover:bg-interactive-hover data-[popup-open]:bg-interactive-active h-6 w-fit',
|
||||
className
|
||||
)}>
|
||||
{!isReady ? (
|
||||
<>
|
||||
<Icon name="loader-4" className="h-3.5 w-3.5 animate-spin text-muted-foreground flex-shrink-0" />
|
||||
<span className="typography-ui-label font-normal whitespace-nowrap text-muted-foreground">
|
||||
{isUnavailable ? t('common.unavailable') : t('common.loading')}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{providerId ? (
|
||||
<>
|
||||
<ProviderLogo
|
||||
providerId={providerId}
|
||||
className="h-3.5 w-3.5 flex-shrink-0"
|
||||
/>
|
||||
<Icon name="pencil-ai" className="h-3 w-3 text-primary/60 hidden" />
|
||||
</>
|
||||
) : (
|
||||
<Icon name="pencil-ai" className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
)}
|
||||
<span className="typography-ui-label font-normal whitespace-nowrap text-foreground">
|
||||
{providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.notSelected'))}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<Icon name="arrow-down-s" className="h-4 w-4 flex-shrink-0 text-muted-foreground/50" />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col" align="start">
|
||||
{(() => {
|
||||
// Build flat list for keyboard navigation
|
||||
type FlatModelItem = { model: ProviderModel; 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 as ProviderModel[]).forEach((model) => {
|
||||
flatModelList.push({ model, providerID: provider.id as string, modelID: model.id as string, section: 'provider' });
|
||||
});
|
||||
});
|
||||
<MobileOverlayPanel
|
||||
open={isMobilePanelOpen}
|
||||
onClose={closePicker}
|
||||
title={t('settings.agents.modelSelector.title')}
|
||||
>
|
||||
{picker}
|
||||
</MobileOverlayPanel>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const totalItems = flatModelList.length;
|
||||
|
||||
// Handle keyboard navigation
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
e.stopPropagation();
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
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();
|
||||
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();
|
||||
const selectedItem = flatModelList[selectedIndex];
|
||||
if (selectedItem) {
|
||||
handleProviderAndModelChange(selectedItem.providerID, selectedItem.modelID);
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
let currentFlatIndex = 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 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
|
||||
type="text"
|
||||
placeholder={t('settings.agents.modelSelector.searchPlaceholder')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="pl-8 h-8 typography-meta"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scrollable content */}
|
||||
<ScrollableOverlay outerClassName="max-h-[min(400px,calc(100dvh-12rem))] flex-1">
|
||||
<div className="p-1">
|
||||
{/* Not selected option */}
|
||||
<DropdownMenuItem
|
||||
className={cn(
|
||||
"flex items-center gap-2",
|
||||
)}
|
||||
onSelect={() => handleProviderAndModelChange('', '')}
|
||||
>
|
||||
<Icon name="close" className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">{placeholder || t('settings.agents.modelSelector.notSelected')}</span>
|
||||
{!providerId && !modelId && (
|
||||
<Icon name="check" className="h-4 w-4 text-primary ml-auto" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
{!hasResults && searchQuery && (
|
||||
<div className="px-2 py-4 text-center typography-meta text-muted-foreground">
|
||||
{t('settings.agents.modelSelector.state.noModelsFound')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Favorites Section */}
|
||||
{filteredFavorites.length > 0 && (
|
||||
<div>
|
||||
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 border-b border-border/30">
|
||||
<Icon name="star-fill" className="h-4 w-4 text-primary" />
|
||||
{t('settings.agents.modelSelector.section.favorites')}
|
||||
</DropdownMenuLabel>
|
||||
{filteredFavorites.map(({ model, providerID, modelID }) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, providerID, modelID, 'fav', idx, selectedIndex === idx);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recents Section */}
|
||||
{filteredRecents.length > 0 && (
|
||||
<div>
|
||||
{filteredFavorites.length > 0 && <DropdownMenuSeparator />}
|
||||
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 border-b border-border/30">
|
||||
<Icon name="time" className="h-4 w-4" />
|
||||
{t('settings.agents.modelSelector.section.recent')}
|
||||
</DropdownMenuLabel>
|
||||
{filteredRecents.map(({ model, providerID, modelID }) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, providerID, modelID, 'recent', idx, selectedIndex === idx);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Separator before providers */}
|
||||
{(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 && (
|
||||
<DropdownMenuSeparator />
|
||||
)}
|
||||
|
||||
{/* All Providers - Flat List */}
|
||||
{filteredProviders.map((provider, index) => (
|
||||
<div key={provider.id}>
|
||||
{index > 0 && <DropdownMenuSeparator />}
|
||||
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 border-b border-border/30">
|
||||
<ProviderLogo
|
||||
providerId={provider.id}
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
/>
|
||||
{provider.name}
|
||||
</DropdownMenuLabel>
|
||||
{(provider.models as ProviderModel[]).map((model: ProviderModel) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, provider.id as string, model.id as string, 'provider', idx, selectedIndex === idx);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</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('settings.agents.modelSelector.keyboardHints')}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
{renderMobileModelPanel()}
|
||||
</>
|
||||
return (
|
||||
<DropdownMenu open={isReady && isDropdownOpen} onOpenChange={isReady ? setIsDropdownOpen : undefined}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className={cn(
|
||||
'border-input data-[placeholder]:text-muted-foreground flex items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none hover:bg-interactive-hover data-[popup-open]:bg-interactive-active h-6 w-fit',
|
||||
!isReady && 'opacity-60 cursor-not-allowed',
|
||||
className,
|
||||
)}>
|
||||
{!isReady ? (
|
||||
<>
|
||||
<Icon name="loader-4" className="h-3.5 w-3.5 animate-spin text-muted-foreground flex-shrink-0" />
|
||||
<span className="typography-ui-label font-normal whitespace-nowrap text-muted-foreground">
|
||||
{isUnavailable ? t('common.unavailable') : t('common.loading')}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{providerId ? <ProviderLogo providerId={providerId} className="h-3.5 w-3.5 flex-shrink-0" /> : <Icon name="pencil-ai" className="h-3.5 w-3.5 text-muted-foreground" />}
|
||||
<span className="typography-ui-label font-normal whitespace-nowrap text-foreground">{triggerLabel}</span>
|
||||
</>
|
||||
)}
|
||||
<Icon name="arrow-down-s" className="h-4 w-4 flex-shrink-0 text-muted-foreground/50" />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col" align="start">
|
||||
{picker}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { ModelMetadata } from '@/types';
|
||||
|
||||
type LiveProviderModel = Record<string, unknown> & { id?: string; name?: string };
|
||||
|
||||
const getNumericLimit = (limit: unknown, key: 'context' | 'output') => {
|
||||
if (!limit || typeof limit !== 'object') return undefined;
|
||||
const value = (limit as Record<string, unknown>)[key];
|
||||
return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
|
||||
};
|
||||
|
||||
export const mergeModelMetadataWithLiveModel = (
|
||||
providerId: string,
|
||||
model: LiveProviderModel,
|
||||
metadata?: ModelMetadata,
|
||||
): ModelMetadata | undefined => {
|
||||
const liveContextLimit = getNumericLimit(model.limit, 'context');
|
||||
const liveOutputLimit = getNumericLimit(model.limit, 'output');
|
||||
const contextLimit = liveContextLimit ?? metadata?.limit?.context;
|
||||
const outputLimit = liveOutputLimit ?? metadata?.limit?.output;
|
||||
|
||||
if (contextLimit === undefined && outputLimit === undefined) return metadata;
|
||||
|
||||
return {
|
||||
...(metadata ?? {
|
||||
id: typeof model.id === 'string' ? model.id : '',
|
||||
providerId,
|
||||
name: typeof model.name === 'string' ? model.name : undefined,
|
||||
}),
|
||||
limit: {
|
||||
...metadata?.limit,
|
||||
...(contextLimit !== undefined ? { context: contextLimit } : {}),
|
||||
...(outputLimit !== undefined ? { output: outputLimit } : {}),
|
||||
},
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user