"use client"; import { CornerRightUp, FileUp, Paperclip, X } from "lucide-react"; import { useState } from "react"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; import { useFileInput } from "@/components/hooks/use-file-input"; import { useAutoResizeTextarea } from "@/components/hooks/use-auto-resize-textarea"; interface FileDisplayProps { fileName: string; onClear: () => void; } function FileDisplay({ fileName, onClear }: FileDisplayProps) { return (

{fileName}

); } interface AIInputWithFileProps { id?: string; placeholder?: string; minHeight?: number; maxHeight?: number; accept?: string; maxFileSize?: number; onSubmit?: (message: string, file?: File) => void; className?: string; } export function AIInputWithFile({ id = "ai-input-with-file", placeholder = "File Upload and Chat!", minHeight = 52, maxHeight = 200, accept = "image/*", maxFileSize = 5, onSubmit, className }: AIInputWithFileProps) { const [inputValue, setInputValue] = useState(""); const { fileName, fileInputRef, handleFileSelect, clearFile, selectedFile } = useFileInput({ accept, maxSize: maxFileSize }); const { textareaRef, adjustHeight } = useAutoResizeTextarea({ minHeight, maxHeight, }); const handleSubmit = () => { if (inputValue.trim() || selectedFile) { onSubmit?.(inputValue, selectedFile); setInputValue(""); adjustHeight(true); } }; return (

{fileName && }

fileInputRef.current?.click()} >