@elizaos/ui 2.0.0-beta.1 → 2.0.3-beta.2

package/components/pages/ChatView.js

@@ -0,0 +1,678 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { client } from "../../api/client.js";
+import { isRoutineCodingAgentMessage } from "../../chat/index.js";
+import { readPersistedMobileRuntimeMode } from "../../first-run/mobile-runtime-mode.js";
+import { useChatAvatarVoiceBridge } from "../../hooks/useChatAvatarVoiceBridge.js";
+import { useConnectorSendAsAccount } from "../../hooks/useConnectorSendAsAccount.js";
+import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
+import { consumeAssistantLaunchPayloadFromHash } from "../../platform/assistant-launch-payload.js";
+import { CodingAgentControlChip, PtyConsoleBase, } from "../../slots/task-coordinator-slots.js";
+import { useChatComposer } from "../../state/ChatComposerContext.hooks.js";
+import { usePtySessions } from "../../state/PtySessionsContext.hooks.js";
+import { loadContinuousChatMode, saveContinuousChatMode, } from "../../state/persistence.js";
+import { useApp } from "../../state/useApp.js";
+import { getVrmPreviewUrl } from "../../state/vrm.js";
+import { CHAT_UPLOAD_ACCEPT, chatUploadKind, filesToImageAttachments, MAX_CHAT_IMAGES, } from "../../utils/image-attachment.js";
+import { AccountRequiredCard } from "../chat/AccountRequiredCard.js";
+import { AgentActivityBox } from "../chat/AgentActivityBox.js";
+import { ConnectorAccountPicker } from "../chat/ConnectorAccountPicker.js";
+import { connectorAccountDisplayName, connectorWriteConfirmationKey, isLikelyAccountRequiredError, mergeConnectorSendAsMetadata, } from "../chat/connector-send-as.js";
+import { MessageContent } from "../chat/MessageContent.js";
+import { ChatVoiceStatusBar } from "../composites/chat/ChatVoiceStatusBar.js";
+import { ContinuousChatToggle } from "../composites/chat/ContinuousChatToggle.js";
+import { ChatAttachmentStrip } from "../composites/chat/chat-attachment-strip.js";
+import { ChatComposer } from "../composites/chat/chat-composer.js";
+import { ChatComposerShell } from "../composites/chat/chat-composer-shell.js";
+import { ChatEmptyState } from "../composites/chat/chat-empty-state.js";
+import { ChatSourceIcon } from "../composites/chat/chat-source.js";
+import { ChatThreadLayout } from "../composites/chat/chat-thread-layout.js";
+import { ChatTranscript } from "../composites/chat/chat-transcript.js";
+import { TypingIndicator } from "../composites/chat/chat-typing-indicator.js";
+import { useChatVoiceController, useGameModalMessages, } from "./chat-view-hooks.js";
+const CHAT_INPUT_MIN_HEIGHT_PX = 46;
+const CHAT_INPUT_MAX_HEIGHT_PX = 200;
+/** Hide the typing indicator if no first token arrives within this window. */
+const TYPING_INDICATOR_STALL_MS = 30_000;
+const fallbackTranslate = (key, options) => typeof options?.defaultValue === "string" ? options.defaultValue : key;
+function normalizeInboxChatSelection(value) {
+    if (!value || typeof value !== "object")
+        return null;
+    const candidate = value;
+    const id = typeof candidate.id === "string" ? candidate.id.trim() : "";
+    const title = typeof candidate.title === "string" ? candidate.title.trim() : "";
+    const source = typeof candidate.source === "string" ? candidate.source.trim() : "";
+    const transportSource = typeof candidate.transportSource === "string" &&
+        candidate.transportSource.trim().length > 0
+        ? candidate.transportSource.trim()
+        : undefined;
+    if (!id || !title || (!source && !transportSource)) {
+        return null;
+    }
+    return {
+        avatarUrl: typeof candidate.avatarUrl === "string" ? candidate.avatarUrl : undefined,
+        canSend: typeof candidate.canSend === "boolean" ? candidate.canSend : undefined,
+        id,
+        source,
+        title,
+        transportSource,
+        worldId: typeof candidate.worldId === "string" ? candidate.worldId : undefined,
+        worldLabel: typeof candidate.worldLabel === "string"
+            ? candidate.worldLabel
+            : undefined,
+    };
+}
+export function ChatView({ variant = "default", onPtySessionClick, hideComposer = false, }) {
+    const app = useApp();
+    const isGameModal = variant === "game-modal";
+    const showComposerVoiceToggle = false;
+    const { agentStatus, activeConversationId, activeInboxChat, activeTerminalSessionId, characterData, chatFirstTokenReceived, companionMessageCutoffTs, conversationMessages, handleChatSend, handleChatStop, handleChatEdit, elizaCloudConnected, elizaCloudVoiceProxyAvailable, elizaCloudHasPersistedKey, setState, copyToClipboard, droppedFiles: rawDroppedFiles, analysisMode, shareIngestNotice: rawShareIngestNotice, chatAgentVoiceMuted: agentVoiceMuted, selectedVrmIndex, uiLanguage, sendChatText, t: appTranslate, } = app;
+    const { ptySessions } = usePtySessions();
+    const { chatInput: rawChatInput, chatSending, chatPendingImages: rawChatPendingImages, setChatInput, setChatPendingImages, } = useChatComposer();
+    const droppedFiles = Array.isArray(rawDroppedFiles) ? rawDroppedFiles : [];
+    const chatInput = typeof rawChatInput === "string" ? rawChatInput : "";
+    const shareIngestNotice = typeof rawShareIngestNotice === "string" ? rawShareIngestNotice : "";
+    const chatPendingImages = Array.isArray(rawChatPendingImages)
+        ? rawChatPendingImages
+        : [];
+    const inboxChat = useMemo(() => normalizeInboxChatSelection(activeInboxChat), [activeInboxChat]);
+    const t = useCallback((key, values) => {
+        if (typeof appTranslate === "function") {
+            return appTranslate(key, values);
+        }
+        const template = typeof values?.defaultValue === "string" ? values.defaultValue : key;
+        return template.replace(/\{\{(\w+)\}\}/g, (_match, token) => {
+            const value = values?.[token];
+            return value == null ? "" : String(value);
+        });
+    }, [appTranslate]);
+    const messagesRef = useRef(null);
+    const textareaRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const composerRef = useRef(null);
+    const [composerHeight, setComposerHeight] = useState(0);
+    const [imageDragOver, setImageDragOver] = useState(false);
+    // Guards the "thinking" typing indicator: if the first token never arrives,
+    // we hide the dots after a timeout rather than spinning forever. Reset
+    // whenever a new send starts or the first token lands (normal stream path).
+    const [typingStalled, setTypingStalled] = useState(false);
+    const [continuousChatMode, setContinuousChatMode] = useState(loadContinuousChatMode);
+    const handleContinuousChatModeChange = useCallback((next) => {
+        setContinuousChatMode(next);
+        saveContinuousChatMode(next);
+    }, []);
+    useEffect(() => {
+        if (isGameModal || typeof window === "undefined")
+            return;
+        const consumeLaunchPayload = () => {
+            void consumeAssistantLaunchPayloadFromHash(window.location.hash, {
+                allowedRoutes: ["chat"],
+                onSendFailure: (payload) => {
+                    setChatInput(payload.text);
+                },
+                sendText: sendChatText,
+            });
+        };
+        consumeLaunchPayload();
+        window.addEventListener("hashchange", consumeLaunchPayload);
+        return () => {
+            window.removeEventListener("hashchange", consumeLaunchPayload);
+        };
+    }, [isGameModal, sendChatText, setChatInput]);
+    const focusTerminalSession = useCallback((sessionId) => {
+        setState("activeInboxChat", null);
+        setState("activeTerminalSessionId", sessionId);
+    }, [setState]);
+    // Route a problem session into the Terminal channel so the user sees it.
+    useEffect(() => {
+        if (activeTerminalSessionId)
+            return;
+        const problemSession = ptySessions.find((s) => s.status === "error" || s.status === "blocked");
+        if (problemSession) {
+            focusTerminalSession(problemSession.sessionId);
+        }
+    }, [ptySessions, activeTerminalSessionId, focusTerminalSession]);
+    // ── Derived composer state ──────────────────────────────────────
+    const isAgentStarting = agentStatus?.state === "starting" || agentStatus?.state === "restarting";
+    // The agent is up but has no inference model wired — no point letting the
+    // user hit send. Surfaced as a composer lock + a pointer to Settings.
+    const agentModel = typeof agentStatus?.model === "string" ? agentStatus.model.trim() : "";
+    const isMobileLocalRuntime = readPersistedMobileRuntimeMode() === "local";
+    const isMissingInferenceProvider = agentStatus?.state === "running" &&
+        agentModel.length === 0 &&
+        !isMobileLocalRuntime;
+    // First-turn capability fades in: the composer stays usable while the agent
+    // warms up (a turn submitted during warmup is held server-side until the
+    // runtime is ready, then streams its reply) — only a genuinely missing
+    // inference provider hard-locks the composer.
+    const isComposerLocked = isMissingInferenceProvider;
+    const composerPlaceholderOverride = isMissingInferenceProvider
+        ? t("chat.setupProviderToChat", {
+            defaultValue: "Set up an LLM provider in Settings to start chatting",
+        })
+        : undefined;
+    const { beginVoiceCapture, endVoiceCapture, continuous, handleEditMessage, handleSpeakMessage, stopSpeaking, voice, voiceLatency, voiceSpeaker, } = useChatVoiceController({
+        agentVoiceMuted,
+        chatFirstTokenReceived,
+        chatInput,
+        chatSending,
+        elizaCloudConnected,
+        elizaCloudVoiceProxyAvailable,
+        elizaCloudHasPersistedKey,
+        conversationMessages,
+        activeConversationId,
+        handleChatEdit,
+        handleChatSend,
+        isComposerLocked,
+        isGameModal,
+        setState,
+        uiLanguage,
+        continuousMode: continuousChatMode,
+    });
+    // Stop any in-flight voice playback when the user switches conversations.
+    // useLayoutEffect (not useEffect): must run *before* useChatVoiceController's
+    // passive auto-speak effect. Otherwise we queue the new thread's greeting
+    // first, then stopSpeaking() clears that queue — no TTS after new chat/reset.
+    const prevConversationIdRef = useRef(activeConversationId);
+    useLayoutEffect(() => {
+        if (prevConversationIdRef.current === activeConversationId)
+            return;
+        prevConversationIdRef.current = activeConversationId;
+        stopSpeaking();
+    }, [activeConversationId, stopSpeaking]);
+    const handleChatAvatarSpeakingChange = useCallback((isSpeaking) => {
+        setState("chatAvatarSpeaking", isSpeaking);
+    }, [setState]);
+    const agentName = characterData?.name ||
+        agentStatus?.agentName ||
+        t("common.agent", { defaultValue: "Agent" });
+    const msgs = Array.isArray(conversationMessages) ? conversationMessages : [];
+    const visibleMsgs = useMemo(() => msgs
+        .filter((msg) => !(chatSending &&
+        !chatFirstTokenReceived &&
+        msg.role === "assistant" &&
+        !msg.text.trim()) && !isRoutineCodingAgentMessage(msg))
+        // Default-tag any message that arrived without a source as
+        // "eliza" so dashboard turns render the gold chip symmetric
+        // with connector messages. Live-streamed turns flow through
+        // the SSE path and don't carry the server-side default from
+        // conversation-routes.ts, so we catch them here too.
+        .map((msg) => (msg.source ? msg : { ...msg, source: "eliza" })), [chatFirstTokenReceived, chatSending, msgs]);
+    const { companionCarryover, gameModalCarryoverOpacity, gameModalVisibleMsgs, } = useGameModalMessages({
+        activeConversationId,
+        companionMessageCutoffTs,
+        isGameModal,
+        visibleMsgs,
+    });
+    const agentAvatarSrc = selectedVrmIndex > 0 ? getVrmPreviewUrl(selectedVrmIndex) : null;
+    useChatAvatarVoiceBridge({
+        mouthOpen: voice.mouthOpen,
+        isSpeaking: voice.isSpeaking,
+        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(() => {
+        const displayedCompanionMessageCount = (companionCarryover?.messages.length ?? 0) + gameModalVisibleMsgs.length;
+        if (!chatSending &&
+            visibleMsgs.length === 0 &&
+            (!isGameModal || displayedCompanionMessageCount === 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,
+        companionCarryover,
+        gameModalVisibleMsgs,
+        isGameModal,
+        visibleMsgs,
+    ]);
+    // Auto-resize textarea
+    useEffect(() => {
+        if (!isGameModal)
+            return;
+        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, isGameModal]);
+    // Track composer height so the message layer bottom adjusts dynamically
+    useEffect(() => {
+        const el = composerRef.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(([entry]) => {
+            if (entry)
+                setComposerHeight(entry.contentRect.height);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    // Typing-indicator stall guard. While a send is in flight with no first token
+    // yet, arm a timer; if it fires, the request is stuck (e.g. provider hang) so
+    // we drop the indicator. Once the first token lands or the send settles the
+    // gate clears, the timer is torn down, and the flag resets — the normal
+    // streaming path never trips it.
+    useEffect(() => {
+        if (!chatSending || chatFirstTokenReceived) {
+            setTypingStalled(false);
+            return;
+        }
+        const timer = setTimeout(() => setTypingStalled(true), TYPING_INDICATOR_STALL_MS);
+        return () => clearTimeout(timer);
+    }, [chatSending, chatFirstTokenReceived]);
+    const handleKeyDown = (e) => {
+        if (isComposerLocked)
+            return;
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            void handleChatSend();
+        }
+    };
+    const addImageFiles = useCallback((files) => {
+        void filesToImageAttachments(files)
+            .then((attachments) => {
+            if (!attachments.length)
+                return;
+            setChatPendingImages((prev) => [...prev, ...attachments].slice(0, MAX_CHAT_IMAGES));
+        })
+            .catch((err) => {
+            // A failed image read leaves nothing attached; tell the user rather
+            // than silently dropping their image.
+            app.setActionNotice?.(app.t("chatview.ImageReadFailed", {
+                message: err instanceof Error ? err.message : "unknown error",
+                defaultValue: "Couldn't read image: {{message}}",
+            }), "error");
+        });
+    }, [app, 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]);
+    const chatMessageLabels = useMemo(() => ({
+        cancel: t("common.cancel"),
+        delete: t("aria.deleteMessage"),
+        edit: t("aria.editMessage"),
+        play: t("aria.playMessage"),
+        responseInterrupted: t("chatmessage.ResponseInterrupte"),
+        saveAndResend: t("chatmessage.SaveAndResend", {
+            defaultValue: "Save and resend",
+        }),
+        saving: t("common.saving", {
+            defaultValue: "Saving...",
+        }),
+    }), [t]);
+    const handleCopyMessageText = useCallback((text) => {
+        void copyToClipboard(text);
+    }, [copyToClipboard]);
+    const renderChatMessageContent = useCallback((message) => (_jsx(MessageContent, { message: message, analysisMode: analysisMode })), [analysisMode]);
+    const messagesContent = visibleMsgs.length === 0 && !chatSending ? (_jsx(ChatEmptyState, { agentName: agentName, variant: variant, onSuggestionClick: (suggestion) => setChatInput(suggestion) })) : (_jsx(ChatTranscript, { variant: variant, agentName: agentName, carryoverMessages: companionCarryover?.messages, carryoverOpacity: gameModalCarryoverOpacity, labels: chatMessageLabels, messages: isGameModal ? gameModalVisibleMsgs : visibleMsgs, onEdit: handleEditMessage, onSpeak: handleSpeakMessage, onCopy: handleCopyMessageText, renderMessageContent: renderChatMessageContent, typingIndicator: chatSending && !chatFirstTokenReceived && !typingStalled ? (isGameModal ? (_jsx(TypingIndicator, { variant: "game-modal", agentName: agentName })) : (_jsx(TypingIndicator, { agentName: agentName, agentAvatarSrc: agentAvatarSrc }))) : null }));
+    const voiceStatusBarVisible = voice.supported &&
+        (continuousChatMode !== "off" ||
+            voice.isListening ||
+            voice.isSpeaking ||
+            Boolean(voiceSpeaker) ||
+            Boolean(continuous.interimTranscript));
+    const continuousChatToggleVisible = voice.supported && continuousChatMode !== "off";
+    const auxiliaryNode = (_jsxs(_Fragment, { children: [voiceStatusBarVisible ? (_jsx(ChatVoiceStatusBar, { status: continuous.status, interimTranscript: continuous.interimTranscript, speaker: voiceSpeaker, latency: continuous.latency, needsAudioUnlock: continuous.needsAudioUnlock, onUnlockAudio: continuous.unlockAudio, micReconnected: continuous.micReconnected, visible: true, className: `mb-1 relative${isGameModal ? " pointer-events-auto" : ""}`, "data-testid": "chat-view-voice-status-bar" })) : null, shareIngestNotice ? (_jsx("div", { className: `text-xs text-ok py-1 relative${isGameModal ? " pointer-events-auto" : ""}`, style: { zIndex: 1 }, children: shareIngestNotice })) : null, droppedFiles.length > 0 ? (_jsx("div", { className: `text-xs text-muted py-0.5 flex gap-2 relative${isGameModal ? " pointer-events-auto" : ""}`, style: { zIndex: 1 }, children: droppedFiles.map((f) => (_jsx("span", { children: f }, f))) })) : null, _jsx(ChatAttachmentStrip, { variant: variant, items: chatPendingImages.map((img, imgIdx) => ({
+                    id: String(imgIdx),
+                    alt: img.name,
+                    name: img.name,
+                    src: `data:${img.mimeType};base64,${img.data}`,
+                    kind: chatUploadKind(img.mimeType),
+                })), removeLabel: (item) => t("chat.removeImage", {
+                    defaultValue: "Remove {{name}}",
+                    name: item.name,
+                }), onRemove: (id) => removeImage(Number(id)) }), voiceLatency ? (_jsxs("div", { className: `pb-1 text-2xs text-muted relative${isGameModal ? " pointer-events-auto" : ""}`, style: { zIndex: 1 }, children: [t("chatview.SilenceEndFirstTo"), " ", voiceLatency.speechEndToFirstTokenMs ?? "—", t("chatview.msEndVoiceStart"), " ", voiceLatency.speechEndToVoiceStartMs ?? "—", t("chatview.msFirst"), " ", voiceLatency.firstSegmentCached == null
+                        ? "—"
+                        : voiceLatency.firstSegmentCached
+                            ? t("chat.cached", { defaultValue: "cached" })
+                            : t("chat.uncached", { defaultValue: "uncached" })] })) : null, _jsx("input", { ref: fileInputRef, type: "file", accept: CHAT_UPLOAD_ACCEPT, multiple: true, className: "hidden", onChange: handleFileInputChange })] }));
+    const defaultComposerLaneClassName = "mx-auto w-full max-w-[96rem] px-4 sm:px-6 lg:px-8 xl:px-10";
+    const defaultComposerShellClassName = `${defaultComposerLaneClassName} pt-1.5`;
+    const defaultComposerShellStyle = {
+        paddingBottom: "calc(var(--safe-area-bottom, 0px) + var(--eliza-mobile-nav-offset, 0px) + 0.375rem)",
+    };
+    const composerNode = hideComposer ? null : isGameModal ? (_jsx(ChatComposerShell, { variant: "game-modal", shellRef: composerRef, before: _jsxs(_Fragment, { children: [_jsx(CodingAgentControlChip, {}), continuousChatToggleVisible ? (_jsx("div", { className: "flex justify-end px-1 pb-0.5", children: _jsx(ContinuousChatToggle, { compact: true, value: continuousChatMode, onChange: handleContinuousChatModeChange, disabled: isComposerLocked, "data-testid": "chat-view-continuous-chat-toggle-game-modal" }) })) : null, _jsx(AgentActivityBox, { sessions: ptySessions, onSessionClick: onPtySessionClick ?? focusTerminalSession })] }), children: _jsx(ChatComposer, { variant: "game-modal", textareaRef: textareaRef, chatInput: chatInput, chatPendingImagesCount: chatPendingImages.length, isComposerLocked: isComposerLocked, isAgentStarting: isAgentStarting, placeholder: composerPlaceholderOverride, chatSending: chatSending, voice: {
+                supported: voice.supported,
+                isListening: voice.isListening,
+                captureMode: voice.captureMode,
+                interimTranscript: voice.interimTranscript,
+                isSpeaking: voice.isSpeaking,
+                assistantTtsQuality: voice.assistantTtsQuality,
+                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) }) })) : (_jsx(ChatComposerShell, { variant: "default", className: defaultComposerShellClassName, style: defaultComposerShellStyle, before: _jsxs(_Fragment, { children: [_jsx(CodingAgentControlChip, {}), continuousChatToggleVisible ? (_jsx("div", { className: "flex justify-end px-1 pb-0.5", children: _jsx(ContinuousChatToggle, { compact: true, value: continuousChatMode, onChange: handleContinuousChatModeChange, disabled: isComposerLocked, "data-testid": "chat-view-continuous-chat-toggle" }) })) : null] }), children: _jsx(ChatComposer, { variant: "default", layout: "inline", textareaRef: textareaRef, chatInput: chatInput, chatPendingImagesCount: chatPendingImages.length, isComposerLocked: isComposerLocked, isAgentStarting: isAgentStarting, placeholder: composerPlaceholderOverride, chatSending: chatSending, voice: {
+                supported: voice.supported,
+                isListening: voice.isListening,
+                captureMode: voice.captureMode,
+                interimTranscript: voice.interimTranscript,
+                isSpeaking: voice.isSpeaking,
+                assistantTtsQuality: voice.assistantTtsQuality,
+                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) }) }));
+    // ── Terminal-channel branch ──────────────────────────────────────
+    if (activeTerminalSessionId) {
+        return (_jsx(TerminalChannelPanel, { activeSessionId: activeTerminalSessionId, sessions: ptySessions, onClose: () => setState("activeTerminalSessionId", null), loadingLabel: t("terminal.starting", {
+                defaultValue: "Starting terminal\u2026",
+            }) }));
+    }
+    // ── Inbox-chat branch ────────────────────────────────────────────
+    if (inboxChat) {
+        return (_jsx(InboxChatPanel, { activeInboxChat: inboxChat, variant: variant }, inboxChat.id));
+    }
+    return (_jsx(ChatThreadLayout, { "aria-label": t("aria.chatWorkspace"), variant: variant, composerHeight: composerHeight, imageDragOver: imageDragOver, messagesRef: messagesRef, footerStack: _jsx("div", { className: defaultComposerLaneClassName, children: auxiliaryNode }), composer: composerNode, onDragOver: (event) => {
+            event.preventDefault();
+            setImageDragOver(true);
+        }, onDragLeave: () => setImageDragOver(false), onDrop: handleImageDrop, children: messagesContent }));
+}
+/**
+ * Full-window terminal view rendered when the Terminal channel is
+ * active. Keeps every PTY session pane mounted under the hood so
+ * tabbing between sessions preserves their buffers/state. Spawning is
+ * owned by the sidebar — this component only displays what the
+ * orchestrator has already registered, and waits for the live session
+ * list to catch up when activeSessionId is set but not yet present.
+ */
+export function TerminalChannelPanel({ activeSessionId, sessions, onClose, loadingLabel, }) {
+    const hasActiveSession = sessions.some((s) => s.sessionId === activeSessionId);
+    if (!hasActiveSession) {
+        return (_jsx("div", { "data-testid": "terminal-channel-loading", className: "flex flex-1 items-center justify-center text-xs text-muted", children: loadingLabel }));
+    }
+    return (_jsx("div", { "data-testid": "terminal-channel-panel", className: "flex flex-1 min-h-0 min-w-0 flex-col", children: _jsx(PtyConsoleBase, { activeSessionId: activeSessionId, sessions: sessions, onClose: onClose, variant: "full" }) }));
+}
+/**
+ * Connector chat panel shown when the messages sidebar has a
+ * room selected. Polls `/api/inbox/messages?roomId=...`, renders the
+ * transcript through the same ChatTranscript component the dashboard
+ * uses, and routes outbound replies back through the runtime's
+ * source-specific send handlers.
+ */
+function InboxChatPanel({ activeInboxChat, variant, }) {
+    const app = useApp();
+    const t = app?.t ?? fallbackTranslate;
+    const [messages, setMessages] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [replyText, setReplyText] = useState("");
+    const [replyError, setReplyError] = useState(null);
+    const [sending, setSending] = useState(false);
+    const scrollRef = useRef(null);
+    const inboxTextareaRef = useRef(null);
+    const lastRenderedMessageKeyRef = useRef(null);
+    const transportSource = activeInboxChat.transportSource ?? activeInboxChat.source;
+    const loadInboxMessages = useCallback(async () => {
+        try {
+            const response = await client.getInboxMessages({
+                limit: 200,
+                roomId: activeInboxChat.id,
+                roomSource: transportSource,
+            });
+            // Server returns newest first; ChatTranscript expects
+            // oldest→newest (conversation layout) so reverse.
+            const next = [...response.messages]
+                .reverse()
+                .map((m) => m);
+            setMessages(next);
+            setLoadError(null);
+        }
+        catch (err) {
+            // A failed poll keeps the last snapshot (next tick retries), but a
+            // failure with nothing on screen would otherwise look like an empty
+            // inbox — surface it so the user knows the load failed.
+            setMessages((prev) => {
+                if (prev.length === 0) {
+                    setLoadError(err instanceof Error ? err.message : String(err));
+                }
+                return prev;
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [activeInboxChat.id, transportSource]);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            await loadInboxMessages();
+            if (cancelled)
+                return;
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [loadInboxMessages]);
+    useIntervalWhenDocumentVisible(() => {
+        void loadInboxMessages();
+    }, 15_000);
+    useLayoutEffect(() => {
+        if (messages.length === 0)
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const lastMessage = messages[messages.length - 1];
+        const nextKey = `${messages.length}:${lastMessage?.id ?? ""}:${lastMessage?.timestamp ?? 0}`;
+        if (lastRenderedMessageKeyRef.current === nextKey) {
+            return;
+        }
+        el.scrollTo({
+            top: el.scrollHeight,
+            behavior: lastRenderedMessageKeyRef.current === null ? "instant" : "smooth",
+        });
+        lastRenderedMessageKeyRef.current = nextKey;
+    }, [messages]);
+    const sourceLabel = activeInboxChat.source
+        ? activeInboxChat.source.charAt(0).toUpperCase() +
+            activeInboxChat.source.slice(1)
+        : t("common.channel", { defaultValue: "Channel" });
+    const sendAsContext = useMemo(() => activeInboxChat.canSend === false
+        ? null
+        : {
+            provider: transportSource,
+            connectorId: transportSource,
+            source: transportSource,
+            channel: activeInboxChat.id,
+            channelLabel: activeInboxChat.title,
+            writeCapable: true,
+        }, [
+        activeInboxChat.canSend,
+        activeInboxChat.id,
+        activeInboxChat.title,
+        transportSource,
+    ]);
+    const connectorSendAs = useConnectorSendAsAccount(sendAsContext, {
+        setActionNotice: app?.setActionNotice,
+    });
+    const { accountRequired, accountRequiredReason: connectorAccountRequiredReason, accounts: sendAsAccounts, connectAccount, context: normalizedSendAsContext, loading: sendAsLoading, reconnectAccount, saving: sendAsSaving, selectAccount, selectedAccount: sendAsSelectedAccount, sendAsMetadata, showPicker: showSendAsPicker, } = connectorSendAs;
+    const [accountRequiredReason, setAccountRequiredReason] = useState(null);
+    const [pendingWriteConfirmationKey, setPendingWriteConfirmationKey] = useState(null);
+    const [confirmedWriteAccountKeys, setConfirmedWriteAccountKeys] = useState(() => new Set());
+    const currentWriteConfirmationKey = connectorWriteConfirmationKey(sendAsContext, sendAsSelectedAccount);
+    const showWriteConfirmation = Boolean(pendingWriteConfirmationKey) &&
+        pendingWriteConfirmationKey === currentWriteConfirmationKey;
+    const sendAsConnectBusy = normalizedSendAsContext
+        ? sendAsSaving.has(`add:${normalizedSendAsContext.provider}:${normalizedSendAsContext.connectorId}`)
+        : false;
+    const blockingAccountReason = accountRequiredReason ??
+        (accountRequired ? connectorAccountRequiredReason : null);
+    const handleSelectSendAsAccount = useCallback((accountId) => {
+        const account = sendAsAccounts.find((item) => item.id === accountId);
+        selectAccount(accountId);
+        setAccountRequiredReason(null);
+        const key = connectorWriteConfirmationKey(sendAsContext, account);
+        if (key && !confirmedWriteAccountKeys.has(key)) {
+            setPendingWriteConfirmationKey(key);
+        }
+    }, [confirmedWriteAccountKeys, selectAccount, sendAsAccounts, sendAsContext]);
+    const handleConfirmWriteAccount = useCallback(() => {
+        if (!currentWriteConfirmationKey)
+            return;
+        setConfirmedWriteAccountKeys((prev) => {
+            const next = new Set(prev);
+            next.add(currentWriteConfirmationKey);
+            return next;
+        });
+        setPendingWriteConfirmationKey(null);
+        setReplyError(null);
+    }, [currentWriteConfirmationKey]);
+    const handleConnectSendAsAccount = useCallback(() => {
+        setAccountRequiredReason(null);
+        void connectAccount().catch((error) => {
+            setReplyError(error instanceof Error ? error.message : "Failed to connect account.");
+        });
+    }, [connectAccount]);
+    const handleReconnectSendAsAccount = useCallback((accountId) => {
+        setAccountRequiredReason(null);
+        void reconnectAccount(accountId).catch((error) => {
+            setReplyError(error instanceof Error
+                ? error.message
+                : "Failed to reconnect account.");
+        });
+    }, [reconnectAccount]);
+    const handleReplySend = useCallback(async (options) => {
+        const text = replyText.trim();
+        if (!text || sending || activeInboxChat.canSend === false) {
+            return;
+        }
+        // `force` is set by the account-required auto-retry after a successful
+        // reconnect: the captured `blockingAccountReason` closure is stale (still
+        // truthy), but the account is now connected, so bypass the guard.
+        if (!options?.force && blockingAccountReason) {
+            setReplyError(blockingAccountReason);
+            return;
+        }
+        if (showWriteConfirmation) {
+            setReplyError("Confirm the send-as account before sending.");
+            return;
+        }
+        setSending(true);
+        setReplyError(null);
+        try {
+            const response = await client.sendInboxMessage({
+                ...(sendAsSelectedAccount?.id
+                    ? { accountId: sendAsSelectedAccount.id }
+                    : {}),
+                channel: activeInboxChat.id,
+                metadata: mergeConnectorSendAsMetadata(undefined, sendAsMetadata),
+                roomId: activeInboxChat.id,
+                source: transportSource,
+                text,
+            });
+            if (response.message) {
+                setMessages((current) => [
+                    ...current,
+                    response.message,
+                ]);
+            }
+            setReplyText("");
+            setAccountRequiredReason(null);
+        }
+        catch (error) {
+            if (isLikelyAccountRequiredError(error)) {
+                setAccountRequiredReason(error instanceof Error
+                    ? error.message
+                    : "Choose a connector account before sending.");
+            }
+            setReplyError(error instanceof Error
+                ? error.message
+                : t("inboxview.SendFailed", {
+                    defaultValue: "Failed to send message.",
+                }));
+        }
+        finally {
+            setSending(false);
+        }
+    }, [
+        activeInboxChat.canSend,
+        activeInboxChat.id,
+        blockingAccountReason,
+        replyText,
+        sendAsMetadata,
+        sendAsSelectedAccount,
+        sending,
+        showWriteConfirmation,
+        t,
+        transportSource,
+    ]);
+    const handleReplyKeyDown = useCallback((event) => {
+        if (event.key !== "Enter" || event.shiftKey) {
+            return;
+        }
+        event.preventDefault();
+        void handleReplySend();
+    }, [handleReplySend]);
+    return (_jsxs("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col", children: [_jsxs("div", { className: "flex items-center justify-between px-5 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-sm font-bold text-txt truncate", children: activeInboxChat.title }), _jsxs("div", { className: "mt-0.5 text-xs-tight text-muted", children: [activeInboxChat.worldLabel
+                                        ? `${activeInboxChat.worldLabel} • `
+                                        : "", sourceLabel, " \u00B7 ", messages.length, " ", t("inboxview.TotalCountShort", { defaultValue: "messages" })] })] }), activeInboxChat.source ? (_jsx(ChatSourceIcon, { source: activeInboxChat.source, className: "h-4 w-4" })) : activeInboxChat.avatarUrl ? (_jsx("img", { src: activeInboxChat.avatarUrl, alt: t("inboxview.avatarAlt", {
+                            defaultValue: "{{title}} avatar",
+                            title: activeInboxChat.title,
+                        }), className: "h-8 w-8 shrink-0 rounded-full border border-border/35 object-cover " })) : null] }), _jsx("div", { ref: scrollRef, "data-testid": "inbox-chat-scroll", className: "flex-1 min-h-0 overflow-y-auto px-5 py-4", children: loading && messages.length === 0 ? (_jsx("div", { className: "flex h-full items-center justify-center text-xs text-muted", children: t("inboxview.Loading", { defaultValue: "Loading messages…" }) })) : messages.length === 0 ? (_jsx("div", { className: "flex h-full items-center justify-center text-center text-xs text-muted", children: loadError
+                        ? t("inboxview.LoadFailed", {
+                            message: loadError,
+                            defaultValue: "Couldn't load messages: {{message}}",
+                        })
+                        : t("inboxview.EmptyRoom", {
+                            defaultValue: "No messages in this chat yet.",
+                        }) })) : (_jsx(ChatTranscript, { variant: variant, messages: messages, userMessagesOnRight: false, renderMessageContent: (message) => (_jsx(MessageContent, { message: message })) })) }), activeInboxChat.canSend === false ? (_jsx("div", { className: "bg-bg-hover/40 px-5 py-3 text-xs-tight leading-5 text-muted", children: t("inboxview.ReadOnlyReplyHint", {
+                    defaultValue: "This {{source}} chat is readable, but outbound replies are not available for this connector yet.",
+                    source: sourceLabel,
+                }) })) : (_jsxs("div", { className: "flex flex-col gap-2 px-3 pb-3", children: [_jsx(ConnectorAccountPicker, { accounts: sendAsAccounts, connectBusy: sendAsConnectBusy, loading: sendAsLoading, selectedAccount: sendAsSelectedAccount, sourceLabel: sourceLabel, show: showSendAsPicker, onConnectAccount: handleConnectSendAsAccount, onReconnectAccount: handleReconnectSendAsAccount, onSelectAccount: handleSelectSendAsAccount }), blockingAccountReason ? (_jsx(AccountRequiredCard, { accounts: sendAsAccounts, connectBusy: sendAsConnectBusy, description: blockingAccountReason, loading: sendAsLoading, selectedAccount: sendAsSelectedAccount, sourceLabel: sourceLabel, onConnectAccount: handleConnectSendAsAccount, onReconnectAccount: handleReconnectSendAsAccount, onSelectAccount: handleSelectSendAsAccount, retryAction: async () => {
+                            await handleReplySend({ force: true });
+                        } })) : showWriteConfirmation ? (_jsx(AccountRequiredCard, { accounts: sendAsAccounts, connectBusy: sendAsConnectBusy, confirmLabel: "Confirm send-as", description: `First send with ${sendAsSelectedAccount ? connectorAccountDisplayName(sendAsSelectedAccount) : "this account"} in ${sourceLabel}. Confirm before Eliza writes through it.`, loading: sendAsLoading, selectedAccount: sendAsSelectedAccount, sourceLabel: sourceLabel, title: "Confirm send-as account", onConfirm: handleConfirmWriteAccount, onConnectAccount: handleConnectSendAsAccount, onReconnectAccount: handleReconnectSendAsAccount, onSelectAccount: handleSelectSendAsAccount })) : null, _jsx("div", { className: "rounded-sm border border-warn/40 bg-warn/10 px-3 py-2 text-2xs leading-snug text-warn", children: t("inboxview.AgentSendWarning", {
+                            defaultValue: "This message will be sent as your agent in {{source}}.",
+                            source: sourceLabel,
+                        }) }), _jsx(ChatComposerShell, { variant: "default", children: _jsx(ChatComposer, { variant: "default", textareaRef: inboxTextareaRef, chatInput: replyText, chatPendingImagesCount: 0, isComposerLocked: sending, isAgentStarting: false, chatSending: sending, voice: inertVoiceState, agentVoiceEnabled: false, showAgentVoiceToggle: false, t: t, hideAttachButton: true, placeholder: t("inboxview.ReplyPlaceholder", {
+                                defaultValue: "Reply in {{source}}",
+                                source: sourceLabel,
+                            }), onAttachImage: () => { }, onChatInputChange: setReplyText, onKeyDown: handleReplyKeyDown, onSend: () => void handleReplySend(), onStop: () => { }, onStopSpeaking: () => { }, onToggleAgentVoice: () => { } }) }), replyError ? (_jsx("div", { className: "px-1 text-xs-tight text-danger", children: replyError })) : null] }))] }));
+}
+const inertVoiceState = {
+    assistantTtsQuality: undefined,
+    captureMode: "idle",
+    interimTranscript: "",
+    isListening: false,
+    isSpeaking: false,
+    startListening: () => { },
+    stopListening: () => { },
+    supported: false,
+    toggleListening: () => { },
+};