@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,6 +1,10 @@
-import React from 'react';
-import { Tooltip } from '../../components/tooltip';
-import { VoiceSettings, PicovoiceKeyError, PICOVOICE_KEY_ERROR_MESSAGES } from './voice-settings-types';
+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;
@@ -26,22 +30,22 @@ export const VoiceSettingsApiKeys: React.FC<ApiKeysProps> = ({
       <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>
-        )}
+        {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'}
+        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)'}
+        {settings.picovoiceAccessKeySet && " (leave blank to keep existing key)"}
       </small>
     </div>
 
@@ -70,16 +74,14 @@ export const VoiceSettingsApiKeys: React.FC<ApiKeysProps> = ({
       <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>
-        )}
+        {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-...'}
+        placeholder={settings.openaiApiKeySet ? "••••••••••••••••" : "sk-..."}
       />
       {settings.openaiApiKeySet && (
         <small className="text-muted">Leave blank to keep existing key</small>

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { VoiceSettings, OPENAI_TTS_VOICES } from './voice-settings-types';
+import type React from "react";
+import { OPENAI_TTS_VOICES, type VoiceSettings } from "./voice-settings-types";
 
 interface OutputProps {
   settings: VoiceSettings;
@@ -27,16 +27,16 @@ export const VoiceSettingsOutput: React.FC<OutputProps> = ({
   onTestRecording,
 }) => (
   <>
-    {localSettings.ttsProvider === 'cloud' && (
+    {localSettings.ttsProvider === "cloud" && (
       <div className="mb-3">
         <label className="form-label">Voice</label>
         <select
           className="form-select"
-          value={localSettings.ttsVoice || 'nova'}
+          value={localSettings.ttsVoice || "nova"}
           onChange={(e) => onChange({ ttsVoice: e.target.value })}
           disabled={saving}
         >
-          {OPENAI_TTS_VOICES.map(voice => (
+          {OPENAI_TTS_VOICES.map((voice) => (
             <option key={voice.id} value={voice.id}>
               {voice.name} - {voice.description}
             </option>
@@ -46,9 +46,7 @@ export const VoiceSettingsOutput: React.FC<OutputProps> = ({
     )}
 
     <div className="mb-4">
-      <label className="form-label">
-        Speaking Speed: {localSettings.ttsSpeed.toFixed(1)}x
-      </label>
+      <label className="form-label">Speaking Speed: {localSettings.ttsSpeed.toFixed(1)}x</label>
       <input
         type="range"
         className="form-range"
@@ -78,14 +76,16 @@ export const VoiceSettingsOutput: React.FC<OutputProps> = ({
           className="btn btn-outline-primary"
           type="button"
           onClick={onTestTTS}
-          disabled={!settings.enabled && localSettings.ttsProvider === 'cloud' && !settings.openaiApiKeySet}
+          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'}
+        {hasUnsavedChanges && "Save changes first to test with new settings"}
       </small>
     </div>
 
@@ -94,7 +94,8 @@ export const VoiceSettingsOutput: React.FC<OutputProps> = ({
     <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.
+        Click the button below to test voice recording. Speak and it will stop when silence is
+        detected.
       </p>
       <button
         className="btn btn-primary"

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { VoiceSettings, STTProvider, TTSProvider } from './voice-settings-types';
+import type React from "react";
+import type { STTProvider, TTSProvider, VoiceSettings } from "./voice-settings-types";
 
 interface ProvidersProps {
   localSettings: VoiceSettings;
@@ -7,7 +7,11 @@ interface ProvidersProps {
   onChange: (patch: Partial<VoiceSettings>) => void;
 }
 
-export const VoiceSettingsProviders: React.FC<ProvidersProps> = ({ localSettings, saving, onChange }) => (
+export const VoiceSettingsProviders: React.FC<ProvidersProps> = ({
+  localSettings,
+  saving,
+  onChange,
+}) => (
   <>
     <h6 className="mb-3">Speech to Text (STT)</h6>
 

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

@@ -1,21 +1,21 @@
-export type STTProvider = 'auto' | 'cloud' | 'local';
-export type TTSProvider = 'browser' | 'cloud';
-export type PicovoiceKeyError = 'refused' | 'invalid' | 'limit' | 'throttled';
+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';
+  | "ALEXA"
+  | "AMERICANO"
+  | "BLUEBERRY"
+  | "BUMBLEBEE"
+  | "COMPUTER"
+  | "GRAPEFRUIT"
+  | "GRASSHOPPER"
+  | "HEY_GOOGLE"
+  | "HEY_SIRI"
+  | "JARVIS"
+  | "OK_GOOGLE"
+  | "PICOVOICE"
+  | "PORCUPINE"
+  | "TERMINATOR";
 
 export interface VoiceSettingsData {
   enabled: boolean;
@@ -37,55 +37,58 @@ export interface VoiceSettings extends VoiceSettingsData {
 export const DEFAULT_SETTINGS: VoiceSettingsData = {
   enabled: false,
   voiceOutputEnabled: true,
-  wakeWord: 'COMPUTER',
+  wakeWord: "COMPUTER",
   wakeWordSensitivity: 0.5,
   speechSensitivity: 0.7,
-  sttProvider: 'auto',
-  ttsProvider: 'browser',
+  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' },
+  { 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 }> = {
+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.',
+    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.',
+    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.',
+    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.',
+    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' },
+  { 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,6 +1,10 @@
-import React from 'react';
-import { Tooltip } from '../../components/tooltip';
-import { VoiceSettings, BuiltinWakeWord, BUILTIN_WAKE_WORDS } from './voice-settings-types';
+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;
@@ -8,7 +12,11 @@ interface WakeWordProps {
   onChange: (patch: Partial<VoiceSettings>) => void;
 }
 
-export const VoiceSettingsWakeWord: React.FC<WakeWordProps> = ({ localSettings, saving, onChange }) => (
+export const VoiceSettingsWakeWord: React.FC<WakeWordProps> = ({
+  localSettings,
+  saving,
+  onChange,
+}) => (
   <>
     <div className="mb-4">
       <label className="form-label">
@@ -21,7 +29,7 @@ export const VoiceSettingsWakeWord: React.FC<WakeWordProps> = ({ localSettings,
         onChange={(e) => onChange({ wakeWord: e.target.value as BuiltinWakeWord })}
         disabled={saving}
       >
-        {BUILTIN_WAKE_WORDS.map(word => (
+        {BUILTIN_WAKE_WORDS.map((word) => (
           <option key={word.id} value={word.id}>
             {word.name}
           </option>
@@ -68,10 +76,18 @@ export const VoiceSettingsWakeWord: React.FC<WakeWordProps> = ({ localSettings,
         <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>
+        <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,24 +1,36 @@
 /**
  * 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 React, { useState, useEffect, useCallback } from 'react';
-import { rpcServerCalls, userVar } from '@peers-app/peers-sdk';
-import { VoiceSettings as VoiceSettingsType, VoiceSettingsData, PicovoiceKeyError, DEFAULT_SETTINGS, BUILTIN_WAKE_WORDS } from './voice-settings-types';
-import { VoiceSettingsApiKeys } from './voice-settings-api-keys';
-import { VoiceSettingsWakeWord } from './voice-settings-wake-word';
-import { VoiceSettingsProviders } from './voice-settings-providers';
-import { VoiceSettingsOutput } from './voice-settings-output';
-import { VoiceSettingsAgent } from './voice-settings-agent';
+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: '' });
+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 });
@@ -28,14 +40,14 @@ export const VoiceSettings: React.FC = () => {
   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 [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.');
+
+  const [testText, setTestText] = useState("Hello, this is a test of the text to speech system.");
 
   // Load initial settings from pvars
   useEffect(() => {
@@ -44,20 +56,20 @@ export const VoiceSettings: React.FC = () => {
         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 !== '',
+          picovoiceAccessKeySet: !!picovoiceKeyValue && picovoiceKeyValue !== "",
+          openaiApiKeySet: !!openaiKeyValue && openaiKeyValue !== "",
         };
-        
+
         setSettings(loadedSettings);
         setLocalSettings(loadedSettings);
-        
+
         try {
           const devices = await rpcServerCalls.voiceGetAudioDevices();
           setAudioDevices(devices || []);
@@ -72,8 +84,8 @@ export const VoiceSettings: React.FC = () => {
           // voiceGetState not available - leave null
         }
       } catch (err) {
-        console.error('Failed to load voice settings:', err);
-        setError('Failed to load voice settings.');
+        console.error("Failed to load voice settings:", err);
+        setError("Failed to load voice settings.");
       } finally {
         setLoading(false);
       }
@@ -92,18 +104,18 @@ export const VoiceSettings: React.FC = () => {
     setSaving(true);
     setError(null);
     setSuccess(null);
-    
+
     try {
       if (picovoiceKey) {
         await picovoiceKeyPvar.loadingPromise;
         picovoiceKeyPvar(picovoiceKey);
-        setPicovoiceKey('');
+        setPicovoiceKey("");
         setKeyError(null);
       }
       if (openaiKey) {
         await openaiKeyPvar.loadingPromise;
         openaiKeyPvar(openaiKey);
-        setOpenaiKey('');
+        setOpenaiKey("");
       }
 
       await voiceSettingsPvar.loadingPromise;
@@ -126,11 +138,11 @@ export const VoiceSettings: React.FC = () => {
       };
       setSettings(updatedSettings);
       setLocalSettings(updatedSettings);
-      
-      setSuccess('Settings saved successfully!');
+
+      setSuccess("Settings saved successfully!");
       setTimeout(() => setSuccess(null), 3000);
     } catch (err) {
-      console.error('Failed to save voice settings:', err);
+      console.error("Failed to save voice settings:", err);
       setError((err as Error).message);
     } finally {
       setSaving(false);
@@ -139,10 +151,10 @@ export const VoiceSettings: React.FC = () => {
 
   const handleToggleEnabled = useCallback(async () => {
     if (!localSettings.picovoiceAccessKeySet && !picovoiceKey && !localSettings.enabled) {
-      setError('Please enter and save a Picovoice Access Key first');
+      setError("Please enter and save a Picovoice Access Key first");
       return;
     }
-    setLocalSettings(prev => ({ ...prev, enabled: !prev.enabled }));
+    setLocalSettings((prev) => ({ ...prev, enabled: !prev.enabled }));
   }, [localSettings.enabled, localSettings.picovoiceAccessKeySet, picovoiceKey]);
 
   const handleTestTTS = useCallback(async () => {
@@ -150,8 +162,8 @@ export const VoiceSettings: React.FC = () => {
       setError(null);
       await rpcServerCalls.voiceTestTTS(testText);
     } catch (err) {
-      console.error('TTS test failed:', err);
-      setError('TTS test failed: ' + (err as Error).message);
+      console.error("TTS test failed:", err);
+      setError(`TTS test failed: ${(err as Error).message}`);
     }
   }, [testText]);
 
@@ -160,13 +172,13 @@ export const VoiceSettings: React.FC = () => {
       setError(null);
       await rpcServerCalls.voiceStartRecording();
     } catch (err) {
-      console.error('Recording test failed:', err);
+      console.error("Recording test failed:", err);
       setError((err as Error).message);
     }
   }, []);
 
   const handleSettingsChange = useCallback((patch: Partial<VoiceSettingsType>) => {
-    setLocalSettings(prev => ({ ...prev, ...patch }));
+    setLocalSettings((prev) => ({ ...prev, ...patch }));
   }, []);
 
   if (loading) {
@@ -193,7 +205,7 @@ export const VoiceSettings: React.FC = () => {
             disabled={saving}
           />
           <label className="form-check-label" htmlFor="voiceEnabled">
-            {localSettings.enabled ? 'Enabled' : 'Disabled'}
+            {localSettings.enabled ? "Enabled" : "Disabled"}
           </label>
         </div>
         <button
@@ -201,7 +213,7 @@ export const VoiceSettings: React.FC = () => {
           onClick={handleSaveAll}
           disabled={saving || !hasUnsavedChanges}
         >
-          {saving ? 'Saving...' : 'Save'}
+          {saving ? "Saving..." : "Save"}
         </button>
       </div>
 
@@ -218,7 +230,7 @@ export const VoiceSettings: React.FC = () => {
               disabled={saving}
             />
             <label className="form-check-label" htmlFor="voiceOutputEnabled">
-              {localSettings.voiceOutputEnabled !== false ? 'On' : 'Off'}
+              {localSettings.voiceOutputEnabled !== false ? "On" : "Off"}
             </label>
           </div>
           <small className="text-muted ms-2">Speak assistant responses aloud</small>
@@ -289,9 +301,20 @@ export const VoiceSettings: React.FC = () => {
         </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>
+            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>