4a: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:Tf9b,"use client"; // easeui.dev/components/agents/prompt-input import { ArrowUp, Square } from "lucide-react"; import { type KeyboardEvent, type TextareaHTMLAttributes, useState } from "react"; import { cn } from "@/lib/utils"; export interface PromptInputProps extends Omit, "value" | "defaultValue" | "onChange" | "onSubmit"> { /** Controlled value. */ value?: string; /** Starting value when uncontrolled. Default "". */ defaultValue?: string; onChange?: (value: string) => void; /** Called with the trimmed text on Enter or the send button. */ onSubmit: (value: string) => void; /** Swaps the send button for a stop button. Default false. */ loading?: boolean; /** Called from the stop button while loading. */ onStop?: () => void; className?: string; } // Same crossfade CopyButton uses, so the button never changes size. const SWAP = "col-start-1 row-start-1 transition-[opacity,scale] duration-200 ease-out motion-reduce:transition-none"; const SHOWN = "scale-100 opacity-100"; const HIDDEN = "scale-50 opacity-0"; /** * A chat composer: a textarea that grows with its content up to a scrollable * cap, and a send button beside it. Enter submits, Shift+Enter starts a new * line, and the button crossfades into a stop button while a reply streams. */ export function PromptInput({ value, defaultValue = "", onChange, onSubmit, loading = false, onStop, disabled = false, placeholder = "Message...", className, ...props }: PromptInputProps) { const [uncontrolled, setUncontrolled] = useState(defaultValue); const isControlled = value !== undefined; const text = isControlled ? value : uncontrolled; const setValue = (next: string) => { if (!isControlled) setUncontrolled(next); onChange?.(next); }; const submit = () => { const trimmed = text.trim(); if (!trimmed || loading || disabled) return; onSubmit(trimmed); if (!isControlled) setUncontrolled(""); }; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Enter" && !event.shiftKey && !loading && !disabled) { event.preventDefault(); submit(); } }; return (

setValue(event.target.value)}
        onKeyDown={onKeyDown}
        className={cn(
          "max-h-48 flex-1 resize-none bg-transparent py-1.5 text-base text-foreground outline-none sm:text-sm",
          "[field-sizing:content]",
          "placeholder:text-muted-foreground",
          "disabled:cursor-not-allowed disabled:opacity-50",
        )}
        {...props}
      />
      <button
        type="button"
        aria-label={loading ? "Stop" : "Send"}
        disabled={loading ? false : disabled || !text.trim()}
        onClick={() => (loading ? onStop?.() : submit())}
        className={cn(
          "relative inline-flex h-9 w-9 shrink-0 touch-manipulation items-center justify-center rounded-full bg-foreground text-background outline-none",
          "transition-[background-color,opacity] duration-150 ease-out hover:bg-foreground/90",
          "focus-visible:ring-2 focus-visible:ring-foreground/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          "disabled:pointer-events-none disabled:opacity-40",
        )}
      >
        <span aria-hidden="true" className="grid place-items-center">
          <ArrowUp className={cn(SWAP, "h-4 w-4", loading ? HIDDEN : SHOWN)} />
          <Square className={cn(SWAP, "h-3 w-3 fill-current", loading ? SHOWN : HIDDEN)} />
        </span>
      </button>
    </div>
  );
}
49:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4a",null,{"namespace":"@easeui","registryDependencies":[]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"components/motion/prompt-input.tsx","content":"$4c","type":"registry:component","target":"@components/motion/prompt-input.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>