Sync with main

package.json

@@ -21,15 +21,15 @@
     "url": "git+https://github.com/brave/brave-talk.git"
   },
   "overrides": {
-    "yaml": "2.4.2",
-    "semver": "7.6.2",
+    "yaml": "2.4.5",
+    "semver": "7.6.3",
     "optionator": "0.9.4"
   },
   "homepage": "https://github.com/brave/brave-talk#readme",
   "devDependencies": {
     "@brave-intl/skus-sdk": "0.1.3",
     "@types/jest": "29.5.12",
-    "@types/react": "18.3.2",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
@@ -38,35 +38,36 @@
     "css-minimizer-webpack-plugin": "6.0.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "html-webpack-plugin": "5.6.0",
-    "husky": "9.0.11",
+    "husky": "9.1.1",
     "jest": "29.7.0",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.7",
     "mini-css-extract-plugin": "2.9.0",
     "node-forge": "1.3.1",
-    "npm-run-all2": "6.1.2",
-    "prettier": "3.2.5",
+    "npm-run-all2": "6.2.2",
+    "prettier": "3.3.3",
     "style-loader": "3.3.4",
     "svgo-loader": "4.0.0",
-    "ts-jest": "29.1.2",
+    "ts-jest": "29.2.3",
     "ts-loader": "9.5.1",
-    "typescript": "5.4.5",
-    "webpack": "5.91.0",
+    "typescript": "5.5.3",
+    "webpack": "5.93.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.2"
   },
   "dependencies": {
-    "@emotion/react": "11.11.4",
+    "@brave/leo": "github:brave/leo#f773fced49436f62e431dea4b17a285b537dd7a0",
+    "@emotion/react": "11.13.0",
     "@types/dom-screen-wake-lock": "1.0.3",
     "buffer": "6.0.3",
-    "ethers": "6.12.1",
-    "i18next": "23.11.4",
+    "ethers": "6.13.1",
+    "i18next": "23.12.2",
     "jest-environment-jsdom": "29.7.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-i18next": "14.1.1"
+    "react-i18next": "14.1.3"
   },
   "lint-staged": {
     "*": "prettier --ignore-unknown --write",

src/App.tsx

@@ -54,19 +54,19 @@ export const App = () => {
     window.close();
   }
 
-  const initialiseRouteTranscript = () => {
+  const initRouteTranscriptId = () => {
     const match = window.location.pathname.match(
       /^\/transcript-([a-z0-9]{50})$/,
     );
     if (match) {
       return match[1];
     }
   };
-  const [routeTranscript, setRouteTranscript] = React.useState<
+  const [routeTranscriptId, setRouteTranscriptId] = React.useState<
     string | undefined
-  >(initialiseRouteTranscript);
+  >(initRouteTranscriptId);
   const onRouterStatePushed = () => {
-    setRouteTranscript(initialiseRouteTranscript());
+    setRouteTranscriptId(initRouteTranscriptId());
   };
   useEffect(() => {
     const onPopstate = onRouterStatePushed;
@@ -80,7 +80,7 @@ export const App = () => {
     <React.Fragment>
       <GlobalStyles />
       <div css={styles.container}>
-        {!routeTranscript && isCallReady && (
+        {!routeTranscriptId && isCallReady && (
           <InCall
             roomName={roomName ?? ""}
             jwt={jwt ?? ""}
@@ -116,7 +116,7 @@ export const App = () => {
               jitsiContext={jitsiContext}
               setJitsiContext={setJitsiContext}
               onRouterStatePushed={onRouterStatePushed}
-              displayTranscriptId={routeTranscript}
+              displayTranscriptId={routeTranscriptId}
             />
           ))}
       </div>

src/components/InCall.tsx

@@ -2,9 +2,14 @@ import { useEffect, useRef, useState } from "react";
 import { css } from "@emotion/react";
 import { IJitsiMeetApi, JitsiContext } from "../jitsi/types";
 import { renderConferencePage } from "../jitsi/conference-page";
-import { jitsiOptions } from "../jitsi/options";
+import {
+  jitsiOptions,
+  leoButtonTranscriptionOff,
+  leoButtonTranscriptionOn,
+} from "../jitsi/options";
 import {
   breakoutRoomsUpdatedHandler,
+  buttonHandler,
   dataChannelOpenedHandler,
   displayNameChangeHandler,
   endpointTextMessageReceivedHandler,
@@ -55,6 +60,40 @@ export const InCall = ({
 
   useEffect(() => {
     if (!jitsiMeet && divRef.current && isCallReady) {
+      transcriptManager.current.roomName = roomName;
+      transcriptManager.current.jwt = jwt;
+
+      resetCurrentRecordingState(roomName);
+
+      const options = jitsiOptions(roomName, divRef.current, jwt, isMobile);
+
+      const resetLeoButton = !options.configOverwrite.customToolbarButtons.find(
+        (button) => button.id === "leo",
+      )
+        ? () => {}
+        : (jitsi: IJitsiMeetApi, transcriptionIsOn: boolean) => {
+            const buttons = options.configOverwrite.customToolbarButtons;
+            if (buttons.find((button) => button.id === "leo")) {
+              // remove button
+              jitsi.executeCommand("overwriteConfig", {
+                customToolbarButtons: buttons.filter(
+                  (button) => button.id !== "leo",
+                ),
+              });
+              // re-add button with new text and icon
+              jitsi.executeCommand("overwriteConfig", {
+                customToolbarButtons: buttons.map((button) => {
+                  if (button.id === "leo") {
+                    return transcriptionIsOn
+                      ? leoButtonTranscriptionOn
+                      : leoButtonTranscriptionOff;
+                  }
+                  return button;
+                }),
+              });
+            }
+          };
+
       const jitsiEventHandlers = [
         subjectChangeHandler(transcriptManager.current),
         videoQualityChangeHandler,
@@ -76,16 +115,13 @@ export const InCall = ({
         endpointTextMessageReceivedHandler,
         videoConferenceJoinedHandler(transcriptManager.current),
         transcriptionChunkReceivedHandler(transcriptManager.current),
-        transcribingStatusChangedHandler(transcriptManager.current),
+        transcribingStatusChangedHandler(
+          transcriptManager.current,
+          resetLeoButton,
+        ),
+        buttonHandler(transcriptManager.current),
       ];
 
-      transcriptManager.current.roomName = roomName;
-      transcriptManager.current.jwt = jwt;
-
-      resetCurrentRecordingState(roomName);
-
-      const options = jitsiOptions(roomName, divRef.current, jwt, isMobile);
-
       renderConferencePage(jitsiEventHandlers, options, context).then(
         setJitsiMeet,
       );

src/components/Recordings.tsx

@@ -8,6 +8,7 @@ import TranscriptImage from "../images/transcript.svg";
 import { Section } from "./Section";
 import { Text } from "./Text";
 import { MouseEventHandler } from "react";
+import { getTranscriptDisplayPath } from "../transcripts";
 
 interface Props {
   onRouterStatePushed: () => void;
@@ -24,11 +25,7 @@ const RecordingDisplay = ({
   const recordingDate = new Date(r.createdAt * 1000);
 
   const getTranscriptOnClick = (transcriptUrl: string, startDateTime: Date) => {
-    const match = transcriptUrl.match(/\/([a-z0-9]{50})\/?$/);
-    if (!match) {
-      return;
-    }
-    const transcriptId: string = match[1];
+    const transcriptPath = getTranscriptDisplayPath(transcriptUrl);
     const handler: MouseEventHandler<HTMLAnchorElement> = (e) => {
       // hopefully sufficient magical incantations to prevent the popup
       e.preventDefault();
@@ -37,7 +34,7 @@ const RecordingDisplay = ({
       window.history.pushState(
         { startDateTime: startDateTime.getTime() },
         "",
-        `/transcript-${transcriptId}`,
+        transcriptPath,
       );
       onRouterStatePushed();
       return false;