@peers-app/peers-ui 0.19.12 → 0.19.13

package/src/components/chat-overlay.tsx

@@ -1,854 +0,0 @@
-/**
- * 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 {
-  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";
-}
-
-// Voice settings interface (must match voice-settings.tsx)
-interface VoiceSettingsData {
-  enabled: boolean;
-  voiceOutputEnabled?: boolean; // TTS responses. Defaults to true when voice input enabled.
-  wakeWord: string;
-  wakeWordSensitivity: number;
-  speechSensitivity: number;
-  sttProvider: string;
-  ttsProvider: string;
-  ttsVoice?: string;
-  ttsSpeed: number;
-}
-
-const DEFAULT_VOICE_SETTINGS: VoiceSettingsData = {
-  enabled: false,
-  voiceOutputEnabled: true,
-  wakeWord: "COMPUTER",
-  wakeWordSensitivity: 0.5,
-  speechSensitivity: 0.3,
-  sttProvider: "auto",
-  ttsProvider: "browser",
-  ttsSpeed: 1.0,
-};
-
-// Persistent var for tracking the chat overlay thread (synced across devices)
-let chatOverlayThreadPvar: PersistentVar<string | null> | null = null;
-
-function getChatOverlayThreadPvar(): PersistentVar<string | null> {
-  if (!chatOverlayThreadPvar) {
-    chatOverlayThreadPvar = groupUserVar<string | null>("chatOverlayThreadId", {
-      defaultValue: null,
-    });
-  }
-  return chatOverlayThreadPvar;
-}
-
-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,
-});
-
-// Position pvar for overlay placement
-interface OverlayPosition {
-  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,
-});
-
-export const ChatOverlay: React.FC<ChatOverlayProps> = ({
-  position: _position = "bottom-right",
-}) => {
-  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);
-  const [showSettings, setShowSettings] = useState(false);
-  const [threadId, setThreadId] = useState<string | null>(null);
-  const [messages, setMessages] = useState<IMessage[]>([]);
-  const [parentMessage, setParentMessage] = useState<IMessage | null>(null);
-  const [voiceSettings, setVoiceSettings] = useState<VoiceSettingsData>(DEFAULT_VOICE_SETTINGS);
-  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 scrollToBottom = useCallback(() => {
-    setTimeout(() => {
-      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, 100);
-  }, []);
-
-  // Load thread from pvar on mount
-  useEffect(() => {
-    const pvar = getChatOverlayThreadPvar();
-    pvar.loadingPromise.then(() => {
-      const savedThreadId = pvar();
-      if (savedThreadId) {
-        setThreadId(savedThreadId);
-        // Also sync to voice service
-        rpcServerCalls.voiceSetThreadId?.(savedThreadId).catch(() => {});
-      }
-    });
-
-    // Subscribe to pvar changes (from other devices)
-    const sub = pvar.subscribe((newThreadId) => {
-      if (newThreadId !== threadId) {
-        setThreadId(newThreadId);
-        rpcServerCalls.voiceSetThreadId?.(newThreadId).catch(() => {});
-      }
-    });
-
-    return () => sub.dispose();
-  }, [threadId]);
-
-  // Load voice settings from pvar
-  useEffect(() => {
-    voiceSettingsPvar.loadingPromise.then(() => {
-      const saved = voiceSettingsPvar();
-      if (saved) {
-        setVoiceSettings(saved);
-      }
-    });
-
-    // Subscribe to settings changes
-    const sub = voiceSettingsPvar.subscribe((newSettings) => {
-      if (newSettings) {
-        setVoiceSettings(newSettings);
-      }
-    });
-
-    return () => sub.dispose();
-  }, []);
-
-  // Load overlay position from pvar
-  useEffect(() => {
-    overlayPositionPvar.loadingPromise.then(() => {
-      const saved = overlayPositionPvar();
-      if (saved) {
-        setOverlayPosition(saved);
-      }
-    });
-  }, []);
-
-  // 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],
-  );
-
-  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),
-      );
-
-      setOverlayPosition({ x: newX, y: newY });
-    };
-
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      dragStartRef.current = null;
-      // Save position
-      overlayPositionPvar(overlayPosition);
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, overlayPosition]);
-
-  // Scroll to bottom when expanded or messages change
-  useEffect(() => {
-    if (isExpanded && messagesContainerRef.current) {
-      // Use setTimeout to ensure DOM has updated
-      setTimeout(() => {
-        if (messagesContainerRef.current) {
-          messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
-        }
-      }, 50);
-    }
-  }, [isExpanded]);
-
-  // Subscribe to voice events
-  useEffect(() => {
-    const subscriptions = [
-      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()) {
-          setIsExpanded(true);
-        }
-      }),
-      subscribe("voice:transcription", (event: VoiceSubscribeEvent<VoiceTranscriptionPayload>) => {
-        setTranscription(event.data.text);
-      }),
-      subscribe("voice:volumeLevel", (event: VoiceSubscribeEvent<VoiceVolumePayload>) => {
-        setVolumeLevel(event.data.level);
-      }),
-      subscribe("voice:error", (event: VoiceSubscribeEvent<VoiceErrorPayload>) => {
-        setError(event.data.message);
-      }),
-      subscribe("voice:threadChanged", (event: VoiceSubscribeEvent<VoiceThreadPayload>) => {
-        const newThreadId = event.data.threadId;
-        setThreadId(newThreadId);
-        // Sync to pvar
-        const pvar = getChatOverlayThreadPvar();
-        pvar(newThreadId);
-      }),
-    ];
-
-    // Load initial state
-    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(() => {});
-
-    return () => {
-      for (const sub of subscriptions) {
-        sub.unsubscribe();
-      }
-    };
-  }, []);
-
-  // Handle browser TTS events
-  useEffect(() => {
-    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(() => {});
-        }
-      },
-    );
-
-    const stopHandler = subscribe("voice:stopSpeaking", () => {
-      if ("speechSynthesis" in window) {
-        speechSynthesis.cancel();
-      }
-      if (currentAudioRef.current) {
-        currentAudioRef.current.pause();
-        currentAudioRef.current = null;
-      }
-    });
-
-    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(() => {});
-        }
-      },
-    );
-
-    return () => {
-      speakHandler.unsubscribe();
-      stopHandler.unsubscribe();
-      playHandler.unsubscribe();
-    };
-  }, []);
-
-  // Load messages when threadId changes
-  useEffect(() => {
-    if (!threadId) {
-      setMessages([]);
-      setParentMessage(null);
-      return;
-    }
-
-    const currentThreadId = threadId;
-
-    async function loadMessages() {
-      const parent = await Messages().get(currentThreadId);
-      setParentMessage(parent || null);
-
-      const msgs = await Messages().list(
-        { messageParentId: currentThreadId },
-        { sortBy: ["createdAt", "messageId"] },
-      );
-      setMessages(msgs);
-      scrollToBottom();
-    }
-
-    void loadMessages();
-
-    // Subscribe to message changes
-    const sub = Messages().dataChanged.subscribe((evt) => {
-      if (
-        evt.dataObject.messageParentId === currentThreadId ||
-        evt.dataObject.messageId === currentThreadId
-      ) {
-        void loadMessages();
-      }
-    });
-
-    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";
-        return;
-      }
-
-      if (voiceState === "recording") {
-        await rpcServerCalls.voiceStopRecording();
-      } else if (voiceState === "speaking") {
-        await rpcServerCalls.voiceStopPlayback();
-      } else if (voiceState === "idle" || voiceState === "listening") {
-        await rpcServerCalls.voiceStartRecording();
-      }
-    } catch (e) {
-      console.error("Voice action failed:", e);
-    }
-  }, [voiceState]);
-
-  const startNewThread = useCallback(() => {
-    setThreadId(null);
-    setMessages([]);
-    setParentMessage(null);
-    // Clear in voice service and pvar
-    rpcServerCalls.voiceSetThreadId?.(null).catch(() => {});
-    getChatOverlayThreadPvar()(null);
-  }, []);
-
-  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);
-      }
-
-      // 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";
-    }
-  };
-
-  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 "";
-    }
-  };
-
-  const getButtonClass = (): string => {
-    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`;
-    }
-  };
-
-  const positionStyles: React.CSSProperties = {
-    position: "fixed",
-    zIndex: 1050,
-    bottom: `${overlayPosition.y}px`,
-    right: `${overlayPosition.x}px`,
-    cursor: isDragging ? "grabbing" : undefined,
-  };
-
-  return (
-    <div style={positionStyles}>
-      {/* Expanded chat panel */}
-      {isExpanded && (
-        <div
-          className="card shadow mb-2"
-          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
-                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"}`}
-                onClick={() => setShowSettings(!showSettings)}
-                title="Voice settings"
-              >
-                <i className="bi bi-gear"></i>
-              </button>
-              <small className="text-muted">
-                {showSettings ? "Settings" : threadId ? "Thread" : "New conversation"}
-              </small>
-            </div>
-            <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" }}>
-              {/* 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>
-                <div className="form-check form-switch mb-0">
-                  <input
-                    className="form-check-input"
-                    type="checkbox"
-                    id="voiceEnabledToggle"
-                    checked={voiceSettings.enabled}
-                    onChange={(e) => updateVoiceSetting("enabled", e.target.checked)}
-                    role="switch"
-                  />
-                  <label className="form-check-label" htmlFor="voiceEnabledToggle">
-                    {voiceSettings.enabled ? "On" : "Off"}
-                  </label>
-                </div>
-              </div>
-
-              {/* Voice Output Enabled Toggle - only when input is enabled */}
-              {voiceSettings.enabled && (
-                <div className="d-flex align-items-center justify-content-between mb-3 ms-2">
-                  <label className="form-label mb-0 small text-muted">Voice Output</label>
-                  <div className="form-check form-switch mb-0">
-                    <input
-                      className="form-check-input"
-                      type="checkbox"
-                      id="voiceOutputEnabledToggle"
-                      checked={voiceSettings.voiceOutputEnabled !== false}
-                      onChange={(e) => updateVoiceSetting("voiceOutputEnabled", e.target.checked)}
-                      role="switch"
-                    />
-                    <label className="form-check-label" htmlFor="voiceOutputEnabledToggle">
-                      {voiceSettings.voiceOutputEnabled !== false ? "On" : "Off"}
-                    </label>
-                  </div>
-                </div>
-              )}
-
-              {/* Wake Word Sensitivity */}
-              <div className="mb-3">
-                <label className="form-label small mb-1">
-                  Wake Word Sensitivity: {voiceSettings.wakeWordSensitivity.toFixed(2)}
-                </label>
-                <input
-                  type="range"
-                  className="form-range"
-                  min="0"
-                  max="1"
-                  step="0.05"
-                  value={voiceSettings.wakeWordSensitivity}
-                  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>
-                </div>
-              </div>
-
-              {/* Speech Detection Sensitivity */}
-              <div className="mb-2">
-                <label className="form-label small mb-1">
-                  Speech Detection: {voiceSettings.speechSensitivity.toFixed(2)}
-                </label>
-                <input
-                  type="range"
-                  className="form-range"
-                  min="0"
-                  max="1"
-                  step="0.05"
-                  value={voiceSettings.speechSensitivity}
-                  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>
-                </div>
-              </div>
-
-              <div className="text-center mt-3">
-                <a href="#settings?tab=voice" className="small text-muted">
-                  More voice settings <i className="bi bi-arrow-right"></i>
-                </a>
-              </div>
-            </div>
-          )}
-
-          {/* Messages area */}
-          {!showSettings && (
-            <div
-              ref={messagesContainerRef}
-              className="card-body p-2"
-              style={{
-                flex: 1,
-                overflowY: "auto",
-                maxHeight: "40vh",
-                minHeight: "100px",
-              }}
-            >
-              {/* Parent message if exists */}
-              {parentMessage && (
-                <>
-                  <MessageDisplay message={parentMessage} isThreadParent />
-                  <hr className="my-2" />
-                </>
-              )}
-
-              {/* Thread messages */}
-              {messages.map((message, index) => (
-                <MessageDisplay
-                  key={message.messageId}
-                  message={message}
-                  messageAbove={messages[index - 1]}
-                />
-              ))}
-
-              {/* Error display */}
-              {error && (
-                <div className="alert alert-danger py-1 px-2 small">
-                  <i className="bi bi-exclamation-triangle me-1"></i>
-                  {error}
-                </div>
-              )}
-
-              <div ref={messagesEndRef} />
-            </div>
-          )}
-
-          {/* Voice status bar - only show when not in settings */}
-          {!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"
-                      style={{ width: `${Math.min(100, volumeLevel * 500)}%` }}
-                    />
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-
-          {/* Compose area - only show when not in settings */}
-          {!showSettings && (
-            <div className="card-footer p-2">
-              <MessageCompose
-                channelId={me?.userId || "default"}
-                threadId={threadId || newid()}
-                onMessageSubmit={handleMessageSubmit}
-                initialMessage={pendingInitialMessage}
-                key={
-                  pendingInitialMessage ? `pre-${pendingInitialMessage.slice(0, 20)}` : "default"
-                }
-              />
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Floating button row */}
-      <div
-        className="d-flex gap-2 justify-content-end"
-        onMouseDown={handleDragStart}
-        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",
-            }}
-            onClick={handleVoiceClick}
-            title={getStateText()}
-          >
-            <i className={`bi ${getVoiceIcon()}`}></i>
-
-            {/* Pulsing animation for listening/recording */}
-            {(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",
-                }}
-              />
-            )}
-
-            {/* Processing spinner */}
-            {voiceState === "processing" && (
-              <span
-                className="spinner-border spinner-border-sm position-absolute"
-                style={{ top: "4px", right: "4px" }}
-              />
-            )}
-          </button>
-        )}
-
-        {/* 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",
-          }}
-          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>
-        </button>
-      </div>
-
-      {/* CSS for pulse animation */}
-      <style>{`
-        @keyframes pulse {
-          0% {
-            transform: scale(1);
-            opacity: 1;
-          }
-          100% {
-            transform: scale(1.5);
-            opacity: 0;
-          }
-        }
-      `}</style>
-    </div>
-  );
-};
-
-export default ChatOverlay;