Add useWebSocket hook for managing text-based WebSocket communication

src/hooks/useTextWebhook.ts

@@ -0,0 +1,38 @@
+import { useState, useEffect, useRef } from "react";
+
+import { IMessage } from "../interfaces/message";
+import { conversationWebSocket } from "../services/websockets/conversation";
+
+const useWebSocket = (conversationId: string) => {
+  const [messages, setMessages] = useState<IMessage[]>([]);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    const ws = conversationWebSocket({ conversationId, modality: "text" });
+
+    wsRef.current = ws;
+
+    ws.onmessage = (event) => {
+      const message = event.data;
+      setMessages((prevMessages) => [...prevMessages, { text: message, sender: "bot" }]);
+    };
+
+    return () => {
+      ws.close();
+      wsRef.current = null;
+    };
+  }, [conversationId]);
+
+  const sendMessage = (message: string) => {
+    if (message.trim()) {
+      setMessages((prev) => [...prev, { text: message, sender: "user" }]);
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(message);
+      }
+    }
+  };
+
+  return { messages, sendMessage };
+};
+
+export default useWebSocket;