@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/voice-indicator.tsx

@@ -1,101 +1,118 @@
 /**
  * Voice Indicator Component
- * 
+ *
  * Floating UI element showing voice input state.
  * Supports manual recording trigger via click.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
-import { rpcServerCalls, subscribe } from '@peers-app/peers-sdk';
+import { rpcServerCalls, subscribe } from "@peers-app/peers-sdk";
+import React, { useCallback, useEffect, useState } from "react";
+import type {
+  VoiceErrorPayload,
+  VoicePlayAudioPayload,
+  VoiceSpeakPayload,
+  VoiceStatePayload,
+  VoiceSubscribeEvent,
+  VoiceTranscriptionPayload,
+  VoiceVolumePayload,
+} from "./voice-subscribe-events";
 
-type VoiceState = 'disabled' | 'idle' | 'listening' | 'recording' | 'processing' | 'speaking';
+type VoiceState = "disabled" | "idle" | "listening" | "recording" | "processing" | "speaking";
 
 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;
 }
 
 export const VoiceIndicator: React.FC<VoiceIndicatorProps> = ({
-  position = 'bottom-right',
+  position = "bottom-right",
   showTranscription = true,
 }) => {
-  const [state, setState] = useState<VoiceState>('disabled');
-  const [transcription, setTranscription] = useState<string>('');
+  const [state, setState] = useState<VoiceState>("disabled");
+  const [transcription, setTranscription] = useState<string>("");
   const [volumeLevel, setVolumeLevel] = useState<number>(0);
   const [error, setError] = useState<string | null>(null);
   const [isExpanded, setIsExpanded] = useState(false);
-  
+
   // Track current audio element for cloud TTS so we can stop it
   const currentAudioRef = React.useRef<HTMLAudioElement | null>(null);
 
   // Subscribe to voice events
   useEffect(() => {
     const subscriptions = [
-      subscribe('voice:stateChanged', (event: any) => {
-        setState(event.data.state);
-        if (event.data.state === 'idle') {
-          setTranscription('');
+      subscribe("voice:stateChanged", (event: VoiceSubscribeEvent<VoiceStatePayload>) => {
+        setState(event.data.state as VoiceState);
+        if (event.data.state === "idle") {
+          setTranscription("");
           setError(null);
         }
-        if (event.data.state === 'recording') {
+        if (event.data.state === "recording") {
           setIsExpanded(true);
         }
       }),
-      subscribe('voice:transcription', (event: any) => {
+      subscribe("voice:transcription", (event: VoiceSubscribeEvent<VoiceTranscriptionPayload>) => {
         setTranscription(event.data.text);
       }),
-      subscribe('voice:volumeLevel', (event: any) => {
+      subscribe("voice:volumeLevel", (event: VoiceSubscribeEvent<VoiceVolumePayload>) => {
         setVolumeLevel(event.data.level);
       }),
-      subscribe('voice:error', (event: any) => {
+      subscribe("voice:error", (event: VoiceSubscribeEvent<VoiceErrorPayload>) => {
         setError(event.data.message);
       }),
     ];
 
     // Load initial state
-    rpcServerCalls.voiceGetState().then(({ state }) => {
-      setState(state);
-    }).catch(() => {
-      // Voice service may not be initialized yet
-    });
+    rpcServerCalls
+      .voiceGetState()
+      .then(({ state }) => {
+        setState(state);
+      })
+      .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
   useEffect(() => {
-    const speakHandler = subscribe('voice:speakText', (event: any) => {
-      const { text, voice, rate } = event.data;
-      if ('speechSynthesis' in window) {
-        const utterance = new SpeechSynthesisUtterance(text);
-        if (voice) {
-          const voices = speechSynthesis.getVoices();
-          const selectedVoice = voices.find(v => v.name === voice);
-          if (selectedVoice) utterance.voice = selectedVoice;
-        }
-        if (rate) utterance.rate = rate;
-        // Notify server when speech ends
-        utterance.onend = () => {
-          rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-        };
-        utterance.onerror = () => {
-          // Still notify on error so we don't hang
+    const speakHandler = subscribe(
+      "voice:speakText",
+      (event: VoiceSubscribeEvent<VoiceSpeakPayload>) => {
+        const { text, voice, rate } = event.data;
+        if ("speechSynthesis" in window) {
+          const utterance = new SpeechSynthesisUtterance(text);
+          if (voice) {
+            const voices = speechSynthesis.getVoices();
+            const selectedVoice = voices.find((v) => v.name === voice);
+            if (selectedVoice) utterance.voice = selectedVoice;
+          }
+          if (rate) utterance.rate = rate;
+          // Notify server when speech ends
+          utterance.onend = () => {
+            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+          };
+          utterance.onerror = () => {
+            // Still notify on error so we don't hang
+            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+          };
+          speechSynthesis.speak(utterance);
+        } else {
+          // No speech synthesis available, notify immediately
           rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-        };
-        speechSynthesis.speak(utterance);
-      } else {
-        // No speech synthesis available, notify immediately
-        rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-      }
-    });
+        }
+      },
+    );
 
-    const stopHandler = subscribe('voice:stopSpeaking', () => {
+    const stopHandler = subscribe("voice:stopSpeaking", () => {
       // Stop browser TTS
-      if ('speechSynthesis' in window) {
+      if ("speechSynthesis" in window) {
         speechSynthesis.cancel();
       }
       // Stop cloud TTS audio if playing
@@ -105,31 +122,34 @@ export const VoiceIndicator: React.FC<VoiceIndicatorProps> = ({
       }
     });
 
-    const playHandler = subscribe('voice:playAudio', async (event: any) => {
-      const { audioBase64, mimeType } = event.data;
-      try {
-        const audioData = Uint8Array.from(atob(audioBase64), c => c.charCodeAt(0));
-        const blob = new Blob([audioData], { type: mimeType });
-        const url = URL.createObjectURL(blob);
-        const audio = new Audio(url);
-        
-        // Track audio element so we can stop it
-        currentAudioRef.current = audio;
-        
-        audio.onended = () => {
-          URL.revokeObjectURL(url);
+    const playHandler = subscribe(
+      "voice:playAudio",
+      async (event: VoiceSubscribeEvent<VoicePlayAudioPayload>) => {
+        const { audioBase64, mimeType } = event.data;
+        try {
+          const audioData = Uint8Array.from(atob(audioBase64), (c) => c.charCodeAt(0));
+          const blob = new Blob([audioData], { type: mimeType });
+          const url = URL.createObjectURL(blob);
+          const audio = new Audio(url);
+
+          // Track audio element so we can stop it
+          currentAudioRef.current = audio;
+
+          audio.onended = () => {
+            URL.revokeObjectURL(url);
+            currentAudioRef.current = null;
+            // Notify server that audio playback has completed
+            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+          };
+          await audio.play();
+        } catch (e) {
+          console.error("Failed to play audio:", e);
           currentAudioRef.current = null;
-          // Notify server that audio playback has completed
+          // Still notify on error so we don't hang
           rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-        };
-        await audio.play();
-      } catch (e) {
-        console.error('Failed to play audio:', e);
-        currentAudioRef.current = null;
-        // Still notify on error so we don't hang
-        rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-      }
-    });
+        }
+      },
+    );
 
     return () => {
       speakHandler.unsubscribe();
@@ -140,76 +160,76 @@ export const VoiceIndicator: React.FC<VoiceIndicatorProps> = ({
 
   const handleClick = 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 rpcServerCalls.voiceStopRecording();
-      } else if (state === 'speaking') {
+      } else if (state === "speaking") {
         await rpcServerCalls.voiceStopPlayback();
-      } else if (state === 'idle' || state === 'listening') {
+      } else if (state === "idle" || state === "listening") {
         await rpcServerCalls.voiceStartRecording();
       }
     } catch (e) {
-      console.error('Voice action failed:', e);
+      console.error("Voice action failed:", e);
     }
   }, [state]);
 
   const getIcon = (): string => {
     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 = (): string => {
     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 = (): string => {
-    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`;
@@ -217,42 +237,39 @@ export const VoiceIndicator: React.FC<VoiceIndicatorProps> = ({
   };
 
   const positionStyles: React.CSSProperties = {
-    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 (
     <div style={positionStyles}>
       {/* Expanded panel */}
-      {isExpanded && state !== 'disabled' && (
-        <div 
+      {isExpanded && state !== "disabled" && (
+        <div
           className="card shadow mb-2"
-          style={{ 
-            width: '280px',
-            backgroundColor: 'var(--bs-body-bg)',
+          style={{
+            width: "280px",
+            backgroundColor: "var(--bs-body-bg)",
           }}
         >
           <div className="card-body py-2 px-3">
             <div className="d-flex justify-content-between align-items-center mb-2">
               <small className="text-muted">{getStateText()}</small>
-              <button 
-                className="btn btn-sm btn-link p-0"
-                onClick={() => setIsExpanded(false)}
-              >
+              <button className="btn btn-sm btn-link p-0" onClick={() => setIsExpanded(false)}>
                 <i className="bi bi-x"></i>
               </button>
             </div>
-            
+
             {/* Volume meter */}
-            {state === 'recording' && (
-              <div className="progress mb-2" style={{ height: '4px' }}>
-                <div 
-                  className="progress-bar bg-danger" 
+            {state === "recording" && (
+              <div className="progress mb-2" style={{ height: "4px" }}>
+                <div
+                  className="progress-bar bg-danger"
                   style={{ width: `${Math.min(100, volumeLevel * 500)}%` }}
                 ></div>
               </div>
@@ -280,38 +297,38 @@ export const VoiceIndicator: React.FC<VoiceIndicatorProps> = ({
       {/* Main button */}
       <button
         className={getButtonClass()}
-        style={{ 
-          width: '56px', 
-          height: '56px',
-          fontSize: '24px',
-          transition: 'all 0.2s ease',
+        style={{
+          width: "56px",
+          height: "56px",
+          fontSize: "24px",
+          transition: "all 0.2s ease",
         }}
         onClick={handleClick}
         title={getStateText()}
       >
         <i className={`bi ${getIcon()}`}></i>
-        
+
         {/* Pulsing animation for listening/recording */}
-        {(state === 'listening' || state === 'recording') && (
-          <span 
+        {(state === "listening" || state === "recording") && (
+          <span
             className="position-absolute"
             style={{
               top: 0,
               left: 0,
               right: 0,
               bottom: 0,
-              borderRadius: '50%',
-              border: '2px solid currentColor',
-              animation: 'pulse 1.5s ease-out infinite',
+              borderRadius: "50%",
+              border: "2px solid currentColor",
+              animation: "pulse 1.5s ease-out infinite",
             }}
           ></span>
         )}
 
         {/* Processing spinner */}
-        {state === 'processing' && (
-          <span 
+        {state === "processing" && (
+          <span
             className="spinner-border spinner-border-sm position-absolute"
-            style={{ top: '4px', right: '4px' }}
+            style={{ top: "4px", right: "4px" }}
           ></span>
         )}
       </button>

package/src/components/voice-subscribe-events.ts

@@ -0,0 +1,20 @@
+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/src/globals.tsx

@@ -1,10 +1,24 @@
-import { Groups, IGroup, IMessage, IUser, Messages, PersistentVar, computed, getMe, groupUserVar, observable, reloadPackagesOnPageRefresh, rpcClientCalls, rpcServerCalls, sleep } from "@peers-app/peers-sdk";
+import {
+  computed,
+  Groups,
+  getMe,
+  groupUserVar,
+  type IGroup,
+  type IMessage,
+  type IUser,
+  Messages,
+  observable,
+  reloadPackagesOnPageRefresh,
+  rpcClientCalls,
+  rpcServerCalls,
+  sleep,
+} from "@peers-app/peers-sdk";
 import { handleMainPathChanged, openNewTab } from "./tabs-layout/tabs-state";
 import { stripMentions } from "./utils";
 
 export const packageReloaded = observable(0);
 
-export const _mainContentPath = groupUserVar('mainContentPath', { defaultValue: '' });
+export const _mainContentPath = groupUserVar("mainContentPath", { defaultValue: "" });
 
 export const mainContentPath = computed<string>({
   read: () => {
@@ -20,21 +34,21 @@ export const mainContentPath = computed<string>({
 
 const queryParams = computed<{ [key: string]: string }>({
   read: () => {
-    const queryStr = mainContentPath()?.split('?')[1] || '';
+    const queryStr = mainContentPath()?.split("?")[1] || "";
     const params = new URLSearchParams(queryStr);
     const obj: { [key: string]: string } = {};
     for (const [key, value] of params.entries()) {
       obj[key] = value;
     }
-    return obj
+    return obj;
   },
   write: (value: { [key: string]: string }) => {
-    const queryStr = mainContentPath().split('?')[1] || '';
+    const queryStr = mainContentPath().split("?")[1] || "";
     const params = new URLSearchParams(queryStr);
     for (const key in value) {
       params.set(key, value[key]);
     }
-    mainContentPath(mainContentPath().split('?')[0] + '?' + params.toString());
+    mainContentPath(`${mainContentPath().split("?")[0]}?${params.toString()}`);
   },
 });
 
@@ -44,7 +58,7 @@ export function queryParam(name: string, value?: string) {
     if (params[name] === value) {
       return value;
     }
-    if (value === null || value === '') {
+    if (value === null || value === "") {
       delete params[name];
     } else {
       params[name] = value;
@@ -54,28 +68,16 @@ export function queryParam(name: string, value?: string) {
   return params[name];
 }
 
-export const openThreads: PersistentVar<(string | IMessage)[]> = groupUserVar('openThreads', { defaultValue: [] });
-export const threadViewOpen = groupUserVar<boolean>('threadViewOpen', { defaultValue: false });
-
 export async function openThread(thread: string | IMessage) {
   openThreadInTab(thread);
-  // let threadId = typeof thread === 'string' ? thread : thread.messageId;
-  // const message = await Messages().get(threadId);
-  // if (message) {
-  //   thread = message.messageParentId || message.messageId;
-  // }
-  // const threadsWithout = openThreads().filter(t => (typeof t === 'string' && t !== threadId) || (typeof t === 'object' && t.messageId !== threadId));
-  // openThreads([thread, ...threadsWithout]);
-  // threadViewOpen(true);
 }
 
-// Thread opening function for tabs system
 export async function openThreadInTab(thread: string | IMessage) {
-  let threadId = typeof thread === 'string' ? thread : thread.messageId;
+  const threadId = typeof thread === "string" ? thread : thread.messageId;
   const message = await Messages().get(threadId);
 
   if (!message) {
-    console.warn('Thread message not found:', threadId);
+    console.warn("Thread message not found:", threadId);
     return;
   }
 
@@ -85,35 +87,35 @@ export async function openThreadInTab(thread: string | IMessage) {
   // Generate thread title from message content (strip mentions and clean formatting)
   const cleanMessage = stripMentions(message.message);
   const messagePreview = cleanMessage.slice(0, 30);
-  const threadTitle = `${messagePreview}${cleanMessage.length > 30 ? '...' : ''}` || `Thread`;
+  const threadTitle = `${messagePreview}${cleanMessage.length > 30 ? "..." : ""}` || `Thread`;
 
   // // Import openNewTab dynamically to avoid circular dependency
   // const { openNewTab } = await import('./tabs-layout/tabs-layout');
 
   openNewTab({
-    packageId: 'system-apps',
+    packageId: "system-apps",
     path: `threads/${actualThreadId}`,
     title: threadTitle,
-    iconClassName: 'bi-chat-dots',
+    iconClassName: "bi-chat-dots",
   });
 }
 
 rpcClientCalls.setClientPath = async (url: string) => {
-  mainContentPath(url && String(url).trim() || '');
+  mainContentPath((url && String(url).trim()) || "");
 };
 
 rpcClientCalls.openThread = async (threadId: string) => {
-  console.warn('Opening thread:', threadId);
+  console.warn("Opening thread:", threadId);
   openThread(threadId);
 };
 
 export let me: IUser = null as unknown as IUser;
 
-export const windowWidth = observable(window.innerWidth);//.extend({ rateLimit: 500 });
-export const windowHeight = observable(window.innerHeight);//.extend({ rateLimit: 500 });
-window.addEventListener("resize", (ev) => {
-  windowWidth(window.innerWidth)
-  windowHeight(window.innerHeight)
+export const windowWidth = observable(window.innerWidth); //.extend({ rateLimit: 500 });
+export const windowHeight = observable(window.innerHeight); //.extend({ rateLimit: 500 });
+window.addEventListener("resize", (_ev) => {
+  windowWidth(window.innerWidth);
+  windowHeight(window.innerHeight);
 });
 
 export const isDesktop = computed(() => {
@@ -131,19 +133,19 @@ export async function loadGlobals() {
   me = await getMe();
   await reloadPackagesOnPageRefresh.loadingPromise;
   if (reloadPackagesOnPageRefresh()) {
-    await rpcServerCalls.addOrUpdatePackage('updateAll');
+    await rpcServerCalls.addOrUpdatePackage("updateAll");
   }
   await Promise.all([
-    Groups().list().then(r => groups(r)),
+    Groups()
+      .list()
+      .then((r) => groups(r)),
     _mainContentPath.loadingPromise,
-    openThreads.loadingPromise,
-    threadViewOpen.loadingPromise,
     sleep(100),
   ]);
 
   function updateWindowHash() {
     const currentPath = window.location.hash.substring(1);
-    const expectedPath = mainContentPath() || '';
+    const expectedPath = mainContentPath() || "";
     // console.log({ expectedPath, currentPath });
     if (currentPath !== expectedPath) {
       window.location.hash = expectedPath;
@@ -152,12 +154,12 @@ export async function loadGlobals() {
   }
   mainContentPath.subscribe(updateWindowHash);
   updateWindowHash();
-  window.addEventListener('hashchange', () => mainContentPath(window.location.hash.substring(1)));
+  window.addEventListener("hashchange", () => mainContentPath(window.location.hash.substring(1)));
 
   return true;
 }
 
-if (typeof window !== 'undefined') {
-  // @ts-ignore
+if (typeof window !== "undefined") {
+  // @ts-expect-error
   window.globals = module.exports;
-}
+}