51: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"] 52: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"] 53:T163f,"use client"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; import { field, mono, paper } from "./surfaces"; import { clamp } from "../utils/range"; export interface SettingToggle { key: string; label: string; detail: string; on: boolean; } export function SettingsPanel({ model, models, systemPrompt, temperature, toggles, onModelChange, onSystemPromptChange, onTemperatureChange, onToggle, className, ...props }: Omit< ComponentProps<"div">, | "children" | "model" | "models" | "systemPrompt" | "temperature" | "toggles" | "onModelChange" | "onSystemPromptChange" | "onTemperatureChange" | "onToggle" > & { model: string; models: readonly string[]; systemPrompt: string; temperature: number; toggles: readonly SettingToggle[]; onModelChange?: (model: string) => void; onSystemPromptChange?: (prompt: string) => void; onTemperatureChange?: (temperature: number) => void; onToggle?: (key: string) => void; }) { return (

model

{models.map((option) => { const className = cn( "flex-1 rounded-full py-1 text-xs font-medium transition-[background-color,color,scale] duration-150", onModelChange && "active:scale-[0.97]", option === model ? "bg-background text-foreground/90" : onModelChange ? "text-muted-foreground hover:text-foreground/70" : "text-muted-foreground", ); return onModelChange ? ( ) : ( {option} ); })}

system prompt

onSystemPromptChange?.(event.target.value)}
          rows={3}
          aria-label="System prompt"
          className={cn(
            field,
            "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",
          )}
        />
      </div>

<div className="flex flex-col gap-1.5">
        <span className="flex items-baseline justify-between">
          <span className={cn(mono, "text-muted-foreground")}>temperature</span>
          <span className={cn(mono, "text-muted-foreground tabular-nums")}>
            {clamp(temperature, 0, 2).toFixed(1)}
          </span>
        </span>
        <input
          type="range"
          min={0}
          max={2}
          step={0.1}
          value={clamp(temperature, 0, 2)}
          aria-label="Temperature"
          onChange={(event) =>
            onTemperatureChange?.(Number(event.target.value))
          }
          className="accent-foreground/80 h-1 w-full cursor-pointer"
        />
      </div>

<div className="flex flex-col gap-2.5">
        {toggles.map((toggle) => (
          <div key={toggle.key} className="flex items-center gap-3">
            <span className="flex min-w-0 flex-1 flex-col">
              <span className="truncate text-[13px]">{toggle.label}</span>
              <span className="text-muted-foreground truncate text-xs">
                {toggle.detail}
              </span>
            </span>
            {onToggle ? (
              <button
                type="button"
                role="switch"
                aria-checked={toggle.on}
                aria-label={toggle.label}
                onClick={() => onToggle(toggle.key)}
                className={cn(
                  "flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition-colors duration-200",
                  toggle.on ? "bg-foreground/80" : "bg-foreground/15",
                )}
              >
                <span
                  className={cn(
                    "bg-background size-4 rounded-full transition-transform duration-200 motion-reduce:transition-none",
                    toggle.on && "translate-x-4",
                  )}
                />
              </button>
            ) : (
              <span
                role="switch"
                aria-checked={toggle.on}
                aria-disabled="true"
                aria-label={toggle.label}
                className={cn(
                  "flex h-5 w-9 shrink-0 items-center rounded-full p-0.5",
                  toggle.on ? "bg-foreground/80" : "bg-foreground/15",
                )}
              >
                <span
                  className={cn(
                    "bg-background size-4 rounded-full",
                    toggle.on && "translate-x-4",
                  )}
                />
              </span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}
50:["$","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,["$","$L51",null,{"namespace":"@assistant-ui","registryDependencies":["https://r.assistant-ui.com/elements-surfaces.json","https://r.assistant-ui.com/elements-range.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/assistant-ui/elements/settings-panel.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>