50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1caf,"use client"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import * as React from "react"; import { ModelSelector, type ModelOption } from "@/components/ui/model-selector"; import { ReasoningLevel, type ReasoningLevel as ReasoningLevelValue, } from "@/components/ui/reasoning-level"; import { ToolToggle, type ToolSetting } from "@/components/ui/tool-toggle"; import { MemoryList, type MemoryItem } from "@/components/ui/memory-list"; /* ------------------------------------------------------------------ */ /* Data */ /* ------------------------------------------------------------------ */ const MODELS: ModelOption[] = [ { id: "sonnet", name: "Claude Sonnet 5", hint: "Balanced speed and quality", badges: ["Default"], icon: }, { id: "opus", name: "Claude Opus 5", hint: "Best for hard problems", badges: ["Deep thinking"], icon: }, { id: "haiku", name: "Claude Haiku 4.5", hint: "Fastest responses", badges: ["Fast"], icon: }, ]; function initTools(): ToolSetting[] { return [ { id: "search", name: "Web search", description: "Find current information online", enabled: true, icon: , }, { id: "code", name: "Code execution", description: "Run code to verify answers", enabled: true, icon: , }, { id: "files", name: "File access", description: "Read and edit attached files", enabled: false, icon: , }, { id: "browser", name: "Browser", description: "Open pages from the conversation", enabled: false, icon: , }, ]; } const INITIAL_MEMORIES: MemoryItem[] = [ { id: "m1", text: "Builds AI chat interfaces in TypeScript with Tailwind and zero UI dependencies.", updatedAt: "2d ago", }, { id: "m2", text: "Prefers zinc-based palettes and compact, dependency-free components.", updatedAt: "5d ago" }, { id: "m3", text: "Shipping a voice assistant pattern this week.", updatedAt: "Today" }, ]; /* ------------------------------------------------------------------ */ /* Icons */ /* ------------------------------------------------------------------ */ /** * The provider's mark, inlined so this pattern stays dependency-free. Swap it * for whichever providers your own model list uses. */ function ClaudeMark() { return ( ); } function SearchIcon() { return ( ); } function CodeIcon() { return ( ); } function FileIcon() { return ( ); } function GlobeIcon() { return ( ); } /* ------------------------------------------------------------------ */ /* ModelPreferencesPattern */ /* ------------------------------------------------------------------ */ export function ModelPreferencesPattern() { const [model, setModel] = React.useState("sonnet"); const [level, setLevel] = React.useState("balanced"); const [tools, setTools] = React.useState(initTools); const [memories, setMemories] = React.useState(INITIAL_MEMORIES); const idRef = React.useRef(4); function toggleTool(id: string, enabled: boolean) { setTools((ts) => ts.map((t) => (t.id === id ? { ...t, enabled } : t))); } function addMemory(text: string) { setMemories((m) => [...m, { id: `m${idRef.current++}`, text, updatedAt: "Just now" }]); } function forgetMemory(id: string) { setMemories((m) => m.filter((item) => item.id !== id)); } return ( {/* Header */}

Model & Memory Preferences

How the assistant thinks, which tools it may use, and what it remembers.

Saved

{/* Settings */}

Default model

Used for new conversations; you can still switch per message.

{/* Memory */}

Memories are included with each message so the assistant stays consistent. Remove anything you do not want stored.

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@scrimui","registryDependencies":["https://scrimui.dev/r/model-selector.json","https://scrimui.dev/r/reasoning-level.json","https://scrimui.dev/r/tool-toggle.json","https://scrimui.dev/r/memory-list.json","badge","card"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/showcase/patterns/model-preferences/model-preferences.tsx","content":"$52","type":"registry:block","target":"components/blocks/model-preferences.tsx"}],"className":"h-[70svh] min-h-80"}]]}]