Add useWebRTC hook for managing WebRTC connections and voice calls

src/hooks/useWebRTC.ts

@@ -0,0 +1,130 @@
+import { useState } from "react";
+
+import { ICreateConversationResponse } from "../interfaces/conversation";
+import { createConversation, createConnection } from "../services/api/chatService";
+import { conversationWebSocket } from "../services/websockets/conversation";
+
+export function useWebRTC() {
+  const [peerConnection, setPeerConnection] = useState<RTCPeerConnection | null>(null);
+  const [socket, setSocket] = useState<WebSocket | null>(null);
+  const [transcript, setTranscript] = useState<string>("");
+  const [isConnected, setIsConnected] = useState(false);
+  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function startCall() {
+    try {
+      setError(null);
+      const sessionResponse = await createConversation({ modality: "voice" });
+      const sessionData: ICreateConversationResponse = await sessionResponse.data;
+      const conversationId = sessionData.conversation_id;
+
+      const pc = new RTCPeerConnection();
+      setPeerConnection(pc);
+
+      pc.ontrack = (event) => {
+        const newStream = new MediaStream();
+        newStream.addTrack(event.track);
+        setRemoteStream(newStream);
+      };
+
+      pc.onconnectionstatechange = () => {
+        if (pc.connectionState === "connected") {
+          setIsConnected(true);
+        }
+      };
+
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+      stream.getTracks().forEach((track) => {
+        pc.addTrack(track, stream);
+      });
+
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+
+      const webrtcResponse = await createConnection(conversationId, {
+        conversation_id: conversationId,
+        offer: { sdp: offer.sdp, type: offer.type },
+      });
+
+      const response = await webrtcResponse.data;
+      const ephemeralKey = response.ephemeral_key;
+
+      const ws = conversationWebSocket({
+        conversationId,
+        modality: "voice",
+      });
+
+      setSocket(ws);
+
+      ws.onopen = () => {
+        ws.send(
+          JSON.stringify({
+            type: "headers",
+            headers: {
+              Authorization: `Bearer ${ephemeralKey}`,
+            },
+          })
+        );
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.transcript) {
+            setTranscript(data.transcript);
+          }
+        } catch {
+          setError("Error processing message from server");
+        }
+      };
+
+      pc.onicecandidate = (event) => {
+        if (event.candidate && ws.readyState === WebSocket.OPEN) {
+          ws.send(
+            JSON.stringify({
+              type: "ice-candidate",
+              candidate: event.candidate,
+            })
+          );
+        }
+      };
+
+      ws.onclose = (_event) => {
+        if (isConnected) {
+          endCall();
+        }
+      };
+
+      await pc.setRemoteDescription(new RTCSessionDescription(response.answer));
+
+      const dataChannel = pc.createDataChannel("chat");
+      dataChannel.onmessage = (event) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          ws.send(event.data);
+        }
+      };
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Failed to start call");
+      endCall();
+      throw error;
+    }
+  }
+
+  function endCall() {
+    if (peerConnection) {
+      peerConnection.close();
+      setPeerConnection(null);
+    }
+
+    if (socket) {
+      socket.close();
+      setSocket(null);
+    }
+
+    setIsConnected(false);
+    setRemoteStream(null);
+  }
+
+  return { startCall, endCall, transcript, isConnected, remoteStream, error };
+}