Merge branch 'main' into jose/markers

www/app/(auth)/fiefWrapper.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { FiefAuthProvider } from "@fief/fief/nextjs/react";
+
+export default function FiefWrapper({ children }) {
+  return (
+    <FiefAuthProvider currentUserPath="/api/current-user">
+      {children}
+    </FiefAuthProvider>
+  );
+}

www/app/(auth)/userInfo.tsx

@@ -0,0 +1,43 @@
+"use client";
+import {
+  useFiefIsAuthenticated,
+  useFiefUserinfo,
+} from "@fief/fief/nextjs/react";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function UserInfo() {
+  const isAuthenticated = useFiefIsAuthenticated();
+  const userinfo = useFiefUserinfo();
+
+  return (
+    <header className="bg-black w-full border-b border-gray-700 flex justify-between items-center py-2 mb-3">
+      {/* Logo on the left */}
+      <Link href="/">
+        <Image
+          src="/reach.png"
+          width={16}
+          height={16}
+          className="h-6 w-auto ml-2"
+          alt="Reflector"
+        />
+      </Link>
+
+      {/* Text link on the right */}
+      {!isAuthenticated && (
+        <span className="text-white hover:underline font-thin px-2">
+          <Link href="/login">Log in or create account</Link>
+        </span>
+      )}
+      {isAuthenticated && (
+        <span className="text-white font-thin px-2">
+          {userinfo?.email} (
+          <span className="hover:underline">
+            <Link href="/logout">Log out</Link>
+          </span>
+          )
+        </span>
+      )}
+    </header>
+  );
+}

www/app/api/.openapi-generator/FILES

@@ -9,6 +9,7 @@ models/PageGetTranscript.ts
 models/RtcOffer.ts
 models/TranscriptTopic.ts
 models/UpdateTranscript.ts
+models/UserInfo.ts
 models/ValidationError.ts
 models/index.ts
 runtime.ts

www/app/api/apis/DefaultApi.ts

@@ -55,6 +55,10 @@ export interface V1TranscriptGetAudioRequest {
   transcriptId: any;
 }
 
+export interface V1TranscriptGetAudioMp3Request {
+  transcriptId: any;
+}
+
 export interface V1TranscriptGetTopicsRequest {
   transcriptId: any;
 }
@@ -159,6 +163,14 @@ export class DefaultApi extends runtime.BaseAPI {
 
     const headerParameters: runtime.HTTPHeaders = {};
 
+    if (this.configuration && this.configuration.accessToken) {
+      // oauth required
+      headerParameters["Authorization"] = await this.configuration.accessToken(
+        "OAuth2AuthorizationCodeBearer",
+        [],
+      );
+    }
+
     const response = await this.request(
       {
         path: `/v1/transcripts/{transcript_id}`.replace(
@@ -212,6 +224,14 @@ export class DefaultApi extends runtime.BaseAPI {
 
     const headerParameters: runtime.HTTPHeaders = {};
 
+    if (this.configuration && this.configuration.accessToken) {
+      // oauth required
+      headerParameters["Authorization"] = await this.configuration.accessToken(
+        "OAuth2AuthorizationCodeBearer",
+        [],
+      );
+    }
+
     const response = await this.request(
       {
         path: `/v1/transcripts/{transcript_id}`.replace(
@@ -299,6 +319,61 @@ export class DefaultApi extends runtime.BaseAPI {
     return await response.value();
   }
 
+  /**
+   * Transcript Get Audio Mp3
+   */
+  async v1TranscriptGetAudioMp3Raw(
+    requestParameters: V1TranscriptGetAudioMp3Request,
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<runtime.ApiResponse<any>> {
+    if (
+      requestParameters.transcriptId === null ||
+      requestParameters.transcriptId === undefined
+    ) {
+      throw new runtime.RequiredError(
+        "transcriptId",
+        "Required parameter requestParameters.transcriptId was null or undefined when calling v1TranscriptGetAudioMp3.",
+      );
+    }
+
+    const queryParameters: any = {};
+
+    const headerParameters: runtime.HTTPHeaders = {};
+
+    const response = await this.request(
+      {
+        path: `/v1/transcripts/{transcript_id}/audio/mp3`.replace(
+          `{${"transcript_id"}}`,
+          encodeURIComponent(String(requestParameters.transcriptId)),
+        ),
+        method: "GET",
+        headers: headerParameters,
+        query: queryParameters,
+      },
+      initOverrides,
+    );
+
+    if (this.isJsonMime(response.headers.get("content-type"))) {
+      return new runtime.JSONApiResponse<any>(response);
+    } else {
+      return new runtime.TextApiResponse(response) as any;
+    }
+  }
+
+  /**
+   * Transcript Get Audio Mp3
+   */
+  async v1TranscriptGetAudioMp3(
+    requestParameters: V1TranscriptGetAudioMp3Request,
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<any> {
+    const response = await this.v1TranscriptGetAudioMp3Raw(
+      requestParameters,
+      initOverrides,
+    );
+    return await response.value();
+  }
+
   /**
    * Transcript Get Topics
    */
@@ -510,6 +585,14 @@ export class DefaultApi extends runtime.BaseAPI {
 
     headerParameters["Content-Type"] = "application/json";
 
+    if (this.configuration && this.configuration.accessToken) {
+      // oauth required
+      headerParameters["Authorization"] = await this.configuration.accessToken(
+        "OAuth2AuthorizationCodeBearer",
+        [],
+      );
+    }
+
     const response = await this.request(
       {
         path: `/v1/transcripts/{transcript_id}`.replace(
@@ -566,6 +649,14 @@ export class DefaultApi extends runtime.BaseAPI {
 
     headerParameters["Content-Type"] = "application/json";
 
+    if (this.configuration && this.configuration.accessToken) {
+      // oauth required
+      headerParameters["Authorization"] = await this.configuration.accessToken(
+        "OAuth2AuthorizationCodeBearer",
+        [],
+      );
+    }
+
     const response = await this.request(
       {
         path: `/v1/transcripts`,
@@ -615,6 +706,14 @@ export class DefaultApi extends runtime.BaseAPI {
 
     const headerParameters: runtime.HTTPHeaders = {};
 
+    if (this.configuration && this.configuration.accessToken) {
+      // oauth required
+      headerParameters["Authorization"] = await this.configuration.accessToken(
+        "OAuth2AuthorizationCodeBearer",
+        [],
+      );
+    }
+
     const response = await this.request(
       {
         path: `/v1/transcripts`,
@@ -643,4 +742,49 @@ export class DefaultApi extends runtime.BaseAPI {
     );
     return await response.value();
   }
+
+  /**
+   * User Me
+   */
+  async v1UserMeRaw(
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<runtime.ApiResponse<any>> {
+    const queryParameters: any = {};
+
+    const headerParameters: runtime.HTTPHeaders = {};
+
+    if (this.configuration && this.configuration.accessToken) {
+      // oauth required
+      headerParameters["Authorization"] = await this.configuration.accessToken(
+        "OAuth2AuthorizationCodeBearer",
+        [],
+      );
+    }
+
+    const response = await this.request(
+      {
+        path: `/v1/me`,
+        method: "GET",
+        headers: headerParameters,
+        query: queryParameters,
+      },
+      initOverrides,
+    );
+
+    if (this.isJsonMime(response.headers.get("content-type"))) {
+      return new runtime.JSONApiResponse<any>(response);
+    } else {
+      return new runtime.TextApiResponse(response) as any;
+    }
+  }
+
+  /**
+   * User Me
+   */
+  async v1UserMe(
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<any> {
+    const response = await this.v1UserMeRaw(initOverrides);
+    return await response.value();
+  }
 }

www/app/api/models/UserInfo.ts

@@ -0,0 +1,84 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * FastAPI
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.1.0
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { exists, mapValues } from "../runtime";
+/**
+ *
+ * @export
+ * @interface UserInfo
+ */
+export interface UserInfo {
+  /**
+   *
+   * @type {any}
+   * @memberof UserInfo
+   */
+  sub: any | null;
+  /**
+   *
+   * @type {any}
+   * @memberof UserInfo
+   */
+  email: any | null;
+  /**
+   *
+   * @type {any}
+   * @memberof UserInfo
+   */
+  emailVerified: any | null;
+}
+
+/**
+ * Check if a given object implements the UserInfo interface.
+ */
+export function instanceOfUserInfo(value: object): boolean {
+  let isInstance = true;
+  isInstance = isInstance && "sub" in value;
+  isInstance = isInstance && "email" in value;
+  isInstance = isInstance && "emailVerified" in value;
+
+  return isInstance;
+}
+
+export function UserInfoFromJSON(json: any): UserInfo {
+  return UserInfoFromJSONTyped(json, false);
+}
+
+export function UserInfoFromJSONTyped(
+  json: any,
+  ignoreDiscriminator: boolean,
+): UserInfo {
+  if (json === undefined || json === null) {
+    return json;
+  }
+  return {
+    sub: json["sub"],
+    email: json["email"],
+    emailVerified: json["email_verified"],
+  };
+}
+
+export function UserInfoToJSON(value?: UserInfo | null): any {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (value === null) {
+    return null;
+  }
+  return {
+    sub: value.sub,
+    email: value.email,
+    email_verified: value.emailVerified,
+  };
+}

www/app/api/models/index.ts

@@ -8,4 +8,5 @@ export * from "./PageGetTranscript";
 export * from "./RtcOffer";
 export * from "./TranscriptTopic";
 export * from "./UpdateTranscript";
+export * from "./UserInfo";
 export * from "./ValidationError";

www/app/layout.tsx

@@ -1,11 +1,12 @@
 import "./styles/globals.scss";
 import { Roboto } from "next/font/google";
-
-import Head from "next/head";
+import { Metadata } from "next";
+import FiefWrapper from "./(auth)/fiefWrapper";
+import UserInfo from "./(auth)/userInfo";
 
 const roboto = Roboto({ subsets: ["latin"], weight: "400" });
 
-export const metadata = {
+export const metadata: Metadata = {
   title: {
     template: "%s – Reflector",
     default: "Reflector - AI-Powered Meeting Transcriptions by Monadical",
@@ -52,11 +53,22 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <Head>
-        <title>Test</title>
-      </Head>
       <body className={roboto.className + " flex flex-col min-h-screen"}>
-        {children}
+        <FiefWrapper>
+          <div id="container">
+            <div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]">
+              <UserInfo />
+
+              <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>
+              {children}
+            </div>
+          </div>
+        </FiefWrapper>
       </body>
     </html>
   );

www/app/lib/CustomRecordPlugin.js

@@ -0,0 +1,129 @@
+// Override the startRecording method so we can pass the desired stream
+// Checkout: https://github.com/katspaugh/wavesurfer.js/blob/fa2bcfe/src/plugins/record.ts
+
+import RecordPlugin from "wavesurfer.js/dist/plugins/record";
+
+const MIME_TYPES = [
+  "audio/webm",
+  "audio/wav",
+  "audio/mpeg",
+  "audio/mp4",
+  "audio/mp3",
+];
+const findSupportedMimeType = () =>
+  MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType));
+
+class CustomRecordPlugin extends RecordPlugin {
+  static create(options) {
+    return new CustomRecordPlugin(options || {});
+  }
+  render(stream) {
+    if (!this.wavesurfer) return () => undefined;
+
+    const container = this.wavesurfer.getWrapper();
+    const canvas = document.createElement("canvas");
+    canvas.width = container.clientWidth;
+    canvas.height = container.clientHeight;
+    canvas.style.zIndex = "10";
+    container.appendChild(canvas);
+
+    const canvasCtx = canvas.getContext("2d");
+    const audioContext = new AudioContext();
+    const source = audioContext.createMediaStreamSource(stream);
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 2 ** 5;
+    source.connect(analyser);
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+
+    let animationId, previousTimeStamp;
+    const DATA_SIZE = 128.0;
+    const BUFFER_SIZE = 2 ** 8;
+    const dataBuffer = new Array(BUFFER_SIZE).fill(DATA_SIZE);
+
+    const drawWaveform = (timeStamp) => {
+      if (!canvasCtx) return;
+
+      analyser.getByteTimeDomainData(dataArray);
+      canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+      canvasCtx.fillStyle = "#cc3347";
+
+      if (previousTimeStamp === undefined) {
+        previousTimeStamp = timeStamp;
+        dataBuffer.push(Math.min(...dataArray));
+        dataBuffer.splice(0, 1);
+      }
+      const elapsed = timeStamp - previousTimeStamp;
+      if (elapsed > 10) {
+        previousTimeStamp = timeStamp;
+        dataBuffer.push(Math.min(...dataArray));
+        dataBuffer.splice(0, 1);
+      }
+
+      // Drawing
+      const sliceWidth = canvas.width / dataBuffer.length;
+      let x = 0;
+
+      for (let i = 0; i < dataBuffer.length; i++) {
+        const y = (canvas.height * dataBuffer[i]) / (2 * DATA_SIZE);
+        const sliceHeight =
+          ((1 - canvas.height) * dataBuffer[i]) / DATA_SIZE + canvas.height;
+
+        canvasCtx.fillRect(x, y, (sliceWidth * 2) / 3, sliceHeight);
+        x += sliceWidth;
+      }
+
+      animationId = requestAnimationFrame(drawWaveform);
+    };
+
+    drawWaveform();
+
+    return () => {
+      if (animationId) {
+        cancelAnimationFrame(animationId);
+      }
+
+      if (source) {
+        source.disconnect();
+        source.mediaStream.getTracks().forEach((track) => track.stop());
+      }
+
+      if (audioContext) {
+        audioContext.close();
+      }
+
+      canvas?.remove();
+    };
+  }
+  startRecording(stream) {
+    this.preventInteraction();
+    this.cleanUp();
+
+    const onStop = this.render(stream);
+    const mediaRecorder = new MediaRecorder(stream, {
+      mimeType: this.options.mimeType || findSupportedMimeType(),
+      audioBitsPerSecond: this.options.audioBitsPerSecond,
+    });
+    const recordedChunks = [];
+
+    mediaRecorder.addEventListener("dataavailable", (event) => {
+      if (event.data.size > 0) {
+        recordedChunks.push(event.data);
+      }
+    });
+
+    mediaRecorder.addEventListener("stop", () => {
+      onStop();
+      this.loadBlob(recordedChunks, mediaRecorder.mimeType);
+      this.emit("stopRecording");
+    });
+
+    mediaRecorder.start();
+
+    this.emit("startRecording");
+
+    this.mediaRecorder = mediaRecorder;
+  }
+}
+
+export default CustomRecordPlugin;

www/app/lib/custom-plugins/record.js

@@ -0,0 +1,129 @@
+// Override the startRecording method so we can pass the desired stream
+// Checkout: https://github.com/katspaugh/wavesurfer.js/blob/fa2bcfe/src/plugins/record.ts
+
+import RecordPlugin from "wavesurfer.js/dist/plugins/record";
+
+const MIME_TYPES = [
+  "audio/webm",
+  "audio/wav",
+  "audio/mpeg",
+  "audio/mp4",
+  "audio/mp3",
+];
+const findSupportedMimeType = () =>
+  MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType));
+
+class CustomRecordPlugin extends RecordPlugin {
+  static create(options) {
+    return new CustomRecordPlugin(options || {});
+  }
+  render(stream) {
+    if (!this.wavesurfer) return () => undefined;
+
+    const container = this.wavesurfer.getWrapper();
+    const canvas = document.createElement("canvas");
+    canvas.width = container.clientWidth;
+    canvas.height = container.clientHeight;
+    canvas.style.zIndex = "10";
+    container.appendChild(canvas);
+
+    const canvasCtx = canvas.getContext("2d");
+    const audioContext = new AudioContext();
+    const source = audioContext.createMediaStreamSource(stream);
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 2 ** 5;
+    source.connect(analyser);
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+
+    let animationId, previousTimeStamp;
+    const DATA_SIZE = 128.0;
+    const BUFFER_SIZE = 2 ** 8;
+    const dataBuffer = new Array(BUFFER_SIZE).fill(DATA_SIZE);
+
+    const drawWaveform = (timeStamp) => {
+      if (!canvasCtx) return;
+
+      analyser.getByteTimeDomainData(dataArray);
+      canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+      canvasCtx.fillStyle = "#cc3347";
+
+      if (previousTimeStamp === undefined) {
+        previousTimeStamp = timeStamp;
+        dataBuffer.push(Math.min(...dataArray));
+        dataBuffer.splice(0, 1);
+      }
+      const elapsed = timeStamp - previousTimeStamp;
+      if (elapsed > 10) {
+        previousTimeStamp = timeStamp;
+        dataBuffer.push(Math.min(...dataArray));
+        dataBuffer.splice(0, 1);
+      }
+
+      // Drawing
+      const sliceWidth = canvas.width / dataBuffer.length;
+      let x = 0;
+
+      for (let i = 0; i < dataBuffer.length; i++) {
+        const y = (canvas.height * dataBuffer[i]) / (2 * DATA_SIZE);
+        const sliceHeight =
+          ((1 - canvas.height) * dataBuffer[i]) / DATA_SIZE + canvas.height;
+
+        canvasCtx.fillRect(x, y, (sliceWidth * 2) / 3, sliceHeight);
+        x += sliceWidth;
+      }
+
+      animationId = requestAnimationFrame(drawWaveform);
+    };
+
+    drawWaveform();
+
+    return () => {
+      if (animationId) {
+        cancelAnimationFrame(animationId);
+      }
+
+      if (source) {
+        source.disconnect();
+        source.mediaStream.getTracks().forEach((track) => track.stop());
+      }
+
+      if (audioContext) {
+        audioContext.close();
+      }
+
+      canvas?.remove();
+    };
+  }
+  startRecording(stream) {
+    this.preventInteraction();
+    this.cleanUp();
+
+    const onStop = this.render(stream);
+    const mediaRecorder = new MediaRecorder(stream, {
+      mimeType: this.options.mimeType || findSupportedMimeType(),
+      audioBitsPerSecond: this.options.audioBitsPerSecond,
+    });
+    const recordedChunks = [];
+
+    mediaRecorder.addEventListener("dataavailable", (event) => {
+      if (event.data.size > 0) {
+        recordedChunks.push(event.data);
+      }
+    });
+
+    mediaRecorder.addEventListener("stop", () => {
+      onStop();
+      this.loadBlob(recordedChunks, mediaRecorder.mimeType);
+      this.emit("stopRecording");
+    });
+
+    mediaRecorder.start();
+
+    this.emit("startRecording");
+
+    this.mediaRecorder = mediaRecorder;
+  }
+}
+
+export default CustomRecordPlugin;

www/app/lib/custom-plugins/regions.js

@@ -0,0 +1,12 @@
+import RegionsPlugin from "wavesurfer.js/dist/plugins/regions";
+
+class CustomRegionsPlugin extends RegionsPlugin {
+  static create(options) {
+    return new CustomRegionsPlugin(options);
+  }
+  avoidOverlapping(region) {
+    // Prevent overlapping regions
+  }
+}
+
+export default CustomRegionsPlugin;

www/app/lib/fief.ts

@@ -0,0 +1,50 @@
+"use client";
+import { Fief, FiefUserInfo } from "@fief/fief";
+import { FiefAuth, IUserInfoCache } from "@fief/fief/nextjs";
+
+export const SESSION_COOKIE_NAME = "reflector-auth";
+
+export const fiefClient = new Fief({
+  baseURL: process.env.FIEF_URL ?? "",
+  clientId: process.env.FIEF_CLIENT_ID ?? "",
+  clientSecret: process.env.FIEF_CLIENT_SECRET ?? "",
+});
+
+class MemoryUserInfoCache implements IUserInfoCache {
+  private storage: Record<string, any>;
+
+  constructor() {
+    this.storage = {};
+  }
+
+  async get(id: string): Promise<FiefUserInfo | null> {
+    const userinfo = this.storage[id];
+    if (userinfo) {
+      return userinfo;
+    }
+    return null;
+  }
+
+  async set(id: string, userinfo: FiefUserInfo): Promise<void> {
+    this.storage[id] = userinfo;
+  }
+
+  async remove(id: string): Promise<void> {
+    this.storage[id] = undefined;
+  }
+
+  async clear(): Promise<void> {
+    this.storage = {};
+  }
+}
+
+export const fiefAuth = new FiefAuth({
+  client: fiefClient,
+  sessionCookieName: SESSION_COOKIE_NAME,
+  redirectURI:
+    process.env.NEXT_PUBLIC_AUTH_CALLBACK_URL ||
+    "http://localhost:3000/auth-callback",
+  logoutRedirectURI:
+    process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000",
+  userInfoCache: new MemoryUserInfoCache(),
+});

www/app/lib/getApi.ts

@@ -0,0 +1,18 @@
+import { Configuration } from "../api/runtime";
+import { DefaultApi } from "../api/apis/DefaultApi";
+
+import { useFiefAccessTokenInfo } from "@fief/fief/nextjs/react";
+
+export default function getApi(): DefaultApi {
+  const accessTokenInfo = useFiefAccessTokenInfo();
+
+  const apiConfiguration = new Configuration({
+    basePath: process.env.NEXT_PUBLIC_API_URL,
+    accessToken: accessTokenInfo
+      ? "Bearer " + accessTokenInfo.access_token
+      : undefined,
+  });
+  const api = new DefaultApi(apiConfiguration);
+
+  return api;
+}

www/app/lib/random.ts

@@ -1,15 +1,15 @@
-export function getRandomNumber(min, max) {
+export function getRandomNumber(min: number, max: number): number {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-export function SeededRand(seed) {
+export function SeededRand(seed: number): number {
   seed ^= seed << 13;
   seed ^= seed >> 17;
   seed ^= seed << 5;
   return seed / 2 ** 32;
 }
 
-export function Mulberry32(seed) {
+export function Mulberry32(seed: number) {
   return function () {
     var t = (seed += 0x6d2b79f5);
     t = Math.imul(t ^ (t >>> 15), t | 1);

www/app/lib/time.ts

@@ -1,4 +1,4 @@
-export const formatTime = (seconds) => {
+export const formatTime = (seconds: number): string => {
   let hours = Math.floor(seconds / 3600);
   let minutes = Math.floor((seconds % 3600) / 60);
   let secs = Math.floor(seconds % 60);

www/app/lib/user.ts

@@ -0,0 +1,21 @@
+export async function getCurrentUser(): Promise<any> {
+  try {
+    const response = await fetch("/api/current-user");
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    // Ensure the data structure is as expected
+    if (data.userinfo && data.access_token_info) {
+      return data;
+    } else {
+      throw new Error("Unexpected data structure");
+    }
+  } catch (error) {
+    console.error("Error fetching the user data:", error);
+    throw error; // or you can return an appropriate fallback or error indicator
+  }
+}

www/app/page.tsx

@@ -1,4 +1,4 @@
 import { redirect } from "next/navigation";
-export default async function Index({ params }) {
+export default async function Index() {
   redirect("/transcripts/new");
 }

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;
+};