added the anony chat feat basic

package.json

@@ -66,6 +66,7 @@
     "@types/lunr": "^2.3.7",
     "@types/remove-markdown": "^0.3.4",
     "@types/ua-parser-js": "^0.7.36",
+    "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
     "gray-matter": "^4.0.3",
     "husky": ">=6",

pages/Chatnow.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { v4 as uuidv4 } from "uuid";
 import {
   Box,
   Container,
@@ -13,6 +14,7 @@ import {
 import Head from "next/head";
 import Image from "next/image";
 import { NextPage } from "next";
+import chatBackground from "@/public/assets/heroImages/chatBackground.svg"; // Adjust according to your actual path
 
 interface Message {
   text: string;
@@ -24,24 +26,63 @@ const ChatNow: NextPage = () => {
   const [inChat, setInChat] = useState<boolean>(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [message, setMessage] = useState<string>("");
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [matchId, setMatchId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (inChat && !ws) {
+      const websocket = new WebSocket("ws://localhost:3001"); // Adjust to your server address
+      const userId = uuidv4();
+      websocket.onopen = () => {
+        websocket.send(
+          JSON.stringify({ type: "register", id: userId, interest })
+        );
+      };
+      websocket.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+
+        if (data.type === "match") {
+          setMatchId(data.id);
+        } else if (data.type === "message") {
+          const receivedMessage: Message = { text: data.text, from: "system" };
+          setMessages((prevMessages) => [...prevMessages, receivedMessage]);
+        } else if (data.type === "system") {
+          const systemMessage: Message = { text: data.text, from: "system" };
+          setMessages((prevMessages) => [...prevMessages, systemMessage]);
+        }
+      };
+      websocket.onclose = () =>
+        console.log("Disconnected from WebSocket server");
+      setWs(websocket);
+    }
+  }, [inChat, ws, interest]);
 
   const handleStartChat = () => {
     setInChat(true);
     setMessages([
       {
-        text: "Hello! What would you like to discuss about " + interest + "?",
+        text: "Looking for someone to chat about " + interest + "...",
         from: "system",
       },
     ]);
   };
 
   const handleMessageSend = () => {
-    if (message.trim() !== "") {
-      setMessages([...messages, { text: message, from: "user" }]);
+    if (message.trim() !== "" && matchId) {
+      const userMessage: Message = { text: message, from: "user" };
+      setMessages([...messages, userMessage]);
+      ws?.send(JSON.stringify({ type: "message", to: matchId, text: message }));
       setMessage(""); // Clear input after send
     }
   };
 
+  const handleEndChat = () => {
+    if (ws) {
+      ws.send(JSON.stringify({ type: "end" }));
+      setMessages([{ text: "Looking for a new match...", from: "system" }]);
+    }
+  };
+
   const bgUser = useColorModeValue("blue.100", "blue.900");
   const bgSystem = useColorModeValue("gray.200", "gray.700");
 
@@ -124,6 +165,9 @@ const ChatNow: NextPage = () => {
               <Button onClick={handleMessageSend} colorScheme="blue">
                 Send
               </Button>
+              <Button onClick={handleEndChat} colorScheme="red">
+                End Chat
+              </Button>
             </HStack>
           </VStack>
         )}