send message box

src/components/HotelContext.jsx

@@ -87,6 +87,26 @@ export function HotelProvider({ accessToken, children }) {
     //return res.json
   }
 
+  async function sendMessage({ conv_id, message }) {
+    if (!conv_id) return;
+    console.log("conv_id null at sendMessage")
+    const payload = {
+      conv_id,
+      message
+    };
+
+    console.log(JSON.stringify(payload));
+
+    const res = await fetch(`${API_BASE}/chat/send_message`, {
+      method: "POST" ,
+      headers: {
+        Authorization: `Bearer ${accessTokenSingle}`,
+        "Content-Type" : "application/json",
+      },
+      body: JSON.stringify(payload),
+    })
+  }
+
 
   // --- INITIAL DATA LOADING ---
   useEffect(() => {
@@ -115,6 +135,7 @@ export function HotelProvider({ accessToken, children }) {
         users,
         updateRoomStatus,
         fetchMessages,
+        sendMessage,
       }}
     >
       {children}

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">