import { useEffect, useMemo, useRef, useState, type ReactNode } from "react"; import { IconCheck, IconChevronDown, IconChevronLeft, IconSearch, } from "@tabler/icons-react"; import { useTranslation } from "react-i18next"; import type { AcpProvider } from "@/shared/api/acp"; import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover"; import { SearchBar } from "@/shared/ui/SearchBar"; import { ScrollArea } from "@/shared/ui/scroll-area"; import { Spinner } from "@/shared/ui/spinner"; import { formatProviderLabel, getProviderIcon, } from "@/shared/ui/icons/ProviderIcons"; import type { ModelOption } from "../types"; interface AgentModelPickerProps { agents: AcpProvider[]; selectedAgentId: string; onAgentChange: (agentId: string) => void; currentModelId?: string | null; currentModelName?: string | null; availableModels: ModelOption[]; modelsLoading?: boolean; modelStatusMessage?: string | null; onModelChange?: (modelId: string) => void; loading?: boolean; isCompact?: boolean; showSelectedModelInTrigger?: boolean; onOpen?: () => void; } function getModelDisplayName(model: ModelOption) { return model.displayName ?? model.name; } function getGooseModelProviderLabel(model: ModelOption) { if (model.providerName) { return model.providerName; } if (model.providerId) { return formatProviderLabel(model.providerId); } return null; } function sortModels(models: ModelOption[], currentModelId: string | null) { return [...models].sort((left, right) => { if (left.id === currentModelId) return -1; if (right.id === currentModelId) return 1; const leftProvider = getGooseModelProviderLabel(left) ?? ""; const rightProvider = getGooseModelProviderLabel(right) ?? ""; if (leftProvider !== rightProvider) { return leftProvider.localeCompare(rightProvider); } return getModelDisplayName(left).localeCompare(getModelDisplayName(right)); }); } function PickerItem({ children, onClick, selected = false, disabled = false, className, }: { children: ReactNode; onClick?: () => void; selected?: boolean; disabled?: boolean; className?: string; }) { return ( ); } // ── Model list views ──────────────────────────────────────────────── type ModelView = "recommended" | "all"; function RecommendedModelList({ models, currentModelId, selectedAgentId, onModelSelect, onShowAll, t, }: { models: ModelOption[]; currentModelId: string | null; selectedAgentId: string; onModelSelect: (id: string) => void; onShowAll: () => void; t: (key: string) => string; }) { const recommended = useMemo(() => { const rec = models.filter((m) => m.recommended); // If the current model isn't in the recommended list, prepend it // so the user can always see what's selected. if ( currentModelId && rec.length > 0 && !rec.some((m) => m.id === currentModelId) ) { const current = models.find((m) => m.id === currentModelId); if (current) { return [current, ...rec]; } } // Fall back to full list if no recommendations exist (e.g. ACP agents). return rec.length > 0 ? rec : models; }, [models, currentModelId]); const sorted = useMemo( () => sortModels(recommended, currentModelId), [recommended, currentModelId], ); const hasMore = models.length > recommended.length; return (

{t("toolbar.model")}

{sorted.map((model) => { const providerLabel = getGooseModelProviderLabel(model); return ( onModelSelect(model.id)} selected={model.id === currentModelId} className="justify-between" >

{selectedAgentId === "goose" && model.providerId ? ( {getProviderIcon(model.providerId, "size-3.5")} ) : null}

{getModelDisplayName(model)}

{model.id === currentModelId ? ( ) : null} ); })}

{hasMore ? (

) : null}

); } function AllModelsList({ models, currentModelId, selectedAgentId, onModelSelect, onBack, t, }: { models: ModelOption[]; currentModelId: string | null; selectedAgentId: string; onModelSelect: (id: string) => void; onBack: () => void; t: (key: string) => string; }) { const [query, setQuery] = useState(""); const inputRef = useRef(null); useEffect(() => { // Auto-focus search on mount. inputRef.current?.focus(); }, []); const filtered = useMemo(() => { if (!query.trim()) { return sortModels(models, currentModelId); } const q = query.toLowerCase(); const matches = models.filter( (m) => m.name.toLowerCase().includes(q) || m.id.toLowerCase().includes(q) || m.displayName?.toLowerCase().includes(q) || m.providerName?.toLowerCase().includes(q) || m.providerId?.toLowerCase().includes(q), ); return sortModels(matches, currentModelId); }, [models, query, currentModelId]); return (

{filtered.length > 0 ? (

{filtered.map((model) => { const providerLabel = getGooseModelProviderLabel(model); const displayName = getModelDisplayName(model); // Show the raw model_id as secondary text when it differs from name const showModelId = model.id !== model.name && model.id !== displayName; return ( onModelSelect(model.id)} selected={model.id === currentModelId} className="justify-between" >

{selectedAgentId === "goose" && model.providerId ? ( {getProviderIcon(model.providerId, "size-3.5")} ) : null}

{displayName}

{showModelId ? (

{model.id}

) : null}

{model.id === currentModelId ? ( ) : null} ); })}

) : (

{t("toolbar.noSearchResults")}

)}

); } // ── Main component ────────────────────────────────────────────────── export function AgentModelPicker({ agents, selectedAgentId, onAgentChange, currentModelId = null, currentModelName = null, availableModels, modelsLoading = false, modelStatusMessage = null, onModelChange, loading = false, isCompact = false, showSelectedModelInTrigger = true, onOpen, }: AgentModelPickerProps) { const { t } = useTranslation("chat"); const [open, setOpen] = useState(false); const [modelView, setModelView] = useState("recommended"); const selectedAgentLabel = agents.find((agent) => agent.id === selectedAgentId)?.label ?? formatProviderLabel(selectedAgentId); const hasSelectedModel = showSelectedModelInTrigger && (currentModelName !== null || currentModelId !== null); const triggerModelLabel = hasSelectedModel ? (currentModelName ?? currentModelId) : null; const handleAgentSelect = (agentId: string) => { if (agentId !== selectedAgentId) { onAgentChange(agentId); setModelView("recommended"); } }; const handleModelSelect = (modelId: string) => { onModelChange?.(modelId); setOpen(false); }; // Reset to recommended view when popover closes. useEffect(() => { if (!open) { setModelView("recommended"); } }, [open]); // When in "all" view, expand the popover to full width for the search experience. const isAllView = modelView === "all"; return ( { setOpen(nextOpen); if (nextOpen) onOpen?.(); }} > { if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); const col = (document.activeElement as HTMLElement)?.closest( "[data-col]", ); if (!col) return; const items = Array.from( col.querySelectorAll("button:not(:disabled)"), ); const idx = items.indexOf(document.activeElement as HTMLElement); const next = e.key === "ArrowDown" ? items[(idx + 1) % items.length] : items[(idx - 1 + items.length) % items.length]; next?.focus(); } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") { e.preventDefault(); const content = e.currentTarget as HTMLElement; const cols = Array.from( content.querySelectorAll("[data-col]"), ); const currentCol = (document.activeElement as HTMLElement)?.closest( "[data-col]", ); const colIdx = cols.indexOf(currentCol as HTMLElement); const targetCol = e.key === "ArrowRight" ? cols[(colIdx + 1) % cols.length] : cols[(colIdx - 1 + cols.length) % cols.length]; if (!targetCol) return; const targetItems = Array.from( targetCol.querySelectorAll("button:not(:disabled)"), ); const currentItems = Array.from( currentCol?.querySelectorAll( "button:not(:disabled)", ) ?? [], ); const currentIdx = currentItems.indexOf( document.activeElement as HTMLElement, ); const target = targetItems[Math.min(currentIdx, targetItems.length - 1)] ?? targetItems[0]; target?.focus(); } }} >

{/* Agent column — hidden in "all models" search view */} {!isAllView ? (

{t("toolbar.agent")}

{agents.map((agent) => { const isSelected = agent.id === selectedAgentId; return ( handleAgentSelect(agent.id)} selected={isSelected} > {getProviderIcon(agent.id, "size-4")} {agent.label} {isSelected ? ( ) : null} ); })}

) : null} {/* Model column */}

{modelsLoading ? (

{t("toolbar.model")}

{currentModelName || currentModelId ? (

{currentModelName ?? currentModelId}

) : (

{t("toolbar.loadingModels")}

)}

) : availableModels.length > 0 ? ( modelView === "recommended" ? ( setModelView("all")} t={t} /> ) : ( setModelView("recommended")} t={t} /> ) ) : (

{t("toolbar.model")}

{modelStatusMessage ?? currentModelName ?? t("toolbar.noModelsAvailable")}

)}

); }