@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/chat-overlay.js

@@ -1,4 +1,7 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatOverlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Chat Overlay Component
  *
@@ -6,73 +9,44 @@
  * Shows minimized voice button that expands to full chat overlay.
  * Supports both voice and text input in the same thread.
  */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatOverlay = void 0;
-const react_1 = __importStar(require("react"));
 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 globals_1 = require("../globals");
-const lodash_1 = require("lodash");
 const DEFAULT_VOICE_SETTINGS = {
     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,
 };
 // 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 });
+        chatOverlayThreadPvar = (0, peers_sdk_1.groupUserVar)("chatOverlayThreadId", {
+            defaultValue: null,
+        });
     }
     return chatOverlayThreadPvar;
 }
-const voiceHubActive = (0, peers_sdk_1.deviceVar)('voiceHub:active', { defaultValue: false });
+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 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 = 'bottom-right', }) => {
-    const [voiceState, setVoiceState] = (0, react_1.useState)('disabled');
-    const [transcription, setTranscription] = (0, react_1.useState)('');
+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);
@@ -88,6 +62,11 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
     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();
@@ -107,7 +86,7 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
             }
         });
         return () => sub.dispose();
-    }, []);
+    }, [threadId]);
     // Load voice settings from pvar
     (0, react_1.useEffect)(() => {
         voiceSettingsPvar.loadingPromise.then(() => {
@@ -165,11 +144,11 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
             // Save position
             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]);
     // Scroll to bottom when expanded or messages change
@@ -182,38 +161,39 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
                 }
             }, 50);
         }
-    }, [isExpanded, messages, parentMessage]);
+    }, [isExpanded]);
     // Subscribe to voice events
     (0, react_1.useEffect)(() => {
         const subscriptions = [
-            (0, peers_sdk_1.subscribe)('chat:openWithMessage', (event) => {
+            (0, peers_sdk_1.subscribe)("chat:openWithMessage", (event) => {
                 const { message } = event.data || {};
                 if (message) {
-                    setPendingInitialMessage(message);
+                    const text = typeof message === "string" ? message : message.message;
+                    setPendingInitialMessage(text);
                 }
                 setIsExpanded(true);
                 setShowSettings(false);
             }),
-            (0, peers_sdk_1.subscribe)('voice:stateChanged', (event) => {
+            (0, peers_sdk_1.subscribe)("voice:stateChanged", (event) => {
                 setVoiceState(event.data.state);
-                if (event.data.state === 'idle') {
-                    setTranscription('');
+                if (event.data.state === "idle") {
+                    setTranscription("");
                     setError(null);
                 }
-                if (event.data.state === 'recording' && !voiceHubActive()) {
+                if (event.data.state === "recording" && !voiceHubActive()) {
                     setIsExpanded(true);
                 }
             }),
-            (0, peers_sdk_1.subscribe)('voice:transcription', (event) => {
+            (0, peers_sdk_1.subscribe)("voice:transcription", (event) => {
                 setTranscription(event.data.text);
             }),
-            (0, peers_sdk_1.subscribe)('voice:volumeLevel', (event) => {
+            (0, peers_sdk_1.subscribe)("voice:volumeLevel", (event) => {
                 setVolumeLevel(event.data.level);
             }),
-            (0, peers_sdk_1.subscribe)('voice:error', (event) => {
+            (0, peers_sdk_1.subscribe)("voice:error", (event) => {
                 setError(event.data.message);
             }),
-            (0, peers_sdk_1.subscribe)('voice:threadChanged', (event) => {
+            (0, peers_sdk_1.subscribe)("voice:threadChanged", (event) => {
                 const newThreadId = event.data.threadId;
                 setThreadId(newThreadId);
                 // Sync to pvar
@@ -222,30 +202,38 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
             }),
         ];
         // Load initial state
-        peers_sdk_1.rpcServerCalls.voiceGetState().then(({ state }) => {
+        peers_sdk_1.rpcServerCalls
+            .voiceGetState()
+            .then(({ state }) => {
             setVoiceState(state);
-        }).catch(() => { });
+        })
+            .catch(() => { });
         // Load initial thread from voice service
-        peers_sdk_1.rpcServerCalls.voiceGetThreadId?.().then((id) => {
+        peers_sdk_1.rpcServerCalls
+            .voiceGetThreadId?.()
+            .then((id) => {
             if (id) {
                 setThreadId(id);
                 const pvar = getChatOverlayThreadPvar();
                 pvar(id);
             }
-        }).catch(() => { });
+        })
+            .catch(() => { });
         return () => {
-            subscriptions.forEach(sub => sub.unsubscribe());
+            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 speakHandler = (0, peers_sdk_1.subscribe)("voice:speakText", (event) => {
             const { text, voice, rate } = event.data;
-            if ('speechSynthesis' in window) {
+            if ("speechSynthesis" in window) {
                 const utterance = new SpeechSynthesisUtterance(text);
                 if (voice) {
                     const voices = speechSynthesis.getVoices();
-                    const selectedVoice = voices.find(v => v.name === voice);
+                    const selectedVoice = voices.find((v) => v.name === voice);
                     if (selectedVoice)
                         utterance.voice = selectedVoice;
                 }
@@ -263,8 +251,8 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
                 peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
             }
         });
-        const stopHandler = (0, peers_sdk_1.subscribe)('voice:stopSpeaking', () => {
-            if ('speechSynthesis' in window) {
+        const stopHandler = (0, peers_sdk_1.subscribe)("voice:stopSpeaking", () => {
+            if ("speechSynthesis" in window) {
                 speechSynthesis.cancel();
             }
             if (currentAudioRef.current) {
@@ -272,10 +260,10 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
                 currentAudioRef.current = null;
             }
         });
-        const playHandler = (0, peers_sdk_1.subscribe)('voice:playAudio', async (event) => {
+        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 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);
@@ -288,7 +276,7 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
                 await audio.play();
             }
             catch (e) {
-                console.error('Failed to play audio:', e);
+                console.error("Failed to play audio:", e);
                 currentAudioRef.current = null;
                 peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
             }
@@ -306,27 +294,26 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
             setParentMessage(null);
             return;
         }
+        const currentThreadId = threadId;
         async function loadMessages() {
-            const parent = await (0, peers_sdk_1.Messages)().get(threadId);
+            const parent = await (0, peers_sdk_1.Messages)().get(currentThreadId);
             setParentMessage(parent || null);
-            const msgs = await (0, peers_sdk_1.Messages)().list({ messageParentId: threadId }, { sortBy: ['createdAt', 'messageId'] });
+            const msgs = await (0, peers_sdk_1.Messages)().list({ messageParentId: currentThreadId }, { sortBy: ["createdAt", "messageId"] });
             setMessages(msgs);
             scrollToBottom();
         }
-        loadMessages();
+        void loadMessages();
         // Subscribe to message changes
         const sub = (0, peers_sdk_1.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);
-    };
+        return () => {
+            sub.unsubscribe();
+        };
+    }, [threadId, scrollToBottom]);
     const updateVoiceSetting = (0, react_1.useCallback)((key, value) => {
         const newSettings = { ...voiceSettings, [key]: value };
         setVoiceSettings(newSettings);
@@ -334,22 +321,22 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
     }, [voiceSettings]);
     const handleVoiceClick = (0, react_1.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 peers_sdk_1.rpcServerCalls.voiceStopRecording();
             }
-            else if (voiceState === 'speaking') {
+            else if (voiceState === "speaking") {
                 await peers_sdk_1.rpcServerCalls.voiceStopPlayback();
             }
-            else if (voiceState === 'idle' || voiceState === 'listening') {
+            else if (voiceState === "idle" || voiceState === "listening") {
                 await peers_sdk_1.rpcServerCalls.voiceStartRecording();
             }
         }
         catch (e) {
-            console.error('Voice action failed:', e);
+            console.error("Voice action failed:", e);
         }
     }, [voiceState]);
     const startNewThread = (0, react_1.useCallback)(() => {
@@ -379,145 +366,101 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
             await (0, peers_sdk_1.Messages)().save(message);
         }
         // Add to local state immediately for responsiveness
-        setMessages(prev => (0, lodash_1.sortBy)([...prev, message], 'createdAt'));
+        setMessages((prev) => (0, lodash_1.sortBy)([...prev, message], "createdAt"));
         scrollToBottom();
-    }, [threadId]);
+    }, [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';
+            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 '';
+            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';
+        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 = {
-        position: 'fixed',
+        position: "fixed",
         zIndex: 1050,
         bottom: `${overlayPosition.y}px`,
         right: `${overlayPosition.x}px`,
-        cursor: isDragging ? 'grabbing' : undefined,
+        cursor: isDragging ? "grabbing" : undefined,
     };
-    return (react_1.default.createElement("div", { style: positionStyles },
-        isExpanded && (react_1.default.createElement("div", { className: "card shadow mb-2", style: {
-                width: '400px',
-                maxHeight: '70vh',
-                backgroundColor: 'var(--bs-body-bg)',
-                display: 'flex',
-                flexDirection: 'column',
-            } },
-            react_1.default.createElement("div", { className: "card-header py-2 px-3 d-flex justify-content-between align-items-center" },
-                react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
-                    react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", onClick: startNewThread, title: "Start new thread" },
-                        react_1.default.createElement("i", { className: "bi bi-plus-lg" })),
-                    react_1.default.createElement("button", { className: `btn btn-sm ${showSettings ? 'btn-secondary' : 'btn-outline-secondary'}`, onClick: () => setShowSettings(!showSettings), title: "Voice settings" },
-                        react_1.default.createElement("i", { className: "bi bi-gear" })),
-                    react_1.default.createElement("small", { className: "text-muted" }, showSettings ? 'Settings' : (threadId ? 'Thread' : 'New conversation'))),
-                react_1.default.createElement("button", { className: "btn btn-sm btn-link p-0", onClick: () => setIsExpanded(false) },
-                    react_1.default.createElement("i", { className: "bi bi-chevron-down" }))),
-            showSettings && (react_1.default.createElement("div", { className: "card-body p-3", style: { maxHeight: '50vh', overflowY: 'auto' } },
-                react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between mb-2" },
-                    react_1.default.createElement("label", { className: "form-label mb-0" }, "Voice Input"),
-                    react_1.default.createElement("div", { className: "form-check form-switch mb-0" },
-                        react_1.default.createElement("input", { className: "form-check-input", type: "checkbox", id: "voiceEnabledToggle", checked: voiceSettings.enabled, onChange: (e) => updateVoiceSetting('enabled', e.target.checked), role: "switch" }),
-                        react_1.default.createElement("label", { className: "form-check-label", htmlFor: "voiceEnabledToggle" }, voiceSettings.enabled ? 'On' : 'Off'))),
-                voiceSettings.enabled && (react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between mb-3 ms-2" },
-                    react_1.default.createElement("label", { className: "form-label mb-0 small text-muted" }, "Voice Output"),
-                    react_1.default.createElement("div", { className: "form-check form-switch mb-0" },
-                        react_1.default.createElement("input", { className: "form-check-input", type: "checkbox", id: "voiceOutputEnabledToggle", checked: voiceSettings.voiceOutputEnabled !== false, onChange: (e) => updateVoiceSetting('voiceOutputEnabled', e.target.checked), role: "switch" }),
-                        react_1.default.createElement("label", { className: "form-check-label", htmlFor: "voiceOutputEnabledToggle" }, voiceSettings.voiceOutputEnabled !== false ? 'On' : 'Off')))),
-                react_1.default.createElement("div", { className: "mb-3" },
-                    react_1.default.createElement("label", { className: "form-label small mb-1" },
-                        "Wake Word Sensitivity: ",
-                        voiceSettings.wakeWordSensitivity.toFixed(2)),
-                    react_1.default.createElement("input", { type: "range", className: "form-range", min: "0", max: "1", step: "0.05", value: voiceSettings.wakeWordSensitivity, onChange: (e) => updateVoiceSetting('wakeWordSensitivity', parseFloat(e.target.value)) }),
-                    react_1.default.createElement("div", { className: "d-flex justify-content-between" },
-                        react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '0.7rem' } }, "Less sensitive"),
-                        react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '0.7rem' } }, "More sensitive"))),
-                react_1.default.createElement("div", { className: "mb-2" },
-                    react_1.default.createElement("label", { className: "form-label small mb-1" },
-                        "Speech Detection: ",
-                        voiceSettings.speechSensitivity.toFixed(2)),
-                    react_1.default.createElement("input", { type: "range", className: "form-range", min: "0", max: "1", step: "0.05", value: voiceSettings.speechSensitivity, onChange: (e) => updateVoiceSetting('speechSensitivity', parseFloat(e.target.value)) }),
-                    react_1.default.createElement("div", { className: "d-flex justify-content-between" },
-                        react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '0.7rem' } }, "Quiet (louder speech)"),
-                        react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '0.7rem' } }, "Noisy (softer speech)"))),
-                react_1.default.createElement("div", { className: "text-center mt-3" },
-                    react_1.default.createElement("a", { href: "#settings?tab=voice", className: "small text-muted" },
-                        "More voice settings ",
-                        react_1.default.createElement("i", { className: "bi bi-arrow-right" }))))),
-            !showSettings && (react_1.default.createElement("div", { ref: messagesContainerRef, className: "card-body p-2", style: {
-                    flex: 1,
-                    overflowY: 'auto',
-                    maxHeight: '40vh',
-                    minHeight: '100px',
-                } },
-                parentMessage && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(message_display_1.MessageDisplay, { message: parentMessage, isThreadParent: true }),
-                    react_1.default.createElement("hr", { className: "my-2" }))),
-                messages.map((message, index) => (react_1.default.createElement(message_display_1.MessageDisplay, { key: message.messageId, message: message, messageAbove: messages[index - 1] }))),
-                error && (react_1.default.createElement("div", { className: "alert alert-danger py-1 px-2 small" },
-                    react_1.default.createElement("i", { className: "bi bi-exclamation-triangle me-1" }),
-                    error)),
-                react_1.default.createElement("div", { ref: messagesEndRef }))),
-            !showSettings && voiceState !== 'disabled' && voiceState !== 'idle' && (react_1.default.createElement("div", { className: "px-3 py-1 border-top" },
-                react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
-                    react_1.default.createElement("small", { className: "text-muted" }, getStateText()),
-                    voiceState === 'recording' && (react_1.default.createElement("div", { className: "progress flex-grow-1", style: { height: '4px' } },
-                        react_1.default.createElement("div", { className: "progress-bar bg-danger", style: { width: `${Math.min(100, volumeLevel * 500)}%` } })))))),
-            !showSettings && (react_1.default.createElement("div", { className: "card-footer p-2" },
-                react_1.default.createElement(message_compose_1.MessageCompose, { channelId: globals_1.me?.userId || 'default', threadId: threadId || (0, peers_sdk_1.newid)(), onMessageSubmit: handleMessageSubmit, initialMessage: pendingInitialMessage, key: pendingInitialMessage ? `pre-${pendingInitialMessage.slice(0, 20)}` : 'default' }))))),
-        react_1.default.createElement("div", { className: "d-flex gap-2 justify-content-end", onMouseDown: handleDragStart, style: { userSelect: isDragging ? 'none' : undefined } },
-            voiceSettings.enabled && isExpanded && (react_1.default.createElement("button", { className: getButtonClass(), style: {
-                    width: '56px',
-                    height: '56px',
-                    fontSize: '24px',
-                    transition: 'all 0.2s ease',
-                    position: 'relative',
-                }, onClick: handleVoiceClick, title: getStateText() },
-                react_1.default.createElement("i", { className: `bi ${getVoiceIcon()}` }),
-                (voiceState === 'listening' || voiceState === 'recording') && (react_1.default.createElement("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' && (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm position-absolute", style: { top: '4px', right: '4px' } })))),
-            react_1.default.createElement("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)" },
-                react_1.default.createElement("i", { className: `bi ${isExpanded ? 'bi-chat-dots-fill' : 'bi-chat-dots'}` }))),
-        react_1.default.createElement("style", null, `
+    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);
@@ -528,7 +471,7 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
             opacity: 0;
           }
         }
-      `)));
+      ` })] }));
 };
 exports.ChatOverlay = ChatOverlay;
 exports.default = exports.ChatOverlay;

package/dist/components/checkbox.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
-interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-    checked: any;
+import type { Observable } from "@peers-app/peers-sdk";
+import type React from "react";
+interface IProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "checked"> {
+    checked?: boolean | Observable<boolean | undefined>;
     type?: React.HTMLInputTypeAttribute;
 }
-export declare function Checkbox(props: IProps): React.JSX.Element;
+export declare function Checkbox(props: IProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/checkbox.js

@@ -1,20 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = Checkbox;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("../hooks");
 function Checkbox(props) {
     const [checked, setChecked] = (0, hooks_1.useObservable)(props.checked);
-    const type = props.type ?? 'checkbox';
+    const type = props.type ?? "checkbox";
     function onChange(evt) {
         let _value = evt.target.checked;
-        if (type === 'checkbox') {
+        if (type === "checkbox") {
             _value = !!_value;
         }
         setChecked(_value);
     }
-    return (react_1.default.createElement("input", { onChange: onChange, type: type, ...props, checked: checked }));
+    return (0, jsx_runtime_1.jsx)("input", { onChange: onChange, type: type, ...props, checked: checked });
 }