Refactor useWebSocket hook to remove conversationId parameter and add connectWebSocket function for handling WebSocket connection and authentication

src/hooks/useTextWebhook.ts

@@ -1,13 +1,13 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 
 import { IMessage } from "../interfaces/message";
 import { conversationWebSocket } from "../services/websockets/conversation";
 
-const useWebSocket = (conversationId: string) => {
+const useWebSocket = () => {
   const [messages, setMessages] = useState<IMessage[]>([]);
   const wsRef = useRef<WebSocket | null>(null);
 
-  useEffect(() => {
+  const connectWebSocket = useCallback((conversationId: string) => {
     const ws = conversationWebSocket({ conversationId, modality: "text" });
 
     wsRef.current = ws;
@@ -17,11 +17,30 @@ const useWebSocket = (conversationId: string) => {
       setMessages((prevMessages) => [...prevMessages, { text: message, sender: "bot" }]);
     };
 
+    ws.onopen = () => {
+      const auth_token = localStorage.getItem("auth_token");
+      const token = `Bearer ${auth_token}`;
+      ws.send(
+        JSON.stringify({
+          type: "headers",
+          headers: {
+            Token: token,
+          },
+        })
+      );
+    };
+
+    ws.onclose = () => {
+      wsRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
     return () => {
-      ws.close();
+      wsRef.current?.close();
       wsRef.current = null;
     };
-  }, [conversationId]);
+  }, []);
 
   const sendMessage = (message: string) => {
     if (message.trim()) {
@@ -32,7 +51,7 @@ const useWebSocket = (conversationId: string) => {
     }
   };
 
-  return { messages, sendMessage };
+  return { messages, sendMessage, connectWebSocket };
 };
 
 export default useWebSocket;