{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-settings-panel",
  "type": "registry:component",
  "title": "Settings",
  "description": "Model, system prompt, temperature, and what the assistant is allowed to do.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json",
    "https://r.assistant-ui.com/elements-range.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/settings-panel.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/settings-panel.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, mono, paper } from \"./surfaces\";\nimport { clamp } from \"../utils/range\";\n\nexport interface SettingToggle {\n  key: string;\n  label: string;\n  detail: string;\n  on: boolean;\n}\n\nexport function SettingsPanel({\n  model,\n  models,\n  systemPrompt,\n  temperature,\n  toggles,\n  onModelChange,\n  onSystemPromptChange,\n  onTemperatureChange,\n  onToggle,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"model\"\n  | \"models\"\n  | \"systemPrompt\"\n  | \"temperature\"\n  | \"toggles\"\n  | \"onModelChange\"\n  | \"onSystemPromptChange\"\n  | \"onTemperatureChange\"\n  | \"onToggle\"\n> & {\n  model: string;\n  models: readonly string[];\n  systemPrompt: string;\n  temperature: number;\n  toggles: readonly SettingToggle[];\n  onModelChange?: (model: string) => void;\n  onSystemPromptChange?: (prompt: string) => void;\n  onTemperatureChange?: (temperature: number) => void;\n  onToggle?: (key: string) => void;\n}) {\n  return (\n    <div\n      data-slot=\"settings-panel\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col gap-4 rounded-[20px] p-4\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex flex-col gap-1.5\">\n        <span className={cn(mono, \"text-foreground/30\")}>model</span>\n        <div className={cn(field, \"flex gap-0.5 rounded-full p-0.5\")}>\n          {models.map((option) => (\n            <button\n              key={option}\n              type=\"button\"\n              aria-pressed={option === model}\n              onClick={() => onModelChange?.(option)}\n              className={cn(\n                \"flex-1 rounded-full py-1 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.97]\",\n                option === model\n                  ? \"bg-background text-foreground/90\"\n                  : \"text-foreground/45 hover:text-foreground/70\",\n              )}\n            >\n              {option}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-1.5\">\n        <span className={cn(mono, \"text-foreground/30\")}>system prompt</span>\n        <textarea\n          value={systemPrompt}\n          onChange={(event) => onSystemPromptChange?.(event.target.value)}\n          rows={3}\n          aria-label=\"System prompt\"\n          className={cn(\n            field,\n            \"text-foreground/80 focus-visible:ring-foreground/20 resize-none rounded-xl px-3 py-2 text-xs leading-relaxed outline-none focus-visible:ring-1\",\n          )}\n        />\n      </div>\n\n      <div className=\"flex flex-col gap-1.5\">\n        <span className=\"flex items-baseline justify-between\">\n          <span className={cn(mono, \"text-foreground/30\")}>temperature</span>\n          <span className={cn(mono, \"text-foreground/55 tabular-nums\")}>\n            {clamp(temperature, 0, 2).toFixed(1)}\n          </span>\n        </span>\n        <input\n          type=\"range\"\n          min={0}\n          max={2}\n          step={0.1}\n          value={clamp(temperature, 0, 2)}\n          aria-label=\"Temperature\"\n          onChange={(event) =>\n            onTemperatureChange?.(Number(event.target.value))\n          }\n          className=\"accent-foreground/80 h-1 w-full cursor-pointer\"\n        />\n      </div>\n\n      <div className=\"flex flex-col gap-2.5\">\n        {toggles.map((toggle) => (\n          <div key={toggle.key} className=\"flex items-center gap-3\">\n            <span className=\"flex min-w-0 flex-1 flex-col\">\n              <span className=\"truncate text-[13px]\">{toggle.label}</span>\n              <span className=\"text-foreground/35 truncate text-xs\">\n                {toggle.detail}\n              </span>\n            </span>\n            <button\n              type=\"button\"\n              role=\"switch\"\n              aria-checked={toggle.on}\n              aria-label={toggle.label}\n              onClick={() => onToggle?.(toggle.key)}\n              className={cn(\n                \"flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition-colors duration-200\",\n                toggle.on ? \"bg-foreground/80\" : \"bg-foreground/15\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"bg-background size-4 rounded-full transition-transform duration-200 motion-reduce:transition-none\",\n                  toggle.on && \"translate-x-4\",\n                )}\n              />\n            </button>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}