manual record button

Author: 0thernet

next/components/assembly-view.tsx

@@ -11,6 +11,7 @@ import { FragmentComponent, type Fragment } from "./fragment";
 import { useAssembly } from "./assembly-context";
 import { AudioProcessor } from "@/lib/audio-processor";
 import { RecordYouButton } from "./record-you-button";
+import { transcribeAudio } from "@/lib/assembly-ai";
 
 const AssemblyView: () => JSX.Element = () => {
   const [inputText, setInputText] = useState("");
@@ -39,6 +40,9 @@ const AssemblyView: () => JSX.Element = () => {
     sendAudio,
     isIdleError,
   } = useAssembly();
+  const [isUserRecording, setIsUserRecording] = useState(false);
+  const userRecorderRef = useRef<MediaRecorder | null>(null);
+  const userChunksRef = useRef<Blob[]>([]);
 
   const scrollToBottom = () => {
     if (!scrollContainerRef.current) return;
@@ -264,6 +268,51 @@ const AssemblyView: () => JSX.Element = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (!microphone?.stream) return;
+
+    if (isUserRecording) {
+      // pause live transcription
+      setIsPaused(true);
+
+      userRecorderRef.current = new MediaRecorder(microphone.stream);
+      userChunksRef.current = [];
+      userRecorderRef.current.ondataavailable = (e) => {
+        if (e.data.size) userChunksRef.current.push(e.data);
+      };
+      userRecorderRef.current.onstop = async () => {
+        const finalBlob = new Blob(userChunksRef.current, {
+          type: "audio/webm",
+        });
+        try {
+          // transcribe the user's new recording
+          const result = await transcribeAudio(finalBlob);
+          setFragments((prev) => [
+            ...prev,
+            {
+              id: crypto.randomUUID(),
+              text: result.text,
+              type: "speech",
+              createdAt: Date.now(),
+            },
+          ]);
+        } catch (err) {
+          console.debug("[AssemblyView] user-recording transcribe error");
+        }
+      };
+
+      userRecorderRef.current.start();
+    } else {
+      // resume live transcription
+      setIsPaused(false);
+
+      if (userRecorderRef.current?.state === "recording") {
+        userRecorderRef.current.stop();
+      }
+      userRecorderRef.current = null;
+    }
+  }, [isUserRecording, microphone?.stream]);
+
   const handleSubmit = () => {
     if (!inputText.trim()) return;
     setFragments((prev) => [
@@ -326,7 +375,10 @@ const AssemblyView: () => JSX.Element = () => {
         <div className="flex-none px-4 pt-2 pb-4 border-t">
           <div className="max-w-2xl mx-auto">
             <div className="pb-2 flex gap-4 justify-between items-center">
-              <RecordYouButton language={describeLanguage(outputLanguage)} />
+              <RecordYouButton
+                language={describeLanguage(outputLanguage)}
+                onToggle={setIsUserRecording}
+              />
               <CloningView
                 speechState={managerRef.current}
                 audioBlob={audioBlob}

next/components/record-you-button.tsx

@@ -9,12 +9,13 @@ interface RecordYouButtonProps {
   language?: string;
 }
 
-export function RecordYouButton({ language }: RecordYouButtonProps) {
+export function RecordYouButton({ language, onToggle }: RecordYouButtonProps) {
   const [isRecording, setIsRecording] = useState(false);
 
   const handleClick = () => {
     const newState = !isRecording;
     setIsRecording(newState);
+    onToggle?.(newState);
   };
 
   return (