add user to conv fix & conv create impl

src/components/widget/chatWidget.jsx

@@ -7,13 +7,16 @@ import { useRef } from "react";
 import "./chatWidget.css"
 
 export default function ChatWidget({convlist}) {
-    const { fetchMessages, sendMessage,
-            usersById, clientId, fetchConvUsers,
-            addUserToConv
+    const { 
+            createConversation,
+            fetchMessages, sendMessage,
+            usersById, clientId,
+            fetchConvUsers, addUserToConv
             } = useHotel();
 
     const [activeConvId, setActiveConvId] = useState(null);
     const [showAddUsers, setShowAddUsers] = useState(false);
+    const [showCreateConv, setShowCreateConv] = useState(false);
 
     const handleOpenConv = async (conv_id) => {
         setActiveConvId(conv_id);
@@ -40,7 +43,13 @@ return (
                     >
                         Add users
                     </button>
-                </div>
+                    <button
+                        onClick={() => setShowCreateConv(v => !v)}
+                    >
+                        Create Conv
+                    </button>
+            
+                    </div>
             </div>
 
             {showAddUsers && activeConvId && (
@@ -51,7 +60,7 @@ return (
                     onValidate={addUserToConv}
                     onClose={() => setShowAddUsers(false)}
                 />
-            )}
+            )}                
 
             {activeConvId && (
                 <MessagesBox
@@ -67,6 +76,13 @@ return (
                 onSend={sendMessage}
                 disabled={!activeConvId}
             />
+
+            {showCreateConv && (
+            <CreateConvMenu
+                onSend={createConversation}
+            />
+            )}
+
         </div>
     );
 }
@@ -159,7 +175,28 @@ function AddUsersMenu({ convId, usersById, fetchConvUsers, onValidate, onClose }
     );
 }
 
+function CreateConvMenu({onSend}) {
 
+    const [nametext, setNameText] = useState("");
+    const handleSend = () =>{
+        if (!nametext.trim()) return;
+
+        onSend(nametext);
+
+        setText("");
+    };
+
+    return (
+        <div className="createConvBox">
+            <input
+                value= {text}
+                onChange= {element => setText(element.target.value)}
+                placeholder="Ma Conversation"
+            />
+            <button onClick= {handleSend}>Send</button>
+        </div>
+    )
+}
 
 function ConvCard({id, title, onOpenConv}) {
     return(