Function MessageInput

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

()

import { Image, Send, X } from 'lucide-react';

const MessageInput = () => {
  const [text,setText]=useState("");
  const [imagePreview,setImagePreview]=useState(null);
  const fileInputRef=useRef(null);

  const {sendMessage}=useChatStore();

  const handleImageChange=(e)=>{
    const file=e.target.files[0];
    if(!file.type.startsWith("image/")){
      toast.error("Please select an image file");
      return;
    }

    const reader=new FileReader();
    reader.onloadend=()=>{
      setImagePreview(reader.result);
    };
    reader.readAsDataURL(file);

  };

  const removeImage=()=>{
    setImagePreview(null);
    if(fileInputRef.current) fileInputRef.current.value="";
  };

  const handleSendMessage= async(e)=>{
    e.preventDefault();
    if(!text.trim() && !imagePreview) return;

    try {
      await sendMessage({
        text:text.trim(),
        image:imagePreview,
      });

      setText("");
      setImagePreview(null);
      if(fileInputRef.current) fileInputRef.current.value="";
    } catch (error) {
      console.error("Failed to send message: ",error);
    }
  };

  return (
    <div className='p-4 w-full'>
       {imagePreview && (
        <div className="mb-3 flex items-center gap-2">
          <div className="relative">
            <img
              src={imagePreview}
              alt="Preview"
              className="w-20 h-20 object-cover rounded-lg border border-zinc-700"
            />
            <button
              onClick={removeImage}
              className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-base-300