Merge remote-tracking branch 'origin' into jose/vertical-waveform

app/components/dashboard.js

@@ -1,5 +1,7 @@
 import { Mulberry32 } from "../utils.js";
 import React, { useState, useEffect } from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
 export function Dashboard({
   isRecording,
@@ -10,11 +12,10 @@ export function Dashboard({
   stream,
 }) {
   const [openIndex, setOpenIndex] = useState(null);
-  const [liveTranscript, setLiveTranscript] = useState("");
 
   return (
     <>
-      <div className="w-3/4 py-4">
+      <div className="flex-grow w-3/4 py-4">
         <div className="text-center py-6">
           <h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1>
         </div>
@@ -27,47 +28,38 @@ export function Dashboard({
         {topics.map((item, index) => (
           <div key={index} className="border-b-2 py-2">
             <div
-              className="flex justify-between cursor-pointer"
+              className="flex justify-between items-center cursor-pointer"
               onClick={() => setOpenIndex(openIndex === index ? null : index)}
             >
               <div className="w-1/4">{item.timestamp}</div>
-              <div className="w-1/4">
-                {item.title}{" "}
-                <span
-                  className={`inline-block transform transition-transform duration-200 ${
-                    openIndex === index ? "rotate-90" : ""
-                  }`}
-                >
-                  {">"}
-                </span>
+              <div className="w-1/4 flex justify-between items-center">
+                {item.title}
+                <FontAwesomeIcon
+                  className={`transform transition-transform duration-200`}
+                  icon={openIndex === index ? faChevronDown : faChevronRight}
+                />
               </div>
               <div className="w-1/4 flex flex-row space-x-0.5"></div>
             </div>
             {openIndex === index && (
-              <div className="mt-2 p-2 bg-white">{item.transcript}</div>
+              <div className="mt-2 p-2 bg-white rounded">{item.transcript}</div>
             )}
           </div>
         ))}
 
-        <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>
-            <div className="w-1/4 flex flex-row space-x-0.5"></div>
-          </div>
-          <div className="mt-2 p-2 bg-white temp-transcription">
-            {transcriptionText}
-          </div>
-        </div>
 
         {finalSummary && (
-          <div>
+          <div className="mt-2 p-2 bg-white temp-transcription rounded">
             <h2>Final Summary</h2>
             <p>Duration: {finalSummary.duration}</p>
             <p>{finalSummary.summary}</p>
           </div>
         )}
       </div>
+
+      <footer className="w-full bg-gray-800 text-white text-center py-4 text-2xl">
+        {transcriptionText}
+      </footer>
     </>
   );
 }

app/components/record.js

@@ -95,6 +95,8 @@ export default function Recorder(props) {
     if (!record) return console.log("no record");
 
     if (record?.isRecording()) {
+
+      props.serverData.peer.send(JSON.stringify({ cmd: "STOP" }));
       record.stopRecording();
       setIsRecording(false);
       document.getElementById("play-btn").disabled = false;

app/components/webrtc.js

@@ -64,6 +64,7 @@ const useWebRTC = (stream, setIsRecording) => {
               duration: serverData.duration,
               summary: serverData.summary,
             },
+            text: ''
           }));
           setIsRecording(false);
           break;