@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/src/components/VoiceConfigView.tsx

@@ -1,674 +0,0 @@
-/**
- * VoiceConfigView — TTS/STT provider selection and configuration.
- *
- * Similar to MediaSettingsSection pattern:
- *   - Provider selection (ElevenLabs, Edge TTS, etc.)
- *   - API key inputs where needed
- *   - Voice preset selection
- *   - Test functionality
- */
-
-import { Button, Input } from "@elizaos/ui";
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  client,
-  type VoiceConfig,
-  type VoiceMode,
-  type VoiceProvider,
-} from "../api";
-import { getSwabblePlugin, type SwabbleConfig } from "../bridge/native-plugins";
-import { dispatchWindowEvent, VOICE_CONFIG_UPDATED_EVENT } from "../events";
-import { useTimeout } from "../hooks";
-import { useApp } from "../state";
-import { PREMADE_VOICES, sanitizeApiKey, VOICE_PROVIDERS } from "../voice";
-import {
-  CloudConnectionStatus,
-  CloudSourceModeToggle,
-} from "./CloudSourceControls";
-import { ConfigSaveFooter } from "./ConfigSaveFooter";
-
-const DEFAULT_ELEVEN_FAST_MODEL = "eleven_flash_v2_5";
-
-const MODEL_SIZES: Array<{
-  id: NonNullable<SwabbleConfig["modelSize"]>;
-  hint: string;
-}> = [
-  { id: "tiny", hint: "(faster)" },
-  { id: "base", hint: "(recommended)" },
-  { id: "small", hint: "" },
-  { id: "medium", hint: "(accurate)" },
-  { id: "large", hint: "(accurate)" },
-];
-
-function WakeWordSection({
-  serverConfig,
-}: {
-  serverConfig?: Partial<SwabbleConfig> | null;
-}) {
-  const { t } = useApp();
-  const [triggers, setTriggers] = useState<string[]>(["eliza"]);
-  const [triggerInput, setTriggerInput] = useState("");
-  const [sensitivity, setSensitivity] = useState(0.45);
-  const [modelSize, setModelSize] =
-    useState<NonNullable<SwabbleConfig["modelSize"]>>("base");
-  const [audioLevel, setAudioLevel] = useState(0);
-  const [enabled, setEnabled] = useState(false);
-
-  // Load initial state from Swabble on mount
-  useEffect(() => {
-    void (async () => {
-      try {
-        const swabble = getSwabblePlugin();
-        const [{ config }, { listening }] = await Promise.all([
-          swabble.getConfig(),
-          swabble.isListening(),
-        ]);
-        // Use plugin config if available, fall back to server-persisted config
-        const resolved = config ?? serverConfig ?? null;
-        if (resolved) {
-          if (resolved.triggers?.length) setTriggers(resolved.triggers);
-          if (resolved.minPostTriggerGap != null)
-            setSensitivity(resolved.minPostTriggerGap);
-          if (resolved.modelSize) setModelSize(resolved.modelSize);
-        }
-        setEnabled(listening);
-      } catch {
-        // Plugin not available on this platform — silently ignore
-      }
-    })();
-  }, [serverConfig]);
-
-  // Subscribe to audio level events
-  useEffect(() => {
-    let handle: { remove: () => Promise<void> } | null = null;
-    void (async () => {
-      try {
-        handle = await getSwabblePlugin().addListener(
-          "audioLevel",
-          (evt: { level: number }) => {
-            setAudioLevel(evt.level);
-          },
-        );
-      } catch {
-        // Not available
-      }
-    })();
-    return () => {
-      if (handle) void handle.remove();
-    };
-  }, []);
-
-  const buildConfig = useCallback(
-    (): SwabbleConfig => ({
-      triggers,
-      minPostTriggerGap: sensitivity,
-      modelSize,
-    }),
-    [triggers, sensitivity, modelSize],
-  );
-
-  const handleTriggersChange = useCallback(async (next: string[]) => {
-    setTriggers(next);
-    try {
-      await getSwabblePlugin().updateConfig({ config: { triggers: next } });
-    } catch {
-      // Ignore
-    }
-  }, []);
-
-  const addTrigger = useCallback(
-    (raw: string) => {
-      const val = raw.trim().toLowerCase().replace(/,/g, "");
-      if (!val || triggers.includes(val)) return;
-      void handleTriggersChange([...triggers, val]);
-    },
-    [triggers, handleTriggersChange],
-  );
-
-  const removeTrigger = useCallback(
-    (t: string) => {
-      if (triggers.length <= 1) return;
-      void handleTriggersChange(triggers.filter((x) => x !== t));
-    },
-    [triggers, handleTriggersChange],
-  );
-
-  const handleSensitivityChange = useCallback(async (val: number) => {
-    setSensitivity(val);
-    try {
-      await getSwabblePlugin().updateConfig({
-        config: { minPostTriggerGap: val },
-      });
-    } catch {
-      // Ignore
-    }
-  }, []);
-
-  const handleModelSizeChange = useCallback(
-    async (size: NonNullable<SwabbleConfig["modelSize"]>) => {
-      setModelSize(size);
-      try {
-        await getSwabblePlugin().updateConfig({ config: { modelSize: size } });
-      } catch {
-        // Ignore
-      }
-    },
-    [],
-  );
-
-  const handleToggle = useCallback(async () => {
-    try {
-      if (enabled) {
-        await getSwabblePlugin().stop();
-        setEnabled(false);
-      } else {
-        const result = await getSwabblePlugin().start({
-          config: buildConfig(),
-        });
-        if (result.started) setEnabled(true);
-      }
-    } catch {
-      // Ignore
-    }
-  }, [enabled, buildConfig]);
-
-  return (
-    <div className="flex flex-col gap-3 pt-4 border-t border-[var(--border)]">
-      {/* Subsection header + enable toggle */}
-      <div className="flex items-center justify-between">
-        <div className="text-xs font-semibold text-[var(--muted)]">
-          {t("voiceconfigview.WakeWord")}
-        </div>
-        <button
-          type="button"
-          onClick={() => void handleToggle()}
-          className={`relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full transition-colors ${
-            enabled ? "bg-[var(--accent)]" : "bg-[var(--border)]"
-          }`}
-          aria-label={enabled ? "Disable wake word" : "Enable wake word"}
-        >
-          <span
-            className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform ${
-              enabled ? "translate-x-4" : "translate-x-0.5"
-            }`}
-          />
-        </button>
-      </div>
-
-      {/* Trigger tag input */}
-      <div className="flex flex-col gap-1.5">
-        <span className="text-xs font-semibold">
-          {t("voiceconfigview.Triggers")}
-        </span>
-        <div className="flex flex-wrap gap-1 p-1.5 border border-[var(--border)] bg-[var(--card)] min-h-[2rem]">
-          {triggers.map((t) => (
-            <span
-              key={t}
-              className="flex items-center gap-1 rounded-full border border-[var(--accent)] bg-[var(--accent)]/10 px-1.5 py-0.5 text-[10px] text-[var(--text)]"
-            >
-              {t}
-              {triggers.length > 1 && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="settings-compact-button settings-icon-button leading-none hover:bg-transparent hover:opacity-70 cursor-pointer h-4 w-4 ml-1"
-                  onClick={() => removeTrigger(t)}
-                  aria-label={`Remove trigger "${t}"`}
-                >
-                  ×
-                </Button>
-              )}
-            </span>
-          ))}
-          <Input
-            type="text"
-            className="flex-1 min-w-[80px] h-6 px-1 text-xs bg-transparent border-0 focus-visible:ring-0 shadow-none"
-            placeholder={t("voiceconfigview.AddTrigger")}
-            value={triggerInput}
-            onChange={(e) => setTriggerInput(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === ",") {
-                e.preventDefault();
-                addTrigger(triggerInput);
-                setTriggerInput("");
-              }
-            }}
-          />
-        </div>
-        <div className="text-[10px] text-[var(--muted)]">
-          {t("voiceconfigview.PressEnterOrComma")}
-        </div>
-      </div>
-
-      {/* Sensitivity slider */}
-      <div className="flex flex-col gap-1.5">
-        <div className="flex items-center justify-between">
-          <span className="text-xs font-semibold">
-            {t("voiceconfigview.WakeSensitivity")}
-          </span>
-          <span className="text-[10px] text-[var(--muted)]">
-            {sensitivity.toFixed(2)}s
-          </span>
-        </div>
-        <input
-          type="range"
-          min={0.1}
-          max={2.0}
-          step={0.05}
-          value={sensitivity}
-          className="w-full"
-          style={{ accentColor: "var(--accent)" }}
-          onChange={(e) =>
-            void handleSensitivityChange(parseFloat(e.target.value))
-          }
-        />
-        <div className="text-[10px] text-[var(--muted)]">
-          {t("voiceconfigview.LowerMoreSensiti")}
-        </div>
-      </div>
-
-      {/* Model size buttons */}
-      <div className="flex flex-col gap-1.5">
-        <span className="text-xs font-semibold">
-          {t("voiceconfigview.ModelSize")}
-        </span>
-        <div className="flex gap-1.5">
-          {MODEL_SIZES.map((m) => {
-            const active = modelSize === m.id;
-            return (
-              <Button
-                key={m.id}
-                variant={active ? "default" : "outline"}
-                size="sm"
-                className="flex-1 h-auto flex-col py-1.5"
-                onClick={() => void handleModelSizeChange(m.id)}
-              >
-                <div className="font-semibold">{m.id}</div>
-                {m.hint && (
-                  <div className="text-[10px] opacity-70 mt-0.5">{m.hint}</div>
-                )}
-              </Button>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Audio level meter */}
-      <div className="flex flex-col gap-1">
-        <span className="text-xs font-semibold">
-          {t("voiceconfigview.Microphone")}
-        </span>
-        <div className="h-1.5 w-full bg-[var(--border)] overflow-hidden">
-          <div
-            className="h-full bg-green-500 transition-all duration-75"
-            style={{ width: `${Math.min(audioLevel * 100, 100)}%` }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function VoiceConfigView() {
-  const { setTimeout } = useTimeout();
-
-  const { t } = useApp();
-  const { elizaCloudConnected } = useApp();
-  const [voiceConfig, setVoiceConfig] = useState<VoiceConfig>({});
-  const [swabbleServerConfig, setSwabbleServerConfig] =
-    useState<Partial<SwabbleConfig> | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [saveSuccess, setSaveSuccess] = useState(false);
-  const [saveError, setSaveError] = useState<string | null>(null);
-  const [dirty, setDirty] = useState(false);
-  const [testing, setTesting] = useState(false);
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-
-  // Load config on mount
-  useEffect(() => {
-    void (async () => {
-      setLoading(true);
-      try {
-        const cfg = await client.getConfig();
-        const messages = cfg.messages as
-          | Record<string, Record<string, unknown>>
-          | undefined;
-        const tts = messages?.tts as VoiceConfig | undefined;
-        if (tts) {
-          setVoiceConfig(tts);
-        }
-        const swabble = messages?.swabble as Partial<SwabbleConfig> | undefined;
-        if (swabble) {
-          setSwabbleServerConfig(swabble);
-        }
-      } catch {
-        // Ignore errors
-      }
-      setLoading(false);
-    })();
-  }, []);
-
-  // Cleanup audio on unmount
-  useEffect(() => {
-    return () => {
-      if (audioRef.current) {
-        audioRef.current.pause();
-        audioRef.current = null;
-      }
-    };
-  }, []);
-
-  const currentProvider = voiceConfig.provider ?? "elevenlabs";
-  const currentMode: VoiceMode = voiceConfig.mode ?? "own-key";
-  const providerInfo = VOICE_PROVIDERS.find((p) => p.id === currentProvider);
-  const isConfigured =
-    currentMode === "cloud"
-      ? elizaCloudConnected
-      : currentProvider !== "elevenlabs"
-        ? true
-        : Boolean(voiceConfig.elevenlabs?.apiKey);
-
-  const handleProviderChange = useCallback((provider: VoiceProvider) => {
-    setVoiceConfig((prev) => ({ ...prev, provider }));
-    setDirty(true);
-  }, []);
-
-  const handleModeChange = useCallback((mode: VoiceMode) => {
-    setVoiceConfig((prev) => ({ ...prev, mode }));
-    setDirty(true);
-  }, []);
-
-  const handleApiKeyChange = useCallback((apiKey: string) => {
-    setVoiceConfig((prev) => ({
-      ...prev,
-      elevenlabs: { ...prev.elevenlabs, apiKey: apiKey || undefined },
-    }));
-    setDirty(true);
-  }, []);
-
-  const handleVoiceSelect = useCallback((voiceId: string) => {
-    setVoiceConfig((prev) => ({
-      ...prev,
-      elevenlabs: { ...prev.elevenlabs, voiceId },
-    }));
-    setDirty(true);
-  }, []);
-
-  const handleTestVoice = useCallback((previewUrl: string) => {
-    if (audioRef.current) {
-      audioRef.current.pause();
-    }
-    setTesting(true);
-    const audio = new Audio(previewUrl);
-    audioRef.current = audio;
-    audio.onended = () => setTesting(false);
-    audio.onerror = () => setTesting(false);
-    audio.play().catch(() => setTesting(false));
-  }, []);
-
-  const handleSave = useCallback(async () => {
-    setSaving(true);
-    setSaveError(null);
-    setSaveSuccess(false);
-    try {
-      const cfg = await client.getConfig();
-      const messages = (cfg.messages ?? {}) as Record<string, unknown>;
-      const provider = voiceConfig.provider ?? "elevenlabs";
-      const normalizedElevenLabs =
-        provider === "elevenlabs"
-          ? {
-              ...voiceConfig.elevenlabs,
-              modelId:
-                voiceConfig.elevenlabs?.modelId ?? DEFAULT_ELEVEN_FAST_MODEL,
-            }
-          : voiceConfig.elevenlabs;
-      const sanitizedKey = sanitizeApiKey(normalizedElevenLabs?.apiKey);
-      if (normalizedElevenLabs) {
-        if (sanitizedKey) normalizedElevenLabs.apiKey = sanitizedKey;
-        else delete normalizedElevenLabs.apiKey;
-      }
-      const normalizedVoiceConfig: VoiceConfig = {
-        ...voiceConfig,
-        provider,
-        mode:
-          provider === "elevenlabs"
-            ? (voiceConfig.mode ?? "own-key")
-            : undefined,
-        elevenlabs: normalizedElevenLabs,
-      };
-      // Also persist swabble (wake word) config — fall back to server config
-      // if the plugin isn't available on this platform (e.g. Electrobun).
-      let swabbleCfg: Partial<SwabbleConfig> | undefined;
-      try {
-        const { config: sc } = await getSwabblePlugin().getConfig();
-        if (sc) swabbleCfg = sc;
-      } catch {
-        // Not available on this platform
-      }
-      if (!swabbleCfg && swabbleServerConfig) {
-        swabbleCfg = swabbleServerConfig;
-      }
-
-      await client.updateConfig({
-        messages: {
-          ...messages,
-          tts: normalizedVoiceConfig,
-          ...(swabbleCfg ? { swabble: swabbleCfg } : {}),
-        },
-      });
-      dispatchWindowEvent(VOICE_CONFIG_UPDATED_EVENT, normalizedVoiceConfig);
-      setSaveSuccess(true);
-      setDirty(false);
-      setTimeout(() => setSaveSuccess(false), 2500);
-    } catch (err) {
-      setSaveError(err instanceof Error ? err.message : "Failed to save");
-    }
-    setSaving(false);
-  }, [swabbleServerConfig, voiceConfig, setTimeout]);
-
-  if (loading) {
-    return (
-      <div className="py-4 text-center text-[var(--muted)] text-xs">
-        {t("voiceconfigview.LoadingVoiceConfig")}
-      </div>
-    );
-  }
-
-  const selectedVoiceId = voiceConfig.elevenlabs?.voiceId;
-  const selectedPreset = PREMADE_VOICES.find(
-    (p) => p.voiceId === selectedVoiceId,
-  );
-
-  return (
-    <div className="flex flex-col gap-4">
-      {/* Provider selection */}
-      <div className="flex flex-col gap-2">
-        <div className="text-xs font-semibold text-[var(--muted)]">
-          {t("voiceconfigview.TTSProvider")}
-        </div>
-        <div className="flex gap-2">
-          {VOICE_PROVIDERS.map((p) => {
-            const active = currentProvider === p.id;
-            return (
-              <Button
-                key={p.id}
-                variant={active ? "default" : "outline"}
-                size="sm"
-                className="flex-1 h-auto flex-col py-2"
-                onClick={() => handleProviderChange(p.id)}
-              >
-                <div className="font-semibold">{p.label}</div>
-                <div className="text-[10px] opacity-70 mt-0.5">{p.hint}</div>
-              </Button>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Status */}
-      <div className="flex items-center justify-between py-2 px-3 border border-[var(--border)] bg-[var(--bg-muted)]">
-        <span className="text-xs">
-          {currentProvider === "elevenlabs"
-            ? `ElevenLabs — ${currentMode === "cloud" ? t("voiceconfigview.ServedViaElizaCloud") : t("voiceconfigview.RequiresApiKey")}`
-            : `${providerInfo?.label} — ${t("voiceconfigview.NoApiKeyNeeded")}`}
-        </span>
-        <span
-          className={`rounded-full border px-1.5 py-0.5 text-[10px] ${
-            isConfigured
-              ? "border-green-600 bg-green-600/10 text-[var(--text)]"
-              : "border-[var(--warn)] bg-[var(--warn-subtle)] text-[var(--text)]"
-          }`}
-        >
-          {isConfigured
-            ? t("mediasettingssection.Configured")
-            : t("mediasettingssection.NeedsSetup")}
-        </span>
-      </div>
-
-      {/* ElevenLabs settings */}
-      {currentProvider === "elevenlabs" && (
-        <div className="flex flex-col gap-3">
-          {/* API source mode */}
-          <div className="flex items-center justify-between gap-2">
-            <span className="text-xs font-semibold text-[var(--muted)]">
-              {t("voiceconfigview.APISource")}
-            </span>
-            <CloudSourceModeToggle
-              mode={currentMode}
-              onChange={handleModeChange}
-            />
-          </div>
-
-          {/* Cloud mode status */}
-          {currentMode === "cloud" && (
-            <CloudConnectionStatus
-              connected={elizaCloudConnected}
-              disconnectedText={t("elizaclouddashboard.ElizaCloudNotConnected")}
-            />
-          )}
-
-          {/* API Key */}
-          {currentMode === "own-key" && (
-            <div className="flex flex-col gap-1.5">
-              <span className="text-xs font-semibold">
-                {t("voiceconfigview.ElevenLabsAPIKey")}
-              </span>
-              <Input
-                type="password"
-                className="bg-card text-xs"
-                placeholder={
-                  voiceConfig.elevenlabs?.apiKey
-                    ? t("mediasettingssection.ApiKeySetLeaveBlank")
-                    : t("mediasettingssection.EnterApiKey")
-                }
-                onChange={(e) => handleApiKeyChange(e.target.value)}
-              />
-              <div className="text-[10px] text-[var(--muted)]">
-                {t("voiceconfigview.GetYourKeyAt")}{" "}
-                <a
-                  href="https://elevenlabs.io"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-[var(--text)] underline decoration-[var(--accent)] underline-offset-2 hover:opacity-80"
-                >
-                  {t("voiceconfigview.elevenlabsIo")}
-                </a>
-              </div>
-              <div className="text-[10px] text-[var(--muted)]">
-                {t("voiceconfigview.FastPathDefaultE")}
-                {DEFAULT_ELEVEN_FAST_MODEL}`).
-              </div>
-            </div>
-          )}
-
-          {/* Voice presets */}
-          <div className="flex flex-col gap-2">
-            <div className="text-xs font-semibold">
-              {t("voiceconfigview.Voice")}
-            </div>
-            <div className="grid grid-cols-3 gap-1.5">
-              {PREMADE_VOICES.map((preset) => {
-                const active = selectedVoiceId === preset.voiceId;
-                return (
-                  <Button
-                    key={preset.id}
-                    variant={active ? "default" : "outline"}
-                    size="sm"
-                    className="h-auto flex-col items-start py-1.5 px-2 text-left"
-                    onClick={() => handleVoiceSelect(preset.voiceId)}
-                  >
-                    <div className="font-semibold truncate w-full">
-                      {preset.name}
-                    </div>
-                    <div className="text-[10px] opacity-70 truncate w-full">
-                      {preset.hint}
-                    </div>
-                  </Button>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Test voice */}
-          {selectedPreset && (
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="font-semibold"
-                disabled={testing}
-                onClick={() => handleTestVoice(selectedPreset.previewUrl)}
-              >
-                {testing
-                  ? t("voiceconfigview.Playing")
-                  : t("voiceconfigview.TestVoice", {
-                      name: selectedPreset.name,
-                    })}
-              </Button>
-              {testing && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    if (audioRef.current) {
-                      audioRef.current.pause();
-                      setTesting(false);
-                    }
-                  }}
-                >
-                  {t("voiceconfigview.Stop")}
-                </Button>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Edge TTS settings */}
-      {currentProvider === "edge" && (
-        <div className="py-2 px-3 border border-[var(--border)] bg-[var(--bg-muted)] text-xs text-[var(--muted)]">
-          {t("voiceconfigview.EdgeTTSUsesMicros")}
-        </div>
-      )}
-
-      {/* Simple voice settings */}
-      {currentProvider === "simple-voice" && (
-        <div className="py-2 px-3 border border-[var(--border)] bg-[var(--bg-muted)] text-xs text-[var(--muted)]">
-          {t("voiceconfigview.SimpleVoiceUsesYo")}
-        </div>
-      )}
-
-      {/* Wake Word subsection */}
-      <WakeWordSection serverConfig={swabbleServerConfig} />
-
-      <ConfigSaveFooter
-        dirty={dirty}
-        saving={saving}
-        saveError={saveError}
-        saveSuccess={saveSuccess}
-        onSave={() => void handleSave()}
-      />
-    </div>
-  );
-}