"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { FileIcon, PlusIcon, XIcon } from "@kineticui/icons"; export type PromptAttachment = { id: string; name: string; size?: string; preview?: string }; export type PromptBoxProps = { value?: string; onValueChange?: (v: string) => void; onSubmit: (value: string, attachments: PromptAttachment[]) => void; /** While true the send button becomes a stop button. */ streaming?: boolean; onStop?: () => void; placeholder?: string; /** Quick prompts shown above the box while it's empty. */ suggestions?: string[]; /** Left side of the toolbar, e.g. . */ toolbar?: React.ReactNode; /** Enable the attach button. Called with chosen files; return attachments to show. */ onAttach?: (files: File[]) => PromptAttachment[] | Promise; maxRows?: number; disabled?: boolean; className?: string; }; /** Chat composer: auto-growing input, attachments, suggestions, Enter to send, stop while streaming. */ export function PromptBox({ value: controlled, onValueChange, onSubmit, streaming, onStop, placeholder = "Ask anything…", suggestions, toolbar, onAttach, maxRows = 8, disabled, className, }: PromptBoxProps) { const [inner, setInner] = React.useState(""); const value = controlled ?? inner; const setValue = (v: string) => (onValueChange ? onValueChange(v) : setInner(v)); const [files, setFiles] = React.useState([]); const [drag, setDrag] = React.useState(false); const ta = React.useRef(null); const fileInput = React.useRef(null); React.useLayoutEffect(() => { const el = ta.current; if (!el) return; el.style.height = "auto"; const line = parseFloat(getComputedStyle(el).lineHeight) || 22; el.style.height = `${Math.min(el.scrollHeight, line * maxRows)}px`; }, [value, maxRows]); const submit = () => { if (streaming || disabled || (!value.trim() && !files.length)) return; onSubmit(value.trim(), files); setValue(""); setFiles([]); }; const attach = async (list: FileList | null) => { if (!list?.length || !onAttach) return; const added = await onAttach(Array.from(list)); setFiles((f) => [...f, ...added]); }; const canSend = !!value.trim() || files.length > 0; return (

{suggestions?.length && !value && !files.length ? ( {suggestions.map((s) => ( ))} ) : null}

{ if (!onAttach) return; e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={(e) => { if (!onAttach) return; e.preventDefault(); setDrag(false); void attach(e.dataTransfer.files); }} className={cn( "relative flex flex-col gap-2 rounded-[20px] border border-border-strong bg-surface p-2.5 shadow-[0_8px_30px_rgba(0,0,0,0.25)] transition-colors focus-within:border-muted", drag && "border-accent bg-accent-soft", )} > {files.length ? (

{files.map((f) => ( {f.preview ?

: } {f.name} {f.size ? {f.size} : null} ))}

) : null}

setValue(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
              e.preventDefault();
              submit();
            }
          }}
          className="resize-none bg-transparent px-2 pt-1.5 text-[15px] leading-[22px] text-foreground outline-none placeholder:text-subtle"
        />
        <div className="flex items-center gap-1.5">
          {onAttach ? (
            <>
              <input ref={fileInput} type="file" multiple hidden onChange={(e) => void attach(e.target.files).then(() => (e.target.value = ""))} />
              <button type="button" aria-label="Attach files" onClick={() => fileInput.current?.click()} className="flex size-9 items-center justify-center rounded-full text-muted hover:bg-surface-raised hover:text-foreground">
                <PlusIcon size={18} />
              </button>
            </>
          ) : null}
          {toolbar}
          <span className="ml-auto hidden pr-1 font-mono text-[10px] text-subtle sm:block">{value ? "⇧↵ new line" : ""}</span>
          {streaming ? (
            <button type="button" aria-label="Stop generating" onClick={onStop} className="flex size-9 items-center justify-center rounded-full bg-foreground text-background">
              <span className="size-3 rounded-[3px] bg-current" />
            </button>
          ) : (
            <button
              type="button"
              aria-label="Send"
              disabled={!canSend || disabled}
              onClick={submit}
              className="flex size-9 items-center justify-center rounded-full bg-accent text-accent-foreground transition-[opacity,transform] active:scale-90 disabled:opacity-30"
            >
              <svg viewBox="0 0 24 24" className="size-[18px]" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                <path d="M12 19V5M5 12l7-7 7 7" />
              </svg>
            </button>
          )}
        </div>
      </div>
    </div>
  );
}
</article></body></html>

Prompt Box

Installation

Exports