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 React from 'react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
|
||||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
||||||
import { Icon } from "@/components/icon/Icon";
|
import { Icon } from "@/components/icon/Icon";
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { isIMECompositionEvent } from '@/lib/ime';
|
|
||||||
import { useConfigStore } from '@/stores/useConfigStore';
|
import { useConfigStore } from '@/stores/useConfigStore';
|
||||||
|
import { useUIStore } from '@/stores/useUIStore';
|
||||||
import { useModelLists } from '@/hooks/useModelLists';
|
import { useModelLists } from '@/hooks/useModelLists';
|
||||||
import type { ModelMetadata } from '@/types';
|
|
||||||
import { useI18n } from '@/lib/i18n';
|
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 */
|
/** Chip height class - shared between chips and add button */
|
||||||
const CHIP_HEIGHT_CLASS = 'h-7';
|
const CHIP_HEIGHT_CLASS = 'h-7';
|
||||||
@@ -37,24 +35,6 @@ export const generateInstanceId = (): string => {
|
|||||||
return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
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.
|
* Model selection chip with remove button.
|
||||||
* Shows instance index (e.g., "(2)") when same model is selected multiple times.
|
* Shows instance index (e.g., "(2)") when same model is selected multiple times.
|
||||||
@@ -129,17 +109,16 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
|
|||||||
triggerIcon,
|
triggerIcon,
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const providers = useConfigStore((state) => state.providers);
|
const providers = useConfigStore((state) => state.providers) as ModelPickerProvider[];
|
||||||
const modelsMetadata = useConfigStore((state) => state.modelsMetadata);
|
const modelsMetadata = useConfigStore((state) => state.modelsMetadata);
|
||||||
|
const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
|
||||||
|
const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
|
||||||
const { favoriteModelsList, recentModelsList } = useModelLists();
|
const { favoriteModelsList, recentModelsList } = useModelLists();
|
||||||
const [isOpen, setIsOpen] = React.useState(false);
|
const [isOpen, setIsOpen] = React.useState(false);
|
||||||
const [searchQuery, setSearchQuery] = React.useState('');
|
const [searchQuery, setSearchQuery] = React.useState('');
|
||||||
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
|
||||||
const [availableHeight, setAvailableHeight] = React.useState<number | null>(null);
|
const [availableHeight, setAvailableHeight] = React.useState<number | null>(null);
|
||||||
const searchInputRef = React.useRef<HTMLInputElement>(null);
|
|
||||||
const dropdownRef = React.useRef<HTMLDivElement>(null);
|
const dropdownRef = React.useRef<HTMLDivElement>(null);
|
||||||
const triggerRef = React.useRef<HTMLButtonElement>(null);
|
const triggerRef = React.useRef<HTMLButtonElement>(null);
|
||||||
const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
|
|
||||||
const isSingleSelect = maxModels === 1;
|
const isSingleSelect = maxModels === 1;
|
||||||
const canAddModel = maxModels === undefined || selectedModels.length < maxModels || isSingleSelect;
|
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;
|
return sameModels.findIndex(m => m.instanceId === model.instanceId) + 1;
|
||||||
}, [selectedModels]);
|
}, [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.
|
// Calculate available height: multi-run opens upward inside a scroller; fusion opens downward and may extend past the dialog.
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!isOpen || !triggerRef.current) return;
|
if (!isOpen || !triggerRef.current) return;
|
||||||
@@ -255,18 +174,10 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
|
|||||||
setAvailableHeight(Math.max(150, Math.min(300, spaceAbove)));
|
setAvailableHeight(Math.max(150, Math.min(300, spaceAbove)));
|
||||||
}, [dropdownSide, isOpen]);
|
}, [dropdownSide, isOpen]);
|
||||||
|
|
||||||
// Focus search input when opened
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (isOpen && searchInputRef.current) {
|
|
||||||
searchInputRef.current.focus();
|
|
||||||
}
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!canAddModel && isOpen) {
|
if (!canAddModel && isOpen) {
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
setSearchQuery('');
|
setSearchQuery('');
|
||||||
setSelectedIndex(0);
|
|
||||||
}
|
}
|
||||||
}, [canAddModel, isOpen]);
|
}, [canAddModel, isOpen]);
|
||||||
|
|
||||||
@@ -278,7 +189,6 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
|
|||||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
setSearchQuery('');
|
setSearchQuery('');
|
||||||
setSelectedIndex(0);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -286,85 +196,39 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
|
|||||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
}, [isOpen]);
|
}, [isOpen]);
|
||||||
|
|
||||||
// Reset selection when search query changes
|
const handleSelectModel = React.useCallback((entry: ModelPickerEntry) => {
|
||||||
React.useEffect(() => {
|
const nextModel = {
|
||||||
setSelectedIndex(0);
|
providerID: entry.providerID,
|
||||||
}, [searchQuery]);
|
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 labels = React.useMemo(() => ({
|
||||||
const renderModelRow = (
|
searchPlaceholder: t('multirun.modelMultiSelect.search.placeholder'),
|
||||||
model: Record<string, unknown>,
|
noResults: t('multirun.modelMultiSelect.search.noResults'),
|
||||||
providerID: string,
|
favorites: t('multirun.modelMultiSelect.sections.favorites'),
|
||||||
modelID: string,
|
recent: t('multirun.modelMultiSelect.sections.recent'),
|
||||||
keyPrefix: string,
|
keyboardHint: t('multirun.modelMultiSelect.keyboard.hint'),
|
||||||
flatIndex: number,
|
favorite: t('settings.agents.modelSelector.actions.favorite'),
|
||||||
isHighlighted: boolean
|
unfavorite: t('settings.agents.modelSelector.actions.unfavorite'),
|
||||||
) => {
|
capabilities: t('chat.modelControls.capabilities'),
|
||||||
const key = `${providerID}:${modelID}`;
|
capabilityToolCalling: t('chat.modelControls.capability.toolCalling'),
|
||||||
const selectionCount = modelCounts.get(key) || 0;
|
capabilityReasoning: t('chat.modelControls.capability.reasoning'),
|
||||||
const metadata = getModelMetadata(providerID, modelID);
|
input: t('chat.modelControls.input'),
|
||||||
const contextTokens = formatTokens(metadata?.limit?.context);
|
output: t('chat.modelControls.output'),
|
||||||
|
costPerMillion: t('chat.modelControls.costPerMillion'),
|
||||||
const showProviderLogo = keyPrefix === 'fav' || keyPrefix === 'recent';
|
}), [t]);
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
@@ -390,179 +254,41 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
|
|||||||
{addButtonLabel ?? t('multirun.modelMultiSelect.actions.addModel')}
|
{addButtonLabel ?? t('multirun.modelMultiSelect.actions.addModel')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{isOpen && (() => {
|
{isOpen ? (
|
||||||
// Build flat list for keyboard navigation
|
<div
|
||||||
type FlatModelItem = { model: Record<string, unknown>; providerID: string; modelID: string; section: string };
|
className={cn(
|
||||||
const flatModelList: FlatModelItem[] = [];
|
'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',
|
||||||
filteredFavorites.forEach(({ model, providerID, modelID }) => {
|
dropdownClassName,
|
||||||
flatModelList.push({ model, providerID, modelID, section: 'fav' });
|
)}
|
||||||
});
|
style={{
|
||||||
filteredRecents.forEach(({ model, providerID, modelID }) => {
|
background: 'linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))',
|
||||||
flatModelList.push({ model, providerID, modelID, section: 'recent' });
|
}}
|
||||||
});
|
>
|
||||||
filteredProviders.forEach((provider) => {
|
<ModelPickerList
|
||||||
provider.models.forEach((model) => {
|
providers={providers}
|
||||||
flatModelList.push({ model, providerID: provider.id, modelID: model.id as string, section: 'provider' });
|
favoriteModels={favoriteModelsList}
|
||||||
});
|
recentModels={recentModelsList}
|
||||||
});
|
modelsMetadata={modelsMetadata}
|
||||||
|
searchQuery={searchQuery}
|
||||||
const totalItems = flatModelList.length;
|
onSearchQueryChange={setSearchQuery}
|
||||||
|
onSelect={handleSelectModel}
|
||||||
// Handle keyboard navigation
|
labels={labels}
|
||||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
selectionCount={(entry) => modelCounts.get(`${entry.providerID}:${entry.modelID}`) || 0}
|
||||||
if (isIMECompositionEvent(e)) {
|
disabled={!canAddModel}
|
||||||
return;
|
maxHeightClassName="flex-1"
|
||||||
}
|
maxHeightStyle={{ maxHeight: availableHeight ? `${availableHeight}px` : '300px' }}
|
||||||
if (e.key === 'ArrowDown') {
|
stickyHeaders
|
||||||
e.preventDefault();
|
tooltipsEnabled={isOpen}
|
||||||
e.stopPropagation();
|
isFavorite={(entry) => isFavoriteModel(entry.providerID, entry.modelID)}
|
||||||
const nextIndex = (selectedIndex + 1) % Math.max(1, totalItems);
|
onToggleFavorite={(entry) => toggleFavoriteModel(entry.providerID, entry.modelID)}
|
||||||
setSelectedIndex(nextIndex);
|
onEscape={() => {
|
||||||
setTimeout(() => {
|
setIsOpen(false);
|
||||||
itemRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
setSearchQuery('');
|
||||||
}, 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))',
|
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
{/* Search input */}
|
</div>
|
||||||
<div className="p-2 border-b border-border/40">
|
) : null}
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
{/* Selected models */}
|
{/* Selected models */}
|
||||||
@@ -574,7 +300,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
|
|||||||
const instanceIndex = getInstanceIndex(model);
|
const instanceIndex = getInstanceIndex(model);
|
||||||
|
|
||||||
const provider = providers.find((p) => p.id === model.providerID);
|
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> }
|
| { variants?: Record<string, unknown> }
|
||||||
| undefined;
|
| undefined;
|
||||||
const variantKeys = providerModel?.variants ? Object.keys(providerModel.variants) : [];
|
const variantKeys = providerModel?.variants ? Object.keys(providerModel.variants) : [];
|
||||||
|
|||||||
@@ -2,26 +2,19 @@ import React from 'react';
|
|||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuLabel,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from '@/components/ui/dropdown-menu';
|
} 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 { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
|
||||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
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 { useModelLists } from '@/hooks/useModelLists';
|
||||||
import type { ModelMetadata } from '@/types';
|
|
||||||
import { useI18n } from '@/lib/i18n';
|
|
||||||
import { useOpenCodeReadiness } from '@/hooks/useOpenCodeReadiness';
|
import { useOpenCodeReadiness } from '@/hooks/useOpenCodeReadiness';
|
||||||
|
import { useDeviceInfo } from '@/lib/device';
|
||||||
type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
|
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 {
|
interface ModelSelectorProps {
|
||||||
providerId: string;
|
providerId: string;
|
||||||
@@ -32,38 +25,20 @@ interface ModelSelectorProps {
|
|||||||
placeholder?: string;
|
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> = ({
|
export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||||
providerId,
|
providerId,
|
||||||
modelId,
|
modelId,
|
||||||
onChange,
|
onChange,
|
||||||
className,
|
className,
|
||||||
allowedProviderIds,
|
allowedProviderIds,
|
||||||
placeholder
|
placeholder,
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { isReady, isUnavailable } = useOpenCodeReadiness();
|
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 modelsMetadata = useConfigStore((state) => state.modelsMetadata);
|
||||||
const isMobile = useUIStore(state => state.isMobile);
|
const isMobile = useUIStore((state) => state.isMobile);
|
||||||
const hiddenModels = useUIStore(state => state.hiddenModels);
|
const hiddenModels = useUIStore((state) => state.hiddenModels);
|
||||||
const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
|
const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
|
||||||
const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
|
const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
|
||||||
const addRecentModel = useUIStore((state) => state.addRecentModel);
|
const addRecentModel = useUIStore((state) => state.addRecentModel);
|
||||||
@@ -72,429 +47,71 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
|||||||
const isActuallyMobile = isMobile || deviceIsMobile;
|
const isActuallyMobile = isMobile || deviceIsMobile;
|
||||||
|
|
||||||
const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
|
const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
|
||||||
const [expandedMobileProviders, setExpandedMobileProviders] = React.useState<Set<string>>(new Set());
|
|
||||||
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
|
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
|
||||||
const [searchQuery, setSearchQuery] = React.useState('');
|
const [searchQuery, setSearchQuery] = React.useState('');
|
||||||
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
|
||||||
const itemRefs = React.useRef<(HTMLElement | null)[]>([]);
|
|
||||||
|
|
||||||
const allowedProviderSet = React.useMemo(() => {
|
const closePicker = React.useCallback(() => {
|
||||||
if (!Array.isArray(allowedProviderIds) || allowedProviderIds.length === 0) {
|
setIsMobilePanelOpen(false);
|
||||||
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);
|
|
||||||
}
|
|
||||||
setIsDropdownOpen(false);
|
setIsDropdownOpen(false);
|
||||||
};
|
setSearchQuery('');
|
||||||
|
}, []);
|
||||||
|
|
||||||
// Filter helper
|
const handleSelect = React.useCallback((entry: ModelPickerEntry) => {
|
||||||
const filterByQuery = (modelName: string, providerName: string) => {
|
onChange(entry.providerID, entry.modelID);
|
||||||
if (!searchQuery.trim()) return true;
|
addRecentModel(entry.providerID, entry.modelID);
|
||||||
const lowerQuery = searchQuery.toLowerCase();
|
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 (
|
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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={isReady ? () => setIsMobilePanelOpen(true) : undefined}
|
onClick={isReady ? () => setIsMobilePanelOpen(true) : undefined}
|
||||||
@@ -502,226 +119,62 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
|||||||
className={cn(
|
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',
|
'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',
|
!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 ? (
|
{!isReady ? (
|
||||||
<>
|
<>
|
||||||
<Icon name="loader-4" className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
|
<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>
|
<span className="typography-meta text-muted-foreground">{isUnavailable ? t('common.unavailable') : t('common.loading')}</span>
|
||||||
</>
|
</>
|
||||||
) : providerId ? (
|
) : providerId ? (
|
||||||
<ProviderLogo
|
<ProviderLogo providerId={providerId} className="h-3.5 w-3.5 flex-shrink-0" />
|
||||||
providerId={providerId}
|
|
||||||
className="h-3.5 w-3.5"
|
|
||||||
/>
|
|
||||||
) : (
|
) : (
|
||||||
<Icon name="pencil-ai" className="h-3 w-3 text-muted-foreground" />
|
<Icon name="pencil-ai" className="h-3 w-3 text-muted-foreground" />
|
||||||
)}
|
)}
|
||||||
{isReady && (
|
{isReady ? <span className="typography-meta font-medium text-foreground truncate">{triggerLabel}</span> : null}
|
||||||
<span className="typography-meta font-medium text-foreground">
|
|
||||||
{providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.selectPlaceholder'))}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</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>
|
</button>
|
||||||
) : (
|
<MobileOverlayPanel
|
||||||
<DropdownMenu open={isReady && isDropdownOpen} onOpenChange={isReady ? setIsDropdownOpen : undefined}>
|
open={isMobilePanelOpen}
|
||||||
<DropdownMenuTrigger asChild>
|
onClose={closePicker}
|
||||||
<div className={cn(
|
title={t('settings.agents.modelSelector.title')}
|
||||||
'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
|
{picker}
|
||||||
)}>
|
</MobileOverlayPanel>
|
||||||
{!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' });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalItems = flatModelList.length;
|
return (
|
||||||
|
<DropdownMenu open={isReady && isDropdownOpen} onOpenChange={isReady ? setIsDropdownOpen : undefined}>
|
||||||
// Handle keyboard navigation
|
<DropdownMenuTrigger asChild>
|
||||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
<div className={cn(
|
||||||
e.stopPropagation();
|
'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',
|
||||||
if (e.key === 'ArrowDown') {
|
className,
|
||||||
e.preventDefault();
|
)}>
|
||||||
const nextIndex = (selectedIndex + 1) % Math.max(1, totalItems);
|
{!isReady ? (
|
||||||
setSelectedIndex(nextIndex);
|
<>
|
||||||
setTimeout(() => {
|
<Icon name="loader-4" className="h-3.5 w-3.5 animate-spin text-muted-foreground flex-shrink-0" />
|
||||||
itemRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
<span className="typography-ui-label font-normal whitespace-nowrap text-muted-foreground">
|
||||||
}, 0);
|
{isUnavailable ? t('common.unavailable') : t('common.loading')}
|
||||||
} else if (e.key === 'ArrowUp') {
|
</span>
|
||||||
e.preventDefault();
|
</>
|
||||||
const prevIndex = (selectedIndex - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems);
|
) : (
|
||||||
setSelectedIndex(prevIndex);
|
<>
|
||||||
setTimeout(() => {
|
{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" />}
|
||||||
itemRefs.current[prevIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
<span className="typography-ui-label font-normal whitespace-nowrap text-foreground">{triggerLabel}</span>
|
||||||
}, 0);
|
</>
|
||||||
} else if (e.key === 'Enter') {
|
)}
|
||||||
e.preventDefault();
|
<Icon name="arrow-down-s" className="h-4 w-4 flex-shrink-0 text-muted-foreground/50" />
|
||||||
const selectedItem = flatModelList[selectedIndex];
|
</div>
|
||||||
if (selectedItem) {
|
</DropdownMenuTrigger>
|
||||||
handleProviderAndModelChange(selectedItem.providerID, selectedItem.modelID);
|
<DropdownMenuContent className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col" align="start">
|
||||||
}
|
{picker}
|
||||||
} else if (e.key === 'Escape') {
|
</DropdownMenuContent>
|
||||||
e.preventDefault();
|
</DropdownMenu>
|
||||||
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()}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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