Create a Unique Custom App Interface

keep this functionality for one user john doe import React, { useEffect, useState, useRef } from "react"; import axios from "axios"; // Import axios to make API requests export default function LiveChat() { const [messages, setMessages] = useState([]); const [messageInput, setMessageInput] = useState(""); const [users, setUsers] = useState([]); // State to store users const [selectedUserId, setSelectedUserId] = useState(null); // State to store selected user id const [conversations, setConversations] = useState([]); // State to store conversations const ws = useRef(null); const clientId = 3; // Unique ID for this client // Handle user click const handleUserClick = (userId) => { setSelectedUserId(userId); setConversations([]); // Clear previous conversations fetchConversations(userId); // Fetch conversations for the selected user }; // WebSocket connection // useEffect(() => { // ws.current = new WebSocket("ws://localhost:8000/ws"); // ws.current.onopen = () => { // console.log("Connected to the WebSocket server"); // }; // ws.current.onmessage = (event) => { // const message = JSON.parse(event.data); // if (message.sender_id !== clientId) { // setMessages((prevMessages) => [...prevMessages, message]); // } // }; // return () => { // ws.current.close(); // }; // }, []); //uncomment folowing part and comment above part for production useEffect(() => { // ws.current = new WebSocket(`ws://${window.location.host}/ws`); ws.current = new WebSocket("ws://localhost:8100/ws"); //to test dashboard backend in server, use upper uri for local dev // ws.current = new WebSocket("ws://184.68.38.34:8100/ws"); ws.current.onopen = () => { console.log("Connected to the WebSocket server"); }; ws.current.onmessage = (event) => { const message = JSON.parse(event.data); if (message.sender_id !== clientId) { setMessages((prevMessages) => [...prevMessages, message]); } }; return () => { ws.current.close(); }; }, []); const sendMessage = () => { if (messageInput) { const msg = { client_id: 3, sender_id: 3, // use user id of client users recipient_id: 2, // use session id of patient message: messageInput, }; ws.current.send(JSON.stringify(msg)); setMessages((prevMessages) => [ ...prevMessages, { sender_id: "You", message: messageInput, created_date: new Date().toISOString(), }, ]); setMessageInput(""); } }; return ( <div className="h-screen flex"> {/* Left side with list of people */} <div className="w-1/4 bg-gray-100 p-4 overflow-y-scroll"> <h2 className="text-lg font-bold mb-4">Chats</h2> {/* <ul className="divide-y divide-gray-300"> {users.map((user) => ( <li key={user.id} className="py-2 cursor-pointer hover:bg-gray-200" onClick={() => handleUserClick(user.id)}> {user.id}: {user.full_name} </li> ))} </ul> */} <ul className="divide-y divide-gray-300"> <li className="py-2 cursor-pointer hover:bg-gray-200"> John test patient </li> <li className="py-2 cursor-pointer hover:bg-gray-200">Samrat</li> <li className="py-2 cursor-pointer hover:bg-gray-200">Sachin</li> </ul> </div> {/* Right side with chat interface */} <div className="flex-1 flex flex-col"> <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark p-5 mb-8"> <form action="#"> <div className="flex-1 flex flex-col"> <div className="flex flex-col sm:flex-row items-center justify-between py-3 border-b-2 border-gray-200 mb-4 text-center"> <div className="relative flex items-center space-x-4"> <div className="relative"></div> <div className="flex flex-col leading-tight"> <div className="text-lg mt-1 flex items-center"> <span className="text-gray-700 font-bold mr-3"> John test patient </span> </div> </div> </div> <div className="text-sm flex items-center space-x-2"> <div>2024-06-11 01:42 PM</div> </div> </div> {messages .filter((msg) => msg.message !== "Offline") .map((msg, index) => ( <div key={index} className="flex items-start gap-2.5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className="w-8 h-8 rounded-full mt-8" > <path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z" /> </svg> <div className="flex flex-col w-full max-w-[320px] leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700"> <div className="flex items-center space-x-2 rtl:space-x-reverse"> {/* <span className="text-sm font-semibold text-gray-900 dark:text-white"> {msg.sender_id}{" "} </span> */} <span className="text-sm font-semibold text-gray-900 dark:text-white"> {msg.sender_id === 2 ? "John test patient" : msg.sender_id} </span> <span className="text-sm font-normal text-gray-500 dark:text-gray-400"> {new Date(msg.created_date).toLocaleTimeString()}{" "} </span> </div> <p className="text-sm font-normal py-2.5 text-gray-900 dark:text-white"> {msg.message} </p> </div> </div> ))} <div className="border-t-2 border-gray-200 mt-4 px-1 pt-4 mb-2 sm:mb-0"> <div className="flex items-center w-full"> <input type="text" className="flex-grow text-xs sm:text-base focus:outline-none focus:placeholder-gray-400 text-gray-600 placeholder-gray-600 pl-2 sm:pl4 pb-2 sm:pb-3 bg-gray-200 rounded-l-md sm:rounded-l-md py-3 sm:py-4 dark:bg-meta-4 dark:text-white" value={messageInput} onChange={(e) => setMessageInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); if (messageInput.trim() !== "") { sendMessage(); } } }} placeholder="Type your message here..." /> <button type="button" className="flex-shrink-0 inline-flex items-center justify-center rounded-r-md px-2 sm:px-4 py-2 sm:py-3 transition duration-500 ease-in-out bg-blue-500 hover:bg-blue-400 focus:outline-none" onClick={sendMessage} > <span className="font-bold text-xs sm:text-lg">Send</span> </button> </div> </div> </div> </form> </div> </div> </div> ); }