@elizaos/app-core 2.0.0-alpha.37

package/dist/components/ChatAvatar.d.ts

@@ -0,0 +1,8 @@
+export interface ChatAvatarProps {
+    /** Mouth openness value (0-1) for lip sync animation */
+    mouthOpen?: number;
+    /** Whether the agent is currently speaking (drives engine-side mouth anim) */
+    isSpeaking?: boolean;
+}
+export declare function ChatAvatar({ mouthOpen, isSpeaking, }: ChatAvatarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatAvatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatAvatar.d.ts","sourceRoot":"","sources":["../../src/components/ChatAvatar.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAa,EACb,UAAkB,GACnB,EAAE,eAAe,2CAsHjB"}

package/dist/components/ChatAvatar.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chat avatar panel component.
+ *
+ * Renders a 3D VRM avatar within the parent container (used in the
+ * Autonomous Loop sidebar). Voice controls are managed externally.
+ */
+import { APP_EMOTE_EVENT, STOP_EMOTE_EVENT, } from "@elizaos/app-core/events";
+import { getVrmPreviewUrl, getVrmUrl, useApp } from "@elizaos/app-core/state";
+import { resolveAppAssetUrl } from "@elizaos/app-core/utils";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AvatarLoader } from "./AvatarLoader";
+import { VrmViewer } from "./avatar/VrmViewer";
+export function ChatAvatar({ mouthOpen = 0, isSpeaking = false, }) {
+    const { selectedVrmIndex, customVrmUrl } = useApp();
+    // Resolve VRM path from selected index or custom upload
+    const vrmPath = selectedVrmIndex === 0 && customVrmUrl
+        ? customVrmUrl
+        : getVrmUrl(selectedVrmIndex || 1);
+    const fallbackPreviewUrl = selectedVrmIndex > 0
+        ? getVrmPreviewUrl(selectedVrmIndex)
+        : getVrmPreviewUrl(1);
+    const vrmEngineRef = useRef(null);
+    const [engineReady, setEngineReady] = useState(false);
+    const [vrmLoaded, setVrmLoaded] = useState(false);
+    const [showFallback, setShowFallback] = useState(false);
+    const avatarVisible = engineReady || vrmLoaded || showFallback;
+    const handleEngineReady = useCallback((engine) => {
+        vrmEngineRef.current = engine;
+        setEngineReady(true);
+    }, []);
+    const handleEngineState = useCallback((state) => {
+        if (state.vrmLoaded) {
+            setVrmLoaded(true);
+            setShowFallback(false);
+            return;
+        }
+        if (state.loadError) {
+            setVrmLoaded(false);
+            setShowFallback(true);
+        }
+    }, []);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reset the loading UI when the requested VRM changes.
+    useEffect(() => {
+        setVrmLoaded(false);
+        setShowFallback(false);
+    }, [vrmPath]);
+    useEffect(() => {
+        if (!engineReady)
+            return;
+        const handler = (event) => {
+            const engine = vrmEngineRef.current;
+            if (!engine)
+                return;
+            const detail = event.detail;
+            if (!detail?.path)
+                return;
+            const resolvedPath = resolveAppAssetUrl(detail.path);
+            const duration = typeof detail.duration === "number" && Number.isFinite(detail.duration)
+                ? detail.duration
+                : 3;
+            const isLoop = detail.loop === true;
+            void engine.playEmote(resolvedPath, duration, isLoop);
+        };
+        window.addEventListener(APP_EMOTE_EVENT, handler);
+        return () => window.removeEventListener(APP_EMOTE_EVENT, handler);
+    }, [engineReady]);
+    // Listen for stop-emote events from the EmotePicker control panel.
+    useEffect(() => {
+        if (!engineReady)
+            return;
+        const handler = () => {
+            vrmEngineRef.current?.stopEmote();
+        };
+        document.addEventListener(STOP_EMOTE_EVENT, handler);
+        return () => document.removeEventListener(STOP_EMOTE_EVENT, handler);
+    }, [engineReady]);
+    return (_jsx("div", { className: "relative h-full w-full", children: _jsx("div", { className: "absolute inset-0", style: {
+                opacity: avatarVisible ? 0.95 : 0,
+                transition: "opacity 0.45s ease-in-out",
+                background: "radial-gradient(circle at 50% 100%, rgba(255,255,255,0.08), transparent 60%)",
+            }, children: _jsxs("div", { className: "absolute inset-0 overflow-hidden", children: [_jsx("div", { className: "absolute inset-0", style: {
+                            opacity: vrmLoaded ? 1 : 0,
+                            transition: "opacity 0.45s ease",
+                            // Keep a stable full-body framing in the narrow chat sidebar.
+                            transform: "scale(1.02) translateY(1%)",
+                            transformOrigin: "50% 42%",
+                        }, children: _jsx(VrmViewer, { vrmPath: vrmPath, mouthOpen: mouthOpen, isSpeaking: isSpeaking, interactive: true, interactiveMode: "orbitZoom", onEngineReady: handleEngineReady, onEngineState: handleEngineState }) }), showFallback && !vrmLoaded && (_jsx("img", { src: fallbackPreviewUrl, alt: "avatar preview", className: "absolute left-1/2 -translate-x-1/2 bottom-[-2%] h-[122%] object-contain opacity-90" })), !vrmLoaded && !showFallback && _jsx(AvatarLoader, {})] }) }) }));
+}

package/dist/components/ChatComposer.d.ts

@@ -0,0 +1,37 @@
+import { type KeyboardEvent, type RefObject } from "react";
+type ChatComposerVariant = "default" | "game-modal";
+interface ChatComposerVoiceState {
+    supported: boolean;
+    isListening: boolean;
+    captureMode: "idle" | "compose" | "push-to-talk";
+    interimTranscript: string;
+    isSpeaking: boolean;
+    toggleListening: () => void;
+    startListening: (mode?: "compose" | "push-to-talk") => void | Promise<void>;
+    stopListening: (options?: {
+        submit?: boolean;
+    }) => void | Promise<void>;
+}
+interface ChatComposerProps {
+    variant: ChatComposerVariant;
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
+    chatInput: string;
+    chatPendingImagesCount: number;
+    isComposerLocked: boolean;
+    isAgentStarting: boolean;
+    chatSending: boolean;
+    voice: ChatComposerVoiceState;
+    agentVoiceEnabled: boolean;
+    showAgentVoiceToggle?: boolean;
+    t: (key: string) => string;
+    onAttachImage: () => void;
+    onChatInputChange: (value: string) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+    onSend: () => void;
+    onStop: () => void;
+    onStopSpeaking: () => void;
+    onToggleAgentVoice: () => void;
+}
+export declare function ChatComposer({ variant, textareaRef, chatInput, chatPendingImagesCount, isComposerLocked, isAgentStarting, chatSending, voice, agentVoiceEnabled, showAgentVoiceToggle, t, onAttachImage, onChatInputChange, onKeyDown, onSend, onStop, onStopSpeaking, onToggleAgentVoice, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatComposer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/components/ChatComposer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,KAAK,mBAAmB,GAAG,SAAS,GAAG,YAAY,CAAC;AAEpD,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,CAAC;IACjD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,aAAa,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzE;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,sBAAsB,CAAC;IAC9B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC/D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC;AAOD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,WAAW,EACX,SAAS,EACT,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,KAAK,EACL,iBAAiB,EACjB,oBAA2B,EAC3B,CAAC,EACD,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,kBAAkB,GACnB,EAAE,iBAAiB,2CAqQnB"}

package/dist/components/ChatComposer.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Textarea } from "@elizaos/ui";
+import { Mic, Paperclip, Send, Square, Volume2, VolumeX } from "lucide-react";
+import { useEffect, useRef, } from "react";
+const COMPOSER_CONTROL_HEIGHT_CLASSNAME = "h-[46px]";
+const COMPOSER_ICON_BUTTON_CLASSNAME = `${COMPOSER_CONTROL_HEIGHT_CLASSNAME} w-[46px] shrink-0`;
+const COMPOSER_ACTION_BUTTON_CLASSNAME = `ml-1 flex items-center justify-center rounded-full transition-all ${COMPOSER_ICON_BUTTON_CLASSNAME}`;
+const COMMON_TEXTAREA_CLASSNAME = `w-full min-w-0 min-h-0 ${COMPOSER_CONTROL_HEIGHT_CLASSNAME} resize-none overflow-y-hidden max-h-[200px] outline-none ring-0 shadow-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 font-[var(--font-chat)] disabled:opacity-50`;
+export function ChatComposer({ variant, textareaRef, chatInput, chatPendingImagesCount, isComposerLocked, isAgentStarting, chatSending, voice, agentVoiceEnabled, showAgentVoiceToggle = true, t, onAttachImage, onChatInputChange, onKeyDown, onSend, onStop, onStopSpeaking, onToggleAgentVoice, }) {
+    const isGameModal = variant === "game-modal";
+    const showVoiceButton = isGameModal || voice.supported;
+    const defaultMicButtonClassName = voice.isListening
+        ? "bg-[#ff6b70] text-white shadow-sm hover:bg-[#ff6b70]/90 hover:text-white"
+        : "text-muted hover:bg-black/5 hover:text-txt";
+    const micIconClassName = isGameModal ? "w-5 h-5 text-[#fff1f2]" : "w-4 h-4";
+    const holdTimerRef = useRef(null);
+    const pushToTalkActiveRef = useRef(false);
+    const suppressClickRef = useRef(false);
+    const actionButtonTitle = chatSending
+        ? t("chat.stopGeneration")
+        : isGameModal || !voice.isSpeaking
+            ? isAgentStarting
+                ? t("chat.agentStarting")
+                : t("chat.send")
+            : t("chat.stopSpeaking");
+    const actionButtonLabel = isGameModal ? undefined : actionButtonTitle;
+    const defaultTextareaPlaceholder = isAgentStarting
+        ? t("chat.agentStarting")
+        : voice.isListening
+            ? voice.captureMode === "push-to-talk"
+                ? "Release to send..."
+                : !chatInput.trim()
+                    ? "Listening..."
+                    : t("chat.inputPlaceholder")
+            : t("chat.inputPlaceholder");
+    useEffect(() => {
+        return () => {
+            if (holdTimerRef.current) {
+                clearTimeout(holdTimerRef.current);
+                holdTimerRef.current = null;
+            }
+        };
+    }, []);
+    const startPushToTalk = () => {
+        if (isComposerLocked || voice.isListening)
+            return;
+        pushToTalkActiveRef.current = true;
+        suppressClickRef.current = true;
+        void voice.startListening("push-to-talk");
+    };
+    const clearHoldTimer = () => {
+        if (holdTimerRef.current) {
+            clearTimeout(holdTimerRef.current);
+            holdTimerRef.current = null;
+        }
+    };
+    const handleMicPointerDown = (_event) => {
+        if (isComposerLocked || voice.isListening)
+            return;
+        clearHoldTimer();
+        holdTimerRef.current = setTimeout(() => {
+            holdTimerRef.current = null;
+            startPushToTalk();
+        }, 180);
+    };
+    const handleMicPointerUp = () => {
+        clearHoldTimer();
+        if (!pushToTalkActiveRef.current)
+            return;
+        pushToTalkActiveRef.current = false;
+        void voice.stopListening({ submit: true });
+        window.setTimeout(() => {
+            suppressClickRef.current = false;
+        }, 0);
+    };
+    const handleMicPointerCancel = () => {
+        clearHoldTimer();
+        if (!pushToTalkActiveRef.current)
+            return;
+        pushToTalkActiveRef.current = false;
+        void voice.stopListening();
+        window.setTimeout(() => {
+            suppressClickRef.current = false;
+        }, 0);
+    };
+    const handleMicClick = () => {
+        if (suppressClickRef.current) {
+            suppressClickRef.current = false;
+            return;
+        }
+        if (isComposerLocked)
+            return;
+        if (voice.isListening && voice.captureMode === "compose") {
+            void voice.stopListening();
+            return;
+        }
+        if (voice.isListening)
+            return;
+        void voice.startListening("compose");
+    };
+    return (_jsxs("div", { className: isGameModal
+            ? "relative flex items-end gap-1 transition-all"
+            : "flex items-end gap-1.5 sm:gap-2", children: [!isGameModal && (_jsx(Button, { variant: chatPendingImagesCount > 0 ? "secondary" : "ghost", size: "icon", className: `${COMPOSER_ICON_BUTTON_CLASSNAME} ${chatPendingImagesCount > 0
+                    ? "bg-accent/10 sm:hover:bg-accent/20 border-accent/20 text-txt/80 hover:text-txt shadow-sm"
+                    : "text-muted hover:bg-black/5 hover:text-txt"}`, onClick: onAttachImage, "aria-label": "Attach image", title: t("chatview.AttachImage"), disabled: isComposerLocked, children: _jsx(Paperclip, { className: "w-4 h-4" }) })), showVoiceButton && (_jsx(Button, { variant: "ghost", size: "icon", className: isGameModal
+                    ? `flex items-center justify-center rounded-full transition-all ${COMPOSER_ICON_BUTTON_CLASSNAME} ${voice.isListening
+                        ? "animate-pulse border border-[#ff6b70] bg-[#ff6b70] text-[#fff1f2] shadow-[0_0_30px_rgba(255,107,112,0.5)]"
+                        : "border border-[#ff6b70]/75 bg-transparent text-[#fff1f2] shadow-[0_0_14px_rgba(255,107,112,0.18)] hover:bg-[#ff6b70]/10"} ${isComposerLocked ? "opacity-50" : ""}`
+                    : `${COMPOSER_ICON_BUTTON_CLASSNAME} ${defaultMicButtonClassName}`, onClick: handleMicClick, onPointerDown: handleMicPointerDown, onPointerUp: handleMicPointerUp, onPointerCancel: handleMicPointerCancel, onPointerLeave: handleMicPointerCancel, "aria-label": isAgentStarting
+                    ? t("chat.agentStarting")
+                    : voice.isListening
+                        ? voice.captureMode === "push-to-talk"
+                            ? "Release to send"
+                            : t("chat.stopListening")
+                        : t("chat.voiceInput"), "aria-pressed": isGameModal ? undefined : voice.isListening, title: isAgentStarting
+                    ? t("chat.agentStarting")
+                    : voice.isListening
+                        ? voice.captureMode === "push-to-talk"
+                            ? "Release to send"
+                            : t("chat.stopListening")
+                        : "Click to dictate. Hold to talk and send.", disabled: isComposerLocked, children: _jsx(Mic, { className: micIconClassName }) })), _jsx("div", { className: isGameModal
+                    ? "flex min-h-[46px] flex-1 items-center rounded-2xl bg-black/40 transition-all min-w-0"
+                    : "flex min-h-[46px] flex-1 items-center rounded-md border min-w-0 border-border/40 bg-card/60 backdrop-blur-md", children: _jsx(Textarea, { ref: textareaRef, "data-testid": "chat-composer-textarea", className: isGameModal
+                        ? `${COMMON_TEXTAREA_CLASSNAME} px-4 py-2 bg-transparent border-none text-[15px] leading-relaxed text-white placeholder:text-white/30 max-h-[150px]`
+                        : `${COMMON_TEXTAREA_CLASSNAME} px-3 py-2 bg-transparent border-none text-[15px] leading-[1.7] text-txt placeholder:text-muted`, style: { fontFamily: "var(--font-chat)" }, rows: 1, "aria-label": "Chat message", placeholder: isGameModal
+                        ? isAgentStarting
+                            ? t("chat.agentStarting")
+                            : voice.isListening
+                                ? voice.captureMode === "push-to-talk"
+                                    ? "Release to send..."
+                                    : t("chat.listening")
+                                : t("chat.inputPlaceholder")
+                        : defaultTextareaPlaceholder, value: chatInput, onChange: (event) => onChatInputChange(event.target.value), onKeyDown: onKeyDown, disabled: isComposerLocked }) }), showAgentVoiceToggle && (_jsx(Button, { variant: "ghost", size: "icon", className: isGameModal
+                    ? `${COMPOSER_ICON_BUTTON_CLASSNAME} rounded-full bg-black/35 text-white/75 hover:bg-black/55 hover:text-white`
+                    : `${COMPOSER_ICON_BUTTON_CLASSNAME} border border-border/50 bg-card/70 text-muted hover:text-txt hover:bg-bg`, onClick: onToggleAgentVoice, "aria-label": agentVoiceEnabled ? "Agent voice on" : "Agent voice off", "aria-pressed": agentVoiceEnabled, title: agentVoiceEnabled ? "Agent voice on" : "Agent voice off", children: agentVoiceEnabled ? (_jsx(Volume2, { className: "h-4 w-4" })) : (_jsx(VolumeX, { className: "h-4 w-4" })) })), chatSending ? (_jsx(Button, { variant: "destructive", "data-testid": "chat-composer-action", className: `${COMPOSER_ACTION_BUTTON_CLASSNAME} bg-danger/20 text-danger hover:bg-danger/30`, onClick: onStop, size: "icon", title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(Square, { className: "w-4 h-4 fill-current" }) })) : !isGameModal && voice.isSpeaking ? (_jsx(Button, { variant: "destructive", "data-testid": "chat-composer-action", className: `${COMPOSER_ACTION_BUTTON_CLASSNAME} bg-danger/20 text-danger hover:bg-danger/30`, onClick: onStopSpeaking, size: "icon", title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(Square, { className: "w-4 h-4 fill-current" }) })) : (_jsx(Button, { variant: "default", "data-testid": "chat-composer-action", size: "icon", className: `${COMPOSER_ACTION_BUTTON_CLASSNAME} bg-accent text-accent-fg hover:shadow-[0_0_15px_rgba(240,178,50,0.4)] disabled:opacity-40`, onClick: onSend, disabled: isComposerLocked || !chatInput.trim(), "aria-label": actionButtonLabel, title: actionButtonLabel, children: _jsx(Send, { className: "w-5 h-5" }) }))] }));
+}

package/dist/components/ChatMessage.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Enhanced chat message component with actions and better UX.
+ */
+import type { ConversationMessage } from "@elizaos/app-core/api";
+interface ChatMessageProps {
+    message: ConversationMessage;
+    isGrouped?: boolean;
+    agentName?: string;
+    agentAvatarSrc?: string | null;
+    onCopy?: (text: string) => void;
+    onSpeak?: (messageId: string, text: string) => void;
+    onEdit?: (messageId: string, text: string) => Promise<boolean> | boolean;
+    onDelete?: (messageId: string) => void;
+}
+export declare function ChatMessage({ message, isGrouped, agentName, onCopy, onSpeak, onEdit, onDelete, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function TypingIndicator({ agentName, agentAvatarSrc, }: {
+    agentName: string;
+    agentAvatarSrc?: string | null;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatEmptyState({ agentName }: {
+    agentName: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAejE,UAAU,gBAAgB;IACxB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,SAAiB,EACjB,SAAmB,EACnB,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,GACT,EAAE,gBAAgB,2CAkTlB;AAID,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,cAAc,GACf,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,2CA0CA;AAID,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,2CA+ClE"}

package/dist/components/ChatMessage.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTimeout } from "@elizaos/app-core/hooks";
+import { useApp } from "@elizaos/app-core/state";
+import { Button } from "@elizaos/ui";
+import { Check, Copy, Pencil, Trash2, Volume2 } from "lucide-react";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { MessageContent } from "./MessageContent";
+export function ChatMessage({ message, isGrouped = false, agentName = "Agent", onCopy, onSpeak, onEdit, onDelete, }) {
+    const { setTimeout } = useTimeout();
+    const { copyToClipboard, t } = useApp();
+    const [copied, setCopied] = useState(false);
+    const [showActions, setShowActions] = useState(false);
+    const [supportsHover, setSupportsHover] = useState(() => typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia("(hover: hover) and (pointer: fine)").matches
+        : true);
+    const [isEditing, setIsEditing] = useState(false);
+    const [draftText, setDraftText] = useState(message.text);
+    const [savingEdit, setSavingEdit] = useState(false);
+    const articleRef = useRef(null);
+    const editTextareaRef = useRef(null);
+    const isUser = message.role === "user";
+    const canEdit = isUser &&
+        typeof onEdit === "function" &&
+        message.source !== "local_command" &&
+        !message.id.startsWith("temp-");
+    const canPlay = !isUser && typeof onSpeak === "function" && message.text.trim();
+    const handleCopy = useCallback(() => {
+        if (onCopy) {
+            onCopy(message.text);
+        }
+        else {
+            void copyToClipboard(message.text);
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }, [copyToClipboard, message.text, onCopy, setTimeout]);
+    const handleStartEditing = useCallback(() => {
+        if (!canEdit || savingEdit)
+            return;
+        setDraftText(message.text);
+        setIsEditing(true);
+    }, [canEdit, message.text, savingEdit]);
+    const handleCancelEditing = useCallback(() => {
+        if (savingEdit)
+            return;
+        setDraftText(message.text);
+        setIsEditing(false);
+    }, [message.text, savingEdit]);
+    const handleSaveEdit = useCallback(async () => {
+        if (!onEdit)
+            return;
+        const nextText = draftText.trim();
+        if (!nextText)
+            return;
+        if (nextText === message.text.trim()) {
+            setDraftText(message.text);
+            setIsEditing(false);
+            return;
+        }
+        setSavingEdit(true);
+        try {
+            const saved = await onEdit(message.id, nextText);
+            if (saved !== false) {
+                setIsEditing(false);
+            }
+        }
+        finally {
+            setSavingEdit(false);
+        }
+    }, [draftText, message.id, message.text, onEdit]);
+    const handleTapReveal = useCallback((event) => {
+        if (supportsHover || isEditing)
+            return;
+        const target = event.target;
+        if (target?.closest("button, a, textarea, input")) {
+            return;
+        }
+        setShowActions((prev) => !prev);
+    }, [isEditing, supportsHover]);
+    const handleEditKeyDown = useCallback((event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            handleCancelEditing();
+            return;
+        }
+        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            void handleSaveEdit();
+        }
+    }, [handleCancelEditing, handleSaveEdit]);
+    useEffect(() => {
+        if (!isEditing) {
+            setDraftText(message.text);
+            return;
+        }
+        const textarea = editTextareaRef.current;
+        if (!textarea)
+            return;
+        textarea.focus();
+        textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+    }, [isEditing, message.text]);
+    useEffect(() => {
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            return;
+        }
+        const mediaQuery = window.matchMedia("(hover: hover) and (pointer: fine)");
+        const syncSupportsHover = () => {
+            setSupportsHover(mediaQuery.matches);
+            if (mediaQuery.matches) {
+                setShowActions(false);
+            }
+        };
+        syncSupportsHover();
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", syncSupportsHover);
+            return () => mediaQuery.removeEventListener("change", syncSupportsHover);
+        }
+        mediaQuery.addListener(syncSupportsHover);
+        return () => mediaQuery.removeListener(syncSupportsHover);
+    }, []);
+    useEffect(() => {
+        if (supportsHover || !showActions || typeof document === "undefined") {
+            return;
+        }
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node)) {
+                setShowActions(false);
+                return;
+            }
+            if (!articleRef.current?.contains(target)) {
+                setShowActions(false);
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [showActions, supportsHover]);
+    const actionsVisible = showActions;
+    return (_jsx("article", { ref: articleRef, className: `flex items-start gap-2 sm:gap-3 ${isUser ? "justify-end" : "justify-start"} ${isGrouped ? "mt-1" : "mt-4"}`, "data-testid": "chat-message", "data-role": message.role, onMouseEnter: supportsHover ? () => setShowActions(true) : undefined, onMouseLeave: supportsHover ? () => setShowActions(false) : undefined, onTouchEnd: handleTapReveal, "aria-label": `${isUser ? "Your" : agentName} message`, children: _jsx("div", { className: `max-w-[88%] sm:max-w-[80%] min-w-0 ${isUser ? "mr-1" : ""}`, children: _jsxs("div", { className: `relative group px-4 py-2.5 text-[15px] leading-[1.7] whitespace-pre-wrap break-words rounded-2xl ${isUser
+                    ? "bg-accent text-accent-fg rounded-br-md"
+                    : "bg-bg-accent border border-border text-txt rounded-bl-md"}`, style: { fontFamily: "var(--font-chat)" }, children: [isEditing ? (_jsxs("div", { className: "space-y-3", children: [_jsx("textarea", { ref: editTextareaRef, value: draftText, onChange: (event) => setDraftText(event.target.value), onKeyDown: handleEditKeyDown, className: "w-full min-h-[110px] rounded-xl border border-white/20 bg-black/10 px-3 py-2 text-[15px] leading-[1.7] text-inherit outline-none focus:border-white/40", style: { fontFamily: "var(--font-chat)" }, "aria-label": "Edit message", disabled: savingEdit }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelEditing, disabled: savingEdit, className: "h-8 px-3 text-xs text-inherit/80 hover:bg-black/10", children: "Cancel" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => void handleSaveEdit(), disabled: savingEdit ||
+                                            !draftText.trim() ||
+                                            draftText.trim() === message.text.trim(), className: "h-8 px-3 text-xs border-white/25 bg-black/10 hover:bg-black/15", children: savingEdit ? "Saving..." : "Save and resend" })] })] })) : (_jsx(MessageContent, { message: message })), !isUser && message.interrupted && (_jsx("div", { className: "mt-2 pt-2 border-t border-danger/30", children: _jsx("span", { className: "text-xs text-danger", children: t("chatmessage.ResponseInterrupte") }) })), !isEditing && (_jsxs("div", { className: `absolute ${isUser ? "left-0 -translate-x-full" : "right-0 translate-x-full"} top-0 flex items-center gap-1 p-1 transition-opacity duration-200 ${actionsVisible ? "opacity-100" : "pointer-events-none opacity-0"}`, children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: (event) => {
+                                    event?.stopPropagation?.();
+                                    handleCopy();
+                                }, className: "w-7 h-7 rounded-md text-muted hover:text-txt hover:bg-bg-hover transition-colors", title: copied ? "Copied!" : "Copy message", "aria-label": copied ? "Copied to clipboard" : "Copy message", children: copied ? (_jsx(Check, { className: "w-3.5 h-3.5 text-ok" })) : (_jsx(Copy, { className: "w-3.5 h-3.5" })) }), canPlay && (_jsx(Button, { variant: "ghost", size: "icon", onClick: (event) => {
+                                    event?.stopPropagation?.();
+                                    onSpeak?.(message.id, message.text);
+                                }, className: "w-7 h-7 rounded-md text-muted hover:text-txt hover:bg-bg-hover transition-colors", title: "Play message", "aria-label": "Play message", children: _jsx(Volume2, { className: "w-3.5 h-3.5" }) })), canEdit && (_jsx(Button, { variant: "ghost", size: "icon", onClick: (event) => {
+                                    event?.stopPropagation?.();
+                                    handleStartEditing();
+                                }, className: "w-7 h-7 rounded-md text-muted hover:text-txt hover:bg-bg-hover transition-colors", title: "Edit message", "aria-label": "Edit message", children: _jsx(Pencil, { className: "w-3.5 h-3.5" }) })), onDelete && (_jsx(Button, { variant: "ghost", size: "icon", onClick: (event) => {
+                                    event?.stopPropagation?.();
+                                    onDelete(message.id);
+                                }, className: "w-7 h-7 rounded-md text-muted hover:text-danger hover:bg-danger/10 transition-colors", title: t("chatmessage.DeleteMessage"), "aria-label": "Delete message", children: _jsx(Trash2, { className: "w-3.5 h-3.5" }) }))] }))] }) }) }));
+}
+/* ── Typing Indicator ────────────────────────────────────────────────── */
+export function TypingIndicator({ agentName, agentAvatarSrc, }) {
+    const agentInitial = agentName.trim().charAt(0).toUpperCase() || "A";
+    return (_jsxs("div", { className: "flex items-start gap-2 sm:gap-3 mt-4", children: [_jsx("div", { className: "w-8 h-8 shrink-0 rounded-full overflow-hidden border border-border bg-bg-hover shadow-sm", children: agentAvatarSrc ? (_jsx("img", { src: agentAvatarSrc, alt: `${agentName} avatar`, className: "w-full h-full object-cover" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-[11px] font-bold text-txt bg-accent-subtle", children: agentInitial })) }), _jsxs("div", { className: "max-w-[88%] sm:max-w-[80%] min-w-0", children: [_jsx("div", { className: "text-[12px] font-semibold text-txt mb-1", children: agentName }), _jsx("div", { className: "px-4 py-3 bg-bg-accent border border-border rounded-2xl rounded-bl-md", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]", style: { animationDelay: "0ms" } }), _jsx("span", { className: "w-2 h-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]", style: { animationDelay: "200ms" } }), _jsx("span", { className: "w-2 h-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]", style: { animationDelay: "400ms" } })] }) })] })] }));
+}
+/* ── Empty State ─────────────────────────────────────────────────────── */
+export function ChatEmptyState({ agentName }) {
+    const { t } = useApp();
+    return (_jsxs("div", { className: "flex-1 flex flex-col items-center justify-center text-center p-6", children: [_jsx("div", { className: "w-16 h-16 rounded-2xl bg-accent-subtle flex items-center justify-center mb-4", children: _jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-txt", "aria-label": "Chat icon", children: [_jsx("title", { children: t("nav.chat") }), _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })] }) }), _jsx("h3", { className: "text-lg font-semibold text-txt-strong mb-2", children: t("chatmessage.StartAConversation") }), _jsxs("p", { className: "text-sm text-muted max-w-sm mb-6", style: { fontFamily: "var(--font-chat)" }, children: [t("chatmessage.SendAMessageTo"), " ", agentName, " ", t("chatmessage.toBeginChattingY")] }), _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: ["Hello!", "How are you?", "Tell me a joke", "Help me with..."].map((suggestion) => (_jsx(Button, { variant: "outline", size: "sm", className: "px-3 py-1.5 h-7 text-xs rounded-full text-muted border-border bg-bg hover:border-accent hover:text-txt transition-colors", children: suggestion }, suggestion))) })] }));
+}

package/dist/components/ChatModalView.d.ts

@@ -0,0 +1,10 @@
+type ChatModalLayoutVariant = "full-overlay" | "companion-dock";
+interface ChatModalViewProps {
+    variant?: ChatModalLayoutVariant;
+    onRequestClose?: () => void;
+    showSidebar?: boolean;
+    onSidebarClose?: () => void;
+}
+export declare const ChatModalView: import("react").NamedExoticComponent<ChatModalViewProps>;
+export {};
+//# sourceMappingURL=ChatModalView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatModalView.d.ts","sourceRoot":"","sources":["../../src/components/ChatModalView.tsx"],"names":[],"mappings":"AA0CA,KAAK,sBAAsB,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAEhE,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,0DAyExB,CAAC"}

package/dist/components/ChatModalView.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRenderGuard } from "@elizaos/app-core/hooks";
+import { useApp } from "@elizaos/app-core/state";
+import { memo, useEffect, useState } from "react";
+import { ChatView } from "./ChatView.js";
+import { ConversationsSidebar } from "./ConversationsSidebar.js";
+const CHAT_MODAL_NARROW_BREAKPOINT = 768;
+function useIsNarrowViewport() {
+    const [isNarrow, setIsNarrow] = useState(() => typeof window !== "undefined"
+        ? window.innerWidth <= CHAT_MODAL_NARROW_BREAKPOINT
+        : false);
+    useEffect(() => {
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            return;
+        }
+        const mediaQuery = window.matchMedia(`(max-width: ${CHAT_MODAL_NARROW_BREAKPOINT}px)`);
+        const sync = () => {
+            setIsNarrow(mediaQuery.matches);
+        };
+        sync();
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", sync);
+            return () => mediaQuery.removeEventListener("change", sync);
+        }
+        mediaQuery.addListener(sync);
+        return () => mediaQuery.removeListener(sync);
+    }, []);
+    return isNarrow;
+}
+export const ChatModalView = memo(function ChatModalView({ variant = "full-overlay", showSidebar = false, onSidebarClose, }) {
+    useRenderGuard("ChatModalView");
+    const { activeConversationId } = useApp();
+    const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+    const isNarrow = useIsNarrowViewport();
+    const isCompanionDock = variant === "companion-dock";
+    const companionSidebarVisible = isCompanionDock && showSidebar && !isNarrow;
+    useEffect(() => {
+        if (!isNarrow) {
+            setMobileSidebarOpen(false);
+        }
+    }, [isNarrow]);
+    useEffect(() => {
+        if (activeConversationId) {
+            setMobileSidebarOpen(false);
+        }
+    }, [activeConversationId]);
+    return (_jsx("div", { className: isCompanionDock
+            ? "absolute inset-0 z-10 flex flex-col bg-transparent px-4"
+            : "absolute inset-[10vh_10vw] z-[100] flex flex-col rounded-2xl bg-black/60", "data-chat-game-overlay": !isCompanionDock || undefined, "data-chat-game-dock": isCompanionDock || undefined, children: _jsxs("div", { className: `flex-1 flex flex-col min-h-0 relative rounded-2xl bg-transparent ${isCompanionDock ? "overflow-visible" : "overflow-hidden"}`, "data-chat-game-shell": true, children: [isCompanionDock && showSidebar && isNarrow && (_jsx("div", { className: "absolute inset-0 z-20 bg-black/60 backdrop-blur-sm", children: _jsx(ConversationsSidebar, { mobile: true, onClose: onSidebarClose }) })), _jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx("aside", { className: `w-[276px] shrink-0 border-r border-white/10 flex flex-col bg-black/20 ${mobileSidebarOpen
+                                ? "block"
+                                : companionSidebarVisible
+                                    ? "hidden md:flex"
+                                    : isCompanionDock
+                                        ? "hidden"
+                                        : "hidden md:flex"}`, "data-chat-game-sidebar": true, children: _jsx(ConversationsSidebar, { variant: "game-modal" }) }), _jsx("section", { className: `flex-1 flex flex-col min-w-0 bg-transparent relative ${isCompanionDock ? "overflow-visible" : ""}`, "data-chat-game-thread": true, children: _jsx(ChatView, { variant: "game-modal" }) })] })] }) }));
+});

package/dist/components/ChatView.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+type ChatViewVariant = "default" | "game-modal";
+interface ChatViewProps {
+    variant?: ChatViewVariant;
+}
+export declare function ChatView({ variant }: ChatViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../src/components/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAgDH,KAAK,eAAe,GAAG,SAAS,GAAG,YAAY,CAAC;AAEhD,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AA6ZD,wBAAgB,QAAQ,CAAC,EAAE,OAAmB,EAAE,EAAE,aAAa,2CA+gB9D"}