Migrate to typescript

www/app/transcripts/new/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import Recorder from "../recorder";
+import { Dashboard } from "../dashboard";
+import useWebRTC from "../useWebRTC";
+import useTranscript from "../useTranscript";
+import { useWebSockets } from "../useWebSockets";
+import "../../styles/button.css";
+
+const App = () => {
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [disconnected, setDisconnected] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_ENV === "development") {
+      document.onkeyup = (e) => {
+        if (e.key === "d") {
+          setDisconnected((prev) => !prev);
+        }
+      };
+    }
+  }, []);
+
+  const transcript = useTranscript();
+  const webRTC = useWebRTC(stream, transcript.response?.id);
+  const webSockets = useWebSockets(transcript.response?.id);
+
+  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">
+        <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
+        <p className="text-gray-500">Capture The Signal, Not The Noise</p>
+      </div>
+
+      <Recorder
+        setStream={setStream}
+        onStop={() => {
+          webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" }));
+          setStream(null);
+        }}
+      />
+
+      <hr />
+
+      <Dashboard
+        transcriptionText={webSockets.transcriptText}
+        finalSummary={webSockets.finalSummary}
+        topics={webSockets.topics}
+        disconnected={disconnected}
+      />
+    </div>
+  );
+};
+
+export default App;