Function MessageInput

frontend/src/components/MessageInput.jsx:5–299

({ onSendMessage, isLoading, outputType, style, preSelectedFiles, onPreSelectedFilesClear, hasMessages = false })

import { Upload, Send, Eye, X, FileText } from 'lucide-react'

const MessageInput = ({ onSendMessage, isLoading, outputType, style, preSelectedFiles, onPreSelectedFilesClear, hasMessages = false }) => {
  const [selectedFiles, setSelectedFiles] = useState([])
  const [previewFile, setPreviewFile] = useState(null)
  const [previewUrl, setPreviewUrl] = useState(null)
  const [isDragging, setIsDragging] = useState(false)

  // Handle pre-selected files from sidebar
  useEffect(() => {
    if (preSelectedFiles && preSelectedFiles.length > 0) {
      setSelectedFiles(prev => {
        // Avoid duplicates
        const existingNames = new Set(prev.map(f => f.name))
        const newFiles = preSelectedFiles.filter(f => !existingNames.has(f.name))
        return [...prev, ...newFiles]
      })
      // Clear pre-selected files after adding them
      if (onPreSelectedFilesClear) {
        onPreSelectedFilesClear()
      }
    }
  }, [preSelectedFiles, onPreSelectedFilesClear])

  // Cleanup preview URL on unmount
  useEffect(() => {
    return () => {
      if (previewUrl) {
        URL.revokeObjectURL(previewUrl)
      }
    }
  }, [previewUrl])

  const handleSubmit = (e) => {
    e.preventDefault()
    if (selectedFiles.length > 0) {
      onSendMessage('', selectedFiles)
      setSelectedFiles([])
    }
  }

  const handleFilesSelected = (files) => {
    setSelectedFiles(prev => [...prev, ...files])
  }

  const removeFile = (index) => {
    setSelectedFiles(prev => prev.filter((_, i) => i !== index))
  }

  const openPreview = (file) => {
    setPreviewFile(file)
    // Create blob URL for PDF preview
    if (file.type === 'application/pdf' && file instanceof File) {
      const url = URL.createObjectURL(file)
      setPreviewUrl(url)
    } else {
      setPreviewUrl(null)
    }
  }