@peers-app/peers-ui 0.21.7 → 0.23.0

package/src/screens/settings/voice-settings-output.tsx

@@ -1,126 +0,0 @@
-import type React from "react";
-import { OPENAI_TTS_VOICES, type VoiceSettings } from "./voice-settings-types";
-
-interface OutputProps {
-  settings: VoiceSettings;
-  localSettings: VoiceSettings;
-  saving: boolean;
-  testText: string;
-  hasUnsavedChanges: boolean;
-  audioDevices: string[];
-  onChange: (patch: Partial<VoiceSettings>) => void;
-  onTestTextChange: (text: string) => void;
-  onTestTTS: () => void;
-  onTestRecording: () => void;
-}
-
-export const VoiceSettingsOutput: React.FC<OutputProps> = ({
-  settings,
-  localSettings,
-  saving,
-  testText,
-  hasUnsavedChanges,
-  audioDevices,
-  onChange,
-  onTestTextChange,
-  onTestTTS,
-  onTestRecording,
-}) => (
-  <>
-    {localSettings.ttsProvider === "cloud" && (
-      <div className="mb-3">
-        <label className="form-label">Voice</label>
-        <select
-          className="form-select"
-          value={localSettings.ttsVoice || "nova"}
-          onChange={(e) => onChange({ ttsVoice: e.target.value })}
-          disabled={saving}
-        >
-          {OPENAI_TTS_VOICES.map((voice) => (
-            <option key={voice.id} value={voice.id}>
-              {voice.name} - {voice.description}
-            </option>
-          ))}
-        </select>
-      </div>
-    )}
-
-    <div className="mb-4">
-      <label className="form-label">Speaking Speed: {localSettings.ttsSpeed.toFixed(1)}x</label>
-      <input
-        type="range"
-        className="form-range"
-        min="0.5"
-        max="2"
-        step="0.1"
-        value={localSettings.ttsSpeed}
-        onChange={(e) => onChange({ ttsSpeed: parseFloat(e.target.value) })}
-      />
-      <div className="d-flex justify-content-between">
-        <small className="text-muted">Slower</small>
-        <small className="text-muted">Faster</small>
-      </div>
-    </div>
-
-    <div className="mb-4">
-      <label className="form-label">Test TTS</label>
-      <div className="input-group">
-        <input
-          type="text"
-          className="form-control"
-          value={testText}
-          onChange={(e) => onTestTextChange(e.target.value)}
-          placeholder="Enter text to speak"
-        />
-        <button
-          className="btn btn-outline-primary"
-          type="button"
-          onClick={onTestTTS}
-          disabled={
-            !settings.enabled && localSettings.ttsProvider === "cloud" && !settings.openaiApiKeySet
-          }
-        >
-          <i className="bi bi-play-fill me-1"></i>
-          Speak
-        </button>
-      </div>
-      <small className="text-muted">
-        {hasUnsavedChanges && "Save changes first to test with new settings"}
-      </small>
-    </div>
-
-    <hr className="my-4" />
-
-    <div className="mb-4">
-      <h6 className="mb-3">Test Voice Input</h6>
-      <p className="text-muted small">
-        Click the button below to test voice recording. Speak and it will stop when silence is
-        detected.
-      </p>
-      <button
-        className="btn btn-primary"
-        onClick={onTestRecording}
-        disabled={!settings.enabled || saving}
-      >
-        <i className="bi bi-mic me-2"></i>
-        Test Recording
-      </button>
-      {!settings.enabled && (
-        <small className="text-muted ms-2">Enable and save voice settings first</small>
-      )}
-    </div>
-
-    {audioDevices.length > 0 && (
-      <div className="mb-4">
-        <h6 className="mb-3">Available Audio Devices</h6>
-        <ul className="list-group list-group-flush">
-          {audioDevices.map((device, index) => (
-            <li key={index} className="list-group-item bg-transparent">
-              <small>{device}</small>
-            </li>
-          ))}
-        </ul>
-      </div>
-    )}
-  </>
-);

package/src/screens/settings/voice-settings-providers.tsx

@@ -1,49 +0,0 @@
-import type React from "react";
-import type { STTProvider, TTSProvider, VoiceSettings } from "./voice-settings-types";
-
-interface ProvidersProps {
-  localSettings: VoiceSettings;
-  saving: boolean;
-  onChange: (patch: Partial<VoiceSettings>) => void;
-}
-
-export const VoiceSettingsProviders: React.FC<ProvidersProps> = ({
-  localSettings,
-  saving,
-  onChange,
-}) => (
-  <>
-    <h6 className="mb-3">Speech to Text (STT)</h6>
-
-    <div className="mb-4">
-      <label className="form-label">STT Provider</label>
-      <select
-        className="form-select"
-        value={localSettings.sttProvider}
-        onChange={(e) => onChange({ sttProvider: e.target.value as STTProvider })}
-        disabled={saving}
-      >
-        <option value="auto">Auto (Cloud with local fallback)</option>
-        <option value="cloud">Cloud only (OpenAI Whisper)</option>
-        <option value="local">Local only (requires setup)</option>
-      </select>
-    </div>
-
-    <hr className="my-4" />
-
-    <h6 className="mb-3">Text to Speech (TTS)</h6>
-
-    <div className="mb-3">
-      <label className="form-label">TTS Provider</label>
-      <select
-        className="form-select"
-        value={localSettings.ttsProvider}
-        onChange={(e) => onChange({ ttsProvider: e.target.value as TTSProvider })}
-        disabled={saving}
-      >
-        <option value="browser">Browser (free, works offline)</option>
-        <option value="cloud">Cloud (OpenAI TTS, natural voice)</option>
-      </select>
-    </div>
-  </>
-);

package/src/screens/settings/voice-settings-types.ts

@@ -1,94 +0,0 @@
-export type STTProvider = "auto" | "cloud" | "local";
-export type TTSProvider = "browser" | "cloud";
-export type PicovoiceKeyError = "refused" | "invalid" | "limit" | "throttled";
-export type BuiltinWakeWord =
-  | "ALEXA"
-  | "AMERICANO"
-  | "BLUEBERRY"
-  | "BUMBLEBEE"
-  | "COMPUTER"
-  | "GRAPEFRUIT"
-  | "GRASSHOPPER"
-  | "HEY_GOOGLE"
-  | "HEY_SIRI"
-  | "JARVIS"
-  | "OK_GOOGLE"
-  | "PICOVOICE"
-  | "PORCUPINE"
-  | "TERMINATOR";
-
-export interface VoiceSettingsData {
-  enabled: boolean;
-  voiceOutputEnabled?: boolean;
-  wakeWord: BuiltinWakeWord;
-  wakeWordSensitivity: number;
-  speechSensitivity: number;
-  sttProvider: STTProvider;
-  ttsProvider: TTSProvider;
-  ttsVoice?: string;
-  ttsSpeed: number;
-}
-
-export interface VoiceSettings extends VoiceSettingsData {
-  picovoiceAccessKeySet?: boolean;
-  openaiApiKeySet?: boolean;
-}
-
-export const DEFAULT_SETTINGS: VoiceSettingsData = {
-  enabled: false,
-  voiceOutputEnabled: true,
-  wakeWord: "COMPUTER",
-  wakeWordSensitivity: 0.5,
-  speechSensitivity: 0.7,
-  sttProvider: "auto",
-  ttsProvider: "browser",
-  ttsSpeed: 1.0,
-};
-
-export const BUILTIN_WAKE_WORDS: { id: BuiltinWakeWord; name: string }[] = [
-  { id: "ALEXA", name: "Alexa" },
-  { id: "AMERICANO", name: "Americano" },
-  { id: "BLUEBERRY", name: "Blueberry" },
-  { id: "BUMBLEBEE", name: "Bumblebee" },
-  { id: "COMPUTER", name: "Computer" },
-  { id: "GRAPEFRUIT", name: "Grapefruit" },
-  { id: "GRASSHOPPER", name: "Grasshopper" },
-  { id: "HEY_GOOGLE", name: "Hey Google" },
-  { id: "HEY_SIRI", name: "Hey Siri" },
-  { id: "JARVIS", name: "Jarvis" },
-  { id: "OK_GOOGLE", name: "Ok Google" },
-  { id: "PICOVOICE", name: "Picovoice" },
-  { id: "PORCUPINE", name: "Porcupine" },
-  { id: "TERMINATOR", name: "Terminator" },
-];
-
-export const PICOVOICE_KEY_ERROR_MESSAGES: Record<
-  PicovoiceKeyError,
-  { heading: string; body: string }
-> = {
-  refused: {
-    heading: "Picovoice access key refused",
-    body: "Your key was rejected — it may have been revoked or banned. Generate a new key at console.picovoice.ai and paste it below.",
-  },
-  invalid: {
-    heading: "Picovoice access key invalid",
-    body: "Your key is malformed or expired. Generate a new key at console.picovoice.ai and paste it below.",
-  },
-  limit: {
-    heading: "Picovoice device limit reached",
-    body: "Your key has been activated on too many devices. Go to console.picovoice.ai to deactivate old devices, generate a new key, or upgrade your plan.",
-  },
-  throttled: {
-    heading: "Picovoice activation throttled",
-    body: "Too many activation attempts. Please wait a moment, then save your settings again to retry.",
-  },
-};
-
-export const OPENAI_TTS_VOICES = [
-  { id: "alloy", name: "Alloy", description: "Neutral and balanced" },
-  { id: "echo", name: "Echo", description: "Warm and clear" },
-  { id: "fable", name: "Fable", description: "Expressive and dynamic" },
-  { id: "onyx", name: "Onyx", description: "Deep and authoritative" },
-  { id: "nova", name: "Nova", description: "Friendly and upbeat" },
-  { id: "shimmer", name: "Shimmer", description: "Soft and gentle" },
-];

package/src/screens/settings/voice-settings-wake-word.tsx

@@ -1,94 +0,0 @@
-import type React from "react";
-import { Tooltip } from "../../components/tooltip";
-import {
-  BUILTIN_WAKE_WORDS,
-  type BuiltinWakeWord,
-  type VoiceSettings,
-} from "./voice-settings-types";
-
-interface WakeWordProps {
-  localSettings: VoiceSettings;
-  saving: boolean;
-  onChange: (patch: Partial<VoiceSettings>) => void;
-}
-
-export const VoiceSettingsWakeWord: React.FC<WakeWordProps> = ({
-  localSettings,
-  saving,
-  onChange,
-}) => (
-  <>
-    <div className="mb-4">
-      <label className="form-label">
-        Wake Word
-        <Tooltip markdownContent="The phrase you say to activate voice recording. Choose a word that's easy for you to say and unlikely to occur in normal conversation." />
-      </label>
-      <select
-        className="form-select"
-        value={localSettings.wakeWord}
-        onChange={(e) => onChange({ wakeWord: e.target.value as BuiltinWakeWord })}
-        disabled={saving}
-      >
-        {BUILTIN_WAKE_WORDS.map((word) => (
-          <option key={word.id} value={word.id}>
-            {word.name}
-          </option>
-        ))}
-      </select>
-    </div>
-
-    <div className="mb-4">
-      <label className="form-label">
-        Wake Word Sensitivity: {localSettings.wakeWordSensitivity.toFixed(2)}
-        <Tooltip markdownContent="Higher values make the wake word easier to trigger but may cause false positives." />
-      </label>
-      <input
-        type="range"
-        className="form-range"
-        min="0"
-        max="1"
-        step="0.05"
-        value={localSettings.wakeWordSensitivity}
-        onChange={(e) => onChange({ wakeWordSensitivity: parseFloat(e.target.value) })}
-      />
-      <div className="d-flex justify-content-between">
-        <small className="text-muted">Less sensitive</small>
-        <small className="text-muted">More sensitive</small>
-      </div>
-    </div>
-
-    <div className="mb-4">
-      <label className="form-label">
-        Speech Detection: {(localSettings.speechSensitivity ?? 0.7).toFixed(2)}
-        <Tooltip markdownContent="Controls how sensitive the microphone is when detecting speech. Higher values pick up quieter speech (better for quiet rooms or a close mic). Lower values require louder speech, which helps filter out background noise." />
-      </label>
-      <input
-        type="range"
-        className="form-range"
-        min="0"
-        max="1"
-        step="0.05"
-        value={localSettings.speechSensitivity ?? 0.7}
-        onChange={(e) => onChange({ speechSensitivity: parseFloat(e.target.value) })}
-      />
-      <div className="d-flex justify-content-between mb-1">
-        <small className="text-muted">Loud / Noisy environment</small>
-        <small className="text-muted">Quiet / Close mic</small>
-      </div>
-      <div className="d-flex justify-content-between px-1">
-        <small className="text-muted" style={{ fontSize: "0.7rem" }}>
-          0.2 — Shout
-        </small>
-        <small className="text-muted" style={{ fontSize: "0.7rem" }}>
-          0.5 — Normal
-        </small>
-        <small className="text-muted" style={{ fontSize: "0.7rem" }}>
-          0.7 — Desk
-        </small>
-        <small className="text-muted" style={{ fontSize: "0.7rem" }}>
-          0.9 — Whisper
-        </small>
-      </div>
-    </div>
-  </>
-);

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

@@ -1,326 +0,0 @@
-/**
- * Voice Settings Component
- *
- * Settings panel for voice input configuration.
- * Settings are stored directly via pvars (auto-synced).
- * Keys are stored as secure pvars (write-only).
- */
-
-import { rpcServerCalls, userVar } from "@peers-app/peers-sdk";
-import type React from "react";
-import { useCallback, useEffect, useState } from "react";
-import { VoiceSettingsAgent } from "./voice-settings-agent";
-import { VoiceSettingsApiKeys } from "./voice-settings-api-keys";
-import { VoiceSettingsOutput } from "./voice-settings-output";
-import { VoiceSettingsProviders } from "./voice-settings-providers";
-import {
-  BUILTIN_WAKE_WORDS,
-  DEFAULT_SETTINGS,
-  type PicovoiceKeyError,
-  type VoiceSettingsData,
-  type VoiceSettings as VoiceSettingsType,
-} from "./voice-settings-types";
-import { VoiceSettingsWakeWord } from "./voice-settings-wake-word";
-
-// Pvars - shared with voice service (writes here trigger service updates)
-const voiceSettingsPvar = userVar<VoiceSettingsData>("voiceSettings", {
-  defaultValue: DEFAULT_SETTINGS,
-});
-const picovoiceKeyPvar = userVar<string>("PICOVOICE_ACCESS_KEY", {
-  isSecret: true,
-  defaultValue: "",
-});
-const openaiKeyPvar = userVar<string>("OPENAI_API_KEY", { isSecret: true, defaultValue: "" });
-
-export const VoiceSettings: React.FC = () => {
-  const [settings, setSettings] = useState<VoiceSettingsType>({ ...DEFAULT_SETTINGS });
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState<string | null>(null);
-  const [audioDevices, setAudioDevices] = useState<string[]>([]);
-  const [keyError, setKeyError] = useState<PicovoiceKeyError | null>(null);
-
-  // Local state for unsaved changes
-  const [localSettings, setLocalSettings] = useState<VoiceSettingsType>(settings);
-  const [picovoiceKey, setPicovoiceKey] = useState("");
-  const [openaiKey, setOpenaiKey] = useState("");
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-
-  const [testText, setTestText] = useState("Hello, this is a test of the text to speech system.");
-
-  // Load initial settings from pvars
-  useEffect(() => {
-    const loadSettings = async () => {
-      try {
-        await voiceSettingsPvar.loadingPromise;
-        await picovoiceKeyPvar.loadingPromise;
-        await openaiKeyPvar.loadingPromise;
-
-        const savedSettings = voiceSettingsPvar() || DEFAULT_SETTINGS;
-        const picovoiceKeyValue = picovoiceKeyPvar();
-        const openaiKeyValue = openaiKeyPvar();
-
-        const loadedSettings: VoiceSettingsType = {
-          ...savedSettings,
-          picovoiceAccessKeySet: !!picovoiceKeyValue && picovoiceKeyValue !== "",
-          openaiApiKeySet: !!openaiKeyValue && openaiKeyValue !== "",
-        };
-
-        setSettings(loadedSettings);
-        setLocalSettings(loadedSettings);
-
-        try {
-          const devices = await rpcServerCalls.voiceGetAudioDevices();
-          setAudioDevices(devices || []);
-        } catch {
-          // voiceGetAudioDevices not available (e.g. React Native) - leave empty
-        }
-
-        try {
-          const voiceState = await rpcServerCalls.voiceGetState();
-          setKeyError(voiceState.keyError ?? null);
-        } catch {
-          // voiceGetState not available - leave null
-        }
-      } catch (err) {
-        console.error("Failed to load voice settings:", err);
-        setError("Failed to load voice settings.");
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadSettings();
-  }, []);
-
-  // Track unsaved changes
-  useEffect(() => {
-    const settingsChanged = JSON.stringify(localSettings) !== JSON.stringify(settings);
-    const keysEntered = picovoiceKey.length > 0 || openaiKey.length > 0;
-    setHasUnsavedChanges(settingsChanged || keysEntered);
-  }, [localSettings, settings, picovoiceKey, openaiKey]);
-
-  const handleSaveAll = useCallback(async () => {
-    setSaving(true);
-    setError(null);
-    setSuccess(null);
-
-    try {
-      if (picovoiceKey) {
-        await picovoiceKeyPvar.loadingPromise;
-        picovoiceKeyPvar(picovoiceKey);
-        setPicovoiceKey("");
-        setKeyError(null);
-      }
-      if (openaiKey) {
-        await openaiKeyPvar.loadingPromise;
-        openaiKeyPvar(openaiKey);
-        setOpenaiKey("");
-      }
-
-      await voiceSettingsPvar.loadingPromise;
-      voiceSettingsPvar({
-        enabled: localSettings.enabled,
-        voiceOutputEnabled: localSettings.voiceOutputEnabled ?? true,
-        wakeWord: localSettings.wakeWord,
-        wakeWordSensitivity: localSettings.wakeWordSensitivity,
-        speechSensitivity: localSettings.speechSensitivity ?? 0.3,
-        sttProvider: localSettings.sttProvider,
-        ttsProvider: localSettings.ttsProvider,
-        ttsVoice: localSettings.ttsVoice,
-        ttsSpeed: localSettings.ttsSpeed,
-      });
-
-      const updatedSettings: VoiceSettingsType = {
-        ...localSettings,
-        picovoiceAccessKeySet: !!picovoiceKeyPvar() || !!picovoiceKey,
-        openaiApiKeySet: !!openaiKeyPvar() || !!openaiKey,
-      };
-      setSettings(updatedSettings);
-      setLocalSettings(updatedSettings);
-
-      setSuccess("Settings saved successfully!");
-      setTimeout(() => setSuccess(null), 3000);
-    } catch (err) {
-      console.error("Failed to save voice settings:", err);
-      setError((err as Error).message);
-    } finally {
-      setSaving(false);
-    }
-  }, [localSettings, picovoiceKey, openaiKey]);
-
-  const handleToggleEnabled = useCallback(async () => {
-    if (!localSettings.picovoiceAccessKeySet && !picovoiceKey && !localSettings.enabled) {
-      setError("Please enter and save a Picovoice Access Key first");
-      return;
-    }
-    setLocalSettings((prev) => ({ ...prev, enabled: !prev.enabled }));
-  }, [localSettings.enabled, localSettings.picovoiceAccessKeySet, picovoiceKey]);
-
-  const handleTestTTS = useCallback(async () => {
-    try {
-      setError(null);
-      await rpcServerCalls.voiceTestTTS(testText);
-    } catch (err) {
-      console.error("TTS test failed:", err);
-      setError(`TTS test failed: ${(err as Error).message}`);
-    }
-  }, [testText]);
-
-  const handleTestRecording = useCallback(async () => {
-    try {
-      setError(null);
-      await rpcServerCalls.voiceStartRecording();
-    } catch (err) {
-      console.error("Recording test failed:", err);
-      setError((err as Error).message);
-    }
-  }, []);
-
-  const handleSettingsChange = useCallback((patch: Partial<VoiceSettingsType>) => {
-    setLocalSettings((prev) => ({ ...prev, ...patch }));
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="d-flex justify-content-center p-4">
-        <div className="spinner-border text-primary" role="status">
-          <span className="visually-hidden">Loading...</span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="voice-settings">
-      <div className="d-flex align-items-center mb-3">
-        <h5 className="mb-0 me-3">Voice Input</h5>
-        <div className="form-check form-switch me-auto">
-          <input
-            className="form-check-input"
-            type="checkbox"
-            id="voiceEnabled"
-            checked={localSettings.enabled}
-            onChange={handleToggleEnabled}
-            disabled={saving}
-          />
-          <label className="form-check-label" htmlFor="voiceEnabled">
-            {localSettings.enabled ? "Enabled" : "Disabled"}
-          </label>
-        </div>
-        <button
-          className="btn btn-primary btn-sm"
-          onClick={handleSaveAll}
-          disabled={saving || !hasUnsavedChanges}
-        >
-          {saving ? "Saving..." : "Save"}
-        </button>
-      </div>
-
-      {localSettings.enabled && (
-        <div className="d-flex align-items-center mb-3 ms-3">
-          <h6 className="mb-0 me-3 text-muted">Voice Output</h6>
-          <div className="form-check form-switch">
-            <input
-              className="form-check-input"
-              type="checkbox"
-              id="voiceOutputEnabled"
-              checked={localSettings.voiceOutputEnabled !== false}
-              onChange={(e) => handleSettingsChange({ voiceOutputEnabled: e.target.checked })}
-              disabled={saving}
-            />
-            <label className="form-check-label" htmlFor="voiceOutputEnabled">
-              {localSettings.voiceOutputEnabled !== false ? "On" : "Off"}
-            </label>
-          </div>
-          <small className="text-muted ms-2">Speak assistant responses aloud</small>
-        </div>
-      )}
-
-      {error && (
-        <div className="alert alert-danger alert-dismissible fade show" role="alert">
-          {error}
-          <button type="button" className="btn-close" onClick={() => setError(null)}></button>
-        </div>
-      )}
-
-      {success && (
-        <div className="alert alert-success alert-dismissible fade show" role="alert">
-          {success}
-          <button type="button" className="btn-close" onClick={() => setSuccess(null)}></button>
-        </div>
-      )}
-
-      <VoiceSettingsApiKeys
-        settings={settings}
-        picovoiceKey={picovoiceKey}
-        openaiKey={openaiKey}
-        keyError={keyError}
-        onPicovoiceKeyChange={setPicovoiceKey}
-        onOpenaiKeyChange={setOpenaiKey}
-        onDismissKeyError={() => setKeyError(null)}
-      />
-
-      <hr className="my-4" />
-
-      <VoiceSettingsWakeWord
-        localSettings={localSettings}
-        saving={saving}
-        onChange={handleSettingsChange}
-      />
-
-      <hr className="my-4" />
-
-      <VoiceSettingsProviders
-        localSettings={localSettings}
-        saving={saving}
-        onChange={handleSettingsChange}
-      />
-
-      <VoiceSettingsOutput
-        settings={settings}
-        localSettings={localSettings}
-        saving={saving}
-        testText={testText}
-        hasUnsavedChanges={hasUnsavedChanges}
-        audioDevices={audioDevices}
-        onChange={handleSettingsChange}
-        onTestTextChange={setTestText}
-        onTestTTS={handleTestTTS}
-        onTestRecording={handleTestRecording}
-      />
-
-      <hr className="my-4" />
-
-      <VoiceSettingsAgent />
-
-      <div className="alert alert-info">
-        <h6 className="alert-heading">
-          <i className="bi bi-info-circle me-2"></i>
-          How to use
-        </h6>
-        <ol className="mb-0 small">
-          <li>Get a free Picovoice access key from the link above</li>
-          <li>
-            Enter the key and click <strong>Save</strong>
-          </li>
-          <li>
-            Enable voice input and click <strong>Save</strong> again
-          </li>
-          <li>
-            Say{" "}
-            <strong>
-              "{BUILTIN_WAKE_WORDS.find((w) => w.id === localSettings.wakeWord)?.name || "Computer"}
-              "
-            </strong>{" "}
-            to activate voice recording
-          </li>
-          <li>Speak your message - recording stops automatically when you pause</li>
-          <li>Your message will be sent to the assistant and the response will be spoken</li>
-        </ol>
-      </div>
-    </div>
-  );
-};
-
-export default VoiceSettings;