Add conversation management with WebSocket integration in ChatScreen

src/pages/chatArea/components/ChatScreen.tsx

@@ -3,36 +3,44 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import GraphicEqIcon from "@mui/icons-material/GraphicEq";
 import PersonIcon from "@mui/icons-material/Person";
 import { Box, IconButton, InputBase, Menu, MenuItem } from "@mui/material";
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { AuthContext } from "../../../context/AuthContext";
+import useWebSocket from "../../../hooks/useTextWebhook";
+import { ICreateConversationResponse } from "../../../interfaces/conversation";
 import { logout } from "../../../services/api/authService";
-import { IMessage, IChatScreenProps } from "../interfaces";
+import { createConversation } from "../../../services/api/chatService";
 
-const ChatScreen: React.FC<IChatScreenProps> = ({ isOpen, toggleSidebar }) => {
-  const [messages, setMessages] = useState<IMessage[]>([]);
+interface ChatScreenProps {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+}
+
+const ChatScreen: React.FC<ChatScreenProps> = ({ isOpen, toggleSidebar }) => {
   const [input, setInput] = useState<string>("");
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const [conversation, setConversation] = useState<string>("");
+
+  useEffect(() => {
+    const fetchConversation = async () => {
+      const conv = await createConversation({ modality: "text" });
+      const sessionData: ICreateConversationResponse = await conv.data;
+      const conversationId = sessionData.conversation_id;
+      setConversation(conversationId);
+    };
+    fetchConversation();
+  }, []);
+
+  const { messages, sendMessage } = useWebSocket(conversation);
   const authContext = useContext(AuthContext);
   const navigate = useNavigate();
 
-  const generateBotResponse = (userMessage: string) => {
-    if (userMessage.trim().toLowerCase() === "hello") {
-      return "Hi! How can I assist you today?";
-    }
-    return "I am not sure how to respond to that.";
-  };
-
   const handleSendMessage = () => {
     if (input.trim()) {
-      setMessages([...messages, { text: input, sender: "user" }]);
+      sendMessage(input.trim());
       setInput("");
-
-      setTimeout(() => {
-        const botResponse = generateBotResponse(input);
-        setMessages((prevMessages) => [...prevMessages, { text: botResponse, sender: "bot" }]);
-      }, 1000);
     }
   };
 
@@ -51,8 +59,6 @@ const ChatScreen: React.FC<IChatScreenProps> = ({ isOpen, toggleSidebar }) => {
   const handleLogout = async () => {
     try {
       await logout();
-    } catch (error) {
-      console.error("Logout failed", error);
     } finally {
       authContext?.logout();
     }