Finished websocket implementation

www/app/components/transcript.js

@@ -3,7 +3,7 @@ import axios from "axios";
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
-const useCreateTranscript = () => {
+const useTranscript = () => {
   const [response, setResponse] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -15,29 +15,31 @@ const useCreateTranscript = () => {
       name: "Weekly All-Hands", // Hardcoded for now
     };
 
-    console.log("Sending POST:", data);
+    console.debug(
+      "POST - /v1/transcripts/ - Requesting new transcription creation",
+      data,
+    );
 
     axios
       .post(url, data)
       .then((result) => {
         setResponse(result.data);
         setLoading(false);
-        console.log("Response:", result.data);
+        console.debug("New transcript created:", result.data);
       })
       .catch((err) => {
-        setError(err.response || err);
+        const errorString = err.response || err || "Unknown error";
+        setError(eerrorString);
         setLoading(false);
-        alert("Error: " + (err.response || err));
-        console.log("Error occurred:", err.response || err); // Debugging line
+        console.error("Error creating transcript:", errorString);
       });
   };
 
-  // You can choose when to call createTranscript, e.g., based on some dependencies
   useEffect(() => {
     createTranscript();
-  }, []); // Empty dependencies array means this effect will run once on mount
+  }, []);
 
   return { response, loading, error, createTranscript };
 };
 
-export default useCreateTranscript;
+export default useTranscript;

www/app/components/webrtc.js

@@ -4,17 +4,16 @@ import axios from "axios";
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
-const useWebRTC = (stream, transcript) => {
+const useWebRTC = (stream, transcriptId) => {
   const [data, setData] = useState({
     peer: null,
   });
 
   useEffect(() => {
-    if (!stream || !transcript) {
+    if (!stream || !transcriptId) {
       return;
     }
-    const url = `${API_URL}/v1/transcripts/${transcript.id}/record/webrtc`;
-    console.log("Sending RTC Offer", url, transcript);
+    const url = `${API_URL}/v1/transcripts/${transcriptId}/record/webrtc`;
 
     let peer = new Peer({ initiator: true, stream: stream });
 
@@ -33,11 +32,10 @@ const useWebRTC = (stream, transcript) => {
           })
           .then((response) => {
             const answer = response.data;
-            console.log("Answer:", answer);
             peer.signal(answer);
           })
           .catch((e) => {
-            console.log("Error signaling:", e);
+            console.error("WebRTC signaling error:", e);
           });
       }
     });
@@ -47,42 +45,10 @@ const useWebRTC = (stream, transcript) => {
       setData((prevData) => ({ ...prevData, peer: peer }));
     });
 
-    peer.on("data", (data) => {
-      const serverData = JSON.parse(data.toString());
-      console.log(serverData);
-
-      switch (serverData.cmd) {
-        case "SHOW_TRANSCRIPTION":
-          setData((prevData) => ({
-            ...prevData,
-            text: serverData.text,
-          }));
-          break;
-        case "UPDATE_TOPICS":
-          setData((prevData) => ({
-            ...prevData,
-            topics: serverData.topics,
-          }));
-          break;
-        case "DISPLAY_FINAL_SUMMARY":
-          setData((prevData) => ({
-            ...prevData,
-            finalSummary: {
-              duration: serverData.duration,
-              summary: serverData.summary,
-            },
-            text: "",
-          }));
-          break;
-        default:
-          console.error(`Unknown command ${serverData.cmd}`);
-      }
-    });
-
     return () => {
       peer.destroy();
     };
-  }, [stream, transcript]);
+  }, [stream, transcriptId]);
 
   return data;
 };

www/app/components/websocket.js

@@ -1,15 +1,19 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+
+export const useWebSockets = (transcriptId) => {
+  const [transcriptText, setTranscriptText] = useState("");
+  const [topics, setTopics] = useState([]);
+  const [finalSummary, setFinalSummary] = useState("");
+  const [status, setStatus] = useState("disconnected");
 
-export const useWebSockets = (transcript_id) => {
   useEffect(() => {
-    if (!transcript_id) return;
+    if (!transcriptId) return;
 
-    const url = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/v1/transcripts/${transcript_id}/events`;
+    const url = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/v1/transcripts/${transcriptId}/events`;
     const ws = new WebSocket(url);
-    console.log("Opening websocket: ", url);
 
     ws.onopen = () => {
-      console.log("WebSocket connection opened");
+      console.debug("WebSocket connection opened");
     };
 
     ws.onmessage = (event) => {
@@ -17,15 +21,28 @@ export const useWebSockets = (transcript_id) => {
 
       switch (message.event) {
         case "TRANSCRIPT":
-          if (!message.data.text) break;
-          console.log("TRANSCRIPT event:", message.data.text);
+          if (message.data.text) {
+            setTranscriptText(message.data.text.trim());
+            console.debug("TRANSCRIPT event:", message.data);
+          }
           break;
+
         case "TOPIC":
-          console.log("TOPIC event:", message.data);
+          setTopics((prevTopics) => [...prevTopics, message.data]);
+          console.debug("TOPIC event:", message.data);
           break;
+
         case "FINAL_SUMMARY":
-          console.log("FINAL_SUMMARY event:", message.data.summary);
+          if (message.data.summary) {
+            setFinalSummary(message.data.summary.trim());
+            console.debug("FINAL_SUMMARY event:", message.data.summary);
+          }
           break;
+
+        case "STATUS":
+          setStatus(message.data.status);
+          break;
+
         default:
           console.error("Unknown event:", message.event);
       }
@@ -36,11 +53,13 @@ export const useWebSockets = (transcript_id) => {
     };
 
     ws.onclose = () => {
-      console.log("WebSocket connection closed");
+      console.debug("WebSocket connection closed");
     };
 
     return () => {
       ws.close();
     };
-  }, [transcript_id]);
+  }, [transcriptId]);
+
+  return { transcriptText, topics, finalSummary, status };
 };

www/app/page.js

@@ -3,22 +3,17 @@ import React, { useState } from "react";
 import Recorder from "./components/record.js";
 import { Dashboard } from "./components/dashboard.js";
 import useWebRTC from "./components/webrtc.js";
-import useCreateTranscript from "./components/transcript.js";
+import useTranscript from "./components/transcript.js";
 import { useWebSockets } from "./components/websocket.js";
 import "../public/button.css";
 
 const App = () => {
   const [stream, setStream] = useState(null);
 
-  const transcript = useCreateTranscript();
-  const serverData = useWebRTC(stream, transcript.response);
+  const transcript = useTranscript();
+  const webRTC = useWebRTC(stream, transcript.response?.id);
   const webSockets = useWebSockets(transcript.response?.id);
 
-  console.log("serverData", serverData);
-
-  const sendStopCmd = () =>
-    serverData?.peer?.send(JSON.stringify({ cmd: "STOP" }));
-
   return (
     <div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]">
       <div className="h-[13svh] flex flex-col justify-center items-center">
@@ -26,11 +21,16 @@ const App = () => {
         <p className="text-gray-500">Capture The Signal, Not The Noise</p>
       </div>
 
-      <Recorder setStream={setStream} onStop={sendStopCmd} />
+      <Recorder
+        setStream={setStream}
+        onStop={() => {
+          setStream(null);
+        }}
+      />
       <Dashboard
-        transcriptionText={serverData.text ?? "(No transcription yet)"}
-        finalSummary={serverData.finalSummary}
-        topics={serverData.topics ?? []}
+        transcriptionText={webSockets.transcriptText}
+        finalSummary={webSockets.finalSummary}
+        topics={webSockets.topics}
         stream={stream}
       />
     </div>