better input state

Author: 0thernet

next/components/assembly-view.tsx

@@ -64,6 +64,7 @@ const AssemblyView: () => JSX.Element = () => {
 
     const setupAudioProcessor = async () => {
       try {
+        managerRef.current.isInitialized = false;
         const processor = await AudioProcessor.getInstance(microphone.stream);
         await processor.setupProcessor((blob: Blob) => {
           if (isConnected) {
@@ -77,6 +78,8 @@ const AssemblyView: () => JSX.Element = () => {
             processor.stop();
           },
         } as MediaRecorder; // Type assertion since we only use stop()
+
+        managerRef.current.isInitialized = true;
       } catch (error) {
         console.error("[AssemblyView] Failed to setup audio processor:", error);
       }
@@ -89,6 +92,7 @@ const AssemblyView: () => JSX.Element = () => {
         mainRecorder.current.stop();
         mainRecorder.current = null;
       }
+      managerRef.current.isInitialized = false;
     };
   }, [microphone?.stream, isPaused, isConnected, sendAudio]);
 

next/components/speech-input.tsx

@@ -2,7 +2,14 @@
 
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
-import { Mic, Keyboard, ArrowUp, PauseIcon, PlayIcon } from "lucide-react";
+import {
+  Mic,
+  MicOff,
+  Keyboard,
+  ArrowUp,
+  PauseIcon,
+  PlayIcon,
+} from "lucide-react";
 import Visualizer from "@/components/audio-viz";
 import { SpeechStateManager } from "@/lib/speech-state";
 import { useEffect, useState, useRef } from "react";
@@ -26,14 +33,18 @@ export const SpeechInput = ({
   onTogglePause,
   isPaused,
 }: SpeechInputProps) => {
-  const [activeInput, setActiveInput] = useState<"record" | "text" | null>(null);
-  const [expandedInput, setExpandedInput] = useState<"record" | "text" | null>(null);
+  const [activeInput, setActiveInput] = useState<"record" | "text" | null>(
+    null
+  );
+  const [expandedInput, setExpandedInput] = useState<"record" | "text" | null>(
+    null
+  );
   const [isSpeechActive, setIsSpeechActive] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     if (!speechState) return;
-    
+
     const intervalId = setInterval(() => {
       setIsSpeechActive(speechState.isActive);
     }, 250);
@@ -44,7 +55,7 @@ export const SpeechInput = ({
     // Add click outside listener
     const handleClickOutside = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
-      if (!target.closest('.input-container')) {
+      if (!target.closest(".input-container")) {
         setExpandedInput(null);
       }
     };
@@ -56,11 +67,11 @@ export const SpeechInput = ({
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('keydown', handleEscape);
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleEscape);
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
     };
   }, []);
 
@@ -79,46 +90,74 @@ export const SpeechInput = ({
     <div className="flex items-center space-x-2 input-container">
       <div
         onClick={() => {
+          if (!speechState?.isInitialized) return;
           setActiveInput("record");
           setExpandedInput("record");
         }}
         className={`transition-all duration-300 ${
-          expandedInput === null ? "flex-1 h-12" :
-          expandedInput === "record" ? "flex-1 h-12" : "w-12 h-12"
-        }`}
+          expandedInput === null
+            ? "flex-1 h-12"
+            : expandedInput === "record"
+              ? "flex-1 h-12"
+              : "w-12 h-12"
+        } ${!speechState?.isInitialized ? "pointer-events-none opacity-75" : "cursor-pointer hover:opacity-80"}`}
       >
-        <div 
-          className={`w-full h-full rounded-md relative hover:bg-accent hover:text-accent-foreground ${
-            isSpeechActive ? "border-2 border-muted-foreground animate-pulse" : ""
+        <div
+          className={`w-full h-full rounded-md relative ${
+            isSpeechActive
+              ? "border-2 border-muted-foreground animate-pulse"
+              : ""
+          } ${
+            speechState?.isInitialized
+              ? "hover:bg-accent hover:text-accent-foreground"
+              : "bg-muted"
           }`}
         >
           {microphone && <Visualizer microphone={microphone} />}
           <div className="absolute inset-0 flex items-center justify-center gap-2">
-            <Mic className={`w-6 h-6 ${isPaused ? "text-muted-foreground" : ""}`} />
+            {!speechState?.isInitialized ? (
+              <MicOff className="w-6 h-6 text-muted-foreground" />
+            ) : (
+              <Mic
+                className={`w-6 h-6 ${isPaused ? "text-muted-foreground" : ""}`}
+              />
+            )}
             {expandedInput === "record" && (
-              <span className={`text-sm ${isPaused ? "text-muted-foreground" : ""}`}>
-                {isPaused ? "Paused" : "Listening"}
+              <span
+                className={`text-sm ${
+                  isPaused || !speechState?.isInitialized
+                    ? "text-muted-foreground"
+                    : ""
+                }`}
+              >
+                {!speechState?.isInitialized
+                  ? "Initializing..."
+                  : isPaused
+                    ? "Paused"
+                    : "Listening"}
               </span>
             )}
           </div>
 
-          {(expandedInput === "record" || activeInput === "record") && onTogglePause && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="absolute left-1 top-1/2 -translate-y-1/2"
-              onClick={(e) => {
-                e.stopPropagation();
-                onTogglePause();
-              }}
-            >
-              {isPaused ? (
-                <PlayIcon className="w-4 h-4" />
-              ) : (
-                <PauseIcon className="w-4 h-4" />
-              )}
-            </Button>
-          )}
+          {(expandedInput === "record" || activeInput === "record") &&
+            onTogglePause &&
+            speechState?.isInitialized && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute left-1 top-1/2 -translate-y-1/2"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onTogglePause();
+                }}
+              >
+                {isPaused ? (
+                  <PlayIcon className="w-4 h-4" />
+                ) : (
+                  <PauseIcon className="w-4 h-4" />
+                )}
+              </Button>
+            )}
         </div>
       </div>
 
@@ -129,8 +168,11 @@ export const SpeechInput = ({
           textareaRef.current?.focus();
         }}
         className={`transition-all duration-300 relative ${
-          expandedInput === null ? "flex-1 h-12" :
-          expandedInput === "text" ? "flex-1 h-12" : "w-12 h-12"
+          expandedInput === null
+            ? "flex-1 h-12"
+            : expandedInput === "text"
+              ? "flex-1 h-12"
+              : "w-12 h-12"
         }`}
       >
         {expandedInput === "text" ? (

next/lib/speech-state.ts

@@ -7,6 +7,7 @@ export interface SpeechSegment {
 
 export class SpeechStateManager {
   private isCollectingState: boolean;
+  private isInitializedState: boolean;
   private segments: SpeechSegment[];
   private speechCollectedMs: number;
   private currentPartialText: string | null;
@@ -21,6 +22,7 @@ export class SpeechStateManager {
 
   constructor(speechThresholdMs = 5000, gapThresholdMs = 5000) {
     this.isCollectingState = true;
+    this.isInitializedState = false;
     this.segments = [];
     this.speechCollectedMs = 0;
     this.currentPartialText = null;
@@ -38,6 +40,14 @@ export class SpeechStateManager {
     return Date.now() < this.lastActivityMs;
   }
 
+  get isInitialized(): boolean {
+    return this.isInitializedState;
+  }
+
+  set isInitialized(value: boolean) {
+    this.isInitializedState = value;
+  }
+
   /**
    * Main method to handle incoming transcript data.
    * @param text        The transcript text