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:T1af3,"use client"; import * as React from "react"; import { ArrowUpIcon, PaperclipIcon, SquareIcon, XIcon } from "lucide-react"; import { gsap, motionScale } from "@/lib/motion"; import { cn } from "@/lib/utils"; type PromptInputProps = Omit, "onSubmit"> & { onSubmit?: (message: { text: string; files: File[] }) => void; /** While streaming, the send button becomes Stop. */ status?: "idle" | "streaming"; onStop?: () => void; placeholder?: string; /** Extra controls in the toolbar, e.g. a ModelSelector. */ toolbar?: React.ReactNode; /** Allow attaching files (button, paste and drop). */ attachments?: boolean; disabled?: boolean; }; /** * The composer for talking to an agent. It grows with the text; Enter sends and Shift+Enter breaks a line; files * attach by button, paste or drop; while the agent works, Send turns into Stop (Esc). On send, a signal line * sweeps the top edge. */ function PromptInput({ onSubmit, status = "idle", onStop, placeholder = "Ask anything…", toolbar, attachments = true, disabled, className, ...props }: PromptInputProps) { const [text, setText] = React.useState(""); const [files, setFiles] = React.useState([]); const [over, setOver] = React.useState(false); const form = React.useRef(null); const picker = React.useRef(null); const streaming = status === "streaming"; const canSend = !disabled && !streaming && (text.trim().length > 0 || files.length > 0); const send = () => { if (!canSend) return; onSubmit?.({ text: text.trim(), files }); setText(""); setFiles([]); const line = form.current?.querySelector('[data-slot="prompt-sweep"]'); if (line && form.current && motionScale(form.current)) gsap.fromTo(line, { scaleX: 0, opacity: 1, transformOrigin: "left" }, { scaleX: 1, duration: 0.5, ease: "cue", onComplete: () => void gsap.to(line, { opacity: 0, duration: 0.3 }) }); }; React.useEffect(() => { if (!streaming) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && onStop?.(); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [streaming, onStop]); return (

{ e.preventDefault(); send(); }} onDragOver={(e) => attachments && (e.preventDefault(), setOver(true))} onDragLeave={() => setOver(false)} onDrop={(e) => { if (!attachments) return; e.preventDefault(); setOver(false); setFiles((f) => [...f, ...Array.from(e.dataTransfer.files)]); }} className={cn( "relative grid gap-2 overflow-hidden rounded-2xl border border-input bg-card p-2 shadow-raised transition-[border-color,box-shadow] duration-150 focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20 data-[over]:border-ring data-[over]:bg-signal/5", className, )} {...props} > {files.length > 0 && (

{f.name}

)}

setText(e.target.value)}
        onPaste={(e) => {
          if (attachments && e.clipboardData.files.length) setFiles((f) => [...f, ...Array.from(e.clipboardData.files)]);
        }}
        onKeyDown={(e) => {
          if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
            e.preventDefault();
            send();
          }
        }}
        className="max-h-48 min-h-11 w-full resize-none bg-transparent px-2 py-1.5 text-sm outline-none placeholder:text-muted-foreground/80 [field-sizing:content]"
      />
      <div className="flex items-center gap-1">
        {attachments && (
          <>
            <button
              type="button"
              aria-label="Attach files"
              onClick={() => picker.current?.click()}
              className="grid size-8 place-items-center rounded-lg text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
            >
              <PaperclipIcon className="size-4" />
            </button>
            <input ref={picker} type="file" multiple hidden onChange={(e) => e.target.files && setFiles((f) => [...f, ...Array.from(e.target.files!)])} />
          </>
        )}
        {toolbar}
        <span className="ms-auto hidden items-center gap-1 pe-1 text-[0.6875rem] text-muted-foreground sm:flex">
          {streaming ? (
            <>
              <kbd className="cue-kbd">esc</kbd> to stop
            </>
          ) : (
            <>
              <kbd className="cue-kbd">⏎</kbd> to send
            </>
          )}
        </span>
        {streaming ? (
          <button
            type="button"
            onClick={onStop}
            aria-label="Stop generating"
            className="relative grid size-8 place-items-center rounded-full bg-primary text-primary-foreground outline-none focus-visible:ring-3 focus-visible:ring-ring/50 active:scale-95"
          >
            <span aria-hidden="true" className="absolute inset-0 animate-ping rounded-full bg-signal/40 motion-reduce:hidden" />
            <SquareIcon className="relative size-3 fill-current" />
          </button>
        ) : (
          <button
            type="submit"
            disabled={!canSend}
            aria-label="Send message"
            className="grid size-8 place-items-center rounded-full bg-primary text-primary-foreground outline-none transition-[opacity,scale] duration-150 focus-visible:ring-3 focus-visible:ring-ring/50 active:scale-95 disabled:opacity-30"
          >
            <ArrowUpIcon className="size-4" />
          </button>
        )}
      </div>
    </form>
  );
}

export { PromptInput };
export type { PromptInputProps };
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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@cuelark","registryDependencies":["utils","https://ui.cuelark.com/r/theme.json","https://ui.cuelark.com/r/motion.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/cuelark/ui/prompt-input.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>