52: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"] 53: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"] 54:T25dd,"use client"; import { Card } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import * as React from "react"; /* ------------------------------------------------------------------ */ /* Types */ /* ------------------------------------------------------------------ */ export type ModelOption = { id: string; name: string; description?: string; badges?: string[]; /** * Optional leading mark, e.g. the provider's logo. A slot rather than a * built-in lookup so this component stays dependency-free — pass whatever * icon element you already have. */ icon?: React.ReactNode; }; export type PromptInputModelSelectorProps = { models: ModelOption[]; defaultModel?: string; placeholder?: string; disabled?: boolean; onSubmit?: (value: string, modelId: string) => void; onChange?: (modelId: string) => void; className?: string; }; /* ------------------------------------------------------------------ */ /* Icons */ /* ------------------------------------------------------------------ */ function ArrowUpIcon(props: React.SVGProps) { return ( ); } function ChevronDownIcon(props: React.SVGProps) { return ( ); } function CheckIcon(props: React.SVGProps) { return ( ); } function SparkIcon(props: React.SVGProps) { return ( ); } function BoltIcon(props: React.SVGProps) { return ( ); } /* ------------------------------------------------------------------ */ /* PromptInputModelSelector */ /* ------------------------------------------------------------------ */ export function PromptInputModelSelector({ models, defaultModel, placeholder = "Ask anything…", disabled = false, onSubmit, onChange, className = "", }: PromptInputModelSelectorProps) { const [value, setValue] = React.useState(""); const [modelId, setModelId] = React.useState(defaultModel ?? models[0]?.id ?? ""); const [open, setOpen] = React.useState(false); const menuRef = React.useRef(null); const textareaRef = React.useRef(null); const active = models.find((m) => m.id === modelId); const canSubmit = value.trim().length > 0 && !disabled; React.useEffect(() => { const el = textareaRef.current; if (!el) return; el.style.height = "0px"; el.style.height = `${Math.min(el.scrollHeight, 160)}px`; }, [value]); React.useEffect(() => { if (!open) return; function onClick(e: MouseEvent) { if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false); } function onKey(e: KeyboardEvent) { if (e.key === "Escape") setOpen(false); } document.addEventListener("mousedown", onClick); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onClick); document.removeEventListener("keydown", onKey); }; }, [open]); function selectModel(id: string) { if (id === modelId) return; setModelId(id); onChange?.(id); setOpen(false); textareaRef.current?.focus(); } function submit() { if (!canSubmit) return; onSubmit?.(value.trim(), modelId); setValue(""); } return (

{/* axe reports the dimmed model hint here as a 2.34:1 contrast failure. Leave it. WCAG 2.1 SC 1.4.3 exempts "text that is part of an inactive user interface component" from the contrast minimum, and axe cannot see that this subtree is disabled. Darkening it would make the disabled state read as enabled — a real regression in service of a misapplied rule. */} {/* Model bar */}

{open && ( )}

{active?.description && ( {active.description} )}

{/* Input */}

setValue(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              submit();
            }
          }}
          placeholder={placeholder}
          disabled={disabled}
          aria-label="Prompt"
          className="border-0 rounded-none shadow-none focus-visible:ring-0 field-sizing-fixed dark:bg-transparent block w-full resize-none bg-transparent px-4 pt-3 pb-1.5 text-base sm:text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground"
        />

<div className="flex items-center justify-end px-2.5 pb-2.5">
          <Button variant="default" size="icon-sm"
            type="button"
            onClick={submit}
            disabled={!canSubmit}
            aria-label="Send message"
            className="min-h-6 min-w-6 inline-flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground transition-opacity hover:opacity-80 disabled:opacity-30"
          >
            <ArrowUpIcon />
          </Button>
        </div>
      </Card>
    </div>
  );
}
51:["$","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,["$","$L52",null,{"namespace":"@scrimui","registryDependencies":["button","card","textarea"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/showcase/prompt-input-model-selector/prompt-input-model-selector.tsx","content":"$54","type":"registry:ui","target":"components/ui/prompt-input-model-selector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>