Manual update with main

app/components/dashboard.js

@@ -14,7 +14,11 @@ export function Dashboard({
 
   return (
     <>
-      <div className="p-4">
+      <div className="w-3/4 py-4">
+        <div className="text-center py-6">
+          <h1 className="text-4xl font-bold text-blue-500">Reflector</h1>
+          <p className="text-gray-500">Capture The Signal, Not The Noise</p>
+        </div>
         <div className="flex justify-between border-b-2">
           <div className="w-1/4">Timestamp</div>
           <div className="w-1/4">Topic</div>
@@ -31,9 +35,8 @@ export function Dashboard({
               <div className="w-1/4">
                 {item.title}{" "}
                 <span
-                  className={`inline-block transform transition-transform duration-200 ${
-                    openIndex === index ? "rotate-90" : ""
-                  }`}
+                  className={`inline-block transform transition-transform duration-200 ${openIndex === index ? "rotate-90" : ""
+                    }`}
                 >
                   {">"}
                 </span>
@@ -42,11 +45,12 @@ export function Dashboard({
               </div>
             </div>
             {openIndex === index && (
-              <div className="mt-2 p-2">{item.transcript}</div>
+              <div className="mt-2 p-2 bg-white">{item.transcript}</div>
             )}
           </div>
         ))}
-        <div className="border-b-2 py-2 w-[90vw] max-w-[1280px]">
+
+        <div className="border-b-2 py-2">
           <div className="flex justify-between">
             <div className="w-1/4">Live</div>
             <div className="w-1/4">Transcript</div>
@@ -57,8 +61,7 @@ export function Dashboard({
             {transcriptionText}
           </div>
         </div>
-
       </div>
     </>
   );
-}
+}

app/components/record.js

@@ -88,7 +88,7 @@ export default function Recorder(props) {
 
 
   return (
-    <div className="flex flex-col items-center justify-center max-w-[90vw] w-full">
+    <div className="flex flex-col items-center justify-center max-w-[75vw] w-full">
       <div className="flex my-2 mx-auto">
         <Dropdown options={ddOptions} onChange={handleDropdownChange} value={ddOptions[0]} />
         &nbsp;

app/page.js

@@ -6,12 +6,24 @@ import useWebRTC from "./components/webrtc.js";
 import "../public/button.css";
 
 const App = () => {
+  const [isRecording, setIsRecording] = useState(false);
   const [stream, setStream] = useState(null);
 
-  // This is where you'd send the stream and receive the data from the server.
-  // transcription, summary, etc
-  const serverData = useWebRTC(stream);
-  const text = serverData?.text ?? "";
+  const handleRecord = (recording) => {
+    setIsRecording(recording);
+
+    if (recording) {
+      navigator.mediaDevices
+        .getUserMedia({ audio: true })
+        .then(setStream)
+        .catch((err) => console.error(err));
+    } else if (!recording && serverData.peer) {
+      serverData.peer.send(JSON.stringify({ cmd: 'STOP' }));
+    }
+  };
+
+
+  const serverData = useWebRTC(stream, setIsRecording);
 
   return (
     <div className="flex flex-col items-center h-[100svh]">
@@ -20,17 +32,17 @@ const App = () => {
         <p className="text-gray-500">Capture The Signal, Not The Noise</p>
       </div>
 
-      <Recorder setStream={setStream}/>
+      <Recorder setStream={setStream} />
       <Dashboard
-        serverData={serverData}
-        transcriptionText={`[${serverData?.timestamp?.substring(2) ?? "??"}] ${text}`}
+        isRecording={isRecording}
+        onRecord={(recording) => handleRecord(recording)}
+        transcriptionText={serverData.text ?? "(No transcription text)"}
+        finalSummary={serverData.finalSummary}
+        topics={serverData.topics ?? []}
+        stream={stream}
       />
-
-      <footer className="w-full bg-gray-800 text-center py-4 mt-auto text-white">
-        Reflector © 2023 Monadical
-      </footer>
     </div>
   );
 };
 
-export default App;
+export default App;