{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "model-picker", "type": "registry:ui", "title": "Model Picker", "description": "A chat-style model switcher. Provider icons on a side rail filter the list to models available from that provider.", "author": "Aditya Ojha ", "categories": [ "ai", "chat", "popover", "select", "interactive" ], "dependencies": [ "lucide-react", "radix-ui" ], "registryDependencies": [ "popover", "tooltip" ], "meta": { "docs": "https://akoder.xyz/components/model-picker", "source": "https://github.com/AdityaKodez/adityaojha/blob/main/components/ui/model-picker.tsx" }, "files": [ { "path": "components/ui/model-picker.tsx", "content": "\"use client\";\n\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport {\n Brain,\n Check,\n ChevronDown,\n ImageIcon,\n Search,\n X,\n type LucideIcon,\n} from \"lucide-react\";\nimport Image from \"next/image\";\nimport {\n Fragment,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n type KeyboardEvent,\n type ReactNode,\n type SVGProps,\n} from \"react\";\n\nexport type IconProps = SVGProps;\n\n/** Real Grok mark, same paths as `ask-ai`. No file lives under `public/ai/`. */\nexport function GrokIcon(props: IconProps) {\n return (\n \n \n \n \n );\n}\n\nconst fileLogos: Record = {\n openai: { src: \"/ai/openai.svg\", invertInDark: true },\n anthropic: { src: \"/ai/claude.svg\" },\n google: { src: \"/ai/gemini.svg\" },\n};\n\nexport type ModelCapability = \"reasoning\" | \"image\";\n\nexport type ThinkingEffort = \"none\" | \"low\" | \"medium\" | \"high\" | \"max\";\n\nexport type ModelPickerModel = {\n id: string;\n name: string;\n description?: string;\n /** Defaults to true. False means the row is omitted from the list. */\n available?: boolean;\n /** Corner chips. Reasoning means the model can think. Image means it takes or makes images. */\n capabilities?: readonly ModelCapability[];\n /** Selectable thinking efforts, rendered in the footer track. Omit when the model has no thinking control. */\n thinking?: readonly ThinkingEffort[];\n defaultThinking?: ThinkingEffort;\n};\n\nexport type ModelPickerProvider = {\n id: string;\n name: string;\n icon?: ReactNode;\n models: ModelPickerModel[];\n};\n\nexport type ModelPickerProps = {\n providers: readonly ModelPickerProvider[];\n value?: string;\n defaultValue?: string;\n onValueChange?: (\n modelId: string,\n providerId: string,\n thinking?: ThinkingEffort,\n ) => void;\n thinking?: ThinkingEffort;\n defaultThinking?: ThinkingEffort;\n /** Close the popover as soon as a model row is picked. Off by default so the thinking track stays reachable. */\n closeOnSelect?: boolean;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n align?: \"start\" | \"center\" | \"end\";\n placeholder?: string;\n className?: string;\n};\n\nconst CAPABILITY_LABEL: Record = {\n reasoning: \"Reasoning\",\n image: \"Image\",\n};\n\nconst CAPABILITY_ICON: Record = {\n reasoning: Brain,\n image: ImageIcon,\n};\n\n/** One accent per capability so the icons read apart inside the shared pill. Literal palette colors keep the file portable. */\nconst CAPABILITY_ACCENT: Record = {\n reasoning: \"text-violet-500 dark:text-violet-400\",\n image: \"text-teal-500 dark:text-teal-400\",\n};\n\nconst THINKING_LABEL: Record = {\n none: \"Off\",\n low: \"Low\",\n medium: \"Medium\",\n high: \"High\",\n max: \"Max\",\n};\n\nconst FULL_THINKING = [\"low\", \"medium\", \"high\", \"max\"] as const;\nconst FLASH_THINKING = [\"none\", \"low\", \"medium\"] as const;\n\n/** Thin scrollbar in both engines. Literal fallbacks keep the file portable outside this site. */\nconst THIN_SCROLLBAR =\n \"[scrollbar-color:var(--color-border,#d4d4d8)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--color-border,#d4d4d8)] [&::-webkit-scrollbar-track]:bg-transparent\";\n\n/** Hidden scrollbar for the narrow provider rail, where a visible track would eat the icons. */\nconst HIDDEN_SCROLLBAR =\n \"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden\";\n\nexport const defaultModelProviders: readonly ModelPickerProvider[] = [\n {\n id: \"openai\",\n name: \"OpenAI\",\n models: [\n {\n id: \"gpt-5.6-sol\",\n name: \"GPT-5.6 Sol\",\n description: \"Flagship depth for hard problems\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: FULL_THINKING,\n defaultThinking: \"medium\",\n },\n {\n id: \"gpt-5.6-terra\",\n name: \"GPT-5.6 Terra\",\n description: \"Balanced speed and reasoning\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: FULL_THINKING,\n defaultThinking: \"medium\",\n },\n {\n id: \"gpt-5.6-luna\",\n name: \"GPT-5.6 Luna\",\n description: \"Fast replies for light work\",\n capabilities: [\"image\"],\n thinking: FLASH_THINKING,\n defaultThinking: \"low\",\n },\n {\n id: \"gpt-5.5\",\n name: \"GPT-5.5\",\n description: \"Previous generation, still dependable\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: [\"low\", \"medium\", \"high\"],\n defaultThinking: \"medium\",\n },\n ],\n },\n {\n id: \"anthropic\",\n name: \"Anthropic\",\n models: [\n {\n id: \"claude-opus-5\",\n name: \"Claude Opus 5\",\n description: \"Deepest reasoning, long context\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: FULL_THINKING,\n defaultThinking: \"high\",\n },\n {\n id: \"claude-sonnet-5\",\n name: \"Claude Sonnet 5\",\n description: \"Agentic coding and tool use\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: FULL_THINKING,\n defaultThinking: \"medium\",\n },\n {\n id: \"claude-haiku-4.5\",\n name: \"Claude Haiku 4.5\",\n description: \"Quick drafts at low cost\",\n capabilities: [\"image\"],\n },\n ],\n },\n {\n id: \"xai\",\n name: \"xAI\",\n models: [\n {\n id: \"grok-4.6\",\n name: \"Grok 4.6\",\n description: \"Flagship with live search\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: FULL_THINKING,\n defaultThinking: \"high\",\n },\n {\n id: \"grok-4.20\",\n name: \"Grok 4.20\",\n description: \"Extended reasoning for tough prompts\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: FULL_THINKING,\n defaultThinking: \"high\",\n },\n {\n id: \"grok-4.5\",\n name: \"Grok 4.5\",\n description: \"Previous generation, broad knowledge\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: [\"low\", \"medium\", \"high\"],\n defaultThinking: \"medium\",\n },\n ],\n },\n {\n id: \"google\",\n name: \"Google\",\n models: [\n {\n id: \"gemini-3.8-flash\",\n name: \"Gemini 3.8 Flash\",\n description: \"Fast multimodal all rounder\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: FULL_THINKING,\n defaultThinking: \"medium\",\n },\n {\n id: \"gemini-3.1-pro\",\n name: \"Gemini 3.1 Pro\",\n description: \"Deep think for hard analysis\",\n capabilities: [\"reasoning\", \"image\"],\n thinking: FULL_THINKING,\n defaultThinking: \"high\",\n },\n {\n id: \"gemini-3.1-flash-image\",\n name: \"Gemini 3.1 Flash Image\",\n description: \"Image generation and editing\",\n capabilities: [\"image\"],\n },\n ],\n },\n];\n\nfunction isAvailable(model: ModelPickerModel) {\n return model.available !== false;\n}\n\nfunction visibleModels(provider: ModelPickerProvider) {\n return provider.models.filter(isAvailable);\n}\n\nfunction visibleProviders(providers: readonly ModelPickerProvider[]) {\n return providers.filter((provider) => visibleModels(provider).length > 0);\n}\n\n/** Name, id, description, and provider name all count as a hit. */\nfunction matchesQuery(\n model: ModelPickerModel,\n provider: ModelPickerProvider,\n query: string,\n) {\n return [model.name, model.id, model.description ?? \"\", provider.name].some(\n (field) => field.toLowerCase().includes(query),\n );\n}\n\nfunction findModel(\n providers: readonly ModelPickerProvider[],\n modelId: string | undefined,\n) {\n if (!modelId) return undefined;\n for (const provider of providers) {\n const model = provider.models.find((item) => item.id === modelId);\n if (model) return { provider, model };\n }\n return undefined;\n}\n\nfunction ProviderGlyph({\n provider,\n className,\n}: {\n provider: ModelPickerProvider;\n className?: string;\n}) {\n if (provider.icon) {\n return (\n svg]:size-full\", className)}>\n {provider.icon}\n \n );\n }\n const file = fileLogos[provider.id];\n if (file) {\n return (\n \n );\n }\n if (provider.id === \"xai\") {\n return ;\n }\n return (\n \n {provider.name.charAt(0)}\n \n );\n}\n\nfunction CapabilityChips({\n capabilities,\n}: {\n capabilities?: readonly ModelCapability[];\n}) {\n if (!capabilities?.length) return null;\n return (\n \n {capabilities.map((capability, index) => {\n const Icon = CAPABILITY_ICON[capability];\n const label = CAPABILITY_LABEL[capability];\n return (\n \n {index > 0 ? (\n \n ) : null}\n \n \n \n \n \n \n \n {label}\n \n \n \n );\n })}\n \n );\n}\n\n/** Stepped bars that fill up to the current effort, each in its own accent. Decorative. */\nfunction EffortMeter({\n levels,\n filled,\n className,\n}: {\n levels: readonly ThinkingEffort[];\n filled: number;\n className?: string;\n}) {\n return (\n \n {levels.map((effort, index) => (\n \n ))}\n \n );\n}\n\n/** Segmented track with a sliding indicator. One control for the whole popover. */\nfunction ThinkingTrack({\n levels,\n value,\n onChange,\n}: {\n levels: readonly ThinkingEffort[];\n value?: ThinkingEffort;\n onChange: (effort: ThinkingEffort) => void;\n}) {\n const refs = useRef>([]);\n const current = value && levels.includes(value) ? value : levels[0];\n const activeIndex = Math.max(0, levels.indexOf(current));\n\n function move(index: number) {\n const next = (index + levels.length) % levels.length;\n onChange(levels[next]);\n refs.current[next]?.focus();\n }\n\n function onKeyDown(event: KeyboardEvent) {\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n event.preventDefault();\n move(activeIndex + 1);\n } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n move(activeIndex - 1);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n move(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n move(levels.length - 1);\n }\n }\n\n return (\n \n \n {levels.map((effort, index) => {\n const active = index === activeIndex;\n return (\n {\n refs.current[index] = node;\n }}\n onClick={() => onChange(effort)}\n onKeyDown={onKeyDown}\n className={cn(\n \"relative z-10 min-w-0 flex-1 cursor-pointer touch-manipulation rounded-full px-1.5 py-1.5 text-center text-[11px] font-medium leading-none text-muted-foreground transition-colors duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none motion-reduce:transition-none\",\n active && \"text-foreground\",\n )}\n >\n {THINKING_LABEL[effort]}\n \n );\n })}\n \n );\n}\n\nexport function ModelPicker({\n providers,\n value,\n defaultValue,\n onValueChange,\n thinking,\n defaultThinking,\n closeOnSelect = false,\n open,\n defaultOpen = false,\n onOpenChange,\n side = \"top\",\n align = \"start\",\n placeholder = \"Select a model\",\n className,\n}: ModelPickerProps) {\n const listId = useId();\n const rails = useMemo(() => visibleProviders(providers), [providers]);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const [internalValue, setInternalValue] = useState(defaultValue);\n const selectedId = value ?? internalValue;\n const isOpen = open ?? internalOpen;\n const selected = findModel(providers, selectedId);\n const [internalThinking, setInternalThinking] = useState(\n defaultThinking ?? selected?.model.defaultThinking,\n );\n const selectedThinking = thinking ?? internalThinking;\n\n const selectedProviderId = selected?.provider.id;\n\n const [activeProviderId, setActiveProviderId] = useState(\n () => findModel(providers, selectedId)?.provider.id ?? rails[0]?.id ?? \"\",\n );\n\n const [query, setQuery] = useState(\"\");\n const search = query.trim().toLowerCase();\n const searching = search.length > 0;\n\n const activeProvider =\n rails.find((provider) => provider.id === activeProviderId) ?? rails[0];\n /** Search spans every provider. Without a query the list stays scoped to the active rail. */\n const rows = useMemo(() => {\n if (searching) {\n return rails.flatMap((provider) =>\n visibleModels(provider)\n .filter((model) => matchesQuery(model, provider, search))\n .map((model) => ({ provider, model })),\n );\n }\n if (!activeProvider) return [];\n return visibleModels(activeProvider).map((model) => ({\n provider: activeProvider,\n model,\n }));\n }, [activeProvider, rails, search, searching]);\n\n const activeModelIndex = Math.max(\n 0,\n rows.findIndex((row) => row.model.id === selectedId),\n );\n\n const providerRefs = useRef>([]);\n const modelRefs = useRef>([]);\n const searchRef = useRef(null);\n const railRef = useRef(null);\n\n /**\n * Centre the selected provider in the rail when the panel opens. Past roughly a\n * dozen providers the rail scrolls, and the selected one can sit below the fold,\n * so the panel would otherwise open with no visible active tab.\n *\n * Keyed on the selected provider rather than the active tab so clicking through\n * the rail never yanks the scroll position out from under the pointer. The\n * double frame is needed because the popover is portalled: on the first commit\n * the rail has no height yet and any scroll would clamp to zero.\n */\n useEffect(() => {\n if (!isOpen || searching) return;\n const index = rails.findIndex(\n (provider) => provider.id === selectedProviderId,\n );\n if (index < 0) return;\n let inner = 0;\n const outer = requestAnimationFrame(() => {\n inner = requestAnimationFrame(() => {\n const button = providerRefs.current[index];\n const rail = railRef.current;\n if (!button || !rail) return;\n if (rail.scrollHeight <= rail.clientHeight) return;\n const offset =\n button.offsetTop - (rail.clientHeight - button.offsetHeight) / 2;\n rail.scrollTop = Math.max(0, offset);\n });\n });\n return () => {\n cancelAnimationFrame(outer);\n cancelAnimationFrame(inner);\n };\n }, [isOpen, rails, searching, selectedProviderId]);\n\n const changeOpen = useCallback(\n (next: boolean) => {\n setInternalOpen(next);\n onOpenChange?.(next);\n setQuery(\"\");\n if (next) {\n const owner = findModel(providers, selectedId)?.provider.id;\n if (owner) setActiveProviderId(owner);\n }\n },\n [onOpenChange, providers, selectedId],\n );\n\n const selectModel = useCallback(\n (modelId: string, providerId: string) => {\n const found = findModel(providers, modelId)?.model;\n const effort = found?.defaultThinking ?? found?.thinking?.[0];\n setInternalValue(modelId);\n setInternalThinking(effort);\n onValueChange?.(modelId, providerId, effort);\n if (closeOnSelect) changeOpen(false);\n },\n [changeOpen, closeOnSelect, onValueChange, providers],\n );\n\n const selectThinking = useCallback(\n (effort: ThinkingEffort) => {\n setInternalThinking(effort);\n if (selected) {\n onValueChange?.(selected.model.id, selected.provider.id, effort);\n }\n },\n [onValueChange, selected],\n );\n\n function focusProvider(index: number) {\n const next = (index + rails.length) % rails.length;\n providerRefs.current[next]?.focus();\n }\n\n function focusModel(index: number) {\n if (rows.length === 0) return;\n const next = (index + rows.length) % rows.length;\n modelRefs.current[next]?.focus();\n }\n\n function onSearchKeyDown(event: KeyboardEvent) {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n focusModel(0);\n } else if (event.key === \"Enter\") {\n event.preventDefault();\n const first = rows[0];\n if (first) selectModel(first.model.id, first.provider.id);\n } else if (event.key === \"Escape\" && query) {\n event.preventDefault();\n event.stopPropagation();\n setQuery(\"\");\n }\n }\n\n function onRailKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n focusProvider(index + 1);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n focusProvider(index - 1);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n focusProvider(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n focusProvider(rails.length - 1);\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n focusModel(0);\n }\n }\n\n function onListKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n focusModel(index + 1);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n focusModel(index - 1);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n focusModel(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n focusModel(rows.length - 1);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n const railIndex = rails.findIndex((provider) => provider.id === activeProvider?.id);\n providerRefs.current[railIndex]?.focus();\n }\n }\n\n const thinkingLevels = selected?.model.thinking;\n const effortIndex = thinkingLevels && selectedThinking\n ? thinkingLevels.indexOf(selectedThinking)\n : -1;\n const filledSteps =\n !thinkingLevels || selectedThinking === \"none\" || effortIndex < 0\n ? 0\n : effortIndex + 1;\n const thinkingLabel =\n thinkingLevels && selectedThinking && selectedThinking !== \"none\"\n ? THINKING_LABEL[selectedThinking]\n : null;\n const triggerLabel = selected?.model.name ?? placeholder;\n\n return (\n \n \n \n {selected ? (\n \n \n \n ) : null}\n \n {triggerLabel}\n \n {thinkingLabel ? (\n \n \n \n \n ) : null}\n \n \n {\n event.preventDefault();\n requestAnimationFrame(() => {\n searchRef.current?.focus();\n });\n }}\n >\n {rails.length === 0 || !activeProvider ? (\n

No models available

\n ) : (\n
\n \n
\n {/*\n The rail scroller is taken out of flow so a long provider list cannot\n inflate the row. Left in flow it grows to its natural height and drags\n the panel off screen instead of scrolling, because `overflow-y-auto`\n needs a bounded height and a stretched flex item never gets one here.\n Out of flow, the row height comes from the model column and the rail\n scrolls inside it at any provider count.\n */}\n
\n \n {rails.map((provider, index) => {\n const selectedRail = provider.id === activeProvider.id;\n return (\n \n \n {\n providerRefs.current[index] = node;\n }}\n onClick={() => {\n setQuery(\"\");\n setActiveProviderId(provider.id);\n }}\n onKeyDown={(event) => onRailKeyDown(event, index)}\n className={cn(\n \"inline-flex size-9 shrink-0 cursor-pointer touch-manipulation items-center justify-center rounded-xl text-muted-foreground transition-[background-color,color,box-shadow] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:bg-popover/70 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none sm:size-11\",\n selectedRail &&\n !searching &&\n \"bg-popover text-foreground ring-1 ring-inset ring-border/60\",\n )}\n >\n \n \n \n \n {provider.name}\n \n \n );\n })}\n
\n
\n
\n
\n \n setQuery(event.target.value)}\n onKeyDown={onSearchKeyDown}\n placeholder=\"Search models\"\n aria-label=\"Search models\"\n aria-controls={listId}\n autoComplete=\"off\"\n spellCheck={false}\n className=\"h-6 w-full min-w-0 bg-transparent text-sm tracking-tight text-foreground placeholder:text-muted-foreground focus-visible:outline-none\"\n />\n {query ? (\n {\n setQuery(\"\");\n searchRef.current?.focus();\n }}\n className=\"inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:bg-popover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none motion-reduce:transition-none\"\n >\n \n \n ) : null}\n
\n \n \n \n {searching\n ? `${rows.length} ${rows.length === 1 ? \"result\" : \"results\"}`\n : activeProvider.name}\n

\n \n {rows.length === 0 ? (\n \n {`No models match \"${query.trim()}\"`}\n

\n ) : null}\n {rows.map(({ provider, model }, index) => {\n const isSelected = model.id === selectedId;\n return (\n {\n modelRefs.current[index] = node;\n }}\n onClick={() => selectModel(model.id, provider.id)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n selectModel(model.id, provider.id);\n return;\n }\n onListKeyDown(event, index);\n }}\n className={cn(\n \"flex min-h-11 w-full min-w-0 cursor-pointer touch-manipulation items-center justify-between gap-2 rounded-xl px-2.5 py-2 text-left transition-[background-color] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none\",\n isSelected && \"bg-muted\",\n )}\n >\n {searching ? (\n \n \n \n ) : null}\n \n \n \n {model.name}\n \n {isSelected ? (\n \n ) : null}\n \n {model.description ? (\n \n {model.description}\n \n ) : null}\n \n \n
\n );\n })}\n
\n \n
\n \n \n \n Thinking\n \n \n {thinkingLevels?.length ? (\n \n ) : (\n \n {selected\n ? \"Not available for this model\"\n : \"Select a model to set the effort\"}\n \n )}\n
\n \n\n \n \n )}\n \n \n \n );\n}\n", "type": "registry:ui" }, { "path": "public/ai/openai.svg", "content": "", "type": "registry:file" }, { "path": "public/ai/claude.svg", "content": "", "type": "registry:file" }, { "path": "public/ai/gemini.svg", "content": "", "type": "registry:file" } ], "docs": "## Installation\n\n```bash\nnpx shadcn@latest add https://akoder.xyz/r/model-picker.json\n```\n\n## Usage\n\n```tsx\nimport { useState } from \"react\";\nimport { ModelPicker, defaultModelProviders } from \"@/components/ui/model-picker\";\n\nexport function ChatComposer() {\n const [model, setModel] = useState(\"grok-4.6\");\n return (\n \n );\n}\n```" }