bloby-bot 0.18.16 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloby-bot",
-  "version": "0.18.16",
+  "version": "0.19.0",
   "releaseNotes": [
     "1. react router implemented",
     "2. new workspace design",

package/supervisor/chat/src/components/Chat/InputBar.tsx

@@ -258,56 +258,74 @@ export default function InputBar({ onSend, onStop, streaming, whisperEnabled, on
     requestAnimationFrame(() => textareaRef.current?.focus());
   };
 
+  // ── Device detection ──
+  const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+  // ── Start recording helper (shared by desktop click & mobile hold) ──
+  const beginRecording = useCallback(async () => {
+    if (!voiceEnabled) return;
+    try {
+      if (whisperEnabled) {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        if (!isMobile && !pointerIsDown.current) {
+          // Desktop: pointer already released is fine (click), keep going
+        } else if (isMobile && !pointerIsDown.current) {
+          stream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        streamRef.current = stream;
+        const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : 'audio/webm';
+        const recorder = new MediaRecorder(stream, { mimeType });
+        audioChunksRef.current = [];
+        recorder.ondataavailable = (ev) => {
+          if (ev.data.size > 0) audioChunksRef.current.push(ev.data);
+        };
+        mediaRecorderRef.current = recorder;
+        recorder.start();
+      } else {
+        startSpeech(!isMobile); // desktop: continuous=true, mobile: continuous=false
+        if (isMobile && !pointerIsDown.current) {
+          abortSpeech();
+          return;
+        }
+      }
+
+      isHolding.current = true;
+      setIsRecording(true);
+      setRecordingTime(0);
+    } catch (err) {
+      console.error('[InputBar] recording setup failed:', err);
+    }
+  }, [voiceEnabled, whisperEnabled, startSpeech, abortSpeech]);
+
   // ── Mic pointer handlers ──
   const handleMicDown = useCallback((e: RPointerEvent) => {
     e.preventDefault();
+
+    if (!isMobile) {
+      // Desktop: click-to-toggle
+      if (isRecording) {
+        stopRecording(false);
+        return;
+      }
+      pointerIsDown.current = true;
+      beginRecording();
+      return;
+    }
+
+    // Mobile: press-and-hold
     pointerIsDown.current = true;
     startXRef.current = e.clientX;
     dragRef.current = 0;
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
 
-    holdTimerRef.current = setTimeout(async () => {
-      if (!voiceEnabled) {
-        return;
-      }
-      try {
-        if (whisperEnabled) {
-          // Whisper path: need getUserMedia + MediaRecorder for audio capture
-          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-          // If user released while permission dialog was showing, clean up and bail
-          if (!pointerIsDown.current) {
-            stream.getTracks().forEach((t) => t.stop());
-            return;
-          }
-          streamRef.current = stream;
-          const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : 'audio/webm';
-          const recorder = new MediaRecorder(stream, { mimeType });
-          audioChunksRef.current = [];
-          recorder.ondataavailable = (ev) => {
-            if (ev.data.size > 0) audioChunksRef.current.push(ev.data);
-          };
-          mediaRecorderRef.current = recorder;
-          recorder.start();
-        } else {
-          // Web Speech path: only SpeechRecognition, no getUserMedia (avoids mic conflict on mobile)
-          startSpeech();
-          if (!pointerIsDown.current) {
-            abortSpeech();
-            return;
-          }
-        }
-
-        isHolding.current = true;
-        setIsRecording(true);
-        setRecordingTime(0);
-      } catch (err) {
-        console.error('[InputBar] recording setup failed:', err);
-      }
+    holdTimerRef.current = setTimeout(() => {
+      beginRecording();
     }, 200);
-  }, [voiceEnabled, whisperEnabled, startSpeech, abortSpeech]);
+  }, [isMobile, isRecording, voiceEnabled, beginRecording, stopRecording]);
 
   const handleMicMove = useCallback((e: RPointerEvent) => {
-    if (!isHolding.current) return;
+    if (!isMobile || !isHolding.current) return;
     const dx = Math.min(0, e.clientX - startXRef.current);
     dragRef.current = dx;
     if (micRef.current) micRef.current.style.transform = `translateX(${dx}px)`;
@@ -319,16 +337,17 @@ export default function InputBar({ onSend, onStop, streaming, whisperEnabled, on
         stopRecording(true);
       }
     }
-  }, [stopRecording]);
+  }, [isMobile, stopRecording]);
 
   const handleMicUp = useCallback(() => {
     pointerIsDown.current = false;
     if (holdTimerRef.current) { clearTimeout(holdTimerRef.current); holdTimerRef.current = null; }
-    if (!isHolding.current) {
-      return;
-    }
+    // Desktop: don't stop on release (toggle mode)
+    if (!isMobile) return;
+    // Mobile: stop on release
+    if (!isHolding.current) return;
     stopRecording(false);
-  }, [stopRecording]);
+  }, [isMobile, stopRecording]);
 
   const handleMicCancel = useCallback(() => {
     pointerIsDown.current = false;
@@ -477,44 +496,70 @@ export default function InputBar({ onSend, onStop, streaming, whisperEnabled, on
                 </span>
               </div>
 
-              {/* Pill: trash + centered slide-to-cancel + mic */}
+              {/* Pill: content depends on desktop vs mobile */}
               <div className="flex-1 flex items-center bg-muted rounded-full h-12 pl-1 pr-0.5">
-                <div
-                  ref={trashRef}
-                  className="flex items-center justify-center h-9 w-9 shrink-0 rounded-full bg-destructive/10 text-destructive"
-                >
-                  <Trash2 className="h-4 w-4" />
-                </div>
-                <div className="flex-1 flex justify-center min-w-0">
-                  <motion.span
-                    className="text-[13px] whitespace-nowrap select-none font-medium"
-                    style={{
-                      backgroundImage: 'linear-gradient(90deg, #999 0%, #999 35%, #fff 50%, #999 65%, #999 100%)',
-                      backgroundSize: '200% 100%',
-                      WebkitBackgroundClip: 'text',
-                      WebkitTextFillColor: 'transparent',
-                      backgroundClip: 'text',
-                    }}
-                    animate={{ backgroundPosition: ['200% center', '-200% center'] }}
-                    transition={{ duration: 2.5, repeat: Infinity, ease: 'linear' }}
-                  >
-                    ◄◄ slide to cancel
-                  </motion.span>
-                </div>
-                {/* Draggable mic (DOM transform for 60fps) */}
-                <div
-                  ref={micRef}
-                  className="shrink-0 touch-none select-none will-change-transform"
-                  style={{ transition: 'none' }}
-                  onPointerDown={handleMicDown}
-                  onPointerMove={handleMicMove}
-                  onPointerUp={handleMicUp}
-                  onPointerCancel={handleMicCancel}
-                >
-                  <div className="flex items-center justify-center h-11 w-11 rounded-full bg-destructive text-destructive-foreground">
-                    <Mic className="h-5 w-5" />
-                  </div>
-                </div>
+                {isMobile ? (
+                  <>
+                    <div
+                      ref={trashRef}
+                      className="flex items-center justify-center h-9 w-9 shrink-0 rounded-full bg-destructive/10 text-destructive"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </div>
+                    <div className="flex-1 flex justify-center min-w-0">
+                      <motion.span
+                        className="text-[13px] whitespace-nowrap select-none font-medium"
+                        style={{
+                          backgroundImage: 'linear-gradient(90deg, #999 0%, #999 35%, #fff 50%, #999 65%, #999 100%)',
+                          backgroundSize: '200% 100%',
+                          WebkitBackgroundClip: 'text',
+                          WebkitTextFillColor: 'transparent',
+                          backgroundClip: 'text',
+                        }}
+                        animate={{ backgroundPosition: ['200% center', '-200% center'] }}
+                        transition={{ duration: 2.5, repeat: Infinity, ease: 'linear' }}
+                      >
+                        ◄◄ slide to cancel
+                      </motion.span>
+                    </div>
+                    {/* Draggable mic (DOM transform for 60fps) */}
+                    <div
+                      ref={micRef}
+                      className="shrink-0 touch-none select-none will-change-transform"
+                      style={{ transition: 'none' }}
+                      onPointerDown={handleMicDown}
+                      onPointerMove={handleMicMove}
+                      onPointerUp={handleMicUp}
+                      onPointerCancel={handleMicCancel}
+                    >
+                      <div className="flex items-center justify-center h-11 w-11 rounded-full bg-destructive text-destructive-foreground">
+                        <Mic className="h-5 w-5" />
+                      </div>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <button
+                      onClick={() => stopRecording(true)}
+                      className="flex items-center justify-center h-9 w-9 shrink-0 rounded-full bg-destructive/10 text-destructive hover:bg-destructive/20 transition-colors"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                    <div className="flex-1 flex justify-center min-w-0">
+                      <span className="text-[13px] whitespace-nowrap select-none font-medium text-muted-foreground">
+                        Click mic to stop
+                      </span>
+                    </div>
+                    <button
+                      onClick={() => stopRecording(false)}
+                      className="shrink-0"
+                    >
+                      <div className="flex items-center justify-center h-11 w-11 rounded-full bg-destructive text-destructive-foreground hover:bg-destructive/90 transition-colors">
+                        <Square className="h-4 w-4" />
+                      </div>
+                    </button>
+                  </>
+                )}
               </div>
             </div>
           </motion.div>

package/supervisor/chat/src/hooks/useSpeechRecognition.ts

@@ -38,7 +38,7 @@ export function useSpeechRecognition() {
 
   const isSupported = useMemo(() => isWebSpeechSupported, []);
 
-  const start = useCallback(() => {
+  const start = useCallback((continuous = false) => {
     const Ctor = getSpeechRecognitionCtor();
     if (!Ctor) {
       return;
@@ -50,8 +50,8 @@ export function useSpeechRecognition() {
     }
 
     const recognition = new Ctor();
-    recognition.continuous = false;   // single utterance — matches press-hold-release UX
-    recognition.interimResults = true; // get progressive updates while speaking
+    recognition.continuous = continuous; // desktop: true (click-to-toggle), mobile: false (hold-to-talk)
+    recognition.interimResults = true;   // get progressive updates while speaking
     recognition.lang = navigator.language || 'en-US';
 
     transcriptRef.current = '';