@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/typeahead.js

@@ -1,40 +1,8 @@
 "use strict";
-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.Typeahead = Typeahead;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 // CSS for hover effects that work with both light and dark themes
 const typeaheadStyles = `
   .typeahead-item:not(.bg-primary):hover {
@@ -88,8 +56,8 @@ const typeaheadStyles = `
   }
 `;
 function Typeahead(props) {
-    const { placeholder = "Search...", searchFn, onSelectionChange, renderItem, renderBadge, selectedItems = [], multiSelect = false, maxSelections, className = "form-control", disabled = false, minSearchLength = 1, debounceMs = 300, maxResults = 10 } = props;
-    const [query, setQuery] = (0, react_1.useState)('');
+    const { placeholder = "Search...", searchFn, onSelectionChange, renderItem, renderBadge, selectedItems = [], multiSelect = false, maxSelections, className = "form-control", disabled = false, minSearchLength = 1, debounceMs = 300, maxResults = 10, } = props;
+    const [query, setQuery] = (0, react_1.useState)("");
     const [results, setResults] = (0, react_1.useState)([]);
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(-1);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -100,9 +68,9 @@ function Typeahead(props) {
     const debounceRef = (0, react_1.useRef)();
     // Inject styles once
     (0, react_1.useEffect)(() => {
-        const styleId = 'typeahead-styles';
+        const styleId = "typeahead-styles";
         if (!document.getElementById(styleId)) {
-            const style = document.createElement('style');
+            const style = document.createElement("style");
             style.id = styleId;
             style.textContent = typeaheadStyles;
             document.head.appendChild(style);
@@ -119,14 +87,14 @@ function Typeahead(props) {
                 try {
                     const searchResults = await searchFn(query);
                     // Filter out already selected items
-                    const selectedIds = selectedItems.map(item => item.id);
-                    const filteredResults = searchResults.filter(item => !selectedIds.includes(item.id));
+                    const selectedIds = selectedItems.map((item) => item.id);
+                    const filteredResults = searchResults.filter((item) => !selectedIds.includes(item.id));
                     setResults(filteredResults.slice(0, maxResults));
                     setIsOpen(filteredResults.length > 0);
                     setSelectedIndex(-1);
                 }
                 catch (error) {
-                    console.error('Search error:', error);
+                    console.error("Search error:", error);
                     setResults([]);
                 }
                 finally {
@@ -153,19 +121,19 @@ function Typeahead(props) {
                 setSelectedIndex(-1);
             }
         }
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
     const handleKeyDown = (e) => {
         // Handle backspace to remove last selected item when input is empty
-        if (e.key === 'Backspace' && query === '' && selectedItems.length > 0) {
+        if (e.key === "Backspace" && query === "" && selectedItems.length > 0) {
             e.preventDefault();
             const lastItem = selectedItems[selectedItems.length - 1];
             handleRemove(lastItem);
             return;
         }
         // Handle tab to auto-select highlighted result (or first result if none highlighted)
-        if (e.key === 'Tab' && isOpen && results.length > 0) {
+        if (e.key === "Tab" && isOpen && results.length > 0) {
             e.preventDefault();
             const indexToSelect = selectedIndex >= 0 ? selectedIndex : 0;
             handleSelect(results[indexToSelect]);
@@ -174,21 +142,21 @@ function Typeahead(props) {
         if (!isOpen || results.length === 0)
             return;
         switch (e.key) {
-            case 'ArrowDown':
+            case "ArrowDown":
                 e.preventDefault();
-                setSelectedIndex(prev => prev < results.length - 1 ? prev + 1 : 0);
+                setSelectedIndex((prev) => (prev < results.length - 1 ? prev + 1 : 0));
                 break;
-            case 'ArrowUp':
+            case "ArrowUp":
                 e.preventDefault();
-                setSelectedIndex(prev => prev > 0 ? prev - 1 : results.length - 1);
+                setSelectedIndex((prev) => (prev > 0 ? prev - 1 : results.length - 1));
                 break;
-            case 'Enter':
+            case "Enter":
                 e.preventDefault();
                 if (selectedIndex >= 0 && selectedIndex < results.length) {
                     handleSelect(results[selectedIndex]);
                 }
                 break;
-            case 'Escape':
+            case "Escape":
                 e.preventDefault();
                 setIsOpen(false);
                 setSelectedIndex(-1);
@@ -210,21 +178,24 @@ function Typeahead(props) {
             newSelectedItems = [item];
         }
         onSelectionChange(newSelectedItems);
-        setQuery('');
+        setQuery("");
         setResults([]);
         setIsOpen(false);
         setSelectedIndex(-1);
         inputRef.current?.focus();
     };
     const handleRemove = (itemToRemove) => {
-        const newSelectedItems = selectedItems.filter(item => item.id !== itemToRemove.id);
+        const newSelectedItems = selectedItems.filter((item) => item.id !== itemToRemove.id);
         onSelectionChange(newSelectedItems);
         inputRef.current?.focus();
     };
     const defaultRenderBadge = (item) => {
-        // Extract display text - try common properties
-        const displayText = item.name || item.title || item.label || item.id;
-        return displayText;
+        const r = item;
+        const str = (k) => {
+            const v = r[k];
+            return typeof v === "string" ? v : undefined;
+        };
+        return str("name") || str("title") || str("label") || item.id;
     };
     const handleInputChange = (e) => {
         setQuery(e.target.value);
@@ -234,37 +205,25 @@ function Typeahead(props) {
             setIsOpen(true);
         }
     };
-    return (react_1.default.createElement("div", { ref: containerRef, className: "position-relative" },
-        react_1.default.createElement("div", { className: "typeahead-input-container", onClick: () => inputRef.current?.focus() },
-            selectedItems.map((item) => (react_1.default.createElement("div", { key: item.id, className: "badge bg-primary typeahead-badge d-flex align-items-center position-relative pe-4" },
-                react_1.default.createElement("span", null, renderBadge ? renderBadge(item) : defaultRenderBadge(item)),
-                react_1.default.createElement("button", { type: "button", className: "btn-close btn-close-white position-absolute", style: {
-                        right: '2px',
-                        top: '50%',
-                        transform: 'translateY(-50%)',
-                        fontSize: '0.5rem',
-                        width: '10px',
-                        height: '10px'
-                    }, onClick: (e) => {
-                        e.stopPropagation();
-                        handleRemove(item);
-                    }, disabled: disabled, "aria-label": "Remove" })))),
-            react_1.default.createElement("input", { ref: inputRef, type: "text", className: "typeahead-input", placeholder: selectedItems.length > 0 && !multiSelect ? "Selection made" : placeholder, value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, disabled: disabled || (!multiSelect && selectedItems.length > 0) }),
-            isLoading && (react_1.default.createElement("div", { className: "position-absolute", style: {
-                    right: '8px',
-                    top: '50%',
-                    transform: 'translateY(-50%)'
-                } },
-                react_1.default.createElement("div", { className: "spinner-border spinner-border-sm text-secondary", role: "status" },
-                    react_1.default.createElement("span", { className: "visually-hidden" }, "Loading..."))))),
-        isOpen && results.length > 0 && (react_1.default.createElement("div", { ref: resultsRef, className: "position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg", style: {
-                zIndex: 1000,
-                maxHeight: '300px',
-                overflowY: 'auto'
-            } }, results.map((item, index) => (react_1.default.createElement("div", { key: item.id, className: `px-3 py-2 border-bottom typeahead-item ${index === selectedIndex
-                ? 'bg-primary text-white'
-                : 'bg-body text-body'}`, style: {
-                cursor: 'pointer'
-            }, onClick: () => handleSelect(item), onMouseEnter: () => setSelectedIndex(index) }, renderItem(item, index === selectedIndex)))))),
-        isOpen && query.length >= minSearchLength && results.length === 0 && !isLoading && (react_1.default.createElement("div", { className: "position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg px-3 py-2 text-muted", style: { zIndex: 1000 } }, "No results found"))));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: "position-relative", children: [(0, jsx_runtime_1.jsxs)("div", { className: "typeahead-input-container", onClick: () => inputRef.current?.focus(), children: [selectedItems.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "badge bg-primary typeahead-badge d-flex align-items-center position-relative pe-4", children: [(0, jsx_runtime_1.jsx)("span", { children: renderBadge ? renderBadge(item) : defaultRenderBadge(item) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close btn-close-white position-absolute", style: {
+                                    right: "2px",
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                    fontSize: "0.5rem",
+                                    width: "10px",
+                                    height: "10px",
+                                }, onClick: (e) => {
+                                    e.stopPropagation();
+                                    handleRemove(item);
+                                }, disabled: disabled, "aria-label": "Remove" })] }, item.id))), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", className: `typeahead-input ${className}`, placeholder: selectedItems.length > 0 && !multiSelect ? "Selection made" : placeholder, value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, disabled: disabled || (!multiSelect && selectedItems.length > 0) }), isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "position-absolute", style: {
+                            right: "8px",
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "spinner-border spinner-border-sm text-secondary", role: "status", children: (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), isOpen && results.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: resultsRef, className: "position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg", style: {
+                    zIndex: 1000,
+                    maxHeight: "300px",
+                    overflowY: "auto",
+                }, children: results.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: `px-3 py-2 border-bottom typeahead-item ${index === selectedIndex ? "bg-primary text-white" : "bg-body text-body"}`, style: {
+                        cursor: "pointer",
+                    }, onClick: () => handleSelect(item), onMouseEnter: () => setSelectedIndex(index), children: renderItem(item, index === selectedIndex) }, item.id))) })), isOpen && query.length >= minSearchLength && results.length === 0 && !isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg px-3 py-2 text-muted", style: { zIndex: 1000 }, children: "No results found" }))] }));
 }

package/dist/components/voice-indicator.d.ts

@@ -4,10 +4,10 @@
  * Floating UI element showing voice input state.
  * Supports manual recording trigger via click.
  */
-import React from 'react';
+import React from "react";
 interface VoiceIndicatorProps {
     /** Position of the indicator */
-    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
     /** Show expanded view with transcription */
     showTranscription?: boolean;
 }

package/dist/components/voice-indicator.js

@@ -1,10 +1,4 @@
 "use strict";
-/**
- * Voice Indicator Component
- *
- * Floating UI element showing voice input state.
- * Supports manual recording trigger via click.
- */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -40,11 +34,18 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VoiceIndicator = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Voice Indicator Component
+ *
+ * Floating UI element showing voice input state.
+ * Supports manual recording trigger via click.
+ */
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const VoiceIndicator = ({ position = 'bottom-right', showTranscription = true, }) => {
-    const [state, setState] = (0, react_1.useState)('disabled');
-    const [transcription, setTranscription] = (0, react_1.useState)('');
+const react_1 = __importStar(require("react"));
+const VoiceIndicator = ({ position = "bottom-right", showTranscription = true, }) => {
+    const [state, setState] = (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);
@@ -53,45 +54,50 @@ const VoiceIndicator = ({ position = 'bottom-right', showTranscription = true, }
     // Subscribe to voice events
     (0, react_1.useEffect)(() => {
         const subscriptions = [
-            (0, peers_sdk_1.subscribe)('voice:stateChanged', (event) => {
+            (0, peers_sdk_1.subscribe)("voice:stateChanged", (event) => {
                 setState(event.data.state);
-                if (event.data.state === 'idle') {
-                    setTranscription('');
+                if (event.data.state === "idle") {
+                    setTranscription("");
                     setError(null);
                 }
-                if (event.data.state === 'recording') {
+                if (event.data.state === "recording") {
                     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);
             }),
         ];
         // Load initial state
-        peers_sdk_1.rpcServerCalls.voiceGetState().then(({ state }) => {
+        peers_sdk_1.rpcServerCalls
+            .voiceGetState()
+            .then(({ state }) => {
             setState(state);
-        }).catch(() => {
+        })
+            .catch(() => {
             // Voice service may not be initialized yet
         });
         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;
                 }
@@ -112,9 +118,9 @@ const VoiceIndicator = ({ position = 'bottom-right', showTranscription = true, }
                 peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
             }
         });
-        const stopHandler = (0, peers_sdk_1.subscribe)('voice:stopSpeaking', () => {
+        const stopHandler = (0, peers_sdk_1.subscribe)("voice:stopSpeaking", () => {
             // Stop browser TTS
-            if ('speechSynthesis' in window) {
+            if ("speechSynthesis" in window) {
                 speechSynthesis.cancel();
             }
             // Stop cloud TTS audio if playing
@@ -123,10 +129,10 @@ const VoiceIndicator = ({ position = 'bottom-right', showTranscription = true, }
                 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);
@@ -141,7 +147,7 @@ const VoiceIndicator = ({ position = 'bottom-right', showTranscription = true, }
                 await audio.play();
             }
             catch (e) {
-                console.error('Failed to play audio:', e);
+                console.error("Failed to play audio:", e);
                 currentAudioRef.current = null;
                 // Still notify on error so we don't hang
                 peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
@@ -155,124 +161,105 @@ const VoiceIndicator = ({ position = 'bottom-right', showTranscription = true, }
     }, []);
     const handleClick = (0, react_1.useCallback)(async () => {
         try {
-            if (state === 'disabled') {
+            if (state === "disabled") {
                 // Open settings
-                window.location.hash = '#/settings/voice';
+                window.location.hash = "#/settings/voice";
                 return;
             }
-            if (state === 'recording') {
+            if (state === "recording") {
                 await peers_sdk_1.rpcServerCalls.voiceStopRecording();
             }
-            else if (state === 'speaking') {
+            else if (state === "speaking") {
                 await peers_sdk_1.rpcServerCalls.voiceStopPlayback();
             }
-            else if (state === 'idle' || state === 'listening') {
+            else if (state === "idle" || state === "listening") {
                 await peers_sdk_1.rpcServerCalls.voiceStartRecording();
             }
         }
         catch (e) {
-            console.error('Voice action failed:', e);
+            console.error("Voice action failed:", e);
         }
     }, [state]);
     const getIcon = () => {
         switch (state) {
-            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';
+            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';
+                return "bi-mic";
         }
     };
     const getStateText = () => {
         switch (state) {
-            case 'disabled':
-                return 'Voice disabled';
-            case 'idle':
+            case "disabled":
+                return "Voice disabled";
+            case "idle":
                 return 'Say "Porcupine" or click';
-            case 'listening':
-                return 'Listening...';
-            case 'recording':
-                return 'Recording...';
-            case 'processing':
-                return 'Processing...';
-            case 'speaking':
-                return 'Speaking... (click to stop)';
+            case "listening":
+                return "Listening...";
+            case "recording":
+                return "Recording...";
+            case "processing":
+                return "Processing...";
+            case "speaking":
+                return "Speaking... (click to stop)";
             default:
-                return '';
+                return "";
         }
     };
     const getButtonClass = () => {
-        const base = 'btn rounded-circle shadow';
+        const base = "btn rounded-circle shadow";
         switch (state) {
-            case 'disabled':
+            case "disabled":
                 return `${base} btn-secondary`;
-            case 'idle':
+            case "idle":
                 return `${base} btn-outline-primary`;
-            case 'listening':
+            case "listening":
                 return `${base} btn-info`;
-            case 'recording':
+            case "recording":
                 return `${base} btn-danger`;
-            case 'processing':
+            case "processing":
                 return `${base} btn-warning`;
-            case 'speaking':
+            case "speaking":
                 return `${base} btn-success`;
             default:
                 return `${base} btn-secondary`;
         }
     };
     const positionStyles = {
-        position: 'fixed',
+        position: "fixed",
         zIndex: 1050,
-        ...(position.includes('bottom') ? { bottom: '20px' } : { top: '70px' }),
-        ...(position.includes('right') ? { right: '20px' } : { left: '20px' }),
+        ...(position.includes("bottom") ? { bottom: "20px" } : { top: "70px" }),
+        ...(position.includes("right") ? { right: "20px" } : { left: "20px" }),
     };
     // Don't render if disabled and not showing
     // Actually, let's always show so users can click to enable
-    return (react_1.default.createElement("div", { style: positionStyles },
-        isExpanded && state !== 'disabled' && (react_1.default.createElement("div", { className: "card shadow mb-2", style: {
-                width: '280px',
-                backgroundColor: 'var(--bs-body-bg)',
-            } },
-            react_1.default.createElement("div", { className: "card-body py-2 px-3" },
-                react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-2" },
-                    react_1.default.createElement("small", { className: "text-muted" }, getStateText()),
-                    react_1.default.createElement("button", { className: "btn btn-sm btn-link p-0", onClick: () => setIsExpanded(false) },
-                        react_1.default.createElement("i", { className: "bi bi-x" }))),
-                state === 'recording' && (react_1.default.createElement("div", { className: "progress mb-2", style: { height: '4px' } },
-                    react_1.default.createElement("div", { className: "progress-bar bg-danger", style: { width: `${Math.min(100, volumeLevel * 500)}%` } }))),
-                showTranscription && transcription && (react_1.default.createElement("div", { className: "small" },
-                    react_1.default.createElement("i", { className: "bi bi-quote me-1" }),
-                    transcription)),
-                error && (react_1.default.createElement("div", { className: "small text-danger" },
-                    react_1.default.createElement("i", { className: "bi bi-exclamation-triangle me-1" }),
-                    error))))),
-        react_1.default.createElement("button", { className: getButtonClass(), style: {
-                width: '56px',
-                height: '56px',
-                fontSize: '24px',
-                transition: 'all 0.2s ease',
-            }, onClick: handleClick, title: getStateText() },
-            react_1.default.createElement("i", { className: `bi ${getIcon()}` }),
-            (state === 'listening' || state === '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',
-                } })),
-            state === 'processing' && (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm position-absolute", style: { top: '4px', right: '4px' } }))),
-        react_1.default.createElement("style", null, `
+    return ((0, jsx_runtime_1.jsxs)("div", { style: positionStyles, children: [isExpanded && state !== "disabled" && ((0, jsx_runtime_1.jsx)("div", { className: "card shadow mb-2", style: {
+                    width: "280px",
+                    backgroundColor: "var(--bs-body-bg)",
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body py-2 px-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-2", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: getStateText() }), (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-x" }) })] }), state === "recording" && ((0, jsx_runtime_1.jsx)("div", { className: "progress mb-2", style: { height: "4px" }, children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar bg-danger", style: { width: `${Math.min(100, volumeLevel * 500)}%` } }) })), showTranscription && transcription && ((0, jsx_runtime_1.jsxs)("div", { className: "small", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-quote me-1" }), transcription] })), error && ((0, jsx_runtime_1.jsxs)("div", { className: "small text-danger", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-1" }), error] }))] }) })), (0, jsx_runtime_1.jsxs)("button", { className: getButtonClass(), style: {
+                    width: "56px",
+                    height: "56px",
+                    fontSize: "24px",
+                    transition: "all 0.2s ease",
+                }, onClick: handleClick, title: getStateText(), children: [(0, jsx_runtime_1.jsx)("i", { className: `bi ${getIcon()}` }), (state === "listening" || state === "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",
+                        } })), state === "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)("style", { children: `
         @keyframes pulse {
           0% {
             transform: scale(1);
@@ -283,7 +270,7 @@ const VoiceIndicator = ({ position = 'bottom-right', showTranscription = true, }
             opacity: 0;
           }
         }
-      `)));
+      ` })] }));
 };
 exports.VoiceIndicator = VoiceIndicator;
 exports.default = exports.VoiceIndicator;

package/dist/components/voice-subscribe-events.d.ts

@@ -0,0 +1,32 @@
+import type { IMessage } from "@peers-app/peers-sdk";
+/** Shape passed to `subscribe` handlers for voice / chat IPC events */
+export type VoiceSubscribeEvent<T> = {
+    data: T;
+};
+export type ChatOpenWithMessagePayload = {
+    message?: IMessage;
+};
+export type VoiceStatePayload = {
+    state: string;
+};
+export type VoiceTranscriptionPayload = {
+    text: string;
+};
+export type VoiceVolumePayload = {
+    level: number;
+};
+export type VoiceErrorPayload = {
+    message: string;
+};
+export type VoiceThreadPayload = {
+    threadId: string;
+};
+export type VoiceSpeakPayload = {
+    text: string;
+    voice?: string;
+    rate?: number;
+};
+export type VoicePlayAudioPayload = {
+    audioBase64: string;
+    mimeType: string;
+};

package/dist/components/voice-subscribe-events.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/globals.d.ts

@@ -1,10 +1,8 @@
-import { IMessage, IUser, PersistentVar } from "@peers-app/peers-sdk";
+import { type IMessage, type IUser } from "@peers-app/peers-sdk";
 export declare const packageReloaded: import("@peers-app/peers-sdk").Observable<number>;
-export declare const _mainContentPath: PersistentVar<string>;
+export declare const _mainContentPath: import("@peers-app/peers-sdk").PersistentVar<string>;
 export declare const mainContentPath: import("@peers-app/peers-sdk").Observable<string>;
 export declare function queryParam(name: string, value?: string): string;
-export declare const openThreads: PersistentVar<(string | IMessage)[]>;
-export declare const threadViewOpen: PersistentVar<boolean>;
 export declare function openThread(thread: string | IMessage): Promise<void>;
 export declare function openThreadInTab(thread: string | IMessage): Promise<void>;
 export declare let me: IUser;
@@ -16,9 +14,9 @@ export declare const groups: import("@peers-app/peers-sdk").Observable<{
     description: string;
     publicKey: string;
     signature: string;
-    publicBoxKey: string;
     groupId: string;
     founderUserId: string;
+    publicBoxKey: string;
     disabled?: boolean | undefined;
     iconClassName?: string | undefined;
     publicRole?: import("@peers-app/peers-sdk").GroupMemberRole | undefined;