update

src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Route, Routes } from "react-router-dom";
 import ChatTrans from './Components/ChatTrans';
 import Kodi from './Components/Kodi';
+import Test from './Components/Test';
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
         <Route  path="/" element={<Kodi />} /> 
         <Route  path="/web" element={<Kodi />} /> 
         <Route  path="/chat" element={<ChatTrans />} />
+        <Route  path="/test" element={<Test />} />
       </Routes>
   );
 }

src/Components/ChatTrans.js

-// import Chat, { Bubble, useMessages } from '@chatui/core';
-// import '@chatui/core/dist/index.css';
 import { useState } from "react";
 import {
   Button,
@@ -7,15 +5,15 @@ import {
   Container,
   Form,
   FormLabel,
-  Navbar,
   Row,
-  ListGroup
+  ListGroup,
 } from "react-bootstrap";
 import io from "socket.io-client";
 import "../App.css";
+import React, { useEffect } from "react";
 
 const url = 'https://staging.strk-ai-support.ngrok.app/'
-// const url = 'http://localhost:8000'
+// const url = "http://localhost:8000";
 
 const socket = io(url, {
   extraHeaders: {
@@ -23,10 +21,6 @@ const socket = io(url, {
   },
 });
 
-socket.on("connect", (data) => {
-  console.log(data);
-});
-
 function ChatTrans() {
   const [languageSupport, setLanguageSupport] = useState("English");
   const [languageUser, setLanguageUser] = useState("Simple Chinese");
@@ -37,7 +31,42 @@ function ChatTrans() {
 
   const [userMessages, setUserMessages] = useState([]);
   const [supportMessages, setSupportMessages] = useState([]);
+  const [room, setRoom] = useState("");
+
+  const generateToken = () => {
+    return Math.random().toString(36).substr(2, 9);
+  };
 
+  useEffect(() => {
+    // 检查URL是否已经有token
+    const currentUrl = new URL(window.location.href);
+
+    if (!currentUrl.searchParams.get("token")) {
+      // 生成新的token
+      const token = generateToken();
+
+      // 更新URL
+      currentUrl.searchParams.set("token", token);
+      window.history.replaceState({}, "", currentUrl.toString());
+
+      // 保存token到sessionStorage
+      sessionStorage.setItem("sessionToken", token);
+    }
+    console.log(currentUrl.searchParams.get("token"));
+
+    setRoom(currentUrl.searchParams.get("token"));
+
+    socket.emit("join", {
+      room: currentUrl.searchParams.get("token"),
+    });
+
+    if (userMessages.length === 0 && supportMessages.length === 0) {
+      socket.emit("history", {
+        room: currentUrl.searchParams.get("token"),
+      });
+    }
+
+  }, []);
 
   socket.on("send msg", function (data) {
     let messge = data.user + ": " + data.message;
@@ -48,87 +77,76 @@ function ChatTrans() {
     }
   });
 
-  const sendUserMessage = (event, user) => {
-    if (userMessage) {
-      socket.emit("send msg", {
-        user: "user",
-        message: userMessage,
-        languageSupport: languageSupport,
-        languageUser: languageUser,
-      });
-      setUserMessage("");
-      setUserMessages([...userMessages, "user: " +userMessage]);
+  socket.on("history", function (data) {
+    let user = data.user;
+    let messages = data.messages;
+
+    if (user === "user") {
+      setUserMessages(messages);
     } else {
-      alert("Message cannot be empty");
+      setSupportMessages(messages);
     }
-  };
+  });
 
-  const sendSupportMessage = (event, user) => {
-    if (supportMessage) {
+  const sendMessage = (
+    event,
+    user,
+    message,
+    messages,
+    setMessage,
+    setMessages
+  ) => {
+    if (message) {
       socket.emit("send msg", {
-        user: "support",
-        message: supportMessage,
+        user: user,
+        message: message,
         languageSupport: languageSupport,
         languageUser: languageUser,
+        room: room,
       });
-      setSupportMessage("");
-      setSupportMessages([...supportMessages, "support: " + supportMessage]);
-    } else {
-      alert("Message cannot be empty");
+      setMessage("");
+      setMessages([...messages, user + ": " + message]);
     }
   };
 
-  const setName = () => {
-    console.log(supportName);
-    console.log(userName);
-    if (supportName && userName) {
-      socket.emit("set room", {
-        support_name: supportName,
-        user_name: userName,
-      });
-
-      socket.emit("join", {
-        username: supportName,
-        room: supportName + '-' + userName,
-      });
-    }
+  const onKeyDown = function (e, user) {
+    if (e.keyCode === 13) {
+      if (user === "user") {
+        sendMessage(
+          e,
+          "user",
+          userMessage,
+          userMessages,
+          setUserMessage,
+          setUserMessages
+        );
+      } else {
+        sendMessage(
+          e,
+          "support",
+          supportMessage,
+          supportMessages,
+          setSupportMessage,
+          setSupportMessages
+        );
       }
-
-  const onUserKeyDown = function (e) {
-    if (e.keyCode == 13) {
-        sendUserMessage(e, "user");
     }
   };
 
-  const onSupportKeyDown = function (e) {
-    if (e.keyCode == 13) {
-        sendSupportMessage(e, "support");
+  const newPage = () => {
+    window.open("/chat");
   }
-  };
-
   return (
     <Container>
       <Row>
-        <Col>
-          <FormLabel>user name</FormLabel>
-          <Form.Control
-            type="text"
-            value={userName}
-            onChange={(e) => setUserName(e.target.value)}
-            placeholder="Enter user name"
-          />
-        </Col>
-        <Col>
-          <FormLabel>support name</FormLabel>
-          <Form.Control
-            type="text"
-            value={supportName}
-            onChange={(e) => setSupportName(e.target.value)}
-            placeholder="Enter support name"
-          />
-        </Col>
-        <Button onClick={(e) => setName()}>Submit(You should set user name and support name first!)</Button>
-      </Row>
+      <button
+            id="ChatButton"
+            className="btn btn-success"
+            onClick={newPage}
+            // disabled={buttonStatus === "generating"}
+          >
+            New Chat
+          </button>      </Row>
       <Row>
         <Col>
           <FormLabel>user</FormLabel>
@@ -161,7 +179,7 @@ function ChatTrans() {
             value={userMessage}
             onChange={(e) => setUserMessage(e.target.value)}
             placeholder="Enter message"
-            onKeyDown={(e) => onUserKeyDown(e)  }
+            onKeyDown={(e) => onKeyDown(e, "user")}
           />
         </Col>
         <Col>
@@ -178,7 +196,7 @@ function ChatTrans() {
             value={supportMessage}
             onChange={(e) => setSupportMessage(e.target.value)}
             placeholder="Enter message"
-            onKeyDown={(e) => onSupportKeyDown(e)  }
+            onKeyDown={(e) => onKeyDown(e, "support")}
           />
         </Col>
 
@@ -198,8 +216,6 @@ function ChatTrans() {
             </ListGroup>
           </Col>
         </Row>
-      
-
       </Row>
     </Container>
   );

src/Components/Test.js

+import React, { useEffect } from 'react';
+
+function Test() {
+  useEffect(() => {
+    // 检查URL是否已经有token
+    const currentUrl = new URL(window.location.href);
+    if (!currentUrl.searchParams.get('token')) {
+      // 生成新的token
+      const token = generateToken();
+      
+      // 更新URL
+      currentUrl.searchParams.set('token', token);
+      window.history.replaceState({}, '', currentUrl.toString());
+
+      // 保存token到sessionStorage
+      sessionStorage.setItem('sessionToken', token);
+    }
+  }, []);
+
+  // 这只是一个简单的token生成函数，真正的应用中，您可能需要更加复杂和安全的生成机制
+  const generateToken = () => {
+    return Math.random().toString(36).substr(2, 9);
+  };
+
+  return (
+    <div className="App">
+      <h1>Welcome to my React App</h1>
+    </div>
+  );
+}
+
+export default Test;