60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62:T24d4,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Button } from "./turn-button"; import { CommandMenu, filterCommands, optionId, type SlashCommand } from "./command-menu"; export function PromptComposer({ onSubmit, onStop, isStreaming = false, placeholder = "Ask anything…", attachments, toolbar, onFiles, accept, commands, onCommand, allowEmpty = false, submitDisabled = false, className, }: { onSubmit: (value: string) => void; onStop?: () => void; isStreaming?: boolean; placeholder?: string; /** Rendered above the input, e.g. an . */ attachments?: React.ReactNode; /** Enables the attach button, drag-and-drop and paste of files. */ onFiles?: (files: File[]) => void; /** Passed to the file picker, e.g. "image/*,.pdf". */ accept?: string; /** Rendered below the input, e.g. a . */ toolbar?: React.ReactNode; /** Typing "/" at the start of the input opens a command menu. */ commands?: SlashCommand[]; /** Called when a command without `insert` is chosen. The "/query" text is cleared. */ onCommand?: (command: SlashCommand) => void; /** Allow sending with no text (e.g. attachments only). */ allowEmpty?: boolean; /** Block sending, e.g. while uploads are in progress. */ submitDisabled?: boolean; className?: string; }) { const [value, setValue] = React.useState(""); const [dragging, setDragging] = React.useState(false); const ref = React.useRef(null); const fileInput = React.useRef(null); const dragDepth = React.useRef(0); const menuId = React.useId(); const [activeIndex, setActiveIndex] = React.useState(0); const [dismissed, setDismissed] = React.useState(false); const caretToEnd = React.useRef(false); // The menu is open while the whole input is a single "/token". const slashQuery = commands ? /^\/(\S*)$/.exec(value)?.[1] : undefined; const matches = React.useMemo( () => (commands && slashQuery !== undefined ? filterCommands(commands, slashQuery) : []), [commands, slashQuery], ); const menuOpen = !dismissed && matches.length > 0; const active = Math.min(activeIndex, Math.max(0, matches.length - 1)); React.useLayoutEffect(() => { if (!caretToEnd.current) return; caretToEnd.current = false; const el = ref.current; el?.focus(); el?.setSelectionRange(el.value.length, el.value.length); }, [value]); function selectCommand(command: SlashCommand) { setDismissed(false); setActiveIndex(0); if (command.insert !== undefined) { caretToEnd.current = true; setValue(command.insert); } else { setValue(""); onCommand?.(command); } } const autosize = React.useCallback(() => { const el = ref.current; if (!el) return; el.style.height = "auto"; el.style.height = `${Math.min(el.scrollHeight, 200)}px`; }, []); React.useLayoutEffect(autosize, [value, autosize]); // Re-measure when the width changes. A composer mounted in a hidden tab or collapsed panel is // first measured at zero width, which would otherwise leave it stuck at its maximum height. React.useEffect(() => { const el = ref.current; if (!el || typeof ResizeObserver === "undefined") return; let width = el.clientWidth; const observer = new ResizeObserver(() => { if (el.clientWidth === width) return; width = el.clientWidth; autosize(); }); observer.observe(el); return () => observer.disconnect(); }, [autosize]); const canSend = !submitDisabled && (allowEmpty || value.trim().length > 0); function submit() { if (!canSend || isStreaming) return; onSubmit(value.trim()); setValue(""); } const hasFiles = (e: React.DragEvent) => Array.from(e.dataTransfer.types).includes("Files"); return (

{ e.preventDefault(); submit(); }} onDragEnter={(e) => { if (!onFiles || !hasFiles(e)) return; dragDepth.current += 1; setDragging(true); }} onDragOver={(e) => { if (onFiles && hasFiles(e)) e.preventDefault(); }} onDragLeave={() => { if (!onFiles) return; dragDepth.current = Math.max(0, dragDepth.current - 1); if (dragDepth.current === 0) setDragging(false); }} onDrop={(e) => { if (!onFiles || !hasFiles(e)) return; e.preventDefault(); dragDepth.current = 0; setDragging(false); onFiles(Array.from(e.dataTransfer.files)); }} className={cn( "group/composer relative rounded border bg-background p-2 transition-colors focus-within:border-foreground/40", dragging && "border-primary", className, )} > {menuOpen && ( )} {attachments}

{onFiles && ( <> { const files = Array.from(e.target.files ?? []); if (files.length) onFiles(files); e.target.value = ""; }} /> )}

, so use the attributes a textbox supports.
          {...(commands && {
            "aria-autocomplete": "list" as const,
            "aria-controls": menuOpen ? menuId : undefined,
            "aria-activedescendant": menuOpen ? optionId(menuId, active) : undefined,
          })}
          onChange={(e) => {
            setValue(e.target.value);
            setDismissed(false);
            setActiveIndex(0);
          }}
          onPaste={(e) => {
            if (!onFiles || !e.clipboardData.files.length) return;
            e.preventDefault();
            onFiles(Array.from(e.clipboardData.files));
          }}
          onKeyDown={(e) => {
            if (menuOpen && !e.nativeEvent.isComposing) {
              if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                e.preventDefault();
                const step = e.key === "ArrowDown" ? 1 : -1;
                setActiveIndex((active + step + matches.length) % matches.length);
                return;
              }
              if (e.key === "Enter" || e.key === "Tab") {
                e.preventDefault();
                selectCommand(matches[active]);
                return;
              }
              if (e.key === "Escape") {
                e.preventDefault();
                setDismissed(true);
                return;
              }
            }
            if (e.key === "Escape" && isStreaming && onStop) {
              e.preventDefault();
              onStop();
              return;
            }
            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
              e.preventDefault();
              submit();
            }
          }}
          className="max-h-[200px] flex-1 resize-none bg-transparent px-2 py-1.5 text-[15px] outline-none placeholder:text-muted-foreground"
        />
        {/* One element for both states so keyboard focus survives send -> stop. */}
        <Button
          type={isStreaming ? "button" : "submit"}
          variant={isStreaming ? "outline" : "primary"}
          size="icon"
          disabled={!isStreaming && !canSend}
          onClick={isStreaming ? onStop : undefined}
          aria-label={isStreaming ? "Stop generating" : "Send message"}
        >
          {isStreaming ? (
            <svg viewBox="0 0 16 16" fill="currentColor"><rect x="3.5" y="3.5" width="9" height="9" rx="1.5" /></svg>
          ) : (
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5" /></svg>
          )}
        </Button>
      </div>
      <div className="flex items-center gap-1 px-1 pt-1">
        {toolbar}
        <span aria-hidden className="ml-auto hidden font-mono text-[11px] text-muted-foreground [@media(hover:hover)]:group-focus-within/composer:inline">
          {isStreaming && onStop ? "esc stop" : "↵ send · ⇧↵ newline"}
        </span>
      </div>
      {dragging && (
        <div aria-hidden className="pointer-events-none absolute inset-0 flex items-center justify-center rounded bg-background/80 text-sm font-medium text-primary">
          Drop files to attach
        </div>
      )}
    </form>
  );
}
5f:["$","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,["$","$L60",null,{"namespace":"@turn","registryDependencies":["https://turnui.xyz/r/turn-button.json","utils","https://turnui.xyz/r/command-menu.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"src/registry/ui/prompt-composer.tsx","content":"$62","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>