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:T3f6c,"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 Attachment = { id: string; name: string; size?: string; type?: "image" | "file"; }; export type ModelOption = { id: string; name: string; hint?: 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 PromptInputProps = { placeholder?: string; models?: ModelOption[]; defaultModel?: string; attachments?: Attachment[]; onAttach?: () => void; onRemoveAttachment?: (id: string) => void; onVoice?: () => void; onSubmit?: (value: string, model?: string) => void; onStop?: () => void; loading?: boolean; disabled?: boolean; error?: string | null; showWebSearch?: boolean; showTools?: boolean; className?: string; }; /* ------------------------------------------------------------------ */ /* Icons (inline SVG, no dependencies) */ /* ------------------------------------------------------------------ */ function PlusIcon(props: React.SVGProps) { return ( ); } function GlobeIcon(props: React.SVGProps) { return ( ); } function WrenchIcon(props: React.SVGProps) { return ( ); } function MicIcon(props: React.SVGProps) { return ( ); } function ArrowUpIcon(props: React.SVGProps) { return ( ); } function StopIcon(props: React.SVGProps) { return ( ); } function ChevronDownIcon(props: React.SVGProps) { return ( ); } function XIcon(props: React.SVGProps) { return ( ); } function FileIcon(props: React.SVGProps) { return ( ); } function ImageIcon(props: React.SVGProps) { return ( ); } function AlertIcon(props: React.SVGProps) { return ( ); } /* ------------------------------------------------------------------ */ /* PromptInput */ /* ------------------------------------------------------------------ */ export function PromptInput({ placeholder = "Ask anything…", models, defaultModel, attachments = [], onAttach, onRemoveAttachment, onVoice, onSubmit, onStop, loading = false, disabled = false, error = null, showWebSearch = true, showTools = true, className = "", }: PromptInputProps) { const [value, setValue] = React.useState(""); const [model, setModel] = React.useState(defaultModel ?? models?.[0]?.id); const [modelOpen, setModelOpen] = React.useState(false); const [webSearch, setWebSearch] = React.useState(false); const [tools, setTools] = React.useState(false); const textareaRef = React.useRef(null); const menuRef = React.useRef(null); const activeModel = models?.find((m) => m.id === model); const canSubmit = value.trim().length > 0 && !disabled && !loading; /* Auto-grow textarea */ React.useEffect(() => { const el = textareaRef.current; if (!el) return; el.style.height = "0px"; el.style.height = Math.min(el.scrollHeight, 200) + "px"; }, [value]); /* Close model menu on outside click / Escape */ React.useEffect(() => { if (!modelOpen) return; function onClick(e: MouseEvent) { if (menuRef.current && !menuRef.current.contains(e.target as Node)) { setModelOpen(false); } } function onKey(e: KeyboardEvent) { if (e.key === "Escape") setModelOpen(false); } document.addEventListener("mousedown", onClick); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onClick); document.removeEventListener("keydown", onKey); }; }, [modelOpen]); function submit() { if (!canSubmit) return; onSubmit?.(value.trim(), activeModel?.id); setValue(""); } function onKeyDown(e: React.KeyboardEvent) { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } } const iconButton = "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:pointer-events-none"; const toggleButton = (active: boolean) => `inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-40 disabled:pointer-events-none ${ active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground" }`; return (

{/* Attachments */} {attachments.length > 0 && (

{attachments.map((file) => ( {file.type === "image" ? : } {file.name} {file.size && {file.size}} ))}

)} {/* Textarea */}

setValue(e.target.value)}
          onKeyDown={onKeyDown}
          placeholder={placeholder}
          disabled={disabled}
          aria-label="Prompt"
          aria-invalid={Boolean(error)}
          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-4 pb-3 text-base sm:text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground"
        />

{/* Toolbar */}
        <div className="flex items-end gap-2 px-2.5 pb-2.5">
          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1">
            <Button variant="ghost" size="icon-sm"
              type="button"
              onClick={onAttach}
              disabled={disabled}
              aria-label="Add attachment"
              className={iconButton}
            >
              <PlusIcon />
            </Button>

{showWebSearch && (
              <Button variant="ghost" size="sm"
                type="button"
                onClick={() => setWebSearch((v) => !v)}
                disabled={disabled}
                aria-pressed={webSearch}
                aria-label="Web search"
                className={toggleButton(webSearch)}
              >
                <GlobeIcon />
                <span className="hidden sm:inline">Search</span>
              </Button>
            )}

{showTools && (
              <Button variant="ghost" size="sm"
                type="button"
                onClick={() => setTools((v) => !v)}
                disabled={disabled}
                aria-pressed={tools}
                aria-label="Tools"
                className={toggleButton(tools)}
              >
                <WrenchIcon />
                <span className="hidden sm:inline">Tools</span>
              </Button>
            )}

{/* Model selector */}
            {models && models.length > 0 && (
              <div className="relative min-w-0 max-w-full" ref={menuRef}>
                <Button variant="ghost" size="sm"
                  type="button"
                  onClick={() => setModelOpen((v) => !v)}
                  disabled={disabled}
                  aria-haspopup="listbox"
                  aria-expanded={modelOpen}
                  className="inline-flex h-8 max-w-full items-center gap-1 rounded-md px-2.5 text-xs font-medium text-muted-foreground transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:pointer-events-none"
                >
                  {activeModel?.icon}
                  <span className="max-w-32 truncate">{activeModel?.name ?? "Model"}</span>
                  <ChevronDownIcon className={modelOpen ? "rotate-180 transition-transform" : "transition-transform"} />
                </Button>
                {modelOpen && (
                  <div
                    role="listbox"
                    className="absolute bottom-full left-0 z-20 mb-2 w-56 overflow-hidden rounded-xl border border-border bg-card p-1 shadow-md"
                  >
                    {models.map((m) => (
                      <Button variant="ghost" size="sm"
                        key={m.id}
                        type="button"
                        role="option"
                        aria-selected={m.id === model}
                        onClick={() => {
                          setModel(m.id);
                          setModelOpen(false);
                          textareaRef.current?.focus();
                        }}
                        className={`h-auto min-h-8 whitespace-normal flex w-full items-center justify-between rounded-md px-2.5 py-2 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring hover:bg-muted ${
                          m.id === model ? "text-foreground" : "text-muted-foreground"
                        }`}
                      >
                        <span className="flex min-w-0 items-center gap-1.5">
                          {m.icon}
                          <span className="truncate">{m.name}</span>
                        </span>
                        {m.hint && <span className="shrink-0 text-xs text-muted-foreground">{m.hint}</span>}
                      </Button>
                    ))}
                  </div>
                )}
              </div>
            )}

</div>
          <div className="flex shrink-0 items-center gap-1">
            <Button variant="ghost" size="icon-sm"
              type="button"
              onClick={onVoice}
              disabled={disabled}
              aria-label="Voice input"
              className={iconButton}
            >
              <MicIcon />
            </Button>

{loading ? (
              <Button variant="default" size="icon-sm"
                type="button"
                onClick={onStop}
                aria-label="Stop generating"
                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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring hover:opacity-80"
              >
                <StopIcon />
              </Button>
            ) : (
              <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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring hover:opacity-80 disabled:opacity-30"
              >
                <ArrowUpIcon />
              </Button>
            )}
          </div>
        </div>
      </Card>

{/* Error */}
      {error && (
        <p role="alert" className="mt-2 flex items-center gap-1.5 px-1 text-xs text-red-600 dark:text-red-400">
          <AlertIcon />
          {error}
        </p>
      )}
    </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":"@scrimui","registryDependencies":["button","card","textarea"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/showcase/prompt-input/prompt-input.tsx","content":"$53","type":"registry:ui","target":"components/ui/prompt-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>