@peers-app/peers-ui 0.21.7 → 0.23.0

package/src/components/voice-indicator.tsx

@@ -1,353 +0,0 @@
-/**
- * Voice Indicator Component
- *
- * Floating UI element showing voice input state.
- * Supports manual recording trigger via click.
- */
-
-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";
-
-interface VoiceIndicatorProps {
-  /** Position of the indicator */
-  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",
-  showTranscription = true,
-}) => {
-  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: VoiceSubscribeEvent<VoiceStatePayload>) => {
-        setState(event.data.state as VoiceState);
-        if (event.data.state === "idle") {
-          setTranscription("");
-          setError(null);
-        }
-        if (event.data.state === "recording") {
-          setIsExpanded(true);
-        }
-      }),
-      subscribe("voice:transcription", (event: VoiceSubscribeEvent<VoiceTranscriptionPayload>) => {
-        setTranscription(event.data.text);
-      }),
-      subscribe("voice:volumeLevel", (event: VoiceSubscribeEvent<VoiceVolumePayload>) => {
-        setVolumeLevel(event.data.level);
-      }),
-      subscribe("voice:error", (event: VoiceSubscribeEvent<VoiceErrorPayload>) => {
-        setError(event.data.message);
-      }),
-    ];
-
-    // Load initial state
-    rpcServerCalls
-      .voiceGetState()
-      .then(({ state }) => {
-        setState(state);
-      })
-      .catch(() => {
-        // Voice service may not be initialized yet
-      });
-
-    return () => {
-      for (const sub of subscriptions) {
-        sub.unsubscribe();
-      }
-    };
-  }, []);
-
-  // Handle browser TTS events
-  useEffect(() => {
-    const speakHandler = subscribe(
-      "voice:speakText",
-      (event: VoiceSubscribeEvent<VoiceSpeakPayload>) => {
-        const { text, voice, rate } = event.data;
-        if ("speechSynthesis" in window) {
-          const utterance = new SpeechSynthesisUtterance(text);
-          if (voice) {
-            const voices = speechSynthesis.getVoices();
-            const selectedVoice = voices.find((v) => v.name === voice);
-            if (selectedVoice) utterance.voice = selectedVoice;
-          }
-          if (rate) utterance.rate = rate;
-          // 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(() => {});
-        }
-      },
-    );
-
-    const stopHandler = subscribe("voice:stopSpeaking", () => {
-      // Stop browser TTS
-      if ("speechSynthesis" in window) {
-        speechSynthesis.cancel();
-      }
-      // Stop cloud TTS audio if playing
-      if (currentAudioRef.current) {
-        currentAudioRef.current.pause();
-        currentAudioRef.current = null;
-      }
-    });
-
-    const playHandler = subscribe(
-      "voice:playAudio",
-      async (event: VoiceSubscribeEvent<VoicePlayAudioPayload>) => {
-        const { audioBase64, mimeType } = event.data;
-        try {
-          const audioData = Uint8Array.from(atob(audioBase64), (c) => c.charCodeAt(0));
-          const blob = new Blob([audioData], { type: mimeType });
-          const url = URL.createObjectURL(blob);
-          const audio = new Audio(url);
-
-          // 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;
-          // Still notify on error so we don't hang
-          rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-        }
-      },
-    );
-
-    return () => {
-      speakHandler.unsubscribe();
-      stopHandler.unsubscribe();
-      playHandler.unsubscribe();
-    };
-  }, []);
-
-  const handleClick = useCallback(async () => {
-    try {
-      if (state === "disabled") {
-        // Open settings
-        window.location.hash = "#/settings/voice";
-        return;
-      }
-
-      if (state === "recording") {
-        await rpcServerCalls.voiceStopRecording();
-      } else if (state === "speaking") {
-        await rpcServerCalls.voiceStopPlayback();
-      } else if (state === "idle" || state === "listening") {
-        await rpcServerCalls.voiceStartRecording();
-      }
-    } catch (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";
-      default:
-        return "bi-mic";
-    }
-  };
-
-  const getStateText = (): string => {
-    switch (state) {
-      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)";
-      default:
-        return "";
-    }
-  };
-
-  const getButtonClass = (): string => {
-    const base = "btn rounded-circle shadow";
-    switch (state) {
-      case "disabled":
-        return `${base} btn-secondary`;
-      case "idle":
-        return `${base} btn-outline-primary`;
-      case "listening":
-        return `${base} btn-info`;
-      case "recording":
-        return `${base} btn-danger`;
-      case "processing":
-        return `${base} btn-warning`;
-      case "speaking":
-        return `${base} btn-success`;
-      default:
-        return `${base} btn-secondary`;
-    }
-  };
-
-  const positionStyles: React.CSSProperties = {
-    position: "fixed",
-    zIndex: 1050,
-    ...(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
-          className="card shadow mb-2"
-          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)}>
-                <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"
-                  style={{ width: `${Math.min(100, volumeLevel * 500)}%` }}
-                ></div>
-              </div>
-            )}
-
-            {/* Transcription */}
-            {showTranscription && transcription && (
-              <div className="small">
-                <i className="bi bi-quote me-1"></i>
-                {transcription}
-              </div>
-            )}
-
-            {/* Error */}
-            {error && (
-              <div className="small text-danger">
-                <i className="bi bi-exclamation-triangle me-1"></i>
-                {error}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Main button */}
-      <button
-        className={getButtonClass()}
-        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
-            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",
-            }}
-          ></span>
-        )}
-
-        {/* Processing spinner */}
-        {state === "processing" && (
-          <span
-            className="spinner-border spinner-border-sm position-absolute"
-            style={{ top: "4px", right: "4px" }}
-          ></span>
-        )}
-      </button>
-
-      {/* CSS for pulse animation */}
-      <style>{`
-        @keyframes pulse {
-          0% {
-            transform: scale(1);
-            opacity: 1;
-          }
-          100% {
-            transform: scale(1.5);
-            opacity: 0;
-          }
-        }
-      `}</style>
-    </div>
-  );
-};
-
-export default VoiceIndicator;

package/src/components/voice-playback.tsx

@@ -1,97 +0,0 @@
-/**
- * Voice Playback Component
- *
- * Headless (renders nothing) component that hosts the browser-side voice TTS
- * playback handlers. The voice server (peers-electron `tts-service`) emits
- * `voice:speakText` / `voice:playAudio` / `voice:stopSpeaking` events and relies
- * on a mounted renderer to actually produce sound and report completion via
- * `voiceNotifyPlaybackComplete`. Mount this once near the app root so voice
- * output works regardless of which (if any) voice UI is visible.
- */
-
-import { rpcServerCalls, subscribe } from "@peers-app/peers-sdk";
-import { useEffect, useRef } from "react";
-import type {
-  VoicePlayAudioPayload,
-  VoiceSpeakPayload,
-  VoiceSubscribeEvent,
-} from "./voice-subscribe-events";
-
-/**
- * Subscribes to voice TTS events and plays them in the browser. Renders nothing.
- */
-export const VoicePlayback: React.FC = () => {
-  // Track the current cloud-TTS audio element so it can be stopped on demand.
-  const currentAudioRef = useRef<HTMLAudioElement | null>(null);
-
-  useEffect(() => {
-    const speakHandler = subscribe(
-      "voice:speakText",
-      (event: VoiceSubscribeEvent<VoiceSpeakPayload>) => {
-        const { text, voice, rate } = event.data;
-        if ("speechSynthesis" in window) {
-          const utterance = new SpeechSynthesisUtterance(text);
-          if (voice) {
-            const voices = speechSynthesis.getVoices();
-            const selectedVoice = voices.find((v) => v.name === voice);
-            if (selectedVoice) utterance.voice = selectedVoice;
-          }
-          if (rate) utterance.rate = rate;
-          utterance.onend = () => {
-            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-          };
-          utterance.onerror = () => {
-            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-          };
-          speechSynthesis.speak(utterance);
-        } else {
-          rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-        }
-      },
-    );
-
-    const stopHandler = subscribe("voice:stopSpeaking", () => {
-      if ("speechSynthesis" in window) {
-        speechSynthesis.cancel();
-      }
-      if (currentAudioRef.current) {
-        currentAudioRef.current.pause();
-        currentAudioRef.current = null;
-      }
-    });
-
-    const playHandler = subscribe(
-      "voice:playAudio",
-      async (event: VoiceSubscribeEvent<VoicePlayAudioPayload>) => {
-        const { audioBase64, mimeType } = event.data;
-        try {
-          const audioData = Uint8Array.from(atob(audioBase64), (c) => c.charCodeAt(0));
-          const blob = new Blob([audioData], { type: mimeType });
-          const url = URL.createObjectURL(blob);
-          const audio = new Audio(url);
-          currentAudioRef.current = audio;
-          audio.onended = () => {
-            URL.revokeObjectURL(url);
-            currentAudioRef.current = null;
-            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-          };
-          await audio.play();
-        } catch (e) {
-          console.error("Failed to play audio:", e);
-          currentAudioRef.current = null;
-          rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
-        }
-      },
-    );
-
-    return () => {
-      speakHandler.unsubscribe();
-      stopHandler.unsubscribe();
-      playHandler.unsubscribe();
-    };
-  }, []);
-
-  return null;
-};
-
-export default VoicePlayback;

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

@@ -1,16 +0,0 @@
-/** Shape passed to `subscribe` handlers for voice / chat IPC events */
-export type VoiceSubscribeEvent<T> = { data: T };
-
-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/screens/settings/voice-settings-agent.tsx

@@ -1,73 +0,0 @@
-import { Assistants, type IAssistant, userVar } from "@peers-app/peers-sdk";
-import type React from "react";
-import { useCallback, useEffect, useState } from "react";
-
-const VOICE_HUB_AGENT_ASSISTANT_ID = "00mh0wlipkdbeaw8vhagent01";
-
-// Must match the pvar names in peers-core/src/data/voice-agent-config.ts and
-// peers-electron/src/server/voice/voice-agent-config.ts — pvar instances are
-// singletons keyed by name+scope so all three share the same underlying value.
-const voiceAgentAssistantIdPvar = userVar<string | undefined>("voice:agentAssistantId", {
-  defaultValue: VOICE_HUB_AGENT_ASSISTANT_ID,
-});
-
-export const VoiceSettingsAgent: React.FC = () => {
-  const [assistants, setAssistants] = useState<IAssistant[]>([]);
-  const [selectedId, setSelectedId] = useState<string>(VOICE_HUB_AGENT_ASSISTANT_ID);
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState(false);
-
-  useEffect(() => {
-    const load = async () => {
-      await voiceAgentAssistantIdPvar.loadingPromise;
-      setSelectedId(voiceAgentAssistantIdPvar() ?? VOICE_HUB_AGENT_ASSISTANT_ID);
-
-      const all = await Assistants().list({});
-      setAssistants(all);
-    };
-    load();
-  }, []);
-
-  const handleSave = useCallback(async () => {
-    setSaving(true);
-    setSaved(false);
-    await voiceAgentAssistantIdPvar.loadingPromise;
-    voiceAgentAssistantIdPvar(selectedId || undefined);
-    setSaving(false);
-    setSaved(true);
-    setTimeout(() => setSaved(false), 2000);
-  }, [selectedId]);
-
-  return (
-    <div>
-      <h6>Voice Agent</h6>
-      <p className="text-muted small mb-2">
-        When you give a voice command that requires action (e.g. "add milk to the shopping list"),
-        it is dispatched to this assistant as a background task.
-      </p>
-      <div className="d-flex align-items-center gap-2">
-        <select
-          className="form-select form-select-sm"
-          value={selectedId}
-          onChange={(e) => setSelectedId(e.target.value)}
-          disabled={saving}
-        >
-          {assistants.map((a) => (
-            <option key={a.assistantId} value={a.assistantId}>
-              {a.name}
-              {a.assistantId === VOICE_HUB_AGENT_ASSISTANT_ID ? " (default)" : ""}
-            </option>
-          ))}
-        </select>
-        <button
-          className="btn btn-sm btn-primary"
-          onClick={handleSave}
-          disabled={saving}
-          style={{ whiteSpace: "nowrap" }}
-        >
-          {saving ? "Saving…" : saved ? "Saved!" : "Save"}
-        </button>
-      </div>
-    </div>
-  );
-};

package/src/screens/settings/voice-settings-api-keys.tsx

@@ -1,91 +0,0 @@
-import type React from "react";
-import { Tooltip } from "../../components/tooltip";
-import {
-  PICOVOICE_KEY_ERROR_MESSAGES,
-  type PicovoiceKeyError,
-  type VoiceSettings,
-} from "./voice-settings-types";
-
-interface ApiKeysProps {
-  settings: VoiceSettings;
-  picovoiceKey: string;
-  openaiKey: string;
-  keyError: PicovoiceKeyError | null;
-  onPicovoiceKeyChange: (value: string) => void;
-  onOpenaiKeyChange: (value: string) => void;
-  onDismissKeyError: () => void;
-}
-
-export const VoiceSettingsApiKeys: React.FC<ApiKeysProps> = ({
-  settings,
-  picovoiceKey,
-  openaiKey,
-  keyError,
-  onPicovoiceKeyChange,
-  onOpenaiKeyChange,
-  onDismissKeyError,
-}) => (
-  <>
-    <div className="mb-4">
-      <label className="form-label">
-        Picovoice Access Key
-        <Tooltip markdownContent="Required for wake word detection. Get a free key at [console.picovoice.ai](https://console.picovoice.ai)" />
-        {settings.picovoiceAccessKeySet && <span className="badge bg-success ms-2">Set</span>}
-      </label>
-      <input
-        type="password"
-        className="form-control"
-        value={picovoiceKey}
-        onChange={(e) => onPicovoiceKeyChange(e.target.value)}
-        placeholder={
-          settings.picovoiceAccessKeySet ? "••••••••••••••••" : "Enter your Picovoice access key"
-        }
-      />
-      <small className="text-muted">
-        <a href="https://console.picovoice.ai" target="_blank" rel="noopener noreferrer">
-          Get a free access key
-        </a>
-        {settings.picovoiceAccessKeySet && " (leave blank to keep existing key)"}
-      </small>
-    </div>
-
-    {keyError && (
-      <div className="alert alert-warning alert-dismissible mb-4" role="alert">
-        <div className="d-flex align-items-start gap-2">
-          <i className="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
-          <div>
-            <strong>{PICOVOICE_KEY_ERROR_MESSAGES[keyError].heading}</strong>
-            <div className="mt-1">{PICOVOICE_KEY_ERROR_MESSAGES[keyError].body}</div>
-            <a
-              href="https://console.picovoice.ai"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="alert-link mt-1 d-inline-block"
-            >
-              Open console.picovoice.ai
-            </a>
-          </div>
-        </div>
-        <button type="button" className="btn-close" onClick={onDismissKeyError}></button>
-      </div>
-    )}
-
-    <div className="mb-3">
-      <label className="form-label">
-        OpenAI API Key
-        <Tooltip markdownContent="Required for cloud STT (Whisper) and cloud TTS. Leave empty to use local/browser alternatives." />
-        {settings.openaiApiKeySet && <span className="badge bg-success ms-2">Set</span>}
-      </label>
-      <input
-        type="password"
-        className="form-control"
-        value={openaiKey}
-        onChange={(e) => onOpenaiKeyChange(e.target.value)}
-        placeholder={settings.openaiApiKeySet ? "••••••••••••••••" : "sk-..."}
-      />
-      {settings.openaiApiKeySet && (
-        <small className="text-muted">Leave blank to keep existing key</small>
-      )}
-    </div>
-  </>
-);