4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T25b8,"use client"; 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="block w-full resize-none bg-transparent px-4 pt-3 pb-1.5 text-[15px] leading-6 text-zinc-900 outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
        />

<div className="flex items-center justify-end px-2.5 pb-2.5">
          <button
            type="button"
            onClick={submit}
            disabled={!canSubmit}
            aria-label="Send message"
            className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 text-white transition-opacity hover:opacity-80 disabled:opacity-30 dark:bg-zinc-100 dark:text-zinc-900"
          >
            <ArrowUpIcon />
          </button>
        </div>
      </div>
    </div>
  );
}
4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://scrimui.dev/r/prompt-input-model-selector.json","proxyUrl":"https://shadcnregistry.com/r/scrimui/prompt-input-model-selector","itemId":"@scrimui/prompt-input-model-selector"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/showcase/prompt-input-model-selector/prompt-input-model-selector.tsx","content":"$52","type":"registry:ui","target":"components/ui/prompt-input-model-selector.tsx"}]}]]}],"$L53"]}]
</article></body></html>

Prompt Input + Model Selector

Installation

Files

components

Styles