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

src/components/HotelContext.jsx

@@ -82,7 +82,7 @@ export function HotelProvider({ accessToken, children }) {
       body: JSON.stringify(payload),
     });
 
-    return res;
+    return res.json();
     
     //return res.json
   }

src/components/widget/chatWidget.css

@@ -1,3 +1,8 @@
+.chatWidget{
+    display: flex;
+    flex-direction: column;
+}
+
 .convcard {
     background-color: brown;
 }
@@ -5,7 +10,7 @@
 .convlist {
     
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: right;
     background-color: darkcyan;
 }

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">
+        <div className="chatWidget">
-            {convlist.map(conv => (
+            <div className="convlist">
-                <ConvCard
+                {convlist.map(conv => (
-                key={conv.id}
+                    <ConvCard
-                id={conv.id}
+                        key={conv.id}
-                title={conv.title}
+                        id={conv.id}
-                />
+                        title={conv.title}
-            ))}
+                        onOpenConv={handleOpenConv}    
+                    />
+                ))}
+            </div>
+
+            <MessagesBox messages={messages} />
         </div>
     );
 }
 
-function ConvCard({id, title}) {
+function ConvCard({id, title, onOpenConv}) {
-
-    const {fetchMessages} = useHotel();
-
     return(
-    <div className="convcard">
+        <div className="convcard">
-    <h3>ConvId : {id} </h3>
+            <h3>ConvId : {id} </h3>
-    <h3>Name : {title}</h3>
+            <h3>Name : {title}</h3>
-    <p onClick={() => fetchMessages({conv_id: 4})}> GET MESSAAGE</p>
+            <p onClick={() => onOpenConv(id)}> GET MESSAAGE</p>
-    </div>
+        </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>
+    
+    );
 }