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="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>
+            <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>
+    
+    );
 }