simple message message widget "finished", can swap between multiple conv

src/components/widget/chatWidget.jsx

@@ -6,35 +6,59 @@ import { useState } from "react";
 import "./chatWidget.css"
 
 export default function ChatWidget({convlist}) {
+    const [messages, setMessages] = useState([]);
+    const { fetchMessages } = useHotel();
 
 
+    const handleOpenConv = async (conv_id) => {
+        const msg = await fetchMessages({ conv_id });
+        setMessages(msg);
+    };
 
     return (
-        <div className="convlist">
-            {convlist.map(conv => (
-                <ConvCard
-                key={conv.id}
-                id={conv.id}
-                title={conv.title}
-                />
-            ))}
+        <div className="chatWidget">
+            <div className="convlist">
+                {convlist.map(conv => (
+                    <ConvCard
+                        key={conv.id}
+                        id={conv.id}
+                        title={conv.title}
+                        onOpenConv={handleOpenConv}    
+                    />
+                ))}
+            </div>
+
+            <MessagesBox messages={messages} />
         </div>
     );
 }
 
-function ConvCard({id, title}) {
-
-    const {fetchMessages} = useHotel();
-
+function ConvCard({id, title, onOpenConv}) {
     return(
-    <div className="convcard">
-    <h3>ConvId : {id} </h3>
-    <h3>Name : {title}</h3>
-    <p onClick={() => fetchMessages({conv_id: 4})}> GET MESSAAGE</p>
-    </div>
+        <div className="convcard">
+            <h3>ConvId : {id} </h3>
+            <h3>Name : {title}</h3>
+            <p onClick={() => onOpenConv(id)}> GET MESSAAGE</p>
+        </div>
     )
 }
 
-function MessagesBox({id}) {
-
+function MessagesBox({ messages }) {
+    if (!messages || messages.length === 0) {
+        return <div className="messagesbox empty">No messages</div>
+    }
+    console.log("FETCH RESULT =", messages);
+    return (
+        
+        <div className="messagebox">
+            {messages.map(msg => (
+                <div key = {msg.id} className = "msg">
+                    <p><strong>Sender:</strong> {msg.sender_id}</p>
+                    <p>{msg.content}</p>
+                    <small>{msg.sent_at}</small>
+                </div>
+            ))}
+        </div>
+    
+    );
 }