adds three-letter language picker

www/app/transcripts/[transcriptId]/record/page.tsx

@@ -41,14 +41,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
   const webRTC = useWebRTC(stream, details.params.transcriptId, api);
   const webSockets = useWebSockets(details.params.transcriptId);
 
-  const {
-    loading,
-    permissionOk,
-    permissionDenied,
-    audioDevices,
-    requestPermission,
-    getAudioStream,
-  } = useAudioDevice();
+  const { audioDevices, getAudioStream } = useAudioDevice();
 
   const [hasRecorded, setHasRecorded] = useState(false);
   const [transcriptStarted, setTranscriptStarted] = useState(false);
@@ -115,7 +108,10 @@ const TranscriptRecord = (details: TranscriptDetails) => {
                       you start recording.
                     </div>
                   ) : (
-                    <LiveTrancription text={webSockets.transcriptText} />
+                    <LiveTrancription
+                      text={webSockets.transcriptText}
+                      translateText={webSockets.translateText}
+                    />
                   )}
                 </div>
               </div>

www/app/transcripts/createTranscript.ts

@@ -25,7 +25,7 @@ const useCreateTranscript = (): CreateTranscript => {
     const requestParameters: V1TranscriptsCreateRequest = {
       createTranscript: {
         name: params.name || "Weekly All-Hands", // Default
-        targetLanguage: params.targetLanguage || "en", // Default
+        targetLanguage: params.targetLanguage || "eng", // Default
       },
     };
 

www/app/transcripts/liveTranscription.tsx

@@ -1,14 +1,19 @@
 type LiveTranscriptionProps = {
   text: string;
+  translateText: string;
 };
 
 export default function LiveTrancription(props: LiveTranscriptionProps) {
   return (
     <div className="text-center p-4">
       <p className="text-lg md:text-xl font-bold line-clamp-4">
-        {/* Nous allons prendre quelques appels téléphoniques et répondre à quelques questions */}
-        {props.text}
+        {props.translateText ? props.translateText : props.text}
       </p>
+      {props.translateText && (
+        <p className="text-base md:textlg font-bold line-clamp-4">
+          {props.text}
+        </p>
+      )}
     </div>
   );
 }

www/app/transcripts/new/page.tsx

@@ -1,20 +1,15 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import useWebRTC from "../useWebRTC";
-import useTranscript from "../useTranscript";
-import { useWebSockets } from "../useWebSockets";
 import useAudioDevice from "../useAudioDevice";
 import "../../styles/button.css";
-import { Topic } from "../webSocketTypes";
 import getApi from "../../lib/getApi";
 import About from "../../(aboutAndPrivacy)/about";
 import Privacy from "../../(aboutAndPrivacy)/privacy";
-import { lockWakeState, releaseWakeState } from "../../lib/wakeLock";
 import { useRouter } from "next/navigation";
-import createTranscript from "../createTranscript";
-import { GetTranscript } from "../../api";
-import { Router } from "next/router";
 import useCreateTranscript from "../createTranscript";
+import SelectSearch from "react-select-search";
+import { supportedLatinLanguages } from "../../supportedLanguages";
+import "react-select-search/style.css";
 
 const TranscriptCreate = () => {
   // const transcript = useTranscript(stream, api);
@@ -27,6 +22,10 @@ const TranscriptCreate = () => {
   };
   const [targetLanguage, setTargetLanguage] = useState<string>();
 
+  const onLanguageChange = (newval) => {
+    typeof newval === "string" && setTargetLanguage(newval);
+  };
+
   const createTranscript = useCreateTranscript();
 
   const send = () => {
@@ -38,70 +37,75 @@ const TranscriptCreate = () => {
       router.push(`/transcripts/${createTranscript.response.id}/record`);
   }, [createTranscript.response]);
 
-  const {
-    loading,
-    permissionOk,
-    permissionDenied,
-    audioDevices,
-    requestPermission,
-    getAudioStream,
-  } = useAudioDevice();
+  const { loading, permissionOk, permissionDenied, requestPermission } =
+    useAudioDevice();
 
   return (
     <>
       <div></div>
-      <div className="max-h-full overflow-auto">
+      <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-mobile-inner lg:grid-rows-1 gap-2 lg:gap-4 h-full">
         <section className="flex flex-col w-full h-full items-center justify-evenly p-4 md:px-6 md:py-8">
-          <div>
-            <div className="flex flex-col max-w-xl items-center justify-center">
-              <h1 className="text-2xl font-bold mb-2">
-                Welcome to reflector.media
-              </h1>
-              <p>
-                Reflector is a transcription and summarization pipeline that
-                transforms audio into knowledge. The output is meeting minutes
-                and topic summaries enabling topic-specific analyses stored in
-                your systems of record. This is accomplished on your
-                infrastructure – without 3rd parties – keeping your data
-                private, secure, and organized.
-              </p>
-              <About buttonText="Learn more" />
-              <input type="text" onChange={nameChange} />
-              <button onClick={() => setTargetLanguage("fr")}>Language</button>
-              <h2 className="text-2xl font-bold mt-4 mb-2">
-                Audio Permissions
-              </h2>
-              {loading ? (
-                <p className="text-center">Checking permission...</p>
-              ) : permissionOk ? (
-                <> Microphone permission granted </>
-              ) : (
-                <>
-                  <p className="text-center">
-                    In order to use Reflector, we kindly request permission to
-                    access your microphone during meetings and events.
-                    <br />
-                    <Privacy buttonText="Privacy policy" />
-                    <br />
-                    {permissionDenied
-                      ? "Permission to use your microphone was denied, please change the permission setting in your browser and refresh this page."
-                      : "Please grant permission to continue."}
-                  </p>
-                  <button
-                    className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded m-auto"
-                    onClick={requestPermission}
-                    disabled={permissionDenied}
-                  >
-                    {permissionDenied ? "Access denied" : "Grant Permission"}
-                  </button>
-                </>
-              )}
-            </div>
-            <button onClick={send} disabled={!permissionOk}>
-              {createTranscript.loading ? "loading" : "Send"}
-            </button>
+          <div className="flex flex-col max-w-xl items-center justify-center">
+            <h1 className="text-2xl font-bold mb-2">
+              Welcome to reflector.media
+            </h1>
+            <p>
+              Reflector is a transcription and summarization pipeline that
+              transforms audio into knowledge. The output is meeting minutes and
+              topic summaries enabling topic-specific analyses stored in your
+              systems of record. This is accomplished on your infrastructure –
+              without 3rd parties – keeping your data private, secure, and
+              organized.
+            </p>
+            <About buttonText="Learn more" />
           </div>
         </section>
+        <section className="rounded-xl md:bg-blue-200 flex flex-col justify-start p-6">
+          <h2 className="text-2xl font-bold mt-4 mb-2"> Try Reflector</h2>
+          <label className="mb-3">
+            <p>What is this meeting about ?</p>
+            <input type="text" onChange={nameChange} />
+          </label>
+
+          <label className="mb-3">
+            <p>Do you need live translation ?</p>
+            <SelectSearch
+              search
+              options={supportedLatinLanguages}
+              value={targetLanguage}
+              onChange={onLanguageChange}
+              placeholder="Choose your language"
+            />
+          </label>
+
+          {loading ? (
+            <p className="">Checking permission...</p>
+          ) : permissionOk ? (
+            <> Microphone permission granted </>
+          ) : (
+            <>
+              <p className="">
+                In order to use Reflector, we kindly request permission to
+                access your microphone during meetings and events.
+                <br />
+                <Privacy buttonText="Privacy policy" />
+                <br />
+                {permissionDenied &&
+                  "Permission to use your microphone was denied, please change the permission setting in your browser and refresh this page."}
+              </p>
+              <button
+                className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded m-auto"
+                onClick={requestPermission}
+                disabled={permissionDenied}
+              >
+                {permissionDenied ? "Access denied" : "Grant Permission"}
+              </button>
+            </>
+          )}
+          <button onClick={send} disabled={!permissionOk}>
+            {createTranscript.loading ? "loading" : "Send"}
+          </button>
+        </section>
       </div>
     </>
   );

www/app/transcripts/useWebSockets.ts

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 
 type UseWebSockets = {
   transcriptText: string;
+  translateText: string;
   topics: Topic[];
   finalSummary: FinalSummary;
   status: Status;
@@ -12,7 +13,9 @@ type UseWebSockets = {
 
 export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
   const [transcriptText, setTranscriptText] = useState<string>("");
+  const [translateText, setTranslateText] = useState<string>("");
   const [textQueue, setTextQueue] = useState<string[]>([]);
+  const [translationQueue, setTranslationQueue] = useState<string[]>([]);
   const [isProcessing, setIsProcessing] = useState(false);
   const [topics, setTopics] = useState<Topic[]>([]);
   const [finalSummary, setFinalSummary] = useState<FinalSummary>({
@@ -30,6 +33,8 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
     setIsProcessing(true);
     const text = textQueue[0];
     setTranscriptText(text);
+    setTranslateText(translationQueue[0]);
+    console.log("displaying " + translateText);
 
     const WPM_READING = 200 + textQueue.length * 10; // words per minute to read
     const wordCount = text.split(/\s+/).length;
@@ -38,6 +43,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
     setTimeout(() => {
       setIsProcessing(false);
       setTextQueue((prevQueue) => prevQueue.slice(1));
+      setTranslationQueue((prevQueue) => prevQueue.slice(1));
     }, delay);
   }, [textQueue, isProcessing]);
 
@@ -158,11 +164,13 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
         switch (message.event) {
           case "TRANSCRIPT":
             const newText = (message.data.text ?? "").trim();
+            const newTranslation = (message.data.translation ?? "").trim();
 
             if (!newText) break;
 
             console.debug("TRANSCRIPT event:", newText);
             setTextQueue((prevQueue) => [...prevQueue, newText]);
+            setTranslationQueue((prevQueue) => [...prevQueue, newTranslation]);
             break;
 
           case "TOPIC":
@@ -233,5 +241,5 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
     };
   }, [transcriptId]);
 
-  return { transcriptText, topics, finalSummary, status };
+  return { transcriptText, translateText, topics, finalSummary, status };
 };