send message box

src/components/widget/chatWidget.jsx

@@ -7,10 +7,12 @@ import "./chatWidget.css"
 
 export default function ChatWidget({convlist}) {
     const [messages, setMessages] = useState([]);
-    const { fetchMessages } = useHotel();
+    const { fetchMessages, sendMessage } = useHotel();
+    const [activeConvId, setActiveConvId] = useState(null);
 
 
     const handleOpenConv = async (conv_id) => {
+        setActiveConvId(conv_id);
         const msg = await fetchMessages({ conv_id });
         setMessages(msg);
     };
@@ -29,10 +31,42 @@ export default function ChatWidget({convlist}) {
             </div>
 
             <MessagesBox messages={messages} />
+            <SenderBox
+                conv_id={activeConvId}
+                onSend={sendMessage}
+                disabled={!activeConvId}
+            />
         </div>
     );
 }
 
+function SenderBox({ conv_id, onSend, disabled }) {
+    const [text, setText] = useState("");
+
+    const handleSend = () => {
+        if (!text.trim() || !conv_id) return;
+
+        onSend({
+            conv_id,
+            message: text,
+        });
+
+        setText("");
+    };
+
+    return (
+        <div className="senderbox">
+            <input
+                value={text}
+                onChange={e => setText(e.target.value)}
+                placeholder="Type a message…"
+            />
+            <button disabled={disabled} onClick={handleSend}>Send</button>
+        </div>
+    );
+}
+
+
 function ConvCard({id, title, onOpenConv}) {
     return(
         <div className="convcard">