some css fix and websocket fix for item update

src/components/widget/chatWidget.jsx

@@ -1,4 +1,5 @@
-import { useHotel } from "../HotelContext";
+
+import { useHotel } from "../context/HotelContext";
 import { useState, useEffect } from "react";
 import { useRef } from "react";
 
@@ -110,17 +111,63 @@ function SenderBox({ conv_id, onSend, disabled }) {
     };
 
     return (
-        <div hidden={disabled} className="senderbox">
+        <div hidden={disabled} className="senderBox">
             <input
+            className="textbox"
                 value={text}
                 onChange={e => setText(e.target.value)}
+                onKeyDown={e => e.key === "Enter" && handleSend() }
                 placeholder="Type a message…"
             />
-            <button onClick={handleSend}>Send</button>
+            <button className="sendbutton" onClick={handleSend}>Send</button>
         </div>
     );
 }
 
+function ConvCard({id, title, onOpenConv}) {
+    return(
+        <div className="convcard" onClick={() => onOpenConv(id)} >
+            <h3>ConvId : {id} </h3>
+            <h3>Name : {title}</h3>
+           
+        </div>
+    )
+}
+
+function MessagesBox({ conv_id }) {
+  const { messagesByConvId, usersById, clientId } = useHotel();
+  const messages = messagesByConvId[conv_id] ?? [];
+
+  console.log(messagesByConvId);
+  console.log(usersById);
+
+  if (messages.length === 0) {
+    return <div className="messagesbox empty">No messages</div>;
+  }
+
+  return (
+    <div className="messageCard">
+      {messages
+        .slice()
+        .sort((a, b) => new Date(a.sent_at) - new Date(b.sent_at))
+        .map(msg => {
+          const isMine = msg.sender_id === clientId;
+          return (
+            <div key={msg.sent_at}
+                className={`msg ${isMine ? "msg--mine" : "msg--theirs"}`}>
+                <p>
+                            <strong>Sender:</strong>{" "}
+                            {usersById[msg.sender_id] ?? "Unknown user"}
+                </p>
+
+              <p>{msg.content}</p>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
 function AddUsersMenu({ convId, usersById, fetchConvUsers, onValidate, onClose }) {
     const [selected, setSelected] = useState(new Set());
 
@@ -197,53 +244,10 @@ function CreateConvMenu({onSend}) {
             <input
                 value= {nameText}
                 onChange= {element => setNameText(element.target.value)}
+                onKeyDown={e => e.key === "Enter" && handleSend() }
                 placeholder="Ma Conversation"
             />
             <button onClick= {handleSend}>Send</button>
         </div>
     )
 }
-
-function ConvCard({id, title, onOpenConv}) {
-    return(
-        <div className="convcard">
-            <h3>ConvId : {id} </h3>
-            <h3>Name : {title}</h3>
-            <p onClick={() => onOpenConv(id)}> GET MESSAAGE</p>
-        </div>
-    )
-}
-
-function MessagesBox({ conv_id }) {
-  const { messagesByConvId, usersById, clientId } = useHotel();
-  const messages = messagesByConvId[conv_id] ?? [];
-
-  console.log(messagesByConvId);
-  console.log(usersById);
-
-  if (messages.length === 0) {
-    return <div className="messagesbox empty">No messages</div>;
-  }
-
-  return (
-    <div className="messagebox">
-      {messages
-        .slice()
-        .sort((a, b) => new Date(a.sent_at) - new Date(b.sent_at))
-        .map(msg => {
-          const isMine = msg.sender_id === clientId;
-          return (
-            <div key={msg.sent_at}
-                className={`msg ${isMine ? "msg--mine" : "msg--theirs"}`}>
-                <p>
-                            <strong>Sender:</strong>{" "}
-                            {usersById[msg.sender_id] ?? "Unknown user"}
-                </p>
-
-              <p>{msg.content}</p>
-            </div>
-          );
-        })}
-    </div>
-  );
-}