update

src/App.js

 import React from 'react';
 import { Route, Routes } from "react-router-dom";
-import Chat from './Components/Chat';
+import ChatTrans from './Components/ChatTrans';
 import Kodi from './Components/Kodi';
 
 function App() {
@@ -8,7 +8,7 @@ function App() {
       <Routes>
         <Route  path="/" element={<Kodi />} /> 
         <Route  path="/web" element={<Kodi />} /> 
-        <Route  path="/chat" element={<Chat />} />
+        <Route  path="/chat" element={<ChatTrans />} />
       </Routes>
   );
 }

src/Components/Chat.js → src/Components/ChatTrans.js

+// import Chat, { Bubble, useMessages } from '@chatui/core';
+// import '@chatui/core/dist/index.css';
 import { useState } from "react";
 import {
   Button,
@@ -7,51 +9,25 @@ import {
   FormLabel,
   Navbar,
   Row,
+  ListGroup
 } from "react-bootstrap";
 import io from "socket.io-client";
 import "../App.css";
-// import Chatbox from "./Chatbox";
-let messageBox = document.querySelector("#message-box");
 
-// const url = 'https://8788-103-84-218-44.ngrok-free.app'
 const url = 'https://staging.strk-ai-support.ngrok.app/'
 // const url = 'http://localhost:8000'
 
 const socket = io(url, {
   extraHeaders: {
-    "ngrok-skip-browser-warning": "123",
+    "ngrok-skip-browser-warning": " ",
   },
 });
 
-// socket.emit("join", {
-//   username: "test",
-//   room: "default",
-// });
 socket.on("connect", (data) => {
   console.log(data);
 });
 
-socket.on("send msg", function (data) {
-  console.log(data);
-  console.log(socket.id);
-  let msg = null;
-  let msgbox = document.createElement("div");
-  msgbox.className = "row";
-
-  msg = `
-            <div class="col">
-              <div class="tag z-depth-3">
-                <span class="teal-text"><b>${data.user}</b>:  ${data.message}
-                </span>
-              </div>
-            </div>`;
-
-  msgbox.innerHTML = msg;
-  messageBox.appendChild(msgbox);
-  messageBox.scrollTop = messageBox.scrollHeight;
-});
-
-function Chat() {
+function ChatTrans() {
   const [languageSupport, setLanguageSupport] = useState("English");
   const [languageUser, setLanguageUser] = useState("Simple Chinese");
   const [userMessage, setUserMessage] = useState("");
@@ -59,11 +35,20 @@ function Chat() {
   const [supportName, setSupportName] = useState("");
   const [userName, setUserName] = useState("");
 
-  const sendUserMessage = (event, user) => {
-    if (!supportName || !userName) {
-      alert("Please enter user name and support name");
-      return;
+  const [userMessages, setUserMessages] = useState([]);
+  const [supportMessages, setSupportMessages] = useState([]);
+
+
+  socket.on("send msg", function (data) {
+    let messge = data.user + ": " + data.message;
+    if (data.user === "user") {
+      setSupportMessages([...supportMessages, messge]);
+    } else {
+      setUserMessages([...userMessages, messge]);
     }
+  });
+
+  const sendUserMessage = (event, user) => {
     if (userMessage) {
       socket.emit("send msg", {
         user: "user",
@@ -72,17 +57,13 @@ function Chat() {
         languageUser: languageUser,
       });
       setUserMessage("");
+      setUserMessages([...userMessages, "user: " +userMessage]);
     } else {
       alert("Message cannot be empty");
     }
   };
 
   const sendSupportMessage = (event, user) => {
-
-    if (!supportName || !userName) {
-      alert("Please enter user name and support name");
-      return;
-    }
     if (supportMessage) {
       socket.emit("send msg", {
         user: "support",
@@ -91,6 +72,7 @@ function Chat() {
         languageUser: languageUser,
       });
       setSupportMessage("");
+      setSupportMessages([...supportMessages, "support: " + supportMessage]);
     } else {
       alert("Message cannot be empty");
     }
@@ -112,12 +94,20 @@ function Chat() {
     }
   }
 
+  const onUserKeyDown = function (e) {
+    if (e.keyCode == 13) {
+        sendUserMessage(e, "user");
+    }
+  };
+
+  const onSupportKeyDown = function (e) {
+    if (e.keyCode == 13) {
+        sendSupportMessage(e, "support");
+    }
+  };
+
   return (
     <Container>
-      <Navbar bg="dark" variant="dark">
-        <Navbar.Brand href="#home">Chat Room</Navbar.Brand>
-        <Navbar.Collapse className="justify-content-end"></Navbar.Collapse>
-      </Navbar>
       <Row>
         <Col>
           <FormLabel>user name</FormLabel>
@@ -171,8 +161,8 @@ function Chat() {
             value={userMessage}
             onChange={(e) => setUserMessage(e.target.value)}
             placeholder="Enter message"
+            onKeyDown={(e) => onUserKeyDown(e)  }
           />
-          <Button onClick={(e) => sendUserMessage(e, "user")}>Send</Button>
         </Col>
         <Col>
           <FormLabel>support</FormLabel>
@@ -182,22 +172,37 @@ function Chat() {
           >
             <option value="English">English</option>
             <option value="Simplified Chinese">Simplified Chinese</option>
-            {/* add other languages here */}
           </Form.Control>
           <Form.Control
             type="text"
             value={supportMessage}
             onChange={(e) => setSupportMessage(e.target.value)}
             placeholder="Enter message"
+            onKeyDown={(e) => onSupportKeyDown(e)  }
           />
-          <Button onClick={(e) => sendSupportMessage(e, "support")}>
-            Send
-          </Button>
+        </Col>
 
+      <Row>
+        <Col>
+        <ListGroup variant="flush">
+        {userMessages.map((message, index) => (
+          <ListGroup.Item key={index}>{message}</ListGroup.Item>
+        ))}
+      </ListGroup>
+        </Col>
+        <Col>
+        <ListGroup variant="flush">
+        {supportMessages.map((message, index) => (
+          <ListGroup.Item key={index}>{message}</ListGroup.Item>
+        ))}
+      </ListGroup>
         </Col>
         </Row>
+      
+
+      </Row>
     </Container>
   );
 }
 
-export default Chat;
+export default ChatTrans;