@peers-app/peers-ui 0.19.10 → 0.19.13

package/dist/components/chat-overlay.js

@@ -1,477 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatOverlay = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * 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.
- */
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const lodash_1 = require("lodash");
-const react_1 = require("react");
-const globals_1 = require("../globals");
-const message_compose_1 = require("./messages/message-compose");
-const message_display_1 = require("./messages/message-display");
-const DEFAULT_VOICE_SETTINGS = {
-    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 = null;
-function getChatOverlayThreadPvar() {
-    if (!chatOverlayThreadPvar) {
-        chatOverlayThreadPvar = (0, peers_sdk_1.groupUserVar)("chatOverlayThreadId", {
-            defaultValue: null,
-        });
-    }
-    return chatOverlayThreadPvar;
-}
-const voiceHubActive = (0, peers_sdk_1.deviceVar)("voiceHub:active", { defaultValue: false });
-// Voice settings pvar (shared with voice-settings.tsx and voice-service.ts)
-const voiceSettingsPvar = (0, peers_sdk_1.userVar)("voiceSettings", {
-    defaultValue: DEFAULT_VOICE_SETTINGS,
-});
-const DEFAULT_POSITION = { x: 20, y: 20 };
-const overlayPositionPvar = (0, peers_sdk_1.deviceVar)("chatOverlayPosition", {
-    defaultValue: DEFAULT_POSITION,
-});
-const ChatOverlay = ({ position: _position = "bottom-right", }) => {
-    const [voiceState, setVoiceState] = (0, react_1.useState)("disabled");
-    const [_transcription, setTranscription] = (0, react_1.useState)("");
-    const [volumeLevel, setVolumeLevel] = (0, react_1.useState)(0);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
-    const [showSettings, setShowSettings] = (0, react_1.useState)(false);
-    const [threadId, setThreadId] = (0, react_1.useState)(null);
-    const [messages, setMessages] = (0, react_1.useState)([]);
-    const [parentMessage, setParentMessage] = (0, react_1.useState)(null);
-    const [voiceSettings, setVoiceSettings] = (0, react_1.useState)(DEFAULT_VOICE_SETTINGS);
-    const [overlayPosition, setOverlayPosition] = (0, react_1.useState)(DEFAULT_POSITION);
-    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const [pendingInitialMessage, setPendingInitialMessage] = (0, react_1.useState)(undefined);
-    const messagesEndRef = (0, react_1.useRef)(null);
-    const messagesContainerRef = (0, react_1.useRef)(null);
-    const currentAudioRef = (0, react_1.useRef)(null);
-    const dragStartRef = (0, react_1.useRef)(null);
-    const scrollToBottom = (0, react_1.useCallback)(() => {
-        setTimeout(() => {
-            messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-        }, 100);
-    }, []);
-    // Load thread from pvar on mount
-    (0, react_1.useEffect)(() => {
-        const pvar = getChatOverlayThreadPvar();
-        pvar.loadingPromise.then(() => {
-            const savedThreadId = pvar();
-            if (savedThreadId) {
-                setThreadId(savedThreadId);
-                // Also sync to voice service
-                peers_sdk_1.rpcServerCalls.voiceSetThreadId?.(savedThreadId).catch(() => { });
-            }
-        });
-        // Subscribe to pvar changes (from other devices)
-        const sub = pvar.subscribe((newThreadId) => {
-            if (newThreadId !== threadId) {
-                setThreadId(newThreadId);
-                peers_sdk_1.rpcServerCalls.voiceSetThreadId?.(newThreadId).catch(() => { });
-            }
-        });
-        return () => sub.dispose();
-    }, [threadId]);
-    // Load voice settings from pvar
-    (0, react_1.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
-    (0, react_1.useEffect)(() => {
-        overlayPositionPvar.loadingPromise.then(() => {
-            const saved = overlayPositionPvar();
-            if (saved) {
-                setOverlayPosition(saved);
-            }
-        });
-    }, []);
-    // Drag handlers
-    const handleDragStart = (0, react_1.useCallback)((e) => {
-        // 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]);
-    (0, react_1.useEffect)(() => {
-        if (!isDragging)
-            return;
-        const handleMouseMove = (e) => {
-            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
-    (0, react_1.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
-    (0, react_1.useEffect)(() => {
-        const subscriptions = [
-            (0, peers_sdk_1.subscribe)("chat:openWithMessage", (event) => {
-                const { message } = event.data || {};
-                if (message) {
-                    const text = typeof message === "string" ? message : message.message;
-                    setPendingInitialMessage(text);
-                }
-                setIsExpanded(true);
-                setShowSettings(false);
-            }),
-            (0, peers_sdk_1.subscribe)("voice:stateChanged", (event) => {
-                setVoiceState(event.data.state);
-                if (event.data.state === "idle") {
-                    setTranscription("");
-                    setError(null);
-                }
-                if (event.data.state === "recording" && !voiceHubActive()) {
-                    setIsExpanded(true);
-                }
-            }),
-            (0, peers_sdk_1.subscribe)("voice:transcription", (event) => {
-                setTranscription(event.data.text);
-            }),
-            (0, peers_sdk_1.subscribe)("voice:volumeLevel", (event) => {
-                setVolumeLevel(event.data.level);
-            }),
-            (0, peers_sdk_1.subscribe)("voice:error", (event) => {
-                setError(event.data.message);
-            }),
-            (0, peers_sdk_1.subscribe)("voice:threadChanged", (event) => {
-                const newThreadId = event.data.threadId;
-                setThreadId(newThreadId);
-                // Sync to pvar
-                const pvar = getChatOverlayThreadPvar();
-                pvar(newThreadId);
-            }),
-        ];
-        // Load initial state
-        peers_sdk_1.rpcServerCalls
-            .voiceGetState()
-            .then(({ state }) => {
-            setVoiceState(state);
-        })
-            .catch(() => { });
-        // Load initial thread from voice service
-        peers_sdk_1.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
-    (0, react_1.useEffect)(() => {
-        const speakHandler = (0, peers_sdk_1.subscribe)("voice:speakText", (event) => {
-            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 = () => {
-                    peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
-                };
-                utterance.onerror = () => {
-                    peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
-                };
-                speechSynthesis.speak(utterance);
-            }
-            else {
-                peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
-            }
-        });
-        const stopHandler = (0, peers_sdk_1.subscribe)("voice:stopSpeaking", () => {
-            if ("speechSynthesis" in window) {
-                speechSynthesis.cancel();
-            }
-            if (currentAudioRef.current) {
-                currentAudioRef.current.pause();
-                currentAudioRef.current = null;
-            }
-        });
-        const playHandler = (0, peers_sdk_1.subscribe)("voice:playAudio", async (event) => {
-            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;
-                    peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
-                };
-                await audio.play();
-            }
-            catch (e) {
-                console.error("Failed to play audio:", e);
-                currentAudioRef.current = null;
-                peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
-            }
-        });
-        return () => {
-            speakHandler.unsubscribe();
-            stopHandler.unsubscribe();
-            playHandler.unsubscribe();
-        };
-    }, []);
-    // Load messages when threadId changes
-    (0, react_1.useEffect)(() => {
-        if (!threadId) {
-            setMessages([]);
-            setParentMessage(null);
-            return;
-        }
-        const currentThreadId = threadId;
-        async function loadMessages() {
-            const parent = await (0, peers_sdk_1.Messages)().get(currentThreadId);
-            setParentMessage(parent || null);
-            const msgs = await (0, peers_sdk_1.Messages)().list({ messageParentId: currentThreadId }, { sortBy: ["createdAt", "messageId"] });
-            setMessages(msgs);
-            scrollToBottom();
-        }
-        void loadMessages();
-        // Subscribe to message changes
-        const sub = (0, peers_sdk_1.Messages)().dataChanged.subscribe((evt) => {
-            if (evt.dataObject.messageParentId === currentThreadId ||
-                evt.dataObject.messageId === currentThreadId) {
-                void loadMessages();
-            }
-        });
-        return () => {
-            sub.unsubscribe();
-        };
-    }, [threadId, scrollToBottom]);
-    const updateVoiceSetting = (0, react_1.useCallback)((key, value) => {
-        const newSettings = { ...voiceSettings, [key]: value };
-        setVoiceSettings(newSettings);
-        voiceSettingsPvar(newSettings);
-    }, [voiceSettings]);
-    const handleVoiceClick = (0, react_1.useCallback)(async () => {
-        try {
-            if (voiceState === "disabled") {
-                window.location.hash = "#settings?tab=voice";
-                return;
-            }
-            if (voiceState === "recording") {
-                await peers_sdk_1.rpcServerCalls.voiceStopRecording();
-            }
-            else if (voiceState === "speaking") {
-                await peers_sdk_1.rpcServerCalls.voiceStopPlayback();
-            }
-            else if (voiceState === "idle" || voiceState === "listening") {
-                await peers_sdk_1.rpcServerCalls.voiceStartRecording();
-            }
-        }
-        catch (e) {
-            console.error("Voice action failed:", e);
-        }
-    }, [voiceState]);
-    const startNewThread = (0, react_1.useCallback)(() => {
-        setThreadId(null);
-        setMessages([]);
-        setParentMessage(null);
-        // Clear in voice service and pvar
-        peers_sdk_1.rpcServerCalls.voiceSetThreadId?.(null).catch(() => { });
-        getChatOverlayThreadPvar()(null);
-    }, []);
-    const handleMessageSubmit = (0, react_1.useCallback)(async (message) => {
-        // Notify voice service of text activity (resets inactivity timer)
-        peers_sdk_1.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 (0, peers_sdk_1.Messages)().save(message);
-            setThreadId(message.messageId);
-            // Sync to voice service and pvar
-            peers_sdk_1.rpcServerCalls.voiceSetThreadId?.(message.messageId).catch(() => { });
-            getChatOverlayThreadPvar()(message.messageId);
-        }
-        else {
-            message.messageParentId = threadId;
-            await (0, peers_sdk_1.Messages)().save(message);
-        }
-        // Add to local state immediately for responsiveness
-        setMessages((prev) => (0, lodash_1.sortBy)([...prev, message], "createdAt"));
-        scrollToBottom();
-    }, [threadId, scrollToBottom]);
-    const getVoiceIcon = () => {
-        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 = () => {
-        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 = () => {
-        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 = {
-        position: "fixed",
-        zIndex: 1050,
-        bottom: `${overlayPosition.y}px`,
-        right: `${overlayPosition.x}px`,
-        cursor: isDragging ? "grabbing" : undefined,
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: positionStyles, children: [isExpanded && ((0, jsx_runtime_1.jsxs)("div", { className: "card shadow mb-2", style: {
-                    width: "400px",
-                    maxHeight: "70vh",
-                    backgroundColor: "var(--bs-body-bg)",
-                    display: "flex",
-                    flexDirection: "column",
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header py-2 px-3 d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-secondary", onClick: startNewThread, title: "Start new thread", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-plus-lg" }) }), (0, jsx_runtime_1.jsx)("button", { className: `btn btn-sm ${showSettings ? "btn-secondary" : "btn-outline-secondary"}`, onClick: () => setShowSettings(!showSettings), title: "Voice settings", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-gear" }) }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: showSettings ? "Settings" : threadId ? "Thread" : "New conversation" })] }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-link p-0", onClick: () => setIsExpanded(false), children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-chevron-down" }) })] }), showSettings && ((0, jsx_runtime_1.jsxs)("div", { className: "card-body p-3", style: { maxHeight: "50vh", overflowY: "auto" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-between mb-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label mb-0", children: "Voice Input" }), (0, jsx_runtime_1.jsxs)("div", { className: "form-check form-switch mb-0", children: [(0, jsx_runtime_1.jsx)("input", { className: "form-check-input", type: "checkbox", id: "voiceEnabledToggle", checked: voiceSettings.enabled, onChange: (e) => updateVoiceSetting("enabled", e.target.checked), role: "switch" }), (0, jsx_runtime_1.jsx)("label", { className: "form-check-label", htmlFor: "voiceEnabledToggle", children: voiceSettings.enabled ? "On" : "Off" })] })] }), voiceSettings.enabled && ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-between mb-3 ms-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label mb-0 small text-muted", children: "Voice Output" }), (0, jsx_runtime_1.jsxs)("div", { className: "form-check form-switch mb-0", children: [(0, jsx_runtime_1.jsx)("input", { className: "form-check-input", type: "checkbox", id: "voiceOutputEnabledToggle", checked: voiceSettings.voiceOutputEnabled !== false, onChange: (e) => updateVoiceSetting("voiceOutputEnabled", e.target.checked), role: "switch" }), (0, jsx_runtime_1.jsx)("label", { className: "form-check-label", htmlFor: "voiceOutputEnabledToggle", children: voiceSettings.voiceOutputEnabled !== false ? "On" : "Off" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label small mb-1", children: ["Wake Word Sensitivity: ", voiceSettings.wakeWordSensitivity.toFixed(2)] }), (0, jsx_runtime_1.jsx)("input", { type: "range", className: "form-range", min: "0", max: "1", step: "0.05", value: voiceSettings.wakeWordSensitivity, onChange: (e) => updateVoiceSetting("wakeWordSensitivity", parseFloat(e.target.value)) }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", style: { fontSize: "0.7rem" }, children: "Less sensitive" }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", style: { fontSize: "0.7rem" }, children: "More sensitive" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-2", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label small mb-1", children: ["Speech Detection: ", voiceSettings.speechSensitivity.toFixed(2)] }), (0, jsx_runtime_1.jsx)("input", { type: "range", className: "form-range", min: "0", max: "1", step: "0.05", value: voiceSettings.speechSensitivity, onChange: (e) => updateVoiceSetting("speechSensitivity", parseFloat(e.target.value)) }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", style: { fontSize: "0.7rem" }, children: "Quiet (louder speech)" }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", style: { fontSize: "0.7rem" }, children: "Noisy (softer speech)" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-center mt-3", children: (0, jsx_runtime_1.jsxs)("a", { href: "#settings?tab=voice", className: "small text-muted", children: ["More voice settings ", (0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-right" })] }) })] })), !showSettings && ((0, jsx_runtime_1.jsxs)("div", { ref: messagesContainerRef, className: "card-body p-2", style: {
-                            flex: 1,
-                            overflowY: "auto",
-                            maxHeight: "40vh",
-                            minHeight: "100px",
-                        }, children: [parentMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(message_display_1.MessageDisplay, { message: parentMessage, isThreadParent: true }), (0, jsx_runtime_1.jsx)("hr", { className: "my-2" })] })), messages.map((message, index) => ((0, jsx_runtime_1.jsx)(message_display_1.MessageDisplay, { message: message, messageAbove: messages[index - 1] }, message.messageId))), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-1 px-2 small", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-1" }), error] })), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] })), !showSettings && voiceState !== "disabled" && voiceState !== "idle" && ((0, jsx_runtime_1.jsx)("div", { className: "px-3 py-1 border-top", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: getStateText() }), voiceState === "recording" && ((0, jsx_runtime_1.jsx)("div", { className: "progress flex-grow-1", style: { height: "4px" }, children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar bg-danger", style: { width: `${Math.min(100, volumeLevel * 500)}%` } }) }))] }) })), !showSettings && ((0, jsx_runtime_1.jsx)("div", { className: "card-footer p-2", children: (0, jsx_runtime_1.jsx)(message_compose_1.MessageCompose, { channelId: globals_1.me?.userId || "default", threadId: threadId || (0, peers_sdk_1.newid)(), onMessageSubmit: handleMessageSubmit, initialMessage: pendingInitialMessage }, pendingInitialMessage ? `pre-${pendingInitialMessage.slice(0, 20)}` : "default") }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-end", onMouseDown: handleDragStart, style: { userSelect: isDragging ? "none" : undefined }, children: [voiceSettings.enabled && isExpanded && ((0, jsx_runtime_1.jsxs)("button", { className: getButtonClass(), style: {
-                            width: "56px",
-                            height: "56px",
-                            fontSize: "24px",
-                            transition: "all 0.2s ease",
-                            position: "relative",
-                        }, onClick: handleVoiceClick, title: getStateText(), children: [(0, jsx_runtime_1.jsx)("i", { className: `bi ${getVoiceIcon()}` }), (voiceState === "listening" || voiceState === "recording") && ((0, jsx_runtime_1.jsx)("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",
-                                } })), voiceState === "processing" && ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm position-absolute", style: { top: "4px", right: "4px" } }))] })), (0, jsx_runtime_1.jsx)("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)", children: (0, jsx_runtime_1.jsx)("i", { className: `bi ${isExpanded ? "bi-chat-dots-fill" : "bi-chat-dots"}` }) })] }), (0, jsx_runtime_1.jsx)("style", { children: `
-        @keyframes pulse {
-          0% {
-            transform: scale(1);
-            opacity: 1;
-          }
-          100% {
-            transform: scale(1.5);
-            opacity: 0;
-          }
-        }
-      ` })] }));
-};
-exports.ChatOverlay = ChatOverlay;
-exports.default = exports.ChatOverlay;