@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/chat-overlay.tsx

@@ -1,29 +1,51 @@
 /**
  * Chat Overlay Component
- * 
+ *
  * Floating UI element combining voice input with chat functionality.
  * Shows minimized voice button that expands to full chat overlay.
  * Supports both voice and text input in the same thread.
  */
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { rpcServerCalls, subscribe, IMessage, Messages, newid, groupUserVar, userVar, PersistentVar, deviceVar } from '@peers-app/peers-sdk';
-import { MessageCompose } from './messages/message-compose';
-import { MessageDisplay } from './messages/message-display';
-import { me } from '../globals';
-import { sortBy } from 'lodash';
-
-type VoiceState = 'disabled' | 'idle' | 'listening' | 'recording' | 'processing' | 'speaking';
+import {
+  deviceVar,
+  groupUserVar,
+  type IMessage,
+  Messages,
+  newid,
+  type PersistentVar,
+  rpcServerCalls,
+  subscribe,
+  userVar,
+} from "@peers-app/peers-sdk";
+import { sortBy } from "lodash";
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { me } from "../globals";
+import { MessageCompose } from "./messages/message-compose";
+import { MessageDisplay } from "./messages/message-display";
+import type {
+  ChatOpenWithMessagePayload,
+  VoiceErrorPayload,
+  VoicePlayAudioPayload,
+  VoiceSpeakPayload,
+  VoiceStatePayload,
+  VoiceSubscribeEvent,
+  VoiceThreadPayload,
+  VoiceTranscriptionPayload,
+  VoiceVolumePayload,
+} from "./voice-subscribe-events";
+
+type VoiceState = "disabled" | "idle" | "listening" | "recording" | "processing" | "speaking";
 
 interface ChatOverlayProps {
   /** Position of the overlay */
-  position?: 'bottom-right' | 'bottom-left';
+  position?: "bottom-right" | "bottom-left";
 }
 
 // Voice settings interface (must match voice-settings.tsx)
 interface VoiceSettingsData {
   enabled: boolean;
-  voiceOutputEnabled?: boolean;  // TTS responses. Defaults to true when voice input enabled.
+  voiceOutputEnabled?: boolean; // TTS responses. Defaults to true when voice input enabled.
   wakeWord: string;
   wakeWordSensitivity: number;
   speechSensitivity: number;
@@ -36,11 +58,11 @@ interface VoiceSettingsData {
 const DEFAULT_VOICE_SETTINGS: VoiceSettingsData = {
   enabled: false,
   voiceOutputEnabled: true,
-  wakeWord: 'COMPUTER',
+  wakeWord: "COMPUTER",
   wakeWordSensitivity: 0.5,
   speechSensitivity: 0.3,
-  sttProvider: 'auto',
-  ttsProvider: 'browser',
+  sttProvider: "auto",
+  ttsProvider: "browser",
   ttsSpeed: 1.0,
 };
 
@@ -49,29 +71,35 @@ let chatOverlayThreadPvar: PersistentVar<string | null> | null = null;
 
 function getChatOverlayThreadPvar(): PersistentVar<string | null> {
   if (!chatOverlayThreadPvar) {
-    chatOverlayThreadPvar = groupUserVar<string | null>('chatOverlayThreadId', { defaultValue: null });
+    chatOverlayThreadPvar = groupUserVar<string | null>("chatOverlayThreadId", {
+      defaultValue: null,
+    });
   }
   return chatOverlayThreadPvar;
 }
 
-const voiceHubActive = deviceVar<boolean>('voiceHub:active', { defaultValue: false });
+const voiceHubActive = deviceVar<boolean>("voiceHub:active", { defaultValue: false });
 
 // Voice settings pvar (shared with voice-settings.tsx and voice-service.ts)
-const voiceSettingsPvar = userVar<VoiceSettingsData>('voiceSettings', { defaultValue: DEFAULT_VOICE_SETTINGS });
+const voiceSettingsPvar = userVar<VoiceSettingsData>("voiceSettings", {
+  defaultValue: DEFAULT_VOICE_SETTINGS,
+});
 
 // Position pvar for overlay placement
 interface OverlayPosition {
-  x: number;  // distance from right edge
-  y: number;  // distance from bottom edge
+  x: number; // distance from right edge
+  y: number; // distance from bottom edge
 }
 const DEFAULT_POSITION: OverlayPosition = { x: 20, y: 20 };
-const overlayPositionPvar = deviceVar<OverlayPosition>('chatOverlayPosition', { defaultValue: DEFAULT_POSITION });
+const overlayPositionPvar = deviceVar<OverlayPosition>("chatOverlayPosition", {
+  defaultValue: DEFAULT_POSITION,
+});
 
 export const ChatOverlay: React.FC<ChatOverlayProps> = ({
-  position = 'bottom-right',
+  position: _position = "bottom-right",
 }) => {
-  const [voiceState, setVoiceState] = useState<VoiceState>('disabled');
-  const [transcription, setTranscription] = useState<string>('');
+  const [voiceState, setVoiceState] = useState<VoiceState>("disabled");
+  const [_transcription, setTranscription] = useState<string>("");
   const [volumeLevel, setVolumeLevel] = useState<number>(0);
   const [error, setError] = useState<string | null>(null);
   const [isExpanded, setIsExpanded] = useState(false);
@@ -83,11 +111,22 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
   const [overlayPosition, setOverlayPosition] = useState<OverlayPosition>(DEFAULT_POSITION);
   const [isDragging, setIsDragging] = useState(false);
   const [pendingInitialMessage, setPendingInitialMessage] = useState<string | undefined>(undefined);
-  
+
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const messagesContainerRef = useRef<HTMLDivElement>(null);
   const currentAudioRef = useRef<HTMLAudioElement | null>(null);
-  const dragStartRef = useRef<{ mouseX: number; mouseY: number; posX: number; posY: number } | null>(null);
+  const dragStartRef = useRef<{
+    mouseX: number;
+    mouseY: number;
+    posX: number;
+    posY: number;
+  } | null>(null);
+
+  const scrollToBottom = useCallback(() => {
+    setTimeout(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, 100);
+  }, []);
 
   // Load thread from pvar on mount
   useEffect(() => {
@@ -100,7 +139,7 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
         rpcServerCalls.voiceSetThreadId?.(savedThreadId).catch(() => {});
       }
     });
-    
+
     // Subscribe to pvar changes (from other devices)
     const sub = pvar.subscribe((newThreadId) => {
       if (newThreadId !== threadId) {
@@ -108,9 +147,9 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
         rpcServerCalls.voiceSetThreadId?.(newThreadId).catch(() => {});
       }
     });
-    
+
     return () => sub.dispose();
-  }, []);
+  }, [threadId]);
 
   // Load voice settings from pvar
   useEffect(() => {
@@ -120,14 +159,14 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
         setVoiceSettings(saved);
       }
     });
-    
+
     // Subscribe to settings changes
     const sub = voiceSettingsPvar.subscribe((newSettings) => {
       if (newSettings) {
         setVoiceSettings(newSettings);
       }
     });
-    
+
     return () => sub.dispose();
   }, []);
 
@@ -142,32 +181,41 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
   }, []);
 
   // Drag handlers
-  const handleDragStart = useCallback((e: React.MouseEvent) => {
-    // Only start drag on middle-click or when holding shift
-    if (e.button === 1 || e.shiftKey) {
-      e.preventDefault();
-      setIsDragging(true);
-      dragStartRef.current = {
-        mouseX: e.clientX,
-        mouseY: e.clientY,
-        posX: overlayPosition.x,
-        posY: overlayPosition.y,
-      };
-    }
-  }, [overlayPosition]);
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      // Only start drag on middle-click or when holding shift
+      if (e.button === 1 || e.shiftKey) {
+        e.preventDefault();
+        setIsDragging(true);
+        dragStartRef.current = {
+          mouseX: e.clientX,
+          mouseY: e.clientY,
+          posX: overlayPosition.x,
+          posY: overlayPosition.y,
+        };
+      }
+    },
+    [overlayPosition],
+  );
 
   useEffect(() => {
     if (!isDragging) return;
 
     const handleMouseMove = (e: MouseEvent) => {
       if (!dragStartRef.current) return;
-      
+
       const deltaX = dragStartRef.current.mouseX - e.clientX;
       const deltaY = dragStartRef.current.mouseY - e.clientY;
-      
-      const newX = Math.max(10, Math.min(window.innerWidth - 80, dragStartRef.current.posX + deltaX));
-      const newY = Math.max(10, Math.min(window.innerHeight - 80, dragStartRef.current.posY + deltaY));
-      
+
+      const newX = Math.max(
+        10,
+        Math.min(window.innerWidth - 80, dragStartRef.current.posX + deltaX),
+      );
+      const newY = Math.max(
+        10,
+        Math.min(window.innerHeight - 80, dragStartRef.current.posY + deltaY),
+      );
+
       setOverlayPosition({ x: newX, y: newY });
     };
 
@@ -178,12 +226,12 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
       overlayPositionPvar(overlayPosition);
     };
 
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-    
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
     return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging, overlayPosition]);
 
@@ -197,39 +245,43 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
         }
       }, 50);
     }
-  }, [isExpanded, messages, parentMessage]);
+  }, [isExpanded]);
 
   // Subscribe to voice events
   useEffect(() => {
     const subscriptions = [
-      subscribe('chat:openWithMessage', (event: any) => {
-        const { message } = event.data || {};
-        if (message) {
-          setPendingInitialMessage(message);
-        }
-        setIsExpanded(true);
-        setShowSettings(false);
-      }),
-      subscribe('voice:stateChanged', (event: any) => {
-        setVoiceState(event.data.state);
-        if (event.data.state === 'idle') {
-          setTranscription('');
+      subscribe(
+        "chat:openWithMessage",
+        (event: VoiceSubscribeEvent<ChatOpenWithMessagePayload>) => {
+          const { message } = event.data || {};
+          if (message) {
+            const text = typeof message === "string" ? message : message.message;
+            setPendingInitialMessage(text);
+          }
+          setIsExpanded(true);
+          setShowSettings(false);
+        },
+      ),
+      subscribe("voice:stateChanged", (event: VoiceSubscribeEvent<VoiceStatePayload>) => {
+        setVoiceState(event.data.state as VoiceState);
+        if (event.data.state === "idle") {
+          setTranscription("");
           setError(null);
         }
-        if (event.data.state === 'recording' && !voiceHubActive()) {
+        if (event.data.state === "recording" && !voiceHubActive()) {
           setIsExpanded(true);
         }
       }),
-      subscribe('voice:transcription', (event: any) => {
+      subscribe("voice:transcription", (event: VoiceSubscribeEvent<VoiceTranscriptionPayload>) => {
         setTranscription(event.data.text);
       }),
-      subscribe('voice:volumeLevel', (event: any) => {
+      subscribe("voice:volumeLevel", (event: VoiceSubscribeEvent<VoiceVolumePayload>) => {
         setVolumeLevel(event.data.level);
       }),
-      subscribe('voice:error', (event: any) => {
+      subscribe("voice:error", (event: VoiceSubscribeEvent<VoiceErrorPayload>) => {
         setError(event.data.message);
       }),
-      subscribe('voice:threadChanged', (event: any) => {
+      subscribe("voice:threadChanged", (event: VoiceSubscribeEvent<VoiceThreadPayload>) => {
         const newThreadId = event.data.threadId;
         setThreadId(newThreadId);
         // Sync to pvar
@@ -239,50 +291,61 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
     ];
 
     // Load initial state
-    rpcServerCalls.voiceGetState().then(({ state }) => {
-      setVoiceState(state);
-    }).catch(() => {});
+    rpcServerCalls
+      .voiceGetState()
+      .then(({ state }) => {
+        setVoiceState(state);
+      })
+      .catch(() => {});
 
     // Load initial thread from voice service
-    rpcServerCalls.voiceGetThreadId?.().then((id) => {
-      if (id) {
-        setThreadId(id);
-        const pvar = getChatOverlayThreadPvar();
-        pvar(id);
-      }
-    }).catch(() => {});
+    rpcServerCalls
+      .voiceGetThreadId?.()
+      .then((id) => {
+        if (id) {
+          setThreadId(id);
+          const pvar = getChatOverlayThreadPvar();
+          pvar(id);
+        }
+      })
+      .catch(() => {});
 
     return () => {
-      subscriptions.forEach(sub => sub.unsubscribe());
+      for (const sub of subscriptions) {
+        sub.unsubscribe();
+      }
     };
   }, []);
 
   // Handle browser TTS events
   useEffect(() => {
-    const speakHandler = subscribe('voice:speakText', (event: any) => {
-      const { text, voice, rate } = event.data;
-      if ('speechSynthesis' in window) {
-        const utterance = new SpeechSynthesisUtterance(text);
-        if (voice) {
-          const voices = speechSynthesis.getVoices();
-          const selectedVoice = voices.find(v => v.name === voice);
-          if (selectedVoice) utterance.voice = selectedVoice;
-        }
-        if (rate) utterance.rate = rate;
-        utterance.onend = () => {
-          rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-        };
-        utterance.onerror = () => {
+    const speakHandler = subscribe(
+      "voice:speakText",
+      (event: VoiceSubscribeEvent<VoiceSpeakPayload>) => {
+        const { text, voice, rate } = event.data;
+        if ("speechSynthesis" in window) {
+          const utterance = new SpeechSynthesisUtterance(text);
+          if (voice) {
+            const voices = speechSynthesis.getVoices();
+            const selectedVoice = voices.find((v) => v.name === voice);
+            if (selectedVoice) utterance.voice = selectedVoice;
+          }
+          if (rate) utterance.rate = rate;
+          utterance.onend = () => {
+            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+          };
+          utterance.onerror = () => {
+            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+          };
+          speechSynthesis.speak(utterance);
+        } else {
           rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-        };
-        speechSynthesis.speak(utterance);
-      } else {
-        rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-      }
-    });
+        }
+      },
+    );
 
-    const stopHandler = subscribe('voice:stopSpeaking', () => {
-      if ('speechSynthesis' in window) {
+    const stopHandler = subscribe("voice:stopSpeaking", () => {
+      if ("speechSynthesis" in window) {
         speechSynthesis.cancel();
       }
       if (currentAudioRef.current) {
@@ -291,26 +354,29 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
       }
     });
 
-    const playHandler = subscribe('voice:playAudio', async (event: any) => {
-      const { audioBase64, mimeType } = event.data;
-      try {
-        const audioData = Uint8Array.from(atob(audioBase64), c => c.charCodeAt(0));
-        const blob = new Blob([audioData], { type: mimeType });
-        const url = URL.createObjectURL(blob);
-        const audio = new Audio(url);
-        currentAudioRef.current = audio;
-        audio.onended = () => {
-          URL.revokeObjectURL(url);
+    const playHandler = subscribe(
+      "voice:playAudio",
+      async (event: VoiceSubscribeEvent<VoicePlayAudioPayload>) => {
+        const { audioBase64, mimeType } = event.data;
+        try {
+          const audioData = Uint8Array.from(atob(audioBase64), (c) => c.charCodeAt(0));
+          const blob = new Blob([audioData], { type: mimeType });
+          const url = URL.createObjectURL(blob);
+          const audio = new Audio(url);
+          currentAudioRef.current = audio;
+          audio.onended = () => {
+            URL.revokeObjectURL(url);
+            currentAudioRef.current = null;
+            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+          };
+          await audio.play();
+        } catch (e) {
+          console.error("Failed to play audio:", e);
           currentAudioRef.current = null;
           rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-        };
-        await audio.play();
-      } catch (e) {
-        console.error('Failed to play audio:', e);
-        currentAudioRef.current = null;
-        rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-      }
-    });
+        }
+      },
+    );
 
     return () => {
       speakHandler.unsubscribe();
@@ -327,58 +393,62 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
       return;
     }
 
+    const currentThreadId = threadId;
+
     async function loadMessages() {
-      const parent = await Messages().get(threadId!);
+      const parent = await Messages().get(currentThreadId);
       setParentMessage(parent || null);
-      
+
       const msgs = await Messages().list(
-        { messageParentId: threadId },
-        { sortBy: ['createdAt', 'messageId'] }
+        { messageParentId: currentThreadId },
+        { sortBy: ["createdAt", "messageId"] },
       );
       setMessages(msgs);
       scrollToBottom();
     }
 
-    loadMessages();
+    void loadMessages();
 
     // Subscribe to message changes
     const sub = Messages().dataChanged.subscribe((evt) => {
-      if (evt.dataObject.messageParentId === threadId || evt.dataObject.messageId === threadId) {
-        loadMessages();
+      if (
+        evt.dataObject.messageParentId === currentThreadId ||
+        evt.dataObject.messageId === currentThreadId
+      ) {
+        void loadMessages();
       }
     });
 
-    return () => { sub.unsubscribe(); };
-  }, [threadId]);
-
-  const scrollToBottom = () => {
-    setTimeout(() => {
-      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, 100);
-  };
-
-  const updateVoiceSetting = useCallback(<K extends keyof VoiceSettingsData>(key: K, value: VoiceSettingsData[K]) => {
-    const newSettings = { ...voiceSettings, [key]: value };
-    setVoiceSettings(newSettings);
-    voiceSettingsPvar(newSettings);
-  }, [voiceSettings]);
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [threadId, scrollToBottom]);
+
+  const updateVoiceSetting = useCallback(
+    <K extends keyof VoiceSettingsData>(key: K, value: VoiceSettingsData[K]) => {
+      const newSettings = { ...voiceSettings, [key]: value };
+      setVoiceSettings(newSettings);
+      voiceSettingsPvar(newSettings);
+    },
+    [voiceSettings],
+  );
 
   const handleVoiceClick = useCallback(async () => {
     try {
-      if (voiceState === 'disabled') {
-        window.location.hash = '#settings?tab=voice';
+      if (voiceState === "disabled") {
+        window.location.hash = "#settings?tab=voice";
         return;
       }
 
-      if (voiceState === 'recording') {
+      if (voiceState === "recording") {
         await rpcServerCalls.voiceStopRecording();
-      } else if (voiceState === 'speaking') {
+      } else if (voiceState === "speaking") {
         await rpcServerCalls.voiceStopPlayback();
-      } else if (voiceState === 'idle' || voiceState === 'listening') {
+      } else if (voiceState === "idle" || voiceState === "listening") {
         await rpcServerCalls.voiceStartRecording();
       }
     } catch (e) {
-      console.error('Voice action failed:', e);
+      console.error("Voice action failed:", e);
     }
   }, [voiceState]);
 
@@ -391,122 +461,143 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
     getChatOverlayThreadPvar()(null);
   }, []);
 
-  const handleMessageSubmit = useCallback(async (message: IMessage) => {
-    // Notify voice service of text activity (resets inactivity timer)
-    rpcServerCalls.voiceNotifyTextActivity?.().catch(() => {});
+  const handleMessageSubmit = useCallback(
+    async (message: IMessage) => {
+      // Notify voice service of text activity (resets inactivity timer)
+      rpcServerCalls.voiceNotifyTextActivity?.().catch(() => {});
+
+      // Clear any pending initial message that was pre-filled
+      setPendingInitialMessage(undefined);
+
+      // If no thread yet, this message becomes the thread root
+      if (!threadId) {
+        message.messageParentId = undefined;
+        await Messages().save(message);
+        setThreadId(message.messageId);
+        // Sync to voice service and pvar
+        rpcServerCalls.voiceSetThreadId?.(message.messageId).catch(() => {});
+        getChatOverlayThreadPvar()(message.messageId);
+      } else {
+        message.messageParentId = threadId;
+        await Messages().save(message);
+      }
 
-    // Clear any pending initial message that was pre-filled
-    setPendingInitialMessage(undefined);
-    
-    // If no thread yet, this message becomes the thread root
-    if (!threadId) {
-      message.messageParentId = undefined;
-      await Messages().save(message);
-      setThreadId(message.messageId);
-      // Sync to voice service and pvar
-      rpcServerCalls.voiceSetThreadId?.(message.messageId).catch(() => {});
-      getChatOverlayThreadPvar()(message.messageId);
-    } else {
-      message.messageParentId = threadId;
-      await Messages().save(message);
-    }
-    
-    // Add to local state immediately for responsiveness
-    setMessages(prev => sortBy([...prev, message], 'createdAt'));
-    scrollToBottom();
-  }, [threadId]);
+      // Add to local state immediately for responsiveness
+      setMessages((prev) => sortBy([...prev, message], "createdAt"));
+      scrollToBottom();
+    },
+    [threadId, scrollToBottom],
+  );
 
   const getVoiceIcon = (): string => {
     switch (voiceState) {
-      case 'disabled': return 'bi-mic-mute';
-      case 'idle': return 'bi-mic';
-      case 'listening': return 'bi-ear';
-      case 'recording': return 'bi-mic-fill';
-      case 'processing': return 'bi-hourglass-split';
-      case 'speaking': return 'bi-volume-up-fill';
-      default: return 'bi-mic';
+      case "disabled":
+        return "bi-mic-mute";
+      case "idle":
+        return "bi-mic";
+      case "listening":
+        return "bi-ear";
+      case "recording":
+        return "bi-mic-fill";
+      case "processing":
+        return "bi-hourglass-split";
+      case "speaking":
+        return "bi-volume-up-fill";
+      default:
+        return "bi-mic";
     }
   };
 
   const getStateText = (): string => {
     switch (voiceState) {
-      case 'disabled': return 'Voice disabled';
-      case 'idle': return 'Say wake word or click';
-      case 'listening': return 'Listening...';
-      case 'recording': return 'Recording...';
-      case 'processing': return 'Processing...';
-      case 'speaking': return 'Speaking... (click to stop)';
-      default: return '';
+      case "disabled":
+        return "Voice disabled";
+      case "idle":
+        return "Say wake word or click";
+      case "listening":
+        return "Listening...";
+      case "recording":
+        return "Recording...";
+      case "processing":
+        return "Processing...";
+      case "speaking":
+        return "Speaking... (click to stop)";
+      default:
+        return "";
     }
   };
 
   const getButtonClass = (): string => {
-    const base = 'btn rounded-circle shadow';
+    const base = "btn rounded-circle shadow";
     switch (voiceState) {
-      case 'disabled': return `${base} btn-secondary`;
-      case 'idle': return `${base} btn-outline-primary`;
-      case 'listening': return `${base} btn-info`;
-      case 'recording': return `${base} btn-danger`;
-      case 'processing': return `${base} btn-warning`;
-      case 'speaking': return `${base} btn-success`;
-      default: return `${base} btn-secondary`;
+      case "disabled":
+        return `${base} btn-secondary`;
+      case "idle":
+        return `${base} btn-outline-primary`;
+      case "listening":
+        return `${base} btn-info`;
+      case "recording":
+        return `${base} btn-danger`;
+      case "processing":
+        return `${base} btn-warning`;
+      case "speaking":
+        return `${base} btn-success`;
+      default:
+        return `${base} btn-secondary`;
     }
   };
 
   const positionStyles: React.CSSProperties = {
-    position: 'fixed',
+    position: "fixed",
     zIndex: 1050,
     bottom: `${overlayPosition.y}px`,
     right: `${overlayPosition.x}px`,
-    cursor: isDragging ? 'grabbing' : undefined,
+    cursor: isDragging ? "grabbing" : undefined,
   };
 
   return (
     <div style={positionStyles}>
       {/* Expanded chat panel */}
       {isExpanded && (
-        <div 
+        <div
           className="card shadow mb-2"
-          style={{ 
-            width: '400px',
-            maxHeight: '70vh',
-            backgroundColor: 'var(--bs-body-bg)',
-            display: 'flex',
-            flexDirection: 'column',
+          style={{
+            width: "400px",
+            maxHeight: "70vh",
+            backgroundColor: "var(--bs-body-bg)",
+            display: "flex",
+            flexDirection: "column",
           }}
         >
           {/* Header */}
           <div className="card-header py-2 px-3 d-flex justify-content-between align-items-center">
             <div className="d-flex align-items-center gap-2">
-              <button 
+              <button
                 className="btn btn-sm btn-outline-secondary"
                 onClick={startNewThread}
                 title="Start new thread"
               >
                 <i className="bi bi-plus-lg"></i>
               </button>
-              <button 
-                className={`btn btn-sm ${showSettings ? 'btn-secondary' : 'btn-outline-secondary'}`}
+              <button
+                className={`btn btn-sm ${showSettings ? "btn-secondary" : "btn-outline-secondary"}`}
                 onClick={() => setShowSettings(!showSettings)}
                 title="Voice settings"
               >
                 <i className="bi bi-gear"></i>
               </button>
               <small className="text-muted">
-                {showSettings ? 'Settings' : (threadId ? 'Thread' : 'New conversation')}
+                {showSettings ? "Settings" : threadId ? "Thread" : "New conversation"}
               </small>
             </div>
-            <button 
-              className="btn btn-sm btn-link p-0"
-              onClick={() => setIsExpanded(false)}
-            >
+            <button className="btn btn-sm btn-link p-0" onClick={() => setIsExpanded(false)}>
               <i className="bi bi-chevron-down"></i>
             </button>
           </div>
 
           {/* Settings panel */}
           {showSettings && (
-            <div className="card-body p-3" style={{ maxHeight: '50vh', overflowY: 'auto' }}>
+            <div className="card-body p-3" style={{ maxHeight: "50vh", overflowY: "auto" }}>
               {/* Voice Input Enabled Toggle */}
               <div className="d-flex align-items-center justify-content-between mb-2">
                 <label className="form-label mb-0">Voice Input</label>
@@ -516,11 +607,11 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
                     type="checkbox"
                     id="voiceEnabledToggle"
                     checked={voiceSettings.enabled}
-                    onChange={(e) => updateVoiceSetting('enabled', e.target.checked)}
+                    onChange={(e) => updateVoiceSetting("enabled", e.target.checked)}
                     role="switch"
                   />
                   <label className="form-check-label" htmlFor="voiceEnabledToggle">
-                    {voiceSettings.enabled ? 'On' : 'Off'}
+                    {voiceSettings.enabled ? "On" : "Off"}
                   </label>
                 </div>
               </div>
@@ -535,11 +626,11 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
                       type="checkbox"
                       id="voiceOutputEnabledToggle"
                       checked={voiceSettings.voiceOutputEnabled !== false}
-                      onChange={(e) => updateVoiceSetting('voiceOutputEnabled', e.target.checked)}
+                      onChange={(e) => updateVoiceSetting("voiceOutputEnabled", e.target.checked)}
                       role="switch"
                     />
                     <label className="form-check-label" htmlFor="voiceOutputEnabledToggle">
-                      {voiceSettings.voiceOutputEnabled !== false ? 'On' : 'Off'}
+                      {voiceSettings.voiceOutputEnabled !== false ? "On" : "Off"}
                     </label>
                   </div>
                 </div>
@@ -557,11 +648,17 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
                   max="1"
                   step="0.05"
                   value={voiceSettings.wakeWordSensitivity}
-                  onChange={(e) => updateVoiceSetting('wakeWordSensitivity', parseFloat(e.target.value))}
+                  onChange={(e) =>
+                    updateVoiceSetting("wakeWordSensitivity", parseFloat(e.target.value))
+                  }
                 />
                 <div className="d-flex justify-content-between">
-                  <small className="text-muted" style={{ fontSize: '0.7rem' }}>Less sensitive</small>
-                  <small className="text-muted" style={{ fontSize: '0.7rem' }}>More sensitive</small>
+                  <small className="text-muted" style={{ fontSize: "0.7rem" }}>
+                    Less sensitive
+                  </small>
+                  <small className="text-muted" style={{ fontSize: "0.7rem" }}>
+                    More sensitive
+                  </small>
                 </div>
               </div>
 
@@ -577,11 +674,17 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
                   max="1"
                   step="0.05"
                   value={voiceSettings.speechSensitivity}
-                  onChange={(e) => updateVoiceSetting('speechSensitivity', parseFloat(e.target.value))}
+                  onChange={(e) =>
+                    updateVoiceSetting("speechSensitivity", parseFloat(e.target.value))
+                  }
                 />
                 <div className="d-flex justify-content-between">
-                  <small className="text-muted" style={{ fontSize: '0.7rem' }}>Quiet (louder speech)</small>
-                  <small className="text-muted" style={{ fontSize: '0.7rem' }}>Noisy (softer speech)</small>
+                  <small className="text-muted" style={{ fontSize: "0.7rem" }}>
+                    Quiet (louder speech)
+                  </small>
+                  <small className="text-muted" style={{ fontSize: "0.7rem" }}>
+                    Noisy (softer speech)
+                  </small>
                 </div>
               </div>
 
@@ -595,14 +698,14 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
 
           {/* Messages area */}
           {!showSettings && (
-            <div 
+            <div
               ref={messagesContainerRef}
               className="card-body p-2"
-              style={{ 
-                flex: 1, 
-                overflowY: 'auto',
-                maxHeight: '40vh',
-                minHeight: '100px',
+              style={{
+                flex: 1,
+                overflowY: "auto",
+                maxHeight: "40vh",
+                minHeight: "100px",
               }}
             >
               {/* Parent message if exists */}
@@ -615,9 +718,9 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
 
               {/* Thread messages */}
               {messages.map((message, index) => (
-                <MessageDisplay 
-                  key={message.messageId} 
-                  message={message} 
+                <MessageDisplay
+                  key={message.messageId}
+                  message={message}
                   messageAbove={messages[index - 1]}
                 />
               ))}
@@ -635,14 +738,14 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
           )}
 
           {/* Voice status bar - only show when not in settings */}
-          {!showSettings && voiceState !== 'disabled' && voiceState !== 'idle' && (
+          {!showSettings && voiceState !== "disabled" && voiceState !== "idle" && (
             <div className="px-3 py-1 border-top">
               <div className="d-flex align-items-center gap-2">
                 <small className="text-muted">{getStateText()}</small>
-                {voiceState === 'recording' && (
-                  <div className="progress flex-grow-1" style={{ height: '4px' }}>
-                    <div 
-                      className="progress-bar bg-danger" 
+                {voiceState === "recording" && (
+                  <div className="progress flex-grow-1" style={{ height: "4px" }}>
+                    <div
+                      className="progress-bar bg-danger"
                       style={{ width: `${Math.min(100, volumeLevel * 500)}%` }}
                     />
                   </div>
@@ -655,11 +758,13 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
           {!showSettings && (
             <div className="card-footer p-2">
               <MessageCompose
-                channelId={me?.userId || 'default'}
+                channelId={me?.userId || "default"}
                 threadId={threadId || newid()}
                 onMessageSubmit={handleMessageSubmit}
                 initialMessage={pendingInitialMessage}
-                key={pendingInitialMessage ? `pre-${pendingInitialMessage.slice(0, 20)}` : 'default'}
+                key={
+                  pendingInitialMessage ? `pre-${pendingInitialMessage.slice(0, 20)}` : "default"
+                }
               />
             </div>
           )}
@@ -667,48 +772,48 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
       )}
 
       {/* Floating button row */}
-      <div 
+      <div
         className="d-flex gap-2 justify-content-end"
         onMouseDown={handleDragStart}
-        style={{ userSelect: isDragging ? 'none' : undefined }}
+        style={{ userSelect: isDragging ? "none" : undefined }}
       >
         {/* Voice button - only show when voice is enabled and chat is expanded */}
         {voiceSettings.enabled && isExpanded && (
           <button
             className={getButtonClass()}
-            style={{ 
-              width: '56px', 
-              height: '56px',
-              fontSize: '24px',
-              transition: 'all 0.2s ease',
-              position: 'relative',
+            style={{
+              width: "56px",
+              height: "56px",
+              fontSize: "24px",
+              transition: "all 0.2s ease",
+              position: "relative",
             }}
             onClick={handleVoiceClick}
             title={getStateText()}
           >
             <i className={`bi ${getVoiceIcon()}`}></i>
-            
+
             {/* Pulsing animation for listening/recording */}
-            {(voiceState === 'listening' || voiceState === 'recording') && (
-              <span 
+            {(voiceState === "listening" || voiceState === "recording") && (
+              <span
                 className="position-absolute"
                 style={{
                   top: 0,
                   left: 0,
                   right: 0,
                   bottom: 0,
-                  borderRadius: '50%',
-                  border: '2px solid currentColor',
-                  animation: 'pulse 1.5s ease-out infinite',
+                  borderRadius: "50%",
+                  border: "2px solid currentColor",
+                  animation: "pulse 1.5s ease-out infinite",
                 }}
               />
             )}
 
             {/* Processing spinner */}
-            {voiceState === 'processing' && (
-              <span 
+            {voiceState === "processing" && (
+              <span
                 className="spinner-border spinner-border-sm position-absolute"
-                style={{ top: '4px', right: '4px' }}
+                style={{ top: "4px", right: "4px" }}
               />
             )}
           </button>
@@ -716,16 +821,16 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
 
         {/* Chat expand/collapse button - always visible, stays on right */}
         <button
-          className={`btn rounded-circle shadow ${isExpanded ? 'btn-primary' : 'btn-light'}`}
-          style={{ 
-            width: '56px', 
-            height: '56px',
-            fontSize: '20px',
+          className={`btn rounded-circle shadow ${isExpanded ? "btn-primary" : "btn-light"}`}
+          style={{
+            width: "56px",
+            height: "56px",
+            fontSize: "20px",
           }}
           onClick={() => setIsExpanded(!isExpanded)}
           title={isExpanded ? "Close chat (Shift+drag to move)" : "Open chat (Shift+drag to move)"}
         >
-          <i className={`bi ${isExpanded ? 'bi-chat-dots-fill' : 'bi-chat-dots'}`}></i>
+          <i className={`bi ${isExpanded ? "bi-chat-dots-fill" : "bi-chat-dots"}`}></i>
         </button>
       </div>