Finished websocket implementation

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>