50: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"] 51: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"] 52:T14a6,"use client"; import * as React from "react"; import { Loader2, Paperclip } from "lucide-react"; import { cn } from "@/lib/utils"; interface AiChatInputProps { onSubmit?: (message: string, attachments?: File[]) => void; placeholder?: string; disabled?: boolean; loading?: boolean; allowAttachments?: boolean; maxRows?: number; className?: string; } export function AiChatInput({ onSubmit, placeholder = "Type a message...", disabled = false, loading = false, allowAttachments = false, maxRows = 6, className, }: AiChatInputProps) { const [value, setValue] = React.useState(""); const [attachments, setAttachments] = React.useState([]); const textareaRef = React.useRef(null); const fileInputRef = React.useRef(null); const isDisabled = disabled || loading; const canSubmit = value.trim().length > 0 && !isDisabled; const adjustHeight = React.useCallback(() => { const textarea = textareaRef.current; if (!textarea) return; textarea.style.height = "auto"; const lineHeight = 24; const minHeight = 72; const maxHeight = lineHeight * maxRows; const newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight)); textarea.style.height = `${newHeight}px`; }, [maxRows]); React.useEffect(() => { adjustHeight(); }, [adjustHeight]); const handleSubmit = React.useCallback(() => { if (!canSubmit) return; onSubmit?.(value.trim(), attachments.length > 0 ? attachments : undefined); setValue(""); setAttachments([]); if (textareaRef.current) { textareaRef.current.style.height = "72px"; } }, [value, attachments, canSubmit, onSubmit]); const handleKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); handleSubmit(); } }, [handleSubmit] ); const handleFileChange = React.useCallback( (e: React.ChangeEvent) => { const files = Array.from(e.target.files || []); setAttachments((prev) => [...prev, ...files]); if (fileInputRef.current) { fileInputRef.current.value = ""; } }, [] ); const removeAttachment = React.useCallback((index: number) => { setAttachments((prev) => prev.filter((_, i) => i !== index)); }, []); return (

{attachments.length > 0 && (

{attachments.map((file, index) => (

{file.name}

))}

)}

{allowAttachments && ( <> )}

setValue(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          disabled={isDisabled}
          rows={3}
          aria-label="Chat message input"
          className={cn(
            "flex-1 resize-none bg-transparent text-sm outline-none placeholder:text-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-50",
            "min-h-[72px] px-3 py-2.5"
          )}
        />

<button
          type="button"
          className="shrink-0 border-l px-4 py-2.5 text-xs uppercase tracking-wider transition-colors hover:bg-muted disabled:opacity-30"
          onClick={handleSubmit}
          disabled={!canSubmit}
        >
          {loading ? <Loader2 className="size-4 animate-spin" /> : "SEND"}
          <span className="sr-only">Send message</span>
        </button>
      </div>
    </div>
  );
}

export type { AiChatInputProps };
4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@elements","registryDependencies":["button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/blocks/ai/ai-chat-input/components/elements/ai-chat-input.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>