Merge branch 'main' into jose/markers

www/app/transcripts/dashboard.tsx

@@ -3,8 +3,24 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faChevronRight,
   faChevronDown,
-  faLinkSlash,
 } from "@fortawesome/free-solid-svg-icons";
+import { formatTime } from "../lib/time";
+import ScrollToBottom from "./scrollToBottom";
+import DisconnectedIndicator from "./disconnectedIndicator";
+import LiveTrancription from "./liveTranscription";
+import FinalSummary from "./finalSummary";
+import { Topic, FinalSummary as FinalSummaryType } from "./webSocketTypes";
+
+type DashboardProps = {
+  transcriptionText: string;
+  finalSummary: FinalSummaryType;
+  topics: Topic[];
+  disconnected: boolean;
+  useActiveTopic: [
+    Topic | null,
+    React.Dispatch<React.SetStateAction<Topic | null>>,
+  ];
+};
 
 export function Dashboard({
   transcriptionText,
@@ -12,9 +28,9 @@ export function Dashboard({
   topics,
   disconnected,
   useActiveTopic,
-}) {
+}: DashboardProps) {
   const [activeTopic, setActiveTopic] = useActiveTopic;
-  const [autoscrollEnabled, setAutoscrollEnabled] = useState(true);
+  const [autoscrollEnabled, setAutoscrollEnabled] = useState<boolean>(true);
 
   useEffect(() => {
     if (autoscrollEnabled) scrollToBottom();
@@ -22,7 +38,10 @@ export function Dashboard({
 
   const scrollToBottom = () => {
     const topicsDiv = document.getElementById("topics-div");
-    topicsDiv.scrollTop = topicsDiv.scrollHeight;
+
+    if (!topicsDiv)
+      console.error("Could not find topics div to scroll to bottom");
+    else topicsDiv.scrollTop = topicsDiv.scrollHeight;
   };
 
   const handleScroll = (e) => {
@@ -35,18 +54,6 @@ export function Dashboard({
     }
   };
 
-  const formatTime = (seconds) => {
-    let hours = Math.floor(seconds / 3600);
-    let minutes = Math.floor((seconds % 3600) / 60);
-    let secs = Math.floor(seconds % 60);
-
-    let timeString = `${hours > 0 ? hours + ":" : ""}${minutes
-      .toString()
-      .padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-
-    return timeString;
-  };
-
   return (
     <>
       <div className="relative h-[64svh] w-3/4 flex flex-col">
@@ -58,16 +65,12 @@ export function Dashboard({
           <div className="w-3/4 font-bold">Topic</div>
         </div>
 
-        <div
-          className={`absolute right-5 w-10 h-10 ${
-            autoscrollEnabled ? "hidden" : "flex"
-          } ${
-            finalSummary ? "top-[49%]" : "bottom-1"
-          } justify-center items-center text-2xl cursor-pointer opacity-70 hover:opacity-100 transition-opacity duration-200 animate-bounce rounded-xl border-slate-400 bg-[#3c82f638] text-[#3c82f6ed]`}
-          onClick={scrollToBottom}
-        >
-          &#11015;
-        </div>
+        <ScrollToBottom
+          visible={!autoscrollEnabled}
+          hasFinalSummary={finalSummary ? true : false}
+          handleScrollBottom={scrollToBottom}
+        />
+
         <div
           id="topics-div"
           className="py-2 overflow-y-auto"
@@ -106,26 +109,12 @@ export function Dashboard({
           )}
         </div>
 
-        {finalSummary && (
-          <div className="min-h-[200px] overflow-y-auto mt-2 p-2 bg-white temp-transcription rounded">
-            <h2>Final Summary</h2>
-            <p>{finalSummary.summary}</p>
-          </div>
-        )}
+        {finalSummary.summary && <FinalSummary text={finalSummary.summary} />}
       </div>
 
-      {disconnected && (
-        <div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 flex justify-center items-center">
-          <div className="text-white text-2xl">
-            <FontAwesomeIcon icon={faLinkSlash} className="mr-2" />
-            Disconnected
-          </div>
-        </div>
-      )}
+      {disconnected && <DisconnectedIndicator />}
 
-      <footer className="h-[7svh] w-full bg-gray-800 text-white text-center py-4 text-2xl">
-        &nbsp;{transcriptionText}&nbsp;
-      </footer>
+      <LiveTrancription text={transcriptionText} />
     </>
   );
 }

www/app/transcripts/disconnectedIndicator.tsx

@@ -0,0 +1,13 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLinkSlash } from "@fortawesome/free-solid-svg-icons";
+
+export default function DisconnectedIndicator() {
+  return (
+    <div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 flex justify-center items-center">
+      <div className="text-white text-2xl">
+        <FontAwesomeIcon icon={faLinkSlash} className="mr-2" />
+        Disconnected
+      </div>
+    </div>
+  );
+}

www/app/transcripts/finalSummary.tsx

@@ -0,0 +1,12 @@
+type FinalSummaryProps = {
+  text: string;
+};
+
+export default function FinalSummary(props: FinalSummaryProps) {
+  return (
+    <div className="min-h-[200px] overflow-y-auto mt-2 p-2 bg-white temp-transcription rounded">
+      <h2>Final Summary</h2>
+      <p>{props.text}</p>
+    </div>
+  );
+}

www/app/transcripts/liveTranscription.tsx

@@ -0,0 +1,11 @@
+type LiveTranscriptionProps = {
+  text: string;
+};
+
+export default function LiveTrancription(props: LiveTranscriptionProps) {
+  return (
+    <div className="h-[7svh] w-full bg-gray-800 text-white text-center py-4 text-2xl">
+      &nbsp;{props.text}&nbsp;
+    </div>
+  );
+}

www/app/transcripts/new/page.tsx

@@ -6,11 +6,12 @@ import useWebRTC from "../useWebRTC";
 import useTranscript from "../useTranscript";
 import { useWebSockets } from "../useWebSockets";
 import "../../styles/button.css";
+import { Topic } from "../webSocketTypes";
 
 const App = () => {
-  const [stream, setStream] = useState(null);
-  const [disconnected, setDisconnected] = useState(false);
-  const useActiveTopic = useState(null);
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [disconnected, setDisconnected] = useState<boolean>(false);
+  const useActiveTopic = useState<Topic | null>(null);
 
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_ENV === "development") {
@@ -27,12 +28,7 @@ const App = () => {
   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={() => {
@@ -49,11 +45,10 @@ const App = () => {
         transcriptionText={webSockets.transcriptText}
         finalSummary={webSockets.finalSummary}
         topics={webSockets.topics}
-        stream={stream}
         disconnected={disconnected}
         useActiveTopic={useActiveTopic}
       />
-    </div>
+    </>
   );
 };
 

www/app/transcripts/recorder.js

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect, useState } from "react";
 
 import WaveSurfer from "wavesurfer.js";
-import CustomRecordPlugin from "./custom-plugins/record";
-import CustomRegionsPlugin from "./custom-plugins/regions";
+import CustomRecordPlugin from "../lib/custom-plugins/record";
+import CustomRegionsPlugin from "../lib/custom-plugins/regions";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload } from "@fortawesome/free-solid-svg-icons";

www/app/transcripts/scrollToBottom.tsx

@@ -0,0 +1,23 @@
+type ScrollToBottomProps = {
+  visible: boolean;
+  hasFinalSummary: boolean;
+  handleScrollBottom: () => void;
+};
+
+export default function ScrollToBottom(props: ScrollToBottomProps) {
+  return (
+    <div
+      className={`absolute right-5 w-10 h-10 ${
+        props.visible ? "flex" : "hidden"
+      } ${
+        props.hasFinalSummary ? "top-[49%]" : "bottom-1"
+      } justify-center items-center text-2xl cursor-pointer opacity-70 hover:opacity-100 transition-opacity duration-200 animate-bounce rounded-xl border-slate-400 bg-[#3c82f638] text-[#3c82f6ed]`}
+      onClick={() => {
+        props.handleScrollBottom();
+        return false;
+      }}
+    >
+      &#11015;
+    </div>
+  );
+}

www/app/transcripts/useTranscript.tsx

@@ -1,20 +1,26 @@
 import { useEffect, useState } from "react";
-import { DefaultApi } from "../api/apis/DefaultApi";
+import { DefaultApi, V1TranscriptsCreateRequest } from "../api/apis/DefaultApi";
 import { Configuration } from "../api/runtime";
+import { GetTranscript } from "../api";
+import getApi from "../lib/getApi";
 
-const useTranscript = () => {
-  const [response, setResponse] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
+type UseTranscript = {
+  response: GetTranscript | null;
+  loading: boolean;
+  error: string | null;
+  createTranscript: () => void;
+};
 
-  const apiConfiguration = new Configuration({
-    basePath: process.env.NEXT_PUBLIC_API_URL,
-  });
-  const api = new DefaultApi(apiConfiguration);
+const useTranscript = (): UseTranscript => {
+  const [response, setResponse] = useState<GetTranscript | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const api = getApi();
 
   const createTranscript = () => {
     setLoading(true);
-    const requestParameters = {
+    const requestParameters: V1TranscriptsCreateRequest = {
       createTranscript: {
         name: "Weekly All-Hands", // Hardcoded for now
       },

www/app/transcripts/useWebRTC.tsx

@@ -1,28 +1,30 @@
 import { useEffect, useState } from "react";
 import Peer from "simple-peer";
-import { DefaultApi } from "../api/apis/DefaultApi";
+import {
+  DefaultApi,
+  V1TranscriptRecordWebrtcRequest,
+} from "../api/apis/DefaultApi";
 import { Configuration } from "../api/runtime";
+import getApi from "../lib/getApi";
 
-const useWebRTC = (stream, transcriptId) => {
-  const [data, setData] = useState({
-    peer: null,
-  });
+const useWebRTC = (
+  stream: MediaStream | null,
+  transcriptId: string | null,
+): Peer => {
+  const [peer, setPeer] = useState<Peer | null>(null);
 
   useEffect(() => {
     if (!stream || !transcriptId) {
       return;
     }
 
-    const apiConfiguration = new Configuration({
-      basePath: process.env.NEXT_PUBLIC_API_URL,
-    });
-    const api = new DefaultApi(apiConfiguration);
+    const api = getApi();
 
-    let peer = new Peer({ initiator: true, stream: stream });
+    let p: Peer = new Peer({ initiator: true, stream: stream });
 
-    peer.on("signal", (data) => {
+    p.on("signal", (data: any) => {
       if ("sdp" in data) {
-        const requestParameters = {
+        const requestParameters: V1TranscriptRecordWebrtcRequest = {
           transcriptId: transcriptId,
           rtcOffer: {
             sdp: data.sdp,
@@ -33,7 +35,7 @@ const useWebRTC = (stream, transcriptId) => {
         api
           .v1TranscriptRecordWebrtc(requestParameters)
           .then((answer) => {
-            peer.signal(answer);
+            p.signal(answer);
           })
           .catch((err) => {
             console.error("WebRTC signaling error:", err);
@@ -41,17 +43,17 @@ const useWebRTC = (stream, transcriptId) => {
       }
     });
 
-    peer.on("connect", () => {
+    p.on("connect", () => {
       console.log("WebRTC connected");
-      setData((prevData) => ({ ...prevData, peer: peer }));
+      setPeer(p);
     });
 
     return () => {
-      peer.destroy();
+      p.destroy();
     };
   }, [stream, transcriptId]);
 
-  return data;
+  return peer;
 };
 
 export default useWebRTC;

www/app/transcripts/useWebSockets.tsx

@@ -1,10 +1,20 @@
 import { useEffect, useState } from "react";
+import { Topic, FinalSummary, Status } from "./webSocketTypes";
 
-export const useWebSockets = (transcriptId) => {
-  const [transcriptText, setTranscriptText] = useState("");
-  const [topics, setTopics] = useState([]);
-  const [finalSummary, setFinalSummary] = useState("");
-  const [status, setStatus] = useState("disconnected");
+type UseWebSockets = {
+  transcriptText: string;
+  topics: Topic[];
+  finalSummary: FinalSummary;
+  status: Status;
+};
+
+export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
+  const [transcriptText, setTranscriptText] = useState<string>("");
+  const [topics, setTopics] = useState<Topic[]>([]);
+  const [finalSummary, setFinalSummary] = useState<FinalSummary>({
+    summary: "",
+  });
+  const [status, setStatus] = useState<Status>({ value: "disconnected" });
 
   useEffect(() => {
     if (!transcriptId) return;
@@ -40,7 +50,7 @@ export const useWebSockets = (transcriptId) => {
           break;
 
         case "STATUS":
-          setStatus(message.data.status);
+          setStatus(message.data);
           break;
 
         default:

www/app/transcripts/webSocketTypes.tsx

@@ -0,0 +1,19 @@
+export type Topic = {
+  timestamp: number;
+  title: string;
+  transcript: string;
+  summary: string;
+  id: string;
+};
+
+export type Transcript = {
+  text: string;
+};
+
+export type FinalSummary = {
+  summary: string;
+};
+
+export type Status = {
+  value: string;
+};