@elizaos/app-core 2.0.0-alpha.37

package/dist/components/ChatView.js

@@ -0,0 +1,511 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chat view component.
+ *
+ * Layout: flex column filling parent. Header row (title + clear + toggles).
+ * Scrollable messages area. Share/file notices below messages.
+ * Input row at bottom with mic + textarea + send button.
+ */
+import { client, } from "@elizaos/app-core/api";
+import { isRoutineCodingAgentMessage } from "@elizaos/app-core/chat";
+import { VOICE_CONFIG_UPDATED_EVENT } from "@elizaos/app-core/events";
+import { useChatAvatarVoiceBridge, useTimeout, useVoiceChat, } from "@elizaos/app-core/hooks";
+import { getVrmPreviewUrl, useApp } from "@elizaos/app-core/state";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { AgentActivityBox } from "./AgentActivityBox";
+import { ChatComposer } from "./ChatComposer";
+import { ChatEmptyState, ChatMessage, TypingIndicator } from "./ChatMessage";
+import { MessageContent } from "./MessageContent";
+function nowMs() {
+    return typeof performance !== "undefined" ? performance.now() : Date.now();
+}
+const CHAT_INPUT_MIN_HEIGHT_PX = 46;
+const CHAT_INPUT_MAX_HEIGHT_PX = 200;
+const COMPANION_VISIBLE_MESSAGE_LIMIT = 2;
+const COMPANION_HISTORY_HOLD_MS = 30_000;
+const COMPANION_HISTORY_FADE_MS = 5_000;
+const COMPANION_MESSAGE_LAYER_TOP = "calc(-100% + 1.5rem)";
+const COMPANION_MESSAGE_LAYER_BOTTOM = "4rem";
+const COMPANION_MESSAGE_LAYER_MASK = "linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.82) 12%, black 17%, black 100%)";
+function findLatestAssistantMessage(messages) {
+    return [...messages]
+        .reverse()
+        .find((message) => message.role === "assistant" && message.text.trim());
+}
+function useChatVoiceController(options) {
+    const { setTimeout } = useTimeout();
+    const { agentVoiceMuted, chatFirstTokenReceived, chatInput, chatSending, conversationMessages, elizaCloudConnected, handleChatEdit, handleChatSend, isComposerLocked, isGameModal, setState, uiLanguage, } = options;
+    const [voiceConfig, setVoiceConfig] = useState(null);
+    const [voiceLatency, setVoiceLatency] = useState(null);
+    const pendingVoiceTurnRef = useRef(null);
+    const suppressedAssistantSpeechIdRef = useRef(null);
+    const voiceDraftBaseInputRef = useRef("");
+    const loadVoiceConfig = useCallback(async () => {
+        try {
+            const cfg = await client.getConfig();
+            const messages = cfg.messages;
+            const tts = messages?.tts;
+            setVoiceConfig(tts ?? null);
+        }
+        catch {
+            /* ignore — will use browser TTS fallback */
+        }
+    }, []);
+    useEffect(() => {
+        void loadVoiceConfig();
+    }, [loadVoiceConfig]);
+    useEffect(() => {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const handler = (event) => {
+            const detail = event.detail;
+            if (detail && typeof detail === "object") {
+                setVoiceConfig(detail);
+                return;
+            }
+            void loadVoiceConfig();
+        };
+        window.addEventListener(VOICE_CONFIG_UPDATED_EVENT, handler);
+        return () => window.removeEventListener(VOICE_CONFIG_UPDATED_EVENT, handler);
+    }, [loadVoiceConfig]);
+    const composeVoiceDraft = useCallback((transcript) => {
+        const base = voiceDraftBaseInputRef.current.trim();
+        const spoken = transcript.trim();
+        if (base && spoken) {
+            return `${base} ${spoken}`;
+        }
+        return base || spoken;
+    }, []);
+    const handleVoiceTranscript = useCallback((text) => {
+        if (isComposerLocked)
+            return;
+        const composedText = composeVoiceDraft(text);
+        if (!composedText)
+            return;
+        const speechEndedAtMs = nowMs();
+        pendingVoiceTurnRef.current = {
+            expiresAtMs: speechEndedAtMs + 15000,
+            speechEndedAtMs,
+        };
+        setVoiceLatency(null);
+        setState("chatInput", composedText);
+        setTimeout(() => void handleChatSend("VOICE_DM"), 50);
+    }, [composeVoiceDraft, handleChatSend, isComposerLocked, setState, setTimeout]);
+    const handleVoiceTranscriptPreview = useCallback((text) => {
+        if (isComposerLocked)
+            return;
+        setState("chatInput", composeVoiceDraft(text));
+    }, [composeVoiceDraft, isComposerLocked, setState]);
+    const handleVoicePlaybackStart = useCallback((event) => {
+        const pending = pendingVoiceTurnRef.current;
+        if (!pending)
+            return;
+        if (event.startedAtMs > pending.expiresAtMs) {
+            pendingVoiceTurnRef.current = null;
+            return;
+        }
+        if (pending.voiceStartedAtMs != null)
+            return;
+        pending.voiceStartedAtMs = event.startedAtMs;
+        pending.firstSegmentCached = event.cached;
+        setVoiceLatency((prev) => ({
+            firstSegmentCached: event.cached,
+            speechEndToFirstTokenMs: prev?.speechEndToFirstTokenMs ?? null,
+            speechEndToVoiceStartMs: Math.max(0, Math.round(event.startedAtMs - pending.speechEndedAtMs)),
+        }));
+    }, []);
+    const voice = useVoiceChat({
+        cloudConnected: elizaCloudConnected,
+        interruptOnSpeech: isGameModal,
+        lang: uiLanguage === "zh-CN" ? "zh-CN" : "en-US",
+        onPlaybackStart: handleVoicePlaybackStart,
+        onTranscript: handleVoiceTranscript,
+        onTranscriptPreview: handleVoiceTranscriptPreview,
+        voiceConfig,
+    });
+    const { queueAssistantSpeech, speak, startListening, stopListening, stopSpeaking, } = voice;
+    const beginVoiceCapture = useCallback((mode = "compose") => {
+        if (isComposerLocked || voice.isListening)
+            return;
+        const latestAssistant = findLatestAssistantMessage(conversationMessages);
+        suppressedAssistantSpeechIdRef.current = latestAssistant?.id ?? null;
+        voiceDraftBaseInputRef.current = chatInput;
+        stopSpeaking();
+        void startListening(mode);
+    }, [
+        chatInput,
+        conversationMessages,
+        isComposerLocked,
+        startListening,
+        stopSpeaking,
+        voice.isListening,
+    ]);
+    const endVoiceCapture = useCallback((captureOptions) => {
+        if (!voice.isListening)
+            return;
+        void stopListening(captureOptions);
+    }, [stopListening, voice.isListening]);
+    const handleSpeakMessage = useCallback((messageId, text) => {
+        if (!text.trim())
+            return;
+        suppressedAssistantSpeechIdRef.current = messageId;
+        speak(text);
+    }, [speak]);
+    const handleEditMessage = useCallback(async (messageId, text) => {
+        stopSpeaking();
+        return handleChatEdit(messageId, text);
+    }, [handleChatEdit, stopSpeaking]);
+    useEffect(() => {
+        if (!isGameModal || agentVoiceMuted || voice.isListening)
+            return;
+        const latestAssistant = findLatestAssistantMessage(conversationMessages);
+        if (!latestAssistant)
+            return;
+        if (suppressedAssistantSpeechIdRef.current === latestAssistant.id)
+            return;
+        queueAssistantSpeech(latestAssistant.id, latestAssistant.text, !chatSending);
+        suppressedAssistantSpeechIdRef.current = null;
+    }, [
+        agentVoiceMuted,
+        chatSending,
+        conversationMessages,
+        isGameModal,
+        queueAssistantSpeech,
+        voice.isListening,
+    ]);
+    useEffect(() => {
+        if (!agentVoiceMuted)
+            return;
+        stopSpeaking();
+    }, [agentVoiceMuted, stopSpeaking]);
+    useEffect(() => {
+        const pending = pendingVoiceTurnRef.current;
+        if (!pending || !chatFirstTokenReceived)
+            return;
+        if (nowMs() > pending.expiresAtMs) {
+            pendingVoiceTurnRef.current = null;
+            return;
+        }
+        if (pending.firstTokenAtMs != null)
+            return;
+        const firstTokenAtMs = nowMs();
+        pending.firstTokenAtMs = firstTokenAtMs;
+        setVoiceLatency((prev) => ({
+            firstSegmentCached: prev?.firstSegmentCached ?? null,
+            speechEndToFirstTokenMs: Math.max(0, Math.round(firstTokenAtMs - pending.speechEndedAtMs)),
+            speechEndToVoiceStartMs: prev?.speechEndToVoiceStartMs ?? null,
+        }));
+    }, [chatFirstTokenReceived]);
+    return {
+        beginVoiceCapture,
+        endVoiceCapture,
+        handleEditMessage,
+        handleSpeakMessage,
+        stopSpeaking,
+        voice,
+        voiceLatency,
+    };
+}
+function useGameModalMessages(options) {
+    const { activeConversationId, agentVoiceMuted, companionMessageCutoffTs, isGameModal, setState, stopSpeaking, visibleMsgs, } = options;
+    const previousCompanionCutoffTsRef = useRef(companionMessageCutoffTs);
+    const previousGameModalVisibleMsgsRef = useRef([]);
+    const previousActiveConversationIdRef = useRef(activeConversationId);
+    const companionVoiceInitializedRef = useRef(false);
+    const [companionNowMs, setCompanionNowMs] = useState(() => Date.now());
+    const [companionCarryover, setCompanionCarryover] = useState(null);
+    const gameModalRecentMsgs = useMemo(() => visibleMsgs.filter((message) => message.timestamp >= companionMessageCutoffTs), [companionMessageCutoffTs, visibleMsgs]);
+    const gameModalContextMsgs = useMemo(() => {
+        if (gameModalRecentMsgs.length > 0) {
+            return gameModalRecentMsgs;
+        }
+        return visibleMsgs.slice(-COMPANION_VISIBLE_MESSAGE_LIMIT);
+    }, [gameModalRecentMsgs, visibleMsgs]);
+    const gameModalVisibleMsgs = useMemo(() => gameModalContextMsgs.slice(-COMPANION_VISIBLE_MESSAGE_LIMIT), [gameModalContextMsgs]);
+    const gameModalCarryoverOpacity = useMemo(() => {
+        if (!companionCarryover)
+            return 0;
+        if (companionNowMs < companionCarryover.fadeStartsAtMs)
+            return 1;
+        const remainingMs = companionCarryover.expiresAtMs - companionNowMs;
+        if (remainingMs <= 0)
+            return 0;
+        return Math.max(0, remainingMs / COMPANION_HISTORY_FADE_MS);
+    }, [companionCarryover, companionNowMs]);
+    useEffect(() => {
+        if (!isGameModal) {
+            previousActiveConversationIdRef.current = activeConversationId;
+            companionVoiceInitializedRef.current = false;
+            return;
+        }
+        if (companionVoiceInitializedRef.current)
+            return;
+        companionVoiceInitializedRef.current = true;
+        if (agentVoiceMuted) {
+            setState("chatAgentVoiceMuted", false);
+        }
+    }, [activeConversationId, agentVoiceMuted, isGameModal, setState]);
+    useEffect(() => {
+        if (!isGameModal) {
+            previousActiveConversationIdRef.current = activeConversationId;
+            return;
+        }
+        if (previousActiveConversationIdRef.current === activeConversationId) {
+            return;
+        }
+        previousActiveConversationIdRef.current = activeConversationId;
+        previousGameModalVisibleMsgsRef.current = [];
+        previousCompanionCutoffTsRef.current = companionMessageCutoffTs;
+        setCompanionCarryover(null);
+        stopSpeaking();
+    }, [
+        activeConversationId,
+        companionMessageCutoffTs,
+        isGameModal,
+        stopSpeaking,
+    ]);
+    useEffect(() => {
+        if (!isGameModal) {
+            previousCompanionCutoffTsRef.current = companionMessageCutoffTs;
+            return;
+        }
+        const previousCutoffTs = previousCompanionCutoffTsRef.current;
+        if (companionMessageCutoffTs > previousCutoffTs) {
+            const carryoverMessages = previousGameModalVisibleMsgsRef.current.filter((message) => message.timestamp < companionMessageCutoffTs);
+            if (carryoverMessages.length > 0) {
+                const startedAtMs = Date.now();
+                setCompanionCarryover({
+                    expiresAtMs: startedAtMs + COMPANION_HISTORY_HOLD_MS + COMPANION_HISTORY_FADE_MS,
+                    fadeStartsAtMs: startedAtMs + COMPANION_HISTORY_HOLD_MS,
+                    messages: carryoverMessages,
+                });
+            }
+            else {
+                setCompanionCarryover(null);
+            }
+        }
+        previousCompanionCutoffTsRef.current = companionMessageCutoffTs;
+    }, [companionMessageCutoffTs, isGameModal]);
+    useEffect(() => {
+        previousGameModalVisibleMsgsRef.current = gameModalVisibleMsgs;
+    }, [gameModalVisibleMsgs]);
+    useEffect(() => {
+        if (!companionCarryover)
+            return;
+        const tick = () => setCompanionNowMs(Date.now());
+        tick();
+        const intervalId = window.setInterval(tick, 250);
+        return () => window.clearInterval(intervalId);
+    }, [companionCarryover]);
+    useEffect(() => {
+        if (!companionCarryover)
+            return;
+        if (companionNowMs >= companionCarryover.expiresAtMs) {
+            setCompanionCarryover(null);
+        }
+    }, [companionCarryover, companionNowMs]);
+    return {
+        companionCarryover,
+        gameModalCarryoverOpacity,
+        gameModalVisibleMsgs,
+    };
+}
+export function ChatView({ variant = "default" }) {
+    const isGameModal = variant === "game-modal";
+    const showComposerVoiceToggle = false;
+    const { agentStatus, activeConversationId, chatInput, chatSending, chatFirstTokenReceived, companionMessageCutoffTs, conversationMessages, handleChatSend, handleChatStop, handleChatEdit, elizaCloudConnected, setState, droppedFiles, shareIngestNotice, chatAgentVoiceMuted: agentVoiceMuted, selectedVrmIndex, chatPendingImages, setChatPendingImages, uiLanguage, ptySessions, t, } = useApp();
+    const messagesRef = useRef(null);
+    const textareaRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const [imageDragOver, setImageDragOver] = useState(false);
+    // ── Derived composer state ──────────────────────────────────────
+    const isAgentStarting = agentStatus?.state === "starting" || agentStatus?.state === "restarting";
+    const isComposerLocked = chatSending || isAgentStarting;
+    const { beginVoiceCapture, endVoiceCapture, handleEditMessage, handleSpeakMessage, stopSpeaking, voice, voiceLatency, } = useChatVoiceController({
+        agentVoiceMuted,
+        chatFirstTokenReceived,
+        chatInput,
+        chatSending,
+        conversationMessages,
+        elizaCloudConnected,
+        handleChatEdit,
+        handleChatSend,
+        isComposerLocked,
+        isGameModal,
+        setState,
+        uiLanguage,
+    });
+    const handleChatAvatarSpeakingChange = useCallback((isSpeaking) => {
+        setState("chatAvatarSpeaking", isSpeaking);
+    }, [setState]);
+    const agentName = agentStatus?.agentName ?? "Agent";
+    const msgs = conversationMessages;
+    const visibleMsgs = useMemo(() => msgs.filter((msg) => !(chatSending &&
+        !chatFirstTokenReceived &&
+        msg.role === "assistant" &&
+        !msg.text.trim()) && !isRoutineCodingAgentMessage(msg)), [chatFirstTokenReceived, chatSending, msgs]);
+    const { companionCarryover, gameModalCarryoverOpacity, gameModalVisibleMsgs, } = useGameModalMessages({
+        activeConversationId,
+        agentVoiceMuted: agentVoiceMuted,
+        companionMessageCutoffTs,
+        isGameModal,
+        setState,
+        stopSpeaking,
+        visibleMsgs,
+    });
+    const agentAvatarSrc = selectedVrmIndex > 0 ? getVrmPreviewUrl(selectedVrmIndex) : null;
+    useChatAvatarVoiceBridge({
+        mouthOpen: voice.mouthOpen,
+        isSpeaking: voice.isSpeaking,
+        usingAudioAnalysis: voice.usingAudioAnalysis,
+        onSpeakingChange: handleChatAvatarSpeakingChange,
+    });
+    // Auto-scroll on new messages. Use instant scroll when already near the
+    // bottom (or when the user is actively sending) to prevent the visible
+    // "scroll from top" effect that occurs when many background messages
+    // (e.g. coding-agent updates) arrive in rapid succession during smooth
+    // scrolling. Only smooth-scroll when the user has scrolled up and a new
+    // message nudges them back down.
+    useEffect(() => {
+        if (isGameModal) {
+            return;
+        }
+        if (!chatSending && visibleMsgs.length === 0) {
+            return;
+        }
+        const el = messagesRef.current;
+        if (!el)
+            return;
+        const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+        const nearBottom = distanceFromBottom < 150;
+        el.scrollTo({
+            top: el.scrollHeight,
+            behavior: nearBottom ? "instant" : "smooth",
+        });
+    }, [chatSending, isGameModal, visibleMsgs]);
+    // Auto-resize textarea
+    useEffect(() => {
+        const ta = textareaRef.current;
+        if (!ta)
+            return;
+        // Force a compact baseline when empty so the composer never boots oversized.
+        if (!chatInput) {
+            ta.style.height = `${CHAT_INPUT_MIN_HEIGHT_PX}px`;
+            ta.style.overflowY = "hidden";
+            return;
+        }
+        ta.style.height = "auto";
+        ta.style.overflowY = "hidden";
+        const h = Math.min(ta.scrollHeight, CHAT_INPUT_MAX_HEIGHT_PX);
+        ta.style.height = `${h}px`;
+        ta.style.overflowY =
+            ta.scrollHeight > CHAT_INPUT_MAX_HEIGHT_PX ? "auto" : "hidden";
+    }, [chatInput]);
+    const handleKeyDown = (e) => {
+        if (isComposerLocked)
+            return;
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            void handleChatSend();
+        }
+    };
+    const addImageFiles = useCallback((files) => {
+        const imageFiles = Array.from(files).filter((f) => f.type.startsWith("image/"));
+        if (!imageFiles.length)
+            return;
+        const readers = imageFiles.map((file) => new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const result = reader.result;
+                // result is "data:<mime>;base64,<data>" — strip the prefix
+                const commaIdx = result.indexOf(",");
+                const data = commaIdx >= 0 ? result.slice(commaIdx + 1) : result;
+                resolve({ data, mimeType: file.type, name: file.name });
+            };
+            reader.readAsDataURL(file);
+        }));
+        void Promise.all(readers).then((attachments) => {
+            setChatPendingImages((prev) => {
+                const combined = [...prev, ...attachments];
+                // Mirror the server-side MAX_CHAT_IMAGES=4 limit so the user gets
+                // immediate feedback rather than a 400 after upload.
+                return combined.slice(0, 4);
+            });
+        });
+    }, [setChatPendingImages]);
+    const handleImageDrop = useCallback((e) => {
+        e.preventDefault();
+        setImageDragOver(false);
+        if (e.dataTransfer.files.length) {
+            addImageFiles(e.dataTransfer.files);
+        }
+    }, [addImageFiles]);
+    const handleFileInputChange = useCallback((e) => {
+        if (e.target.files) {
+            addImageFiles(e.target.files);
+        }
+        e.target.value = "";
+    }, [addImageFiles]);
+    const removeImage = useCallback((index) => {
+        setChatPendingImages((prev) => prev.filter((_, i) => i !== index));
+    }, [setChatPendingImages]);
+    return (_jsxs("section", { "aria-label": "Chat workspace", className: `flex flex-col flex-1 min-h-0 relative${isGameModal ? " overflow-visible px-2 sm:px-3" : ""}${imageDragOver ? " ring-2 ring-accent ring-inset" : ""}`, onDragOver: (e) => {
+            e.preventDefault();
+            setImageDragOver(true);
+        }, onDragLeave: () => setImageDragOver(false), onDrop: handleImageDrop, children: [_jsx("div", { ref: messagesRef, "data-testid": "chat-messages-scroll", className: isGameModal
+                    ? "absolute inset-x-0 overflow-hidden select-none pointer-events-none"
+                    : "chat-native-scrollbar relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto py-2", style: isGameModal
+                    ? {
+                        zIndex: 1,
+                        top: COMPANION_MESSAGE_LAYER_TOP,
+                        bottom: COMPANION_MESSAGE_LAYER_BOTTOM,
+                        userSelect: "none",
+                        WebkitUserSelect: "none",
+                        maskImage: COMPANION_MESSAGE_LAYER_MASK,
+                        WebkitMaskImage: COMPANION_MESSAGE_LAYER_MASK,
+                    }
+                    : {
+                        zIndex: 1,
+                    }, children: visibleMsgs.length === 0 && !chatSending ? (isGameModal ? (_jsx("div", { className: "flex h-full items-end px-1 py-4", children: _jsx("div", { className: "w-full", children: _jsx(TypingIndicator, { agentName: agentName, agentAvatarSrc: agentAvatarSrc }) }) })) : (_jsx(ChatEmptyState, { agentName: agentName }))) : isGameModal ? (_jsxs("div", { className: "flex h-full w-full flex-col justify-end gap-4 px-1 py-4", children: [companionCarryover?.messages.map((msg) => {
+                            const isUser = msg.role === "user";
+                            return (_jsx("div", { "data-testid": "companion-message-row", "data-companion-carryover": "true", className: `flex w-full ${isUser ? "justify-end" : "justify-start"}`, style: { opacity: gameModalCarryoverOpacity }, children: _jsx("div", { className: `max-w-[85%] rounded-2xl px-4 py-3 text-[15px] leading-relaxed ${isUser
+                                        ? "bg-accent/85 text-white rounded-br-sm"
+                                        : "border border-white/10 bg-black/45 text-white/95 rounded-bl-sm backdrop-blur-md"}`, children: _jsx("div", { className: "break-words", style: { fontFamily: "var(--font-chat)" }, children: _jsx(MessageContent, { message: msg }) }) }) }, `carryover-${msg.id}`));
+                        }), gameModalVisibleMsgs.map((msg) => {
+                            const isUser = msg.role === "user";
+                            return (_jsx("div", { "data-testid": "companion-message-row", className: `flex w-full ${isUser ? "justify-end" : "justify-start"}`, children: _jsx("div", { className: `max-w-[85%] rounded-2xl px-4 py-3 text-[15px] leading-relaxed ${isUser
+                                        ? "bg-accent/85 text-white rounded-br-sm"
+                                        : "border border-white/10 bg-black/45 text-white/95 rounded-bl-sm backdrop-blur-md"}`, children: _jsx("div", { className: "break-words", style: { fontFamily: "var(--font-chat)" }, children: _jsx(MessageContent, { message: msg }) }) }) }, msg.id));
+                        }), chatSending && !chatFirstTokenReceived && (_jsx("div", { className: "flex w-full justify-start", children: _jsxs("div", { className: "max-w-[85%] rounded-2xl rounded-bl-sm px-4 py-3 bg-black/30 flex items-center gap-1", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-white/50 animate-bounce", style: { animationDelay: "0ms" } }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-white/50 animate-bounce", style: { animationDelay: "150ms" } }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-white/50 animate-bounce", style: { animationDelay: "300ms" } })] }) }))] })) : (_jsxs("div", { className: "w-full pl-2 sm:pl-3 pr-3 sm:pr-4 space-y-1", children: [visibleMsgs.map((msg, i) => {
+                            const prev = i > 0 ? visibleMsgs[i - 1] : null;
+                            const isGrouped = prev?.role === msg.role;
+                            return (_jsx(ChatMessage, { message: msg, isGrouped: isGrouped, agentName: agentName, agentAvatarSrc: agentAvatarSrc, onSpeak: handleSpeakMessage, onEdit: handleEditMessage }, msg.id));
+                        }), chatSending && !chatFirstTokenReceived && (_jsx(TypingIndicator, { agentName: agentName, agentAvatarSrc: agentAvatarSrc }))] })) }), _jsx(AgentActivityBox, { sessions: ptySessions }), shareIngestNotice && (_jsx("div", { className: "text-xs text-ok py-1 relative", style: { zIndex: 1 }, children: shareIngestNotice })), droppedFiles.length > 0 && (_jsx("div", { className: "text-xs text-muted py-0.5 flex gap-2 relative", style: { zIndex: 1 }, children: droppedFiles.map((f) => (_jsx("span", { children: f }, f))) })), chatPendingImages.length > 0 && (_jsx("div", { className: "flex gap-2 flex-wrap py-1 relative", "data-no-camera-drag": isGameModal || undefined, style: { zIndex: 1 }, children: chatPendingImages.map((img, i) => (_jsxs("div", { className: "relative group w-16 h-16 shrink-0", children: [_jsx("img", { src: `data:${img.mimeType};base64,${img.data}`, alt: img.name, className: "w-16 h-16 object-cover border border-border rounded" }), _jsx("button", { type: "button", title: t("chatview.RemoveImage"), "aria-label": `Remove image ${img.name}`, onClick: () => removeImage(i), className: "absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-danger text-white text-[10px] flex items-center justify-center opacity-100 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 transition-opacity cursor-pointer", children: "\u00D7" })] }, `${img.name}-${i}`))) })), voiceLatency && (_jsxs("div", { className: "pb-1 text-[10px] text-muted relative", style: { zIndex: 1 }, children: [t("chatview.SilenceEndFirstTo"), " ", voiceLatency.speechEndToFirstTokenMs ?? "—", t("chatview.msEndVoiceStart"), " ", voiceLatency.speechEndToVoiceStartMs ?? "—", t("chatview.msFirst"), " ", voiceLatency.firstSegmentCached == null
+                        ? "—"
+                        : voiceLatency.firstSegmentCached
+                            ? "cached"
+                            : "uncached"] })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, className: "hidden", onChange: handleFileInputChange }), isGameModal ? (
+            /* ── Game-modal composer ──────────────────────────────────────── */
+            _jsx("div", { className: "mt-auto pt-2.5 relative", "data-no-camera-drag": "true", style: { zIndex: 1 }, children: _jsx(ChatComposer, { variant: "game-modal", textareaRef: textareaRef, chatInput: chatInput, chatPendingImagesCount: chatPendingImages.length, isComposerLocked: isComposerLocked, isAgentStarting: isAgentStarting, chatSending: chatSending, voice: {
+                        supported: voice.supported,
+                        isListening: voice.isListening,
+                        captureMode: voice.captureMode,
+                        interimTranscript: voice.interimTranscript,
+                        isSpeaking: voice.isSpeaking,
+                        toggleListening: voice.toggleListening,
+                        startListening: beginVoiceCapture,
+                        stopListening: endVoiceCapture,
+                    }, agentVoiceEnabled: !agentVoiceMuted, showAgentVoiceToggle: showComposerVoiceToggle, t: t, onAttachImage: () => fileInputRef.current?.click(), onChatInputChange: (value) => setState("chatInput", value), onKeyDown: handleKeyDown, onSend: () => void handleChatSend(), onStop: handleChatStop, onStopSpeaking: stopSpeaking, onToggleAgentVoice: () => setState("chatAgentVoiceMuted", !agentVoiceMuted) }) })) : (
+            /* ── Default composer ─────────────────────────────────────────── */
+            _jsx("div", { className: "border-t border-border pt-3 pb-3 sm:pb-4 px-2 sm:px-3 relative", style: { zIndex: 1 }, children: _jsx(ChatComposer, { variant: "default", textareaRef: textareaRef, chatInput: chatInput, chatPendingImagesCount: chatPendingImages.length, isComposerLocked: isComposerLocked, isAgentStarting: isAgentStarting, chatSending: chatSending, voice: {
+                        supported: voice.supported,
+                        isListening: voice.isListening,
+                        captureMode: voice.captureMode,
+                        interimTranscript: voice.interimTranscript,
+                        isSpeaking: voice.isSpeaking,
+                        toggleListening: voice.toggleListening,
+                        startListening: beginVoiceCapture,
+                        stopListening: endVoiceCapture,
+                    }, agentVoiceEnabled: !agentVoiceMuted, showAgentVoiceToggle: showComposerVoiceToggle, t: t, onAttachImage: () => fileInputRef.current?.click(), onChatInputChange: (value) => setState("chatInput", value), onKeyDown: handleKeyDown, onSend: () => void handleChatSend(), onStop: handleChatStop, onStopSpeaking: stopSpeaking, onToggleAgentVoice: () => setState("chatAgentVoiceMuted", !agentVoiceMuted) }) }))] }));
+}

package/dist/components/CloudSourceControls.d.ts

@@ -0,0 +1,13 @@
+export type CloudSourceMode = "cloud" | "own-key";
+export declare function CloudSourceModeToggle({ mode, onChange, cloudLabel, ownKeyLabel, }: {
+    mode: CloudSourceMode;
+    onChange: (mode: CloudSourceMode) => void;
+    cloudLabel?: string;
+    ownKeyLabel?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CloudConnectionStatus({ connected, connectedText, disconnectedText, }: {
+    connected: boolean;
+    connectedText?: string;
+    disconnectedText: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CloudSourceControls.d.ts.map

package/dist/components/CloudSourceControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudSourceControls.d.ts","sourceRoot":"","sources":["../../src/components/CloudSourceControls.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,QAAQ,EACR,UAA0B,EAC1B,WAA2B,GAC5B,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CA+BA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,aAA0C,EAC1C,gBAAgB,GACjB,EAAE;IACD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;CAC1B,2CAuBA"}

package/dist/components/CloudSourceControls.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { useApp } from "../state";
+export function CloudSourceModeToggle({ mode, onChange, cloudLabel = "Eliza Cloud", ownKeyLabel = "Own API Key", }) {
+    return (_jsxs("div", { className: "inline-flex overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--card)] shadow-sm", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: `first:rounded-l-lg first:rounded-r-none last:rounded-l-none last:rounded-r-lg px-3 py-1.5 text-xs font-semibold transition-colors ${mode === "cloud"
+                    ? "bg-[var(--accent)] text-[var(--accent-foreground)] hover:bg-[var(--accent)]/90 hover:text-[var(--accent-foreground)]"
+                    : "bg-transparent text-[var(--muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"}`, onClick: () => onChange("cloud"), children: cloudLabel }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: `first:rounded-l-lg first:rounded-r-none last:rounded-l-none last:rounded-r-lg border-l border-[var(--border)] px-3 py-1.5 text-xs font-semibold transition-colors ${mode === "own-key"
+                    ? "bg-[var(--accent)] text-[var(--accent-foreground)] hover:bg-[var(--accent)]/90 hover:text-[var(--accent-foreground)]"
+                    : "bg-transparent text-[var(--muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"}`, onClick: () => onChange("own-key"), children: ownKeyLabel })] }));
+}
+export function CloudConnectionStatus({ connected, connectedText = "Connected to Eliza Cloud", disconnectedText, }) {
+    const { t } = useApp();
+    return (_jsx("div", { className: "flex items-center justify-between py-2.5 px-3 border border-[var(--border)] bg-[var(--bg-muted)]", children: connected ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-xs text-[var(--text)]", children: connectedText }), _jsx("span", { className: "rounded-full border border-green-600 bg-green-600/10 px-1.5 py-0.5 text-[10px] text-[var(--text)]", children: t("appsview.Active") })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-xs text-[var(--muted)]", children: disconnectedText }), _jsx("span", { className: "rounded-full border border-[var(--warn)] bg-[var(--warn-subtle)] px-1.5 py-0.5 text-[10px] text-[var(--text)]", children: t("cloudsourcecontrols.Offline") })] })) }));
+}

package/dist/components/CodingAgentSettingsSection.d.ts

@@ -0,0 +1,2 @@
+export declare function CodingAgentSettingsSection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CodingAgentSettingsSection.d.ts.map

package/dist/components/CodingAgentSettingsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodingAgentSettingsSection.d.ts","sourceRoot":"","sources":["../../src/components/CodingAgentSettingsSection.tsx"],"names":[],"mappings":"AAkGA,wBAAgB,0BAA0B,4CAqbzC"}