@elizaos/agent 2.0.0-alpha.358 → 2.0.0-alpha.376

package/packages/app-core/src/components/settings/VoiceConfigView.js

@@ -0,0 +1,505 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, SaveFooter, Switch, useTimeout, } from "@elizaos/ui";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { client, } from "../../api";
+import { invokeDesktopBridgeRequest, isElectrobunRuntime } from "../../bridge";
+import { getSwabblePlugin, } from "../../bridge/native-plugins";
+import { dispatchWindowEvent, VOICE_CONFIG_UPDATED_EVENT } from "../../events";
+import { useApp } from "../../state";
+import { hasConfiguredApiKey, PREMADE_VOICES, sanitizeApiKey, VOICE_PROVIDERS, } from "../../voice";
+import { CloudConnectionStatus, CloudSourceModeToggle, } from "../cloud/CloudSourceControls";
+const DEFAULT_ELEVEN_FAST_MODEL = "eleven_flash_v2_5";
+const MODEL_SIZES = [
+    { id: "tiny", hintKey: "voiceconfigview.hintFaster" },
+    { id: "base", hintKey: "voiceconfigview.hintRecommended" },
+    { id: "small", hintKey: "" },
+    { id: "medium", hintKey: "voiceconfigview.hintAccurate" },
+    { id: "large", hintKey: "voiceconfigview.hintAccurate" },
+];
+export const DESKTOP_TALKMODE_CLICK_AUDIT = [
+    {
+        id: "voice-talkmode-refresh",
+        entryPoint: "settings:voice",
+        label: "Refresh Talk Mode",
+        expectedAction: "Refresh talk mode state, speaking status, and whisper availability.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "voice-talkmode-start-stop",
+        entryPoint: "settings:voice",
+        label: "Start/Stop Talk Mode",
+        expectedAction: "Start or stop desktop talk mode.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "voice-talkmode-speak",
+        entryPoint: "settings:voice",
+        label: "Speak Test Phrase",
+        expectedAction: "Send a test phrase to talk mode speech output.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "voice-talkmode-stop-speaking",
+        entryPoint: "settings:voice",
+        label: "Stop Speaking",
+        expectedAction: "Stop current desktop speech output.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+];
+export function DesktopTalkModePanel() {
+    const desktopRuntime = isElectrobunRuntime();
+    const [loading, setLoading] = useState(desktopRuntime);
+    const [busyAction, setBusyAction] = useState(null);
+    const [error, setError] = useState(null);
+    const [message, setMessage] = useState(null);
+    const { t } = useApp();
+    const [phrase, setPhrase] = useState(t("voiceconfigview.testPhrase"));
+    const [panelState, setPanelState] = useState({
+        state: "idle",
+        enabled: false,
+        speaking: false,
+        whisperAvailable: false,
+    });
+    const refresh = useCallback(async () => {
+        if (!desktopRuntime) {
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const [state, enabled, speaking, whisperInfo] = await Promise.all([
+                invokeDesktopBridgeRequest({
+                    rpcMethod: "talkmodeGetState",
+                    ipcChannel: "talkmode:getState",
+                }),
+                invokeDesktopBridgeRequest({
+                    rpcMethod: "talkmodeIsEnabled",
+                    ipcChannel: "talkmode:isEnabled",
+                }),
+                invokeDesktopBridgeRequest({
+                    rpcMethod: "talkmodeIsSpeaking",
+                    ipcChannel: "talkmode:isSpeaking",
+                }),
+                invokeDesktopBridgeRequest({
+                    rpcMethod: "talkmodeGetWhisperInfo",
+                    ipcChannel: "talkmode:getWhisperInfo",
+                }),
+            ]);
+            setPanelState({
+                state: state?.state ?? "idle",
+                enabled: enabled?.enabled ?? false,
+                speaking: speaking?.speaking ?? false,
+                whisperAvailable: whisperInfo?.available ?? false,
+                whisperModel: whisperInfo?.modelSize,
+            });
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t("voiceconfigview.TalkModeStatusUnavailable", {
+                    defaultValue: "Talk mode status unavailable.",
+                }));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [desktopRuntime, t]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const runAction = useCallback(async (id, action, successMessage, refreshAfter = true) => {
+        setBusyAction(id);
+        setError(null);
+        setMessage(null);
+        try {
+            await action();
+            if (refreshAfter) {
+                await refresh();
+            }
+            if (successMessage) {
+                setMessage(successMessage);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t("voiceconfigview.ActionFailed"));
+        }
+        finally {
+            setBusyAction(null);
+        }
+    }, [refresh, t]);
+    if (!desktopRuntime) {
+        return (_jsx(Card, { className: "border-border/60 bg-card/92 shadow-sm", children: _jsx(CardContent, { className: "px-4 py-4 text-xs leading-5 text-muted", children: t("voiceconfigview.DesktopTalkModeDesktopOnly") }) }));
+    }
+    return (_jsxs(Card, { className: "border-border/60 bg-card/92 shadow-sm", children: [_jsx(CardHeader, { className: "px-4 py-4 pb-0", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-sm", children: t("voiceconfigview.DesktopTalkMode") }), _jsx(CardDescription, { className: "mt-1 text-xs-tight leading-5", children: t("voiceconfigview.TalkModeDescription") })] }), _jsx(Button, { variant: "outline", size: "sm", className: "min-h-10 rounded-xl px-3 text-xs-tight font-semibold", onClick: () => void runAction("voice-talkmode-refresh", async () => { }, t("voiceconfigview.TalkModeStateRefreshed")), disabled: loading || busyAction === "voice-talkmode-refresh", children: t("common.refresh") })] }) }), _jsxs(CardContent, { className: "flex flex-col gap-4 px-4 pb-4", children: [(error || message) && (_jsx("div", { className: `rounded-xl border px-3 py-2.5 text-xs-tight leading-5 ${error
+                            ? "border-danger/40 bg-danger/10 text-danger"
+                            : "border-ok/40 bg-ok/10 text-ok"}`, children: error ?? message })), _jsxs("div", { className: "grid gap-2 sm:grid-cols-2 xl:grid-cols-4", children: [_jsx(Card, { className: "border-border/50 bg-bg-hover/60 shadow-none", children: _jsxs(CardContent, { className: "px-2.5 py-2 text-xs-tight", children: [_jsx("div", { className: "text-2xs text-muted", children: t("voiceconfigview.State") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.state })] }) }), _jsx(Card, { className: "border-border/50 bg-bg-hover/60 shadow-none", children: _jsxs(CardContent, { className: "px-2.5 py-2 text-xs-tight", children: [_jsx("div", { className: "text-2xs text-muted", children: t("common.enabled") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.enabled ? t("common.yes") : t("common.no") })] }) }), _jsx(Card, { className: "border-border/50 bg-bg-hover/60 shadow-none", children: _jsxs(CardContent, { className: "px-2.5 py-2 text-xs-tight", children: [_jsx("div", { className: "text-2xs text-muted", children: t("voiceconfigview.Speaking") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.speaking ? t("common.yes") : t("common.no") })] }) }), _jsx(Card, { className: "border-border/50 bg-bg-hover/60 shadow-none", children: _jsxs(CardContent, { className: "px-2.5 py-2 text-xs-tight", children: [_jsx("div", { className: "text-2xs text-muted", children: t("voiceconfigview.Whisper") }), _jsx("div", { className: "font-semibold text-txt", children: panelState.whisperAvailable
+                                                ? panelState.whisperModel || t("common.available")
+                                                : t("common.unavailable") })] }) })] }), _jsx(Input, { type: "text", className: "min-h-10 rounded-xl bg-bg text-xs", value: phrase, onChange: (event) => setPhrase(event.target.value), placeholder: t("voiceconfigview.testPhrase") }), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap", children: [_jsx(Button, { variant: "outline", size: "sm", className: "min-h-10 rounded-xl px-3 text-xs-tight font-semibold", onClick: () => void runAction("voice-talkmode-start-stop", async () => {
+                                    if (panelState.enabled) {
+                                        await invokeDesktopBridgeRequest({
+                                            rpcMethod: "talkmodeStop",
+                                            ipcChannel: "talkmode:stop",
+                                        });
+                                        return;
+                                    }
+                                    const result = await invokeDesktopBridgeRequest({
+                                        rpcMethod: "talkmodeStart",
+                                        ipcChannel: "talkmode:start",
+                                    });
+                                    if (result?.available === false) {
+                                        throw new Error(result.reason || t("voiceconfigview.TalkModeUnavailable"));
+                                    }
+                                }, panelState.enabled
+                                    ? t("voiceconfigview.TalkModeStopped")
+                                    : t("voiceconfigview.TalkModeStarted")), disabled: busyAction === "voice-talkmode-start-stop" || loading, children: panelState.enabled
+                                    ? t("voiceconfigview.StopTalkMode")
+                                    : t("voiceconfigview.StartTalkMode") }), _jsx(Button, { variant: "outline", size: "sm", className: "min-h-10 rounded-xl px-3 text-xs-tight font-semibold", onClick: () => void runAction("voice-talkmode-speak", async () => {
+                                    await invokeDesktopBridgeRequest({
+                                        rpcMethod: "talkmodeSpeak",
+                                        ipcChannel: "talkmode:speak",
+                                        params: { text: phrase },
+                                    });
+                                }, t("voiceconfigview.SpeechRequested"), false), disabled: !phrase.trim() || busyAction === "voice-talkmode-speak", children: t("voiceconfigview.SpeakTestPhrase") }), _jsx(Button, { variant: "outline", size: "sm", className: "min-h-10 rounded-xl px-3 text-xs-tight font-semibold", onClick: () => void runAction("voice-talkmode-stop-speaking", async () => {
+                                    await invokeDesktopBridgeRequest({
+                                        rpcMethod: "talkmodeStopSpeaking",
+                                        ipcChannel: "talkmode:stopSpeaking",
+                                    });
+                                }, t("voiceconfigview.StoppedCurrentSpeechOutput")), disabled: busyAction === "voice-talkmode-stop-speaking", children: t("voiceconfigview.StopSpeaking") })] })] })] }));
+}
+function WakeWordSection({ serverConfig, }) {
+    const { t } = useApp();
+    const [triggers, setTriggers] = useState(["eliza"]);
+    const [triggerInput, setTriggerInput] = useState("");
+    const [sensitivity, setSensitivity] = useState(0.45);
+    const [modelSize, setModelSize] = useState("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 = null;
+        void (async () => {
+            try {
+                handle = await getSwabblePlugin().addListener("audioLevel", (evt) => {
+                    setAudioLevel(evt.level);
+                });
+            }
+            catch {
+                // Not available
+            }
+        })();
+        return () => {
+            if (handle)
+                void handle.remove();
+        };
+    }, []);
+    const buildConfig = useCallback(() => ({
+        triggers,
+        minPostTriggerGap: sensitivity,
+        modelSize,
+    }), [triggers, sensitivity, modelSize]);
+    const handleTriggersChange = useCallback(async (next) => {
+        setTriggers(next);
+        try {
+            await getSwabblePlugin().updateConfig({ config: { triggers: next } });
+        }
+        catch {
+            // Ignore
+        }
+    }, []);
+    const addTrigger = useCallback((raw) => {
+        const val = raw.trim().toLowerCase().replace(/,/g, "");
+        if (!val || triggers.includes(val))
+            return;
+        void handleTriggersChange([...triggers, val]);
+    }, [triggers, handleTriggersChange]);
+    const removeTrigger = useCallback((t) => {
+        if (triggers.length <= 1)
+            return;
+        void handleTriggersChange(triggers.filter((x) => x !== t));
+    }, [triggers, handleTriggersChange]);
+    const handleSensitivityChange = useCallback(async (val) => {
+        setSensitivity(val);
+        try {
+            await getSwabblePlugin().updateConfig({
+                config: { minPostTriggerGap: val },
+            });
+        }
+        catch {
+            // Ignore
+        }
+    }, []);
+    const handleModelSizeChange = useCallback(async (size) => {
+        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 (_jsxs("div", { className: "flex flex-col gap-4 pt-4", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: t("voiceconfigview.WakeWord") }), _jsxs("div", { className: "flex min-h-10 items-center gap-2 rounded-xl border border-border/50 bg-bg-hover px-3", children: [_jsx("span", { className: "text-xs-tight font-medium text-muted-strong", children: enabled
+                                    ? t("common.enabled", { defaultValue: "Enabled" })
+                                    : t("common.disabled", { defaultValue: "Disabled" }) }), _jsx(Switch, { checked: enabled, onCheckedChange: () => void handleToggle(), "aria-label": enabled
+                                    ? t("voiceconfigview.DisableWakeWord", {
+                                        defaultValue: "Disable wake word",
+                                    })
+                                    : t("voiceconfigview.EnableWakeWord", {
+                                        defaultValue: "Enable wake word",
+                                    }) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.Triggers") }), _jsxs("div", { className: "flex min-h-10 flex-wrap gap-1.5 rounded-xl border border-border/60 bg-bg px-2 py-2", children: [triggers.map((trigger) => (_jsxs("span", { className: "flex min-h-7 items-center gap-1 rounded-full border border-accent/30 bg-accent/10 px-2 py-1 text-2xs text-txt", children: [trigger, triggers.length > 1 && (_jsx(Button, { variant: "ghost", size: "icon", className: "ml-1 h-5 w-5 rounded-full p-0 leading-none text-muted-strong hover:bg-bg-hover hover:text-txt", onClick: () => removeTrigger(trigger), "aria-label": t("voiceconfigview.RemoveTrigger", {
+                                            defaultValue: 'Remove trigger "{{trigger}}"',
+                                            trigger,
+                                        }), children: "\u00D7" }))] }, trigger))), _jsx(Input, { type: "text", className: "h-7 min-w-[120px] flex-1 border-0 bg-transparent px-1 text-xs shadow-none focus-visible:ring-0", 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("");
+                                    }
+                                } })] }), _jsx("div", { className: "text-2xs text-muted", children: t("voiceconfigview.PressEnterOrComma") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.WakeSensitivity") }), _jsxs("span", { className: "text-2xs text-muted", children: [sensitivity.toFixed(2), "s"] })] }), _jsx("input", { type: "range", min: 0.1, max: 2.0, step: 0.05, value: sensitivity, className: "w-full accent-accent", onChange: (e) => void handleSensitivityChange(parseFloat(e.target.value)) }), _jsx("div", { className: "text-2xs text-muted", children: t("voiceconfigview.LowerMoreSensiti") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.ModelSize") }), _jsx("div", { className: "grid grid-cols-2 gap-1.5 xl:grid-cols-5", children: MODEL_SIZES.map((m) => {
+                            const active = modelSize === m.id;
+                            return (_jsxs(Button, { variant: active ? "default" : "outline", size: "sm", className: "h-auto min-h-12 flex-col rounded-xl py-2", onClick: () => void handleModelSizeChange(m.id), children: [_jsx("div", { className: "font-semibold", children: m.id }), m.hintKey && (_jsx("div", { className: "text-2xs opacity-70 mt-0.5", children: t(m.hintKey) }))] }, m.id));
+                        }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.Microphone") }), _jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-border/70", children: _jsx("div", { className: "h-full rounded-full bg-ok transition-all duration-75", style: { width: `${Math.min(audioLevel * 100, 100)}%` } }) })] })] }));
+}
+export function VoiceConfigView() {
+    const { setTimeout } = useTimeout();
+    const { t, elizaCloudConnected, elizaCloudVoiceProxyAvailable } = useApp();
+    const [voiceConfig, setVoiceConfig] = useState({});
+    const [swabbleServerConfig, setSwabbleServerConfig] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [saveSuccess, setSaveSuccess] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [dirty, setDirty] = useState(false);
+    const [testing, setTesting] = useState(false);
+    const audioRef = useRef(null);
+    // Load config on mount
+    useEffect(() => {
+        void (async () => {
+            setLoading(true);
+            try {
+                const cfg = await client.getConfig();
+                const messages = cfg.messages;
+                const tts = messages?.tts;
+                if (tts) {
+                    setVoiceConfig(tts);
+                }
+                const swabble = messages?.swabble;
+                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 cloudVoiceAvailable = elizaCloudVoiceProxyAvailable;
+    const hasElevenLabsApiKey = hasConfiguredApiKey(voiceConfig.elevenlabs?.apiKey);
+    const defaultVoiceMode = cloudVoiceAvailable
+        ? hasElevenLabsApiKey
+            ? "own-key"
+            : "cloud"
+        : "own-key";
+    const currentMode = voiceConfig.mode ?? defaultVoiceMode;
+    const providerInfo = VOICE_PROVIDERS.find((p) => p.id === currentProvider);
+    // Cloud vs own-key only applies to providers that need credentials. Edge TTS
+    // has no API key — do not gate "Configured" on Eliza Cloud when Edge is selected.
+    const isConfigured = (() => {
+        if (!providerInfo?.needsKey)
+            return true;
+        if (currentMode === "cloud")
+            return cloudVoiceAvailable;
+        return hasConfiguredApiKey(voiceConfig.elevenlabs?.apiKey);
+    })();
+    const handleProviderChange = useCallback((provider) => {
+        setVoiceConfig((prev) => ({ ...prev, provider }));
+        setDirty(true);
+    }, []);
+    const handleModeChange = useCallback((mode) => {
+        setVoiceConfig((prev) => ({ ...prev, mode }));
+        setDirty(true);
+    }, []);
+    const handleApiKeyChange = useCallback((apiKey) => {
+        setVoiceConfig((prev) => ({
+            ...prev,
+            elevenlabs: { ...prev.elevenlabs, apiKey: apiKey || undefined },
+        }));
+        setDirty(true);
+    }, []);
+    const handleVoiceSelect = useCallback((voiceId) => {
+        setVoiceConfig((prev) => ({
+            ...prev,
+            elevenlabs: { ...prev.elevenlabs, voiceId },
+        }));
+        setDirty(true);
+    }, []);
+    const handleTestVoice = useCallback((previewUrl) => {
+        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 ?? {});
+            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,
+                provider,
+                mode: provider === "elevenlabs" ? currentMode : 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;
+            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
+                : t("skillsview.failedToSave", {
+                    defaultValue: "Failed to save",
+                }));
+        }
+        setSaving(false);
+    }, [currentMode, swabbleServerConfig, voiceConfig, setTimeout, t]);
+    if (loading) {
+        return (_jsx("div", { className: "rounded-2xl border border-border/60 bg-card/92 px-4 py-6 text-center text-xs text-muted shadow-sm", children: t("voiceconfigview.LoadingVoiceConfig") }));
+    }
+    const selectedVoiceId = voiceConfig.elevenlabs?.voiceId;
+    const selectedPreset = PREMADE_VOICES.find((p) => p.voiceId === selectedVoiceId);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "rounded-2xl border border-border/60 bg-card/92 p-4 shadow-sm", children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: t("voiceconfigview.TTSProvider") }), _jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: VOICE_PROVIDERS.map((p) => {
+                            const active = currentProvider === p.id;
+                            return (_jsxs(Button, { variant: active ? "default" : "outline", size: "sm", className: "h-auto min-h-14 flex-col rounded-xl py-2", onClick: () => handleProviderChange(p.id), children: [_jsx("div", { className: "font-semibold", children: t(p.labelKey, { defaultValue: p.label }) }), _jsx("div", { className: "text-2xs opacity-70 mt-0.5", children: t(p.hintKey, { defaultValue: p.hint }) })] }, p.id));
+                        }) })] }), _jsxs("div", { className: "flex flex-col gap-2 rounded-2xl border border-border/60 bg-card/92 px-4 py-3 shadow-sm sm:flex-row sm:items-center sm:justify-between", children: [_jsx("span", { className: "text-xs leading-5 text-txt", children: currentProvider === "elevenlabs"
+                            ? `ElevenLabs — ${currentMode === "cloud" ? t("voiceconfigview.ServedViaElizaCloud") : t("voiceconfigview.RequiresApiKey")}`
+                            : `${providerInfo ? t(providerInfo.labelKey, { defaultValue: providerInfo.label }) : ""} — ${t("voiceconfigview.NoApiKeyNeeded")}` }), _jsx("span", { className: `inline-flex items-center rounded-full border px-2 py-1 text-2xs font-medium ${isConfigured
+                            ? "border-ok/35 bg-ok/10 text-ok"
+                            : "border-warn/35 bg-warn/10 text-warn"}`, children: isConfigured
+                            ? t("config-field.Configured")
+                            : t("mediasettingssection.NeedsSetup") })] }), currentProvider === "elevenlabs" && (_jsxs("div", { className: "rounded-2xl border border-border/60 bg-card/92 p-4 shadow-sm flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("span", { className: "text-xs font-semibold text-muted", children: t("voiceconfigview.APISource") }), _jsx(CloudSourceModeToggle, { mode: currentMode, onChange: handleModeChange })] }), currentMode === "cloud" && (_jsx(CloudConnectionStatus, { connected: elizaCloudConnected, disconnectedText: t("elizaclouddashboard.ElizaCloudNotConnected") })), currentMode === "own-key" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("onboarding.elevenLabsApiKey") }), _jsx(Input, { type: "password", className: "min-h-10 rounded-xl bg-bg text-xs", placeholder: voiceConfig.elevenlabs?.apiKey
+                                    ? t("mediasettingssection.ApiKeySetLeaveBlank")
+                                    : t("mediasettingssection.EnterApiKey"), onChange: (e) => handleApiKeyChange(e.target.value) }), _jsxs("div", { className: "text-2xs text-muted", children: [t("voiceconfigview.GetYourKeyAt"), " ", _jsx("a", { href: "https://elevenlabs.io", target: "_blank", rel: "noopener noreferrer", className: "text-txt underline decoration-accent underline-offset-2 hover:opacity-80", children: t("voiceconfigview.elevenlabsIo") })] }), _jsxs("div", { className: "text-2xs text-muted", children: [t("voiceconfigview.FastPathDefaultE"), DEFAULT_ELEVEN_FAST_MODEL, "`)."] })] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-xs font-semibold", children: t("common.voice") }), _jsx("div", { className: "grid gap-1.5 sm:grid-cols-2 xl:grid-cols-3", children: PREMADE_VOICES.map((preset) => {
+                                    const active = selectedVoiceId === preset.voiceId;
+                                    return (_jsxs(Button, { variant: active ? "default" : "outline", className: `h-auto min-h-16 flex-col items-start rounded-xl px-3 py-2.5 text-left transition-all ${active
+                                            ? "border-accent/45 bg-accent/12 text-txt shadow-sm"
+                                            : "border-border/60 bg-bg text-txt hover:border-border-strong hover:bg-bg-hover"}`, onClick: () => handleVoiceSelect(preset.voiceId), children: [_jsx("div", { className: "font-semibold text-xs truncate w-full", children: preset.nameKey
+                                                    ? t(preset.nameKey, { defaultValue: preset.name })
+                                                    : preset.name }), _jsx("div", { className: "text-2xs text-muted truncate w-full", children: preset.hintKey
+                                                    ? t(preset.hintKey, { defaultValue: preset.hint })
+                                                    : preset.hint })] }, preset.id));
+                                }) })] }), selectedPreset && (_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center", children: [_jsx(Button, { variant: "outline", size: "sm", className: "min-h-10 rounded-xl px-3 text-xs-tight font-semibold", disabled: testing, onClick: () => handleTestVoice(selectedPreset.previewUrl), children: testing
+                                    ? t("voiceconfigview.Playing")
+                                    : t("voiceconfigview.TestVoice", {
+                                        name: selectedPreset.name,
+                                    }) }), testing && (_jsx(Button, { variant: "outline", size: "sm", className: "min-h-10 rounded-xl px-3 text-xs-tight font-semibold", onClick: () => {
+                                    if (audioRef.current) {
+                                        audioRef.current.pause();
+                                        setTesting(false);
+                                    }
+                                }, children: t("common.stop") }))] }))] })), currentProvider === "edge" && (_jsx("div", { className: "rounded-2xl border border-border/60 bg-card/92 px-4 py-3 text-xs leading-5 text-muted shadow-sm", children: t("voiceconfigview.EdgeTTSUsesMicros") })), currentProvider === "simple-voice" && (_jsx("div", { className: "rounded-2xl border border-border/60 bg-card/92 px-4 py-3 text-xs leading-5 text-muted shadow-sm", children: t("voiceconfigview.SimpleVoiceUsesYo") })), _jsx(WakeWordSection, { serverConfig: swabbleServerConfig }), _jsx(DesktopTalkModePanel, {}), _jsx(SaveFooter, { dirty: dirty, saving: saving, saveError: saveError, saveSuccess: saveSuccess, onSave: () => void handleSave() })] }));
+}

package/packages/app-core/src/components/settings/cloud-model-schema.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Cloud model tier schema + hints builder.
+ *
+ * The AI Model settings panel exposes 7 dropdowns (nano, small, medium, large,
+ * mega, responseHandler, actionPlanner). Each is a `ConfigRenderer` select
+ * field with the same shape — this module produces the schema and hints so
+ * the component stays readable.
+ */
+import type { OnboardingOptions } from "../../api";
+import type { JsonSchemaObject } from "../../config";
+import type { ConfigUiHint } from "../../types";
+export declare const DEFAULT_RESPONSE_HANDLER_MODEL = "__DEFAULT_RESPONSE_HANDLER__";
+export declare const DEFAULT_ACTION_PLANNER_MODEL = "__DEFAULT_ACTION_PLANNER__";
+export interface CloudModelSchema {
+    schema: JsonSchemaObject;
+    hints: Record<string, ConfigUiHint>;
+}
+/**
+ * Build the JSONSchema + UI hints for the cloud model tier grid.
+ *
+ * `allChoices` is the union of every tier's catalog, de-duped by id, used by
+ * the override selectors (responseHandler, actionPlanner) which accept any
+ * model.
+ */
+export declare function buildCloudModelSchema(options: OnboardingOptions["models"]): CloudModelSchema;
+//# sourceMappingURL=cloud-model-schema.d.ts.map

package/packages/app-core/src/components/settings/cloud-model-schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cloud-model-schema.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/cloud-model-schema.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,8BAA8B,iCAAiC,CAAC;AAC7E,eAAO,MAAM,4BAA4B,+BAA+B,CAAC;AAoCzE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CACrC;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,GACnC,gBAAgB,CA2ElB"}

package/packages/app-core/src/components/settings/cloud-model-schema.js

@@ -0,0 +1,103 @@
+/**
+ * Cloud model tier schema + hints builder.
+ *
+ * The AI Model settings panel exposes 7 dropdowns (nano, small, medium, large,
+ * mega, responseHandler, actionPlanner). Each is a `ConfigRenderer` select
+ * field with the same shape — this module produces the schema and hints so
+ * the component stays readable.
+ */
+export const DEFAULT_RESPONSE_HANDLER_MODEL = "__DEFAULT_RESPONSE_HANDLER__";
+export const DEFAULT_ACTION_PLANNER_MODEL = "__DEFAULT_ACTION_PLANNER__";
+const TIER_KEYS = ["nano", "small", "medium", "large", "mega"];
+const TIER_LABELS = {
+    nano: "Nano Model",
+    small: "Small Model",
+    medium: "Medium Model",
+    large: "Large Model",
+    mega: "Mega Model",
+};
+const TIER_DESCRIPTIONS = {
+    nano: "Fastest, cheapest text tier.",
+    small: "Default lightweight text tier.",
+    medium: "Planning tier. Falls back to small.",
+    large: "Primary high-capability text tier.",
+    mega: "Future top tier. Falls back to large.",
+};
+function formatOption(m) {
+    return {
+        value: m.id,
+        label: m.name,
+        description: `${m.provider} — ${m.description}`,
+    };
+}
+/**
+ * Build the JSONSchema + UI hints for the cloud model tier grid.
+ *
+ * `allChoices` is the union of every tier's catalog, de-duped by id, used by
+ * the override selectors (responseHandler, actionPlanner) which accept any
+ * model.
+ */
+export function buildCloudModelSchema(options) {
+    const tierOptions = {
+        nano: options.nano ?? [],
+        small: options.small ?? [],
+        medium: options.medium ?? [],
+        large: options.large ?? [],
+        mega: options.mega ?? [],
+    };
+    const allChoices = Array.from(new Map(TIER_KEYS.flatMap((k) => tierOptions[k]).map((m) => [m.id, m])).values());
+    const properties = {};
+    const hints = {};
+    for (const key of TIER_KEYS) {
+        properties[key] = {
+            type: "string",
+            enum: tierOptions[key].map((m) => m.id),
+            description: TIER_DESCRIPTIONS[key],
+        };
+        hints[key] = {
+            label: TIER_LABELS[key],
+            width: "half",
+            options: tierOptions[key].map(formatOption),
+        };
+    }
+    properties.responseHandler = {
+        type: "string",
+        enum: [DEFAULT_RESPONSE_HANDLER_MODEL, ...allChoices.map((m) => m.id)],
+        description: "Should-respond / response-handler override. Defaults to nano.",
+    };
+    hints.responseHandler = {
+        label: "Response Handler",
+        width: "half",
+        options: [
+            {
+                value: DEFAULT_RESPONSE_HANDLER_MODEL,
+                label: "Default (Nano)",
+                description: "Use the nano tier unless explicitly overridden.",
+            },
+            ...allChoices.map(formatOption),
+        ],
+    };
+    properties.actionPlanner = {
+        type: "string",
+        enum: [DEFAULT_ACTION_PLANNER_MODEL, ...allChoices.map((m) => m.id)],
+        description: "Planning override. Defaults to medium.",
+    };
+    hints.actionPlanner = {
+        label: "Action Planner",
+        width: "half",
+        options: [
+            {
+                value: DEFAULT_ACTION_PLANNER_MODEL,
+                label: "Default (Medium)",
+                description: "Use the medium tier unless explicitly overridden.",
+            },
+            ...allChoices.map(formatOption),
+        ],
+    };
+    const schema = {
+        type: "object",
+        properties,
+        required: [],
+    };
+    return { schema, hints };
+}