@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/pages/PageScopedChatPane.js

@@ -0,0 +1,586 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatAttachmentStrip, ChatComposer, Spinner } from "@elizaos/ui";
+import { RotateCcw, Sparkles } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { client } from "../../api/index.js";
+import { useConnectorSendAsAccount } from "../../hooks/useConnectorSendAsAccount.js";
+import { useVoiceChat } from "../../hooks/useVoiceChat.js";
+import { useApp } from "../../state/index.js";
+import { AccountRequiredCard } from "../chat/AccountRequiredCard.js";
+import { ConnectorAccountPicker } from "../chat/ConnectorAccountPicker.js";
+import { connectorAccountDisplayName, connectorWriteConfirmationKey, isLikelyAccountRequiredError, mergeConnectorSendAsMetadata, } from "../chat/connector-send-as.js";
+import { buildPageScopedConversationMetadata, buildPageScopedRoutingMetadata, isPageScopedConversation, PAGE_SCOPE_COPY, resetPageScopedConversation, resolvePageScopedConversation, } from "./page-scoped-conversations.js";
+const MAX_PAGE_CHAT_IMAGES = 4;
+const CHAT_PREFILL_EVENT = "eliza:chat:prefill";
+async function getPageScopedConversationMessages(conversationId) {
+    try {
+        const { messages } = await client.getConversationMessages(conversationId);
+        return messages;
+    }
+    catch {
+        return [];
+    }
+}
+function readChatPrefillDetail(event) {
+    const detail = event.detail;
+    if (!detail || typeof detail.text !== "string" || detail.text.length === 0) {
+        return null;
+    }
+    return detail;
+}
+function resolveSpeechLocale(uiLanguage) {
+    switch (uiLanguage) {
+        case "zh-CN":
+            return "zh-CN";
+        case "ko":
+            return "ko-KR";
+        case "es":
+            return "es-ES";
+        case "pt":
+            return "pt-BR";
+        case "vi":
+            return "vi-VN";
+        case "tl":
+            return "fil-PH";
+        default:
+            return "en-US";
+    }
+}
+function shallowEqual(left, right) {
+    if (left === right)
+        return true;
+    if (!left || !right)
+        return false;
+    const leftKeys = Object.keys(left);
+    const rightKeys = Object.keys(right);
+    if (leftKeys.length !== rightKeys.length)
+        return false;
+    return leftKeys.every((k) => left[k] === right[k]);
+}
+export function PageScopedChatPane({ scope, pageId, title, className, introOverride, systemAddendumOverride, placeholderOverride, persistentIntro = false, footerActions, connectorContext, conversationAdapter, }) {
+    const copy = PAGE_SCOPE_COPY[scope];
+    const introTitle = introOverride?.title ?? copy.title;
+    const introBody = introOverride?.body ?? copy.body;
+    const introActions = introOverride?.actions ?? null;
+    const effectiveSystemAddendum = systemAddendumOverride ?? copy.systemAddendum;
+    const placeholder = placeholderOverride ?? "Message";
+    const app = useApp();
+    const composerRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const scrollRef = useRef(null);
+    const abortRef = useRef(null);
+    const conversationAdapterRef = useRef(conversationAdapter);
+    const [conversation, setConversation] = useState(null);
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState("");
+    const [pendingImages, setPendingImages] = useState([]);
+    const [attachmentError, setAttachmentError] = useState(null);
+    const [imageDragOver, setImageDragOver] = useState(false);
+    const [voicePreview, setVoicePreview] = useState("");
+    const [sending, setSending] = useState(false);
+    const [firstTokenReceived, setFirstTokenReceived] = useState(false);
+    const [clearing, setClearing] = useState(false);
+    const [loadError, setLoadError] = useState(null);
+    const [accountRequiredReason, setAccountRequiredReason] = useState(null);
+    const [pendingWriteConfirmationKey, setPendingWriteConfirmationKey] = useState(null);
+    const [confirmedWriteAccountKeys, setConfirmedWriteAccountKeys] = useState(() => new Set());
+    const conversationAdapterIdentityKey = conversationAdapter?.identityKey;
+    const hasConversationAdapter = Boolean(conversationAdapter);
+    const connectorSendAs = useConnectorSendAsAccount(connectorContext, {
+        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 sourceLabel = normalizedSendAsContext?.source ??
+        normalizedSendAsContext?.provider ??
+        "Connector";
+    const currentWriteConfirmationKey = connectorWriteConfirmationKey(connectorContext, sendAsSelectedAccount);
+    const showWriteConfirmation = Boolean(pendingWriteConfirmationKey) &&
+        pendingWriteConfirmationKey === currentWriteConfirmationKey;
+    const sendAsConnectBusy = normalizedSendAsContext
+        ? sendAsSaving.has(`add:${normalizedSendAsContext.provider}:${normalizedSendAsContext.connectorId}`)
+        : false;
+    const blockingAccountReason = accountRequiredReason ??
+        (accountRequired ? connectorAccountRequiredReason : null);
+    useEffect(() => {
+        conversationAdapterRef.current = conversationAdapter;
+    }, [conversationAdapter]);
+    // The "main chat" awareness link: only treat the global active conversation
+    // as a source when it's a non-page, non-automation conversation (i.e. a
+    // real general chat).
+    const sourceConversationId = useMemo(() => {
+        const activeId = app.activeConversationId;
+        if (!activeId)
+            return undefined;
+        if (conversation && activeId === conversation.id)
+            return undefined;
+        const active = app.conversations.find((c) => c.id === activeId);
+        if (!active)
+            return undefined;
+        if (isPageScopedConversation(active))
+            return undefined;
+        if (active.metadata?.scope?.startsWith("automation-"))
+            return undefined;
+        return activeId;
+    }, [app.activeConversationId, app.conversations, conversation]);
+    // Resolve the page-scoped conversation on mount / scope change.
+    useEffect(() => {
+        void conversationAdapterIdentityKey;
+        let cancelled = false;
+        abortRef.current?.abort();
+        setConversation(null);
+        setMessages([]);
+        setInput("");
+        setPendingImages([]);
+        setAttachmentError(null);
+        setImageDragOver(false);
+        setVoicePreview("");
+        setSending(false);
+        setFirstTokenReceived(false);
+        setLoadError(null);
+        setAccountRequiredReason(null);
+        setPendingWriteConfirmationKey(null);
+        void (async () => {
+            try {
+                const adapter = conversationAdapterRef.current;
+                const next = adapter
+                    ? await adapter.resolveConversation()
+                    : await resolvePageScopedConversation({
+                        scope,
+                        title,
+                        pageId,
+                    });
+                if (cancelled)
+                    return;
+                setConversation(next);
+                adapter?.onConversationResolved?.(next);
+                const history = await getPageScopedConversationMessages(next.id);
+                if (cancelled)
+                    return;
+                setMessages(history);
+            }
+            catch (cause) {
+                if (cancelled)
+                    return;
+                const message = cause instanceof Error && cause.message.trim().length > 0
+                    ? cause.message.trim()
+                    : "Failed to load page chat.";
+                setLoadError(message);
+            }
+        })();
+        return () => {
+            cancelled = true;
+            abortRef.current?.abort();
+        };
+    }, [conversationAdapterIdentityKey, pageId, scope, title]);
+    // When the linked source conversation changes, restamp room metadata so the
+    // page-scoped-context provider sees the current main-chat target.
+    useEffect(() => {
+        if (hasConversationAdapter)
+            return;
+        if (!conversation)
+            return;
+        const desiredSource = sourceConversationId;
+        const currentSource = conversation.metadata?.sourceConversationId ?? undefined;
+        if (desiredSource === currentSource)
+            return;
+        const desiredMetadata = buildPageScopedConversationMetadata(scope, {
+            pageId,
+            sourceConversationId: desiredSource,
+        });
+        if (shallowEqual(conversation.metadata, desiredMetadata))
+            return;
+        let cancelled = false;
+        void (async () => {
+            try {
+                const { conversation: next } = await client.updateConversation(conversation.id, { metadata: desiredMetadata });
+                if (!cancelled)
+                    setConversation(next);
+            }
+            catch {
+                // Non-fatal — stale source-tail just won't appear in provider context.
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        conversation,
+        hasConversationAdapter,
+        sourceConversationId,
+        scope,
+        pageId,
+    ]);
+    const scrollVersion = `${messages.length}:${sending ? "sending" : "idle"}`;
+    // Auto-scroll to bottom on new messages.
+    useEffect(() => {
+        void scrollVersion;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+        const nearBottom = distanceFromBottom < 150;
+        if (typeof el.scrollTo === "function") {
+            el.scrollTo({
+                top: el.scrollHeight,
+                behavior: nearBottom ? "auto" : "smooth",
+            });
+            return;
+        }
+        el.scrollTop = el.scrollHeight;
+    }, [scrollVersion]);
+    const handleSelectSendAsAccount = useCallback((accountId) => {
+        const account = sendAsAccounts.find((item) => item.id === accountId);
+        selectAccount(accountId);
+        setAccountRequiredReason(null);
+        const key = connectorWriteConfirmationKey(connectorContext, account);
+        if (key && !confirmedWriteAccountKeys.has(key)) {
+            setPendingWriteConfirmationKey(key);
+        }
+    }, [
+        confirmedWriteAccountKeys,
+        connectorContext,
+        selectAccount,
+        sendAsAccounts,
+    ]);
+    const handleConfirmWriteAccount = useCallback(() => {
+        if (!currentWriteConfirmationKey)
+            return;
+        setConfirmedWriteAccountKeys((prev) => {
+            const next = new Set(prev);
+            next.add(currentWriteConfirmationKey);
+            return next;
+        });
+        setPendingWriteConfirmationKey(null);
+        setLoadError(null);
+    }, [currentWriteConfirmationKey]);
+    const handleConnectSendAsAccount = useCallback(() => {
+        setAccountRequiredReason(null);
+        void connectAccount().catch((error) => {
+            setLoadError(error instanceof Error ? error.message : "Failed to connect account.");
+        });
+    }, [connectAccount]);
+    const handleReconnectSendAsAccount = useCallback((accountId) => {
+        setAccountRequiredReason(null);
+        void reconnectAccount(accountId).catch((error) => {
+            setLoadError(error instanceof Error
+                ? error.message
+                : "Failed to reconnect account.");
+        });
+    }, [reconnectAccount]);
+    const handleSend = useCallback(async (options) => {
+        const raw = (options?.text ?? input).trim();
+        const images = options?.images ?? pendingImages;
+        if ((!raw && images.length === 0) || !conversation || sending)
+            return;
+        if (blockingAccountReason) {
+            setLoadError(blockingAccountReason);
+            return;
+        }
+        if (showWriteConfirmation) {
+            setLoadError("Confirm the send-as account before sending.");
+            return;
+        }
+        const isFirstTurn = messages.length === 0;
+        const textToSend = isFirstTurn
+            ? `[SYSTEM]${effectiveSystemAddendum}[/SYSTEM]\n\n${raw}`
+            : raw;
+        const routingMetadata = conversationAdapter?.buildRoutingMetadata?.() ??
+            buildPageScopedRoutingMetadata(scope, {
+                pageId,
+                sourceConversationId,
+            });
+        const metadata = mergeConnectorSendAsMetadata(routingMetadata, sendAsMetadata);
+        const now = Date.now();
+        const userId = `page-${scope}-user-${now}`;
+        const assistantId = `page-${scope}-assistant-${now}`;
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: userId,
+                images: images.length > 0 ? images : undefined,
+                role: "user",
+                text: raw,
+                timestamp: now,
+            },
+            { id: assistantId, role: "assistant", text: "", timestamp: now },
+        ]);
+        setInput("");
+        setPendingImages([]);
+        setAttachmentError(null);
+        setVoicePreview("");
+        setSending(true);
+        setFirstTokenReceived(false);
+        const controller = new AbortController();
+        abortRef.current = controller;
+        let streamed = "";
+        try {
+            const response = await client.sendConversationMessageStream(conversation.id, textToSend, (token) => {
+                if (!token)
+                    return;
+                const delta = token.slice(streamed.length);
+                if (!delta)
+                    return;
+                streamed += delta;
+                setFirstTokenReceived(true);
+                setMessages((prev) => prev.map((m) => m.id === assistantId ? { ...m, text: m.text + delta } : m));
+            }, options?.channelType ?? "DM", controller.signal, images.length > 0 ? images : undefined, undefined, metadata);
+            if (response.text && response.text !== streamed) {
+                setMessages((prev) => prev.map((m) => m.id === assistantId ? { ...m, text: response.text } : m));
+            }
+            conversationAdapter?.onAfterSend?.();
+            setAccountRequiredReason(null);
+        }
+        catch (error) {
+            if (error.name === "AbortError")
+                return;
+            if (isLikelyAccountRequiredError(error)) {
+                setAccountRequiredReason(error instanceof Error
+                    ? error.message
+                    : "Choose a connector account before sending.");
+            }
+            setMessages((prev) => prev.map((m) => m.id === assistantId
+                ? { ...m, text: "Sorry — that didn't go through. Try again?" }
+                : m));
+        }
+        finally {
+            setSending(false);
+            abortRef.current = null;
+            composerRef.current?.focus();
+        }
+    }, [
+        conversation,
+        blockingAccountReason,
+        effectiveSystemAddendum,
+        input,
+        messages.length,
+        pageId,
+        pendingImages,
+        conversationAdapter,
+        scope,
+        sendAsMetadata,
+        sending,
+        showWriteConfirmation,
+        sourceConversationId,
+    ]);
+    const handleStop = useCallback(() => {
+        abortRef.current?.abort();
+    }, []);
+    const disabled = !conversation || Boolean(loadError);
+    const addImageFiles = useCallback((files) => {
+        const imageFiles = Array.from(files)
+            .filter((file) => file.type.startsWith("image/"))
+            .slice(0, MAX_PAGE_CHAT_IMAGES);
+        if (imageFiles.length === 0)
+            return;
+        setAttachmentError(null);
+        const readers = imageFiles.map((file) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const result = typeof reader.result === "string" ? reader.result : "";
+                const commaIndex = result.indexOf(",");
+                const data = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
+                resolve({ data, mimeType: file.type, name: file.name });
+            };
+            reader.onerror = () => reject(reader.error ?? new Error("Failed to read image"));
+            reader.onabort = () => reject(new Error("Image read aborted"));
+            reader.readAsDataURL(file);
+        }));
+        void Promise.all(readers)
+            .then((attachments) => {
+            setPendingImages((prev) => [...prev, ...attachments].slice(0, MAX_PAGE_CHAT_IMAGES));
+        })
+            .catch(() => {
+            setAttachmentError("Failed to load image attachment.");
+        });
+    }, []);
+    const handleFileInputChange = useCallback((event) => {
+        if (event.target.files) {
+            addImageFiles(event.target.files);
+        }
+        event.target.value = "";
+    }, [addImageFiles]);
+    const handleImageDrop = useCallback((event) => {
+        event.preventDefault();
+        setImageDragOver(false);
+        if (event.dataTransfer.files.length > 0) {
+            addImageFiles(event.dataTransfer.files);
+        }
+    }, [addImageFiles]);
+    const removeImage = useCallback((index) => {
+        setPendingImages((prev) => prev.filter((_, current) => current !== index));
+    }, []);
+    const voice = useVoiceChat({
+        cloudConnected: app.elizaCloudVoiceProxyAvailable || app.elizaCloudConnected || false,
+        interruptOnSpeech: false,
+        lang: resolveSpeechLocale(app.uiLanguage),
+        onTranscript: (text) => {
+            const transcript = text.trim();
+            if (!transcript)
+                return;
+            setVoicePreview("");
+            void handleSend({
+                channelType: "VOICE_DM",
+                images: [],
+                text: transcript,
+            });
+        },
+        onTranscriptPreview: (text) => {
+            setVoicePreview(text);
+        },
+    });
+    const hasClearableContent = messages.length > 0 ||
+        input.trim().length > 0 ||
+        pendingImages.length > 0 ||
+        voice.isListening ||
+        voicePreview.trim().length > 0;
+    useEffect(() => {
+        const handlePrefill = (event) => {
+            const detail = readChatPrefillDetail(event);
+            if (!detail)
+                return;
+            if (voice.isListening) {
+                void voice.stopListening();
+                setVoicePreview("");
+            }
+            setInput(detail.text ?? "");
+            window.requestAnimationFrame(() => {
+                composerRef.current?.focus();
+                if (detail.select) {
+                    composerRef.current?.select();
+                }
+            });
+        };
+        window.addEventListener(CHAT_PREFILL_EVENT, handlePrefill);
+        return () => {
+            window.removeEventListener(CHAT_PREFILL_EVENT, handlePrefill);
+        };
+    }, [voice.isListening, voice.stopListening]);
+    const handleInputChange = useCallback((value) => {
+        if (voice.isListening) {
+            void voice.stopListening();
+            setVoicePreview("");
+        }
+        setInput(value);
+    }, [voice.isListening, voice.stopListening]);
+    const handleKeyDown = useCallback((event) => {
+        if (sending)
+            return;
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            void handleSend();
+        }
+    }, [handleSend, sending]);
+    const handleClearConversation = useCallback(async () => {
+        if (conversationAdapter?.allowClear === false)
+            return;
+        if (clearing || (!conversation && !hasClearableContent))
+            return;
+        abortRef.current?.abort();
+        if (voice.isListening) {
+            void voice.stopListening();
+        }
+        setClearing(true);
+        setLoadError(null);
+        try {
+            const nextConversation = await resetPageScopedConversation({
+                scope,
+                title,
+                pageId,
+            });
+            setConversation(nextConversation);
+            setMessages([]);
+            setInput("");
+            setPendingImages([]);
+            setAttachmentError(null);
+            setImageDragOver(false);
+            setVoicePreview("");
+            setSending(false);
+            setFirstTokenReceived(false);
+            setLoadError(null);
+            setAccountRequiredReason(null);
+            setPendingWriteConfirmationKey(null);
+            window.requestAnimationFrame(() => {
+                composerRef.current?.focus();
+            });
+        }
+        catch (cause) {
+            const message = cause instanceof Error && cause.message.trim().length > 0
+                ? cause.message.trim()
+                : "Failed to clear page chat.";
+            setLoadError(message);
+        }
+        finally {
+            setClearing(false);
+        }
+    }, [
+        clearing,
+        conversation,
+        conversationAdapter,
+        hasClearableContent,
+        pageId,
+        scope,
+        title,
+        voice.isListening,
+        voice.stopListening,
+    ]);
+    const showIntro = messages.length === 0 && !sending && !persistentIntro;
+    const showClearButton = conversationAdapter?.allowClear !== false;
+    const introCard = (_jsxs("div", { "data-testid": `page-scoped-chat-intro-${scope}`, className: "rounded-2xl bg-card/50 p-3", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5 text-accent" }), introTitle] }), _jsx("div", { className: "text-sm leading-relaxed text-txt", children: introBody }), introActions ? (_jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: introActions })) : null] }));
+    const composerT = useCallback((key, options) => {
+        const fallback = typeof options?.defaultValue === "string" ? options.defaultValue : key;
+        switch (key) {
+            case "aria.attachImage":
+            case "chatview.AttachImage":
+                return "Add attachment";
+            case "chat.agentStarting":
+                return "Agent starting";
+            case "chat.inputPlaceholder":
+            case "chat.inputPlaceholderNarrow":
+            case "common.message":
+                return placeholder;
+            case "chat.listening":
+                return "Listening…";
+            case "chat.micTitleIdleEnhanced":
+            case "chat.micTitleIdleStandard":
+                return "Start voice input";
+            case "chat.releaseToSend":
+                return "Release to send";
+            case "chat.send":
+            case "common.send":
+                return "Send";
+            case "chat.stopGeneration":
+                return "Stop";
+            case "chat.stopListening":
+                return "Stop voice input";
+            case "chat.stopSpeaking":
+                return "Stop";
+            case "chat.voiceInput":
+                return "Voice input";
+            default:
+                return fallback;
+        }
+    }, [placeholder]);
+    return (_jsxs("section", { "data-testid": `page-scoped-chat-${scope}`, "data-page-scope": scope, className: `flex min-h-0 flex-1 flex-col bg-bg transition-shadow ${imageDragOver ? "ring-1 ring-inset ring-accent/50" : ""} ${className ?? ""}`, "aria-label": copy.title, onDragLeave: () => setImageDragOver(false), onDragOver: (event) => {
+            event.preventDefault();
+            setImageDragOver(true);
+        }, onDrop: handleImageDrop, children: [persistentIntro ? _jsx("div", { className: "px-3 pt-3", children: introCard }) : null, _jsxs("div", { ref: scrollRef, role: "log", "aria-live": "polite", "aria-atomic": "false", className: "flex flex-1 flex-col gap-2 overflow-y-auto px-3 py-3", children: [loadError ? (_jsx("div", { className: "rounded-lg border border-danger/40 bg-danger/10 px-3 py-2 text-xs text-danger", children: loadError })) : null, showIntro ? introCard : null, messages.map((message) => (_jsxs("article", { className: `rounded-lg px-3 py-2 text-sm leading-relaxed ${message.role === "user"
+                            ? "ml-8 self-end bg-accent/10 text-txt"
+                            : "mr-8 bg-bg/40 text-txt"}`, children: [_jsx("div", { className: "mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted", children: message.role === "user" ? "You" : "Eliza" }), message.images?.length ? (_jsx("div", { className: "mb-2 flex flex-wrap gap-2", children: message.images.map((image) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: image.name, className: "h-16 w-16 rounded-md border border-border/40 object-cover" }, `${image.name}:${image.mimeType}:${image.data.length}:${image.data.slice(0, 24)}`))) })) : null, message.text ? (_jsx("div", { className: "whitespace-pre-wrap", children: message.text })) : message.images?.length ? (_jsx("div", { className: "text-muted", children: message.images.length === 1
+                                    ? "Attached image"
+                                    : `Attached ${message.images.length} images` })) : null] }, message.id))), sending && !firstTokenReceived ? (_jsxs("div", { className: "mr-8 flex items-center gap-1.5 rounded-lg bg-bg/40 px-3 py-2", children: [_jsx(Spinner, { size: 12, className: "text-accent/70" }), _jsx("span", { className: "text-[11px] text-muted", children: "Thinking\u2026" })] })) : null] }), _jsxs("div", { className: "px-2 py-1.5", children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, className: "hidden", onChange: handleFileInputChange }), attachmentError ? (_jsx("div", { className: "pb-1 text-[11px] text-danger", children: attachmentError })) : null, _jsx(ChatAttachmentStrip, { items: pendingImages.map((image, imageIndex) => ({
+                            alt: image.name,
+                            id: String(imageIndex),
+                            name: image.name,
+                            src: `data:${image.mimeType};base64,${image.data}`,
+                        })), onRemove: (_id, index) => removeImage(index) }), _jsx(ConnectorAccountPicker, { accounts: sendAsAccounts, className: "mb-1", connectBusy: sendAsConnectBusy, loading: sendAsLoading, selectedAccount: sendAsSelectedAccount, sourceLabel: sourceLabel, show: showSendAsPicker, onConnectAccount: handleConnectSendAsAccount, onReconnectAccount: handleReconnectSendAsAccount, onSelectAccount: handleSelectSendAsAccount }), blockingAccountReason ? (_jsx(AccountRequiredCard, { accounts: sendAsAccounts, className: "mb-1", connectBusy: sendAsConnectBusy, description: blockingAccountReason, loading: sendAsLoading, selectedAccount: sendAsSelectedAccount, sourceLabel: sourceLabel, onConnectAccount: handleConnectSendAsAccount, onReconnectAccount: handleReconnectSendAsAccount, onSelectAccount: handleSelectSendAsAccount })) : showWriteConfirmation ? (_jsx(AccountRequiredCard, { accounts: sendAsAccounts, className: "mb-1", 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", { "data-testid": `page-scoped-chat-composer-${scope}`, children: _jsx(ChatComposer, { variant: "default", layout: "inline", textareaRef: composerRef, textareaAriaLabel: copy.title, chatInput: input, chatPendingImagesCount: pendingImages.length, isComposerLocked: disabled || sending, isAgentStarting: false, chatSending: sending, voice: {
+                                supported: voice.supported,
+                                isListening: voice.isListening,
+                                captureMode: voice.captureMode,
+                                interimTranscript: voicePreview,
+                                isSpeaking: voice.isSpeaking,
+                                assistantTtsQuality: voice.assistantTtsQuality,
+                                toggleListening: voice.toggleListening,
+                                startListening: voice.startListening,
+                                stopListening: voice.stopListening,
+                            }, agentVoiceEnabled: false, showAgentVoiceToggle: false, t: composerT, placeholder: placeholder, onAttachImage: () => fileInputRef.current?.click(), onChatInputChange: handleInputChange, onKeyDown: handleKeyDown, onSend: () => void handleSend(), onStop: handleStop, onStopSpeaking: () => { }, onToggleAgentVoice: () => { } }) }), _jsxs("div", { className: "mt-1 flex items-center justify-between gap-2 px-1", children: [showClearButton ? (_jsxs("button", { type: "button", "data-testid": `page-scoped-chat-clear-${scope}`, className: "inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px] font-medium text-muted transition-colors hover:text-txt disabled:cursor-not-allowed disabled:opacity-40", onClick: () => void handleClearConversation(), disabled: clearing || (!conversation && !hasClearableContent), "aria-label": clearing ? "Clearing page chat" : "Clear page chat", children: [clearing ? (_jsx(Spinner, { size: 10, className: "text-muted" })) : (_jsx(RotateCcw, { className: "h-3 w-3" })), _jsx("span", { children: clearing ? "Clearing…" : "Clear" })] })) : (_jsx("div", {})), footerActions ? (_jsx("div", { className: "flex items-center gap-1", children: footerActions })) : null] })] })] }));
+}

package/components/pages/PluginCard.d.ts

@@ -0,0 +1,36 @@
+import type { PluginInfo } from "../../api";
+export interface PluginCardProps {
+    plugin: PluginInfo;
+    allowCustomOrder: boolean;
+    pluginSettingsOpen: Set<string>;
+    togglingPlugins: Set<string>;
+    hasPluginToggleInFlight: boolean;
+    installingPlugins: Set<string>;
+    updatingPlugins: Set<string>;
+    uninstallingPlugins: Set<string>;
+    installProgress: Map<string, {
+        phase: string;
+        message: string;
+    }>;
+    releaseStreamSelections: Record<string, "latest" | "beta">;
+    draggingId: string | null;
+    dragOverId: string | null;
+    pluginDescriptionFallback: string;
+    onToggle: (pluginId: string, enabled: boolean) => void;
+    onToggleSettings: (pluginId: string) => void;
+    onInstall: (pluginId: string, npmName: string) => void;
+    onUpdate: (pluginId: string, npmName: string) => void;
+    onUninstall: (pluginId: string, npmName: string) => void;
+    onReleaseStreamChange: (pluginId: string, stream: "latest" | "beta") => void;
+    onOpenExternalUrl: (url: string) => void;
+    onDragStart?: (e: React.DragEvent, pluginId: string) => void;
+    onDragOver?: (e: React.DragEvent, pluginId: string) => void;
+    onDrop?: (e: React.DragEvent, pluginId: string) => void;
+    onDragEnd?: () => void;
+    installProgressLabel: (message?: string) => string;
+    installLabel: string;
+    loadFailedLabel: string;
+    notInstalledLabel: string;
+}
+export declare function PluginCard({ plugin: p, allowCustomOrder, pluginSettingsOpen, togglingPlugins, hasPluginToggleInFlight, installingPlugins, updatingPlugins, uninstallingPlugins, installProgress, releaseStreamSelections, draggingId, dragOverId, pluginDescriptionFallback, onToggle, onToggleSettings, onInstall, onUpdate, onUninstall, onReleaseStreamChange, onOpenExternalUrl, onDragStart, onDragOver, onDrop, onDragEnd, installProgressLabel, installLabel, loadFailedLabel, notInstalledLabel, }: PluginCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PluginCard.d.ts.map

package/components/pages/PluginCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAS5D,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,UAAU,CAAC;IACnB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAChC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,uBAAuB,EAAE,OAAO,CAAC;IACjC,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,mBAAmB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACjC,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjE,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;IAC3D,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;IAClC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7E,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,MAAM,EAAE,CAAC,EACT,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,uBAAuB,EACvB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,eAAe,EACf,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,yBAAyB,EACzB,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,qBAAqB,EACrB,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,MAAM,EACN,SAAS,EACT,oBAAoB,EACpB,YAAY,EACZ,eAAe,EACf,iBAAiB,GAClB,EAAE,eAAe,2CAmYjB"}