Add chat message some design and make a pop up on chat page

Author: chauhanshilpa

app/components/random_chat_components/CategoriesAndGenderDetailsPopup.tsx

@@ -1,7 +1,24 @@
 import React from "react";
+import Image from "next/image";
+import CategoriesDropdown from "@/app/components/my_account_components/CategoriesDropdown";
 
 const CategoriesAndGenderDetailsPopup = () => {
-  return <div></div>;
+  return (
+    <div className="absolute flex flex-col bg-white rounded p-4">
+      <div className="flex justify-around">
+        <Image src="/female.png" height={20} width={20} alt="profile-picture" />
+        <Image src="/male.png" height={20} width={20} alt="profile-picture" />
+        <Image
+          src="/both_gender.png"
+          height={20}
+          width={20}
+          alt="profile-picture"
+        />
+      </div>
+      <CategoriesDropdown category="Interest" />
+      <CategoriesDropdown category="Location" />
+    </div>
+  );
 };
 
 export default CategoriesAndGenderDetailsPopup;

app/voyager/random_chat/page.tsx

@@ -1,7 +1,8 @@
-"use client"
+"use client";
 
 import { useState, useEffect } from "react";
 import Sidebar from "@/app/components/random_chat_components/Sidebar";
+import CategoriesAndGenderDetailsPopup from "@/app/components/random_chat_components/CategoriesAndGenderDetailsPopup";
 
 const RandomChat = () => {
   const [inputMessage, setInputMessage] = useState<string>("");
@@ -25,13 +26,15 @@ const RandomChat = () => {
     return () => {
       newSocket.close();
     };
+    // eslint-disable-next-line
   }, []); // Only runs once when the component mounts
 
   function sendMessage(event: React.KeyboardEvent<HTMLInputElement>) {
     if (
       event.key === "Enter" &&
       socket &&
-      socket.readyState === WebSocket.OPEN
+      socket.readyState === WebSocket.OPEN &&
+      inputMessage.length >=1
     ) {
       // Send the message
       socket.send(JSON.stringify({ content: inputMessage }));
@@ -48,23 +51,30 @@ const RandomChat = () => {
   return (
     <div className="flex w-full h-full">
       <Sidebar />
-      <div className="flex h-[100vh] w-full ml-[25%] bg-[#393E46]">
+      <div className="flex flex-col justify-between h-[100vh] w-full ml-[25%] bg-[#393E46]">
+        {chatMessages.length <= 0 && <CategoriesAndGenderDetailsPopup />}
         <div className="bg-blue text-white p-2">
           {chatMessages.map((message, index) => (
-            <div key={index}>{message}</div>
+            <div
+              key={index}
+              className="bg-white rounded-l-full rounded-r-full px-3 py-1 text-black max-w-fit mb-3"
+            >
+              {message}
+            </div>
           ))}
         </div>
-
-        <div className="w-[90%] self-end mx-auto mb-5">
-          <input
-            type="text"
-            id="default-input"
-            className="text-gray-50 text-sm rounded-lg block p-2.5 w-full bg-gray-500 outline-none"
-            placeholder="Enter text here..."
-            value={inputMessage}
-            onChange={handleMessageChange}
-            onKeyDown={sendMessage}
-          />
+        <div className="w-full">
+          <div className="w-[95%] mx-auto mb-4">
+            <input
+              type="text"
+              id="default-input"
+              className="text-gray-50 text-sm rounded-lg block p-2.5 w-full bg-gray-500 outline-none"
+              placeholder="Enter text here..."
+              value={inputMessage}
+              onChange={handleMessageChange}
+              onKeyDown={sendMessage}
+            />
+          </div>
         </div>
       </div>
     </div>