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

package/cloud-ui/components/ai-elements/eliza-avatar.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../lib/utils.js";
+import Image from "../../runtime/image.js";
+const DEFAULT_CDN_BASE = "https://blob.elizacloud.ai";
+const DEFAULT_AVATAR = "/avatars/eliza.png";
+function cdnUrl(path) {
+    const base = (typeof process !== "undefined"
+        ? process.env.NEXT_PUBLIC_ASSETS_CDN_URL
+        : undefined)?.trim() || DEFAULT_CDN_BASE;
+    return `${base.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+const CLOUD_AGENT_AVATARS = [
+    cdnUrl("cloud-agent-samples/2ab55b3c-25a1-4b5b-b548-045c361819e6.webp"),
+    cdnUrl("cloud-agent-samples/2b1a6c3f-bdb8-4e67-b843-87833df422cd.webp"),
+    cdnUrl("cloud-agent-samples/2bf035d3-d153-446a-ba15-9f87c4b8676f.webp"),
+    cdnUrl("cloud-agent-samples/2d03e431-df85-4749-83f8-b68c43b786df.webp"),
+    cdnUrl("cloud-agent-samples/2e41cb7a-811f-4e42-9865-ff95730d655f.webp"),
+    cdnUrl("cloud-agent-samples/4a4f1148-a899-4286-bd51-1b0177d93e21.webp"),
+    cdnUrl("cloud-agent-samples/4c59f69d-fe4e-4b88-bdac-fa0f5bd38934.webp"),
+    cdnUrl("cloud-agent-samples/7ac0ef82-857f-4c71-9d13-d5e85ea64ca5.webp"),
+    cdnUrl("cloud-agent-samples/8c9f3acc-47e5-4d2d-b059-286bac99e561.webp"),
+    cdnUrl("cloud-agent-samples/08df48b4-3ee1-4593-9f13-fd11b9677378.webp"),
+    cdnUrl("cloud-agent-samples/9a916762-6a48-4435-85d2-9fad525dfc5e.webp"),
+    cdnUrl("cloud-agent-samples/9eb9d66d-9955-488f-baf2-76f5e50f93c7.webp"),
+    cdnUrl("cloud-agent-samples/20beea15-3e44-4eca-a1db-f5c05e9f562d.webp"),
+    cdnUrl("cloud-agent-samples/31bfcf9e-70f6-4e19-bced-bda6e24171c0.webp"),
+    cdnUrl("cloud-agent-samples/73b9235f-9ff4-42de-a12f-0b018e4ec251.webp"),
+    cdnUrl("cloud-agent-samples/74ac181f-00f2-49c1-872d-1b480d481bfc.webp"),
+    cdnUrl("cloud-agent-samples/902d3591-d5ab-4b65-9344-2e7738d47ffc.webp"),
+    cdnUrl("cloud-agent-samples/7704fd9d-e3e2-43ac-a5fa-9b5e43d373ed.webp"),
+    cdnUrl("cloud-agent-samples/8509dafc-2bc8-4eb9-8e7a-38602cd3eb48.webp"),
+    cdnUrl("cloud-agent-samples/78638d61-2c9c-410e-a396-cd21be9c0700.webp"),
+    cdnUrl("cloud-agent-samples/484341c3-736a-4f15-93ba-fec779a7268e.webp"),
+    cdnUrl("cloud-agent-samples/817925f5-ef58-4222-81ab-d98027e66094.webp"),
+    cdnUrl("cloud-agent-samples/35697829-87cb-451e-a0cb-0f7a26c9b729.webp"),
+    cdnUrl("cloud-agent-samples/a3a3d8bb-4510-44b3-b1c5-00055c25c160.webp"),
+    cdnUrl("cloud-agent-samples/a7eba0a6-14bc-4fe5-b5d0-792925c2852c.webp"),
+    cdnUrl("cloud-agent-samples/a99ecf03-26f8-4d50-8762-237d419ea1f2.webp"),
+    cdnUrl("cloud-agent-samples/a8097634-c950-48ad-8bec-b08a810251b6_1.webp"),
+    cdnUrl("cloud-agent-samples/aa6c7257-7962-439c-802d-a592be96b79c.webp"),
+    cdnUrl("cloud-agent-samples/abc8888f-0854-4469-8b00-98cc879f87ba.webp"),
+    cdnUrl("cloud-agent-samples/aeb157ed-3744-47eb-aa25-3c2e057af199.webp"),
+    cdnUrl("cloud-agent-samples/b237d37b-73b2-488a-903d-1e6a06c1ea92.webp"),
+    cdnUrl("cloud-agent-samples/b364f77c-599b-4dd9-ba19-e20a94b6bf3f.webp"),
+    cdnUrl("cloud-agent-samples/b639a5c9-1cd3-4cbc-a4c5-921ca3c120b5.webp"),
+    cdnUrl("cloud-agent-samples/beccf811-b6d9-4409-b936-36a35b9bc417.webp"),
+    cdnUrl("cloud-agent-samples/c20b47af-2075-4c1b-8b32-8b756dea2989.webp"),
+    cdnUrl("cloud-agent-samples/c63e72cd-6e99-4ce1-b0fe-a363f3121c5f.webp"),
+    cdnUrl("cloud-agent-samples/cccf4c27-47fa-42f7-b00d-27ebe6fb42b8.webp"),
+    cdnUrl("cloud-agent-samples/ce3e89ac-6376-4b96-b260-e2ac2f16e1dd.webp"),
+    cdnUrl("cloud-agent-samples/d30bc02f-d21c-4105-b8be-cd5f44a7cf24.webp"),
+    cdnUrl("cloud-agent-samples/d39c4a72-e294-453a-982f-12e6061c2f7e.webp"),
+    cdnUrl("cloud-agent-samples/d2681e5d-2a8b-4498-9cf8-323b5c86a809.webp"),
+    cdnUrl("cloud-agent-samples/ecf07f41-33d0-48c0-bbfd-e5a484c726b8.webp"),
+    cdnUrl("cloud-agent-samples/ef67d566-87c5-4608-9700-032a6c6c8bae.webp"),
+    cdnUrl("cloud-agent-samples/efb63574-2949-4b28-9187-ae76b1ce1be8.webp"),
+    cdnUrl("cloud-agent-samples/fb36ddbc-b8be-43fb-9da7-71381e410010.webp"),
+    cdnUrl("cloud-agent-samples/fee4baa8-6166-4a77-9b41-812a8b489354.webp"),
+];
+const ALL_AVATARS = [
+    ...CLOUD_AGENT_AVATARS,
+    "/avatars/eliza.png",
+    "/avatars/amara.webp",
+    "/avatars/luna.webp",
+    "/avatars/prof_ada.webp",
+    "/avatars/voiceai.webp",
+    "/avatars/wellnesscoach.webp",
+    "/avatars/edad.webp",
+];
+function simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i);
+        hash = hash & hash;
+    }
+    return Math.abs(hash);
+}
+function ensureAvatarUrl(avatarUrl, name) {
+    if (avatarUrl && avatarUrl.trim() !== "") {
+        return avatarUrl;
+    }
+    if (name) {
+        return CLOUD_AGENT_AVATARS[simpleHash(name) % CLOUD_AGENT_AVATARS.length];
+    }
+    return DEFAULT_AVATAR;
+}
+function isBuiltInAvatar(url) {
+    if (!url)
+        return false;
+    const cdnBase = (typeof process !== "undefined"
+        ? process.env.NEXT_PUBLIC_ASSETS_CDN_URL
+        : undefined)?.trim() || DEFAULT_CDN_BASE;
+    return (url.startsWith("/avatars/") ||
+        url.startsWith(cdnBase) ||
+        ALL_AVATARS.some((avatar) => avatar === url));
+}
+export const ElizaAvatar = memo(function ElizaAvatar({ avatarUrl, name = "Eliza", className, iconClassName, animate = false, priority = false, }) {
+    const resolvedAvatarUrl = ensureAvatarUrl(avatarUrl, name);
+    return (_jsx("div", { className: cn("relative flex shrink-0 overflow-hidden rounded-full", className), children: _jsx(Image, { src: resolvedAvatarUrl, alt: name, fill: true, className: cn("object-cover", animate ? "animate-pulse" : "", iconClassName), sizes: "48px", priority: priority, unoptimized: !isBuiltInAvatar(resolvedAvatarUrl) }, resolvedAvatarUrl) }));
+});

package/cloud-ui/components/ai-elements/hooks/use-typewriter-text.d.ts

@@ -0,0 +1,9 @@
+interface TypewriterConfig {
+    charsPerFrame?: number;
+    frameDelay?: number;
+    onReveal?: () => void;
+}
+export declare function useTypewriterText(targetText: string, isActive: boolean, config?: Pick<TypewriterConfig, "onReveal">): string;
+export declare function useReasoningTypewriter(targetText: string, isActive: boolean, onReveal?: () => void): string;
+export {};
+//# sourceMappingURL=use-typewriter-text.d.ts.map

package/cloud-ui/components/ai-elements/hooks/use-typewriter-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-typewriter-text.d.ts","sourceRoot":"","sources":["../../../../../../../../src/cloud-ui/components/ai-elements/hooks/use-typewriter-text.ts"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA2FD,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,OAAO,EACjB,MAAM,GAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAM,UAOhD;AAED,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,OAAO,EACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,UAOtB"}

package/cloud-ui/components/ai-elements/hooks/use-typewriter-text.js

@@ -0,0 +1,88 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+function useTypewriter(targetText, isActive, { charsPerFrame = 6, frameDelay = 10, onReveal } = {}) {
+    const animState = useRef({
+        visibleLength: 0,
+        lastFrame: 0,
+        animationId: null,
+        lastTargetLength: 0,
+        everActive: false,
+    });
+    const [displayLength, setDisplayLength] = useState(0);
+    const onRevealRef = useRef(onReveal);
+    useEffect(() => {
+        onRevealRef.current = onReveal;
+    });
+    useEffect(() => {
+        const state = animState.current;
+        if (isActive && targetText) {
+            state.everActive = true;
+        }
+        if (!targetText || targetText.length < state.lastTargetLength) {
+            state.visibleLength = 0;
+            state.lastTargetLength = targetText.length;
+            setDisplayLength(0);
+            if (!targetText) {
+                state.everActive = false;
+            }
+            return;
+        }
+        state.lastTargetLength = targetText.length;
+        if (!isActive && !state.everActive) {
+            return;
+        }
+        if (state.visibleLength >= targetText.length && targetText.length > 0) {
+            return;
+        }
+        const animate = (timestamp) => {
+            if (timestamp - state.lastFrame < frameDelay) {
+                state.animationId = requestAnimationFrame(animate);
+                return;
+            }
+            state.lastFrame = timestamp;
+            const remaining = targetText.length - state.visibleLength;
+            if (remaining <= 0) {
+                state.animationId = null;
+                return;
+            }
+            state.visibleLength += Math.min(charsPerFrame, remaining);
+            setDisplayLength(state.visibleLength);
+            onRevealRef.current?.();
+            if (state.visibleLength < targetText.length) {
+                state.animationId = requestAnimationFrame(animate);
+            }
+            else {
+                state.animationId = null;
+            }
+        };
+        if (!state.animationId && targetText.length > state.visibleLength) {
+            state.animationId = requestAnimationFrame(animate);
+        }
+        const currentState = animState.current;
+        return () => {
+            if (currentState.animationId) {
+                cancelAnimationFrame(currentState.animationId);
+                currentState.animationId = null;
+            }
+        };
+    }, [charsPerFrame, frameDelay, isActive, targetText]);
+    if (!targetText)
+        return "";
+    if (displayLength > 0 || isActive)
+        return targetText.slice(0, displayLength);
+    return targetText;
+}
+export function useTypewriterText(targetText, isActive, config = {}) {
+    return useTypewriter(targetText, isActive, {
+        charsPerFrame: 6,
+        frameDelay: 10,
+        onReveal: config.onReveal,
+    });
+}
+export function useReasoningTypewriter(targetText, isActive, onReveal) {
+    return useTypewriter(targetText, isActive, {
+        charsPerFrame: 4,
+        frameDelay: 12,
+        onReveal,
+    });
+}

package/cloud-ui/components/ai-elements/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./eliza-avatar.js";
+export * from "./hooks/use-typewriter-text.js";
+export * from "./memoized-chat-message.js";
+//# sourceMappingURL=index.d.ts.map

package/cloud-ui/components/ai-elements/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/ai-elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC"}

package/cloud-ui/components/ai-elements/index.js

@@ -0,0 +1,3 @@
+export * from "./eliza-avatar.js";
+export * from "./hooks/use-typewriter-text.js";
+export * from "./memoized-chat-message.js";

package/cloud-ui/components/ai-elements/memoized-chat-message.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Memoized chat message component for performance optimization.
+ * Prevents re-renders of messages that haven't changed.
+ */
+import { type ChatMediaAttachment } from "../../types/chat-media.js";
+export interface MemoizedChatMessageMessage {
+    id: string;
+    content: {
+        text: string;
+        clientMessageId?: string;
+        attachments?: ChatMediaAttachment[];
+    };
+    isAgent: boolean;
+    createdAt: number;
+}
+export interface MemoizedChatMessageProps {
+    message: MemoizedChatMessageMessage;
+    characterName: string;
+    characterAvatarUrl?: string;
+    copiedMessageId: string | null;
+    currentPlayingId: string | null;
+    isPlaying: boolean;
+    hasAudioUrl: boolean;
+    isStreaming?: boolean;
+    formatTimestamp: (timestamp: number) => string;
+    onCopy: (text: string, messageId: string, attachments?: MemoizedChatMessageMessage["content"]["attachments"]) => void;
+    onPlayAudio?: (messageId: string) => void;
+    onImageLoad?: () => void;
+    /** Chain-of-thought reasoning text to display while thinking */
+    reasoningText?: string;
+    /** Current phase of reasoning: planning, actions, or response */
+    reasoningPhase?: "planning" | "actions" | "response" | null;
+    /** Callback when typewriter animation reveals more text (for scrolling) */
+    onTextReveal?: () => void;
+}
+declare function ChatMessageComponent(props: MemoizedChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare const MemoizedChatMessage: import("react").MemoExoticComponent<typeof ChatMessageComponent>;
+export {};
+//# sourceMappingURL=memoized-chat-message.d.ts.map

package/cloud-ui/components/ai-elements/memoized-chat-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"memoized-chat-message.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/ai-elements/memoized-chat-message.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,EAAE,KAAK,mBAAmB,EAAe,MAAM,wBAAwB,CAAC;AAiM/E,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;KACrC,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,0BAA0B,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,MAAM,EAAE,CACN,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,KAC/D,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iEAAiE;IACjE,cAAc,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,IAAI,CAAC;IAC5D,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAsBD,iBAAS,oBAAoB,CAAC,KAAK,EAAE,wBAAwB,2CA2Q5D;AAGD,eAAO,MAAM,mBAAmB,kEAoB/B,CAAC"}

package/cloud-ui/components/ai-elements/memoized-chat-message.js

@@ -0,0 +1,250 @@
+/**
+ * Memoized chat message component for performance optimization.
+ * Prevents re-renders of messages that haven't changed.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, Copy, Loader2, Square, Volume2 } from "lucide-react";
+import { memo, useEffect } from "react";
+import { Streamdown } from "streamdown";
+import { Button } from "../../../components/ui/button.js";
+import Image from "../../runtime/image.js";
+import { ContentType } from "../../types/chat-media.js";
+import { ElizaAvatar } from "./eliza-avatar.js";
+import { useReasoningTypewriter, useTypewriterText, } from "./hooks/use-typewriter-text.js";
+/**
+ * Normalize markdown list formatting.
+ * Fixes LLM output that puts extra newlines between numbered list items,
+ * which causes markdown to render them as separate paragraphs instead of a list.
+ */
+function normalizeMarkdownLists(text) {
+    // Pattern 1: Fix paragraph breaks between numbered list items
+    // "11. **Item**...\n\n12. **Item**..." → "11. **Item**...\n12. **Item**..."
+    // This ensures markdown recognizes consecutive numbered items as a list
+    let result = text.replace(/(\d+\.\s+[^\n]+)\n\n+(?=\d+\.\s)/g, "$1\n");
+    // Pattern 2: Fix numbered lists where number is on its own line
+    // "1.\n\nVisit..." → "1. Visit..."
+    result = result.replace(/^(\d+\.)\s*[\r\n]+\s*(?=\S)/gm, "$1 ");
+    // Pattern 3: Fix bold numbers on their own line
+    // "**1.**\nVisit..." → "1. Visit..."
+    result = result.replace(/^\*\*(\d+)\.\*\*\s*[\r\n]+\s*/gm, "$1. ");
+    return result;
+}
+// Static keyframe/class definitions shared by every chat message. These were
+// previously rendered as an inline <style> inside each message, duplicating the
+// same CSS once per message in a conversation. They are fully static, so we
+// inject each stylesheet into the document head exactly once.
+const REASONING_ANIMATION_CSS = `
+  @keyframes reasoningFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes reasoningTextAppear {
+    from {
+      opacity: 0.3;
+    }
+    to {
+      opacity: 0.65;
+    }
+  }
+
+  @keyframes pulseGlow {
+    0%,
+    100% {
+      box-shadow: 0 0 0 0 rgba(255, 88, 0, 0);
+      border-color: rgba(255, 88, 0, 0.15);
+    }
+    50% {
+      box-shadow: 0 0 8px 2px rgba(255, 88, 0, 0.1);
+      border-color: rgba(255, 88, 0, 0.25);
+    }
+  }
+
+  @keyframes dotPulse {
+    0%,
+    80%,
+    100% {
+      transform: scale(0.8);
+      opacity: 0.4;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .reasoning-container {
+    animation: reasoningFadeIn 300ms ease-out forwards;
+  }
+
+  .reasoning-border {
+    animation: pulseGlow 2s ease-in-out infinite;
+  }
+
+  .reasoning-text {
+    animation: reasoningTextAppear 200ms ease-out forwards;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .thinking-dots span {
+    display: inline-block;
+    animation: dotPulse 1.4s ease-in-out infinite;
+  }
+  .thinking-dots span:nth-child(1) {
+    animation-delay: 0ms;
+  }
+  .thinking-dots span:nth-child(2) {
+    animation-delay: 200ms;
+  }
+  .thinking-dots span:nth-child(3) {
+    animation-delay: 400ms;
+  }
+`;
+const STREAMING_ANIMATION_CSS = `
+  @keyframes streamTextFadeIn {
+    0% {
+      opacity: 0.4;
+      filter: blur(1px);
+    }
+    100% {
+      opacity: 1;
+      filter: blur(0);
+    }
+  }
+
+  @keyframes cursorBlink {
+    0%,
+    50% {
+      opacity: 1;
+    }
+    51%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes cursorPulse {
+    0%,
+    100% {
+      opacity: 0.9;
+      transform: scaleY(1);
+    }
+    50% {
+      opacity: 0.5;
+      transform: scaleY(0.85);
+    }
+  }
+
+  .streaming-text-wrapper {
+    /* Smooth text rendering for animation */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  .streaming-text-content {
+    animation: streamTextFadeIn 200ms ease-out forwards;
+  }
+
+  /* Smooth transitions for text changes */
+  .streaming-text-content p,
+  .streaming-text-content span,
+  .streaming-text-content div {
+    transition: opacity 150ms ease-out;
+  }
+
+  .streaming-cursor {
+    animation: cursorPulse 800ms ease-in-out infinite;
+    will-change: opacity, transform;
+  }
+
+  /* Non-streaming messages - subtle entrance */
+  .message-text-complete {
+    animation: streamTextFadeIn 300ms ease-out forwards;
+  }
+`;
+function ensureStyleInjected(id, css) {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+}
+function useChatMessageAnimationStyles() {
+    useEffect(() => {
+        ensureStyleInjected("eliza-chat-reasoning-animations", REASONING_ANIMATION_CSS);
+        ensureStyleInjected("eliza-chat-streaming-animations", STREAMING_ANIMATION_CSS);
+    }, []);
+}
+function getAttachmentSignature(attachments) {
+    return (attachments
+        ?.map((attachment) => [
+        attachment.id,
+        attachment.url,
+        attachment.contentType,
+        attachment.title,
+        attachment.description,
+        attachment.source,
+        attachment.text,
+    ].join("\u0000"))
+        .join("\u0001") ?? "");
+}
+function ChatMessageComponent(props) {
+    const { message, characterName, characterAvatarUrl, copiedMessageId, currentPlayingId, isPlaying, hasAudioUrl, isStreaming = false, formatTimestamp, onCopy, onPlayAudio, onImageLoad, reasoningText, reasoningPhase, onTextReveal, } = props;
+    const isThinking = message.id.startsWith("thinking-");
+    useChatMessageAnimationStyles();
+    // Detect streaming from message id if not explicitly passed
+    const isStreamingMessage = isStreaming || message.id.startsWith("streaming-");
+    // Show reasoning for thinking messages OR streaming messages with "response" phase reasoning
+    // This keeps "Composing" visible above the text while it streams
+    const hasThinkingReasoning = Boolean(isThinking && reasoningText && reasoningText.length > 0);
+    const hasStreamingReasoning = Boolean(isStreamingMessage &&
+        reasoningPhase === "response" &&
+        reasoningText &&
+        reasoningText.length > 0);
+    const hasReasoning = hasThinkingReasoning || hasStreamingReasoning;
+    // Typewriter effect for streaming messages
+    // Reveals text at consistent speed (never jumps) - handles bursty input gracefully
+    const displayText = useTypewriterText(message.content.text, isStreamingMessage, {
+        onReveal: onTextReveal,
+    });
+    // Typewriter effect for reasoning/CoT text - active for thinking OR streaming with response phase
+    const displayReasoningText = useReasoningTypewriter(reasoningText || "", hasReasoning, onTextReveal);
+    return (_jsx("div", { className: `flex ${message.isAgent ? "justify-start" : "justify-end"}`, children: message.isAgent ? (_jsxs("div", { className: "flex flex-col gap-0.5 max-w-[85%] sm:max-w-[75%] group/message", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ElizaAvatar, { avatarUrl: characterAvatarUrl, name: characterName, className: "flex-shrink-0 w-5 h-5", iconClassName: "h-3 w-3", animate: isThinking }), _jsx("span", { className: "text-sm font-medium text-white/50", children: characterName })] }), _jsx("div", { className: "flex flex-col gap-0.5", children: isThinking ? (_jsx("div", { className: "py-2.5 px-3.5 bg-white/[0.02] border border-white/[0.05] rounded-sm", children: hasReasoning ? (_jsxs("div", { className: "reasoning-container space-y-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-[#FF5800]/70" }), _jsx("div", { className: "absolute inset-0 h-3.5 w-3.5 animate-ping opacity-20 rounded-full bg-[#FF5800]" })] }), _jsxs("span", { className: "text-xs font-medium text-[#FF5800]/70 uppercase tracking-wider", children: [reasoningPhase === "planning" && "Planning", reasoningPhase === "actions" && "Executing", reasoningPhase === "response" && "Composing", !reasoningPhase && "Thinking"] })] }), _jsxs("div", { className: "reasoning-text reasoning-border text-sm text-white/85 italic leading-relaxed border-l-2 border-[#FF5800]/30 pl-3 ml-1 py-0.5", children: [displayReasoningText, _jsx("span", { className: "streaming-cursor inline-block w-[2px] h-[0.9em] bg-[#FF5800]/50 ml-0.5 rounded-sm align-text-bottom", style: { verticalAlign: "text-bottom" } })] })] })) : (_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin text-white/50" }), _jsxs("span", { className: "text-sm text-white/50", children: ["thinking", _jsxs("span", { className: "thinking-dots", children: [_jsx("span", { children: "." }), _jsx("span", { children: "." }), _jsx("span", { children: "." })] })] })] })) })) : (_jsxs(_Fragment, { children: [hasStreamingReasoning && (_jsxs("div", { className: "mb-2 py-2 px-3 bg-white/[0.02] border border-white/[0.05] rounded-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "relative", children: _jsx(Loader2, { className: "h-3 w-3 animate-spin text-[#FF5800]/60" }) }), _jsx("span", { className: "text-[10px] font-medium text-[#FF5800]/60 uppercase tracking-wider", children: "Composing" })] }), _jsx("div", { className: "text-xs text-white/70 italic leading-relaxed border-l-2 border-[#FF5800]/20 pl-2 mt-1.5 line-clamp-2", children: displayReasoningText })] })), _jsx("div", { className: "overflow-hidden", children: _jsxs("div", { className: `streaming-text-wrapper text-[15px] leading-relaxed text-white/90 prose prose-invert prose-sm max-w-none prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 prose-headings:my-3 prose-pre:my-2 break-words [&_pre]:overflow-x-auto [&_pre_code]:whitespace-pre-wrap [&_pre_code]:break-words ${isStreamingMessage ? "streaming-text-content" : "message-text-complete"}`, children: [_jsx(Streamdown, { children: normalizeMarkdownLists(isStreamingMessage ? displayText : message.content.text) }), isStreamingMessage && (_jsx("span", { className: "streaming-cursor inline-block w-[3px] h-[1.1em] bg-[#FF5800] ml-0.5 rounded-sm align-text-bottom", style: {
+                                                verticalAlign: "text-bottom",
+                                                marginBottom: "2px",
+                                            } }))] }) }), message.content.attachments &&
+                                message.content.attachments.length > 0 && (_jsx("div", { className: "mt-2 space-y-2", children: message.content.attachments.map((attachment) => {
+                                    if (attachment.contentType === ContentType.IMAGE) {
+                                        return (_jsx("div", { className: "inline-block rounded-sm overflow-hidden border border-white/10 max-w-md", children: _jsx(Image, { src: attachment.url, alt: attachment.title || "Generated image", width: 512, height: 512, className: "w-full h-auto", style: { display: "block" }, onLoad: onImageLoad }) }, attachment.id));
+                                    }
+                                    return null;
+                                }) })), !isStreamingMessage && (_jsxs("div", { className: "flex items-center gap-2 opacity-0 group-hover/message:opacity-100 transition-opacity", children: [_jsx("span", { className: "text-xs text-white/40", children: formatTimestamp(message.createdAt) }), _jsx(Button, { size: "sm", variant: "ghost", className: "h-6 w-6 p-0 hover:bg-white/10 rounded-sm transition-colors", onClick: () => onCopy(message.content.text, message.id, message.content.attachments), title: "Copy message", children: copiedMessageId === message.id ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-500" })) : (_jsx(Copy, { className: "h-3.5 w-3.5 text-white/50 hover:text-white/80" })) }), hasAudioUrl && onPlayAudio && (_jsx(Button, { size: "sm", variant: "ghost", className: "h-6 w-6 p-0 hover:bg-white/10 rounded-sm transition-colors", onClick: () => onPlayAudio(message.id), children: currentPlayingId === message.id && isPlaying ? (_jsx(Square, { className: "h-3.5 w-3.5 text-white/50" })) : (_jsx(Volume2, { className: "h-3.5 w-3.5 text-white/50 hover:text-white/80" })) }))] }))] })) })] })) : (_jsxs("div", { className: "flex flex-col max-w-[85%] sm:max-w-[75%] group/message items-end", children: [_jsx("div", { className: "py-2 px-3 bg-[#FF5800]/10 border border-[#FF5800]/20 rounded-sm transition-colors hover:bg-[#FF5800]/15 hover:border-[#FF5800]/30 w-fit ml-auto", children: _jsx("div", { className: "whitespace-pre-wrap text-[15px] leading-relaxed text-white/95 text-left", children: message.content.text }) }), _jsxs("div", { className: "flex items-center gap-2 justify-end opacity-0 group-hover/message:opacity-100 transition-opacity", children: [_jsx("span", { className: "text-xs text-white/40", children: formatTimestamp(message.createdAt) }), _jsx(Button, { size: "sm", variant: "ghost", className: "h-6 w-6 p-0 hover:bg-white/10 rounded-sm transition-colors", onClick: () => onCopy(message.content.text, message.id, message.content.attachments), title: "Copy message", children: copiedMessageId === message.id ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-500" })) : (_jsx(Copy, { className: "h-3.5 w-3.5 text-white/50 hover:text-white/80" })) })] })] })) }));
+}
+// Memoize with custom comparison function
+export const MemoizedChatMessage = memo(ChatMessageComponent, (prevProps, nextProps) => {
+    // Compare relevant props - streaming messages use streaming- prefix
+    return (prevProps.message.id === nextProps.message.id &&
+        prevProps.message.content.text === nextProps.message.content.text &&
+        getAttachmentSignature(prevProps.message.content.attachments) ===
+            getAttachmentSignature(nextProps.message.content.attachments) &&
+        prevProps.characterName === nextProps.characterName &&
+        prevProps.characterAvatarUrl === nextProps.characterAvatarUrl &&
+        prevProps.copiedMessageId === nextProps.copiedMessageId &&
+        prevProps.currentPlayingId === nextProps.currentPlayingId &&
+        prevProps.isPlaying === nextProps.isPlaying &&
+        prevProps.hasAudioUrl === nextProps.hasAudioUrl &&
+        prevProps.isStreaming === nextProps.isStreaming &&
+        prevProps.reasoningText === nextProps.reasoningText &&
+        prevProps.reasoningPhase === nextProps.reasoningPhase);
+});

package/cloud-ui/components/analytics/cost-alerts.d.ts

@@ -0,0 +1,9 @@
+import type { AnalyticsCostTrendingDto } from "../../types/cloud-api.js";
+type CostAlertsTrending = AnalyticsCostTrendingDto;
+interface CostAlertsProps {
+    costTrending: CostAlertsTrending;
+    creditBalance: number;
+}
+export declare function CostAlerts({ costTrending }: CostAlertsProps): import("react/jsx-runtime").JSX.Element;
+export type { CostAlertsProps, CostAlertsTrending };
+//# sourceMappingURL=cost-alerts.d.ts.map

package/cloud-ui/components/analytics/cost-alerts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cost-alerts.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/analytics/cost-alerts.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,KAAK,kBAAkB,GAAG,wBAAwB,CAAC;AAEnD,UAAU,eAAe;IACvB,YAAY,EAAE,kBAAkB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EAAE,YAAY,EAAE,EAAE,eAAe,2CAqF3D;AAED,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC"}

package/cloud-ui/components/analytics/cost-alerts.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Info, TrendingDown } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+export function CostAlerts({ costTrending }) {
+    const alerts = [];
+    if (costTrending.daysUntilBalanceZero !== null &&
+        costTrending.daysUntilBalanceZero < 7) {
+        alerts.push({
+            type: "error",
+            title: "Low Balance",
+            description: `Your organization will run out of balance in ${costTrending.daysUntilBalanceZero} days at current burn rate. Consider adding funds.`,
+        });
+    }
+    if (costTrending.burnChangePercent > 50) {
+        alerts.push({
+            type: "warning",
+            title: "Burn Rate Increased",
+            description: `Your daily burn rate increased by ${costTrending.burnChangePercent.toFixed(0)}% compared to yesterday. Monitor usage closely.`,
+        });
+    }
+    if (costTrending.burnAlertThresholdExceeded) {
+        alerts.push({
+            type: "warning",
+            title: "High Projected Monthly Cost",
+            description: `At current burn rate, you'll spend $${costTrending.projectedMonthlyBurn.toFixed(2)} this month, which is ${costTrending.monthlyBurnPercent.toFixed(0)}% of your current balance.`,
+        });
+    }
+    if (alerts.length === 0) {
+        return (_jsx("div", { className: "rounded-sm border border-white/10 bg-white/[0.04] p-5 text-sm text-white", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(TrendingDown, { className: "h-5 w-5 shrink-0" }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "font-semibold", children: "All good" }), _jsx("p", { className: "text-sm text-white/70", children: "Usage is tracking within healthy thresholds." })] })] }) }));
+    }
+    const toneClasses = {
+        warning: "border-[#FF5800]/40 bg-[#FF5800]/10 text-white",
+        error: "border-[#FF5800] bg-[#FF5800] text-black",
+        info: "border-[#0B35F1]/40 bg-[#0B35F1]/10 text-white",
+    };
+    const iconMap = {
+        warning: _jsx(AlertTriangle, { className: "h-5 w-5 shrink-0" }),
+        error: _jsx(AlertTriangle, { className: "h-5 w-5 shrink-0" }),
+        info: _jsx(Info, { className: "h-5 w-5 shrink-0" }),
+    };
+    return (_jsx("div", { className: "grid gap-4", children: alerts.map((alert) => (_jsx("div", { className: cn("rounded-sm border bg-background/80 p-5 text-sm ", toneClasses[alert.type]), children: _jsxs("div", { className: "flex items-start gap-4", children: [iconMap[alert.type], _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "font-semibold leading-tight", children: alert.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: alert.description })] })] }) }, alert.title))) }));
+}

package/cloud-ui/components/analytics/cost-insights-card.d.ts

@@ -0,0 +1,8 @@
+import { type CostAlertsTrending } from "./cost-alerts.js";
+interface CostInsightsCardProps {
+    costTrending: CostAlertsTrending;
+    creditBalance: number;
+}
+export declare function CostInsightsCard({ costTrending, creditBalance, }: CostInsightsCardProps): import("react/jsx-runtime").JSX.Element;
+export type { CostInsightsCardProps };
+//# sourceMappingURL=cost-insights-card.d.ts.map

package/cloud-ui/components/analytics/cost-insights-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cost-insights-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/analytics/cost-insights-card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEpE,UAAU,qBAAqB;IAC7B,YAAY,EAAE,kBAAkB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;CACvB;AASD,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,aAAa,GACd,EAAE,qBAAqB,2CAmEvB;AAED,YAAY,EAAE,qBAAqB,EAAE,CAAC"}

package/cloud-ui/components/analytics/cost-insights-card.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "../../../components/ui/badge.js";
+import { Progress } from "../../../components/ui/progress.js";
+import { BrandCard } from "../brand/brand-card.js";
+import { CostAlerts } from "./cost-alerts.js";
+const currencyFormatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+export function CostInsightsCard({ costTrending, creditBalance, }) {
+    const projectedSpendPercent = costTrending.monthlyBurnPercentClamped;
+    const runwayLabel = costTrending.daysUntilBalanceZero === null
+        ? "Stable"
+        : costTrending.daysUntilBalanceZero <= 1
+            ? "< 1 day"
+            : `${costTrending.daysUntilBalanceZero}d`;
+    return (_jsxs(BrandCard, { corners: false, className: "border-[#FF5800]/40 bg-[#FF5800]/10", children: [_jsx("div", { className: "flex flex-col gap-2 p-6 pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h3", { className: "text-base font-semibold text-white", children: "Cost outlook" }), _jsxs(Badge, { variant: "outline", className: "border-[#FF5800]/30 bg-[#FF5800]/10 text-xs font-medium text-[#FF5800]", children: [costTrending.burnChangePercent > 0 ? "+" : "", costTrending.burnChangePercent.toFixed(1), "%"] })] }) }), _jsxs("div", { className: "flex flex-col gap-5 p-6 pt-2", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-2 rounded-sm border border-orange-500/20 bg-black/35 p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-white/50", children: "Daily burn" }), _jsx("p", { className: "text-2xl font-semibold text-white", children: currencyFormatter.format(costTrending.currentDailyBurn) })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between text-xs uppercase tracking-wide text-white/50", children: [_jsx("span", { children: "Monthly projection" }), _jsx("span", { children: currencyFormatter.format(costTrending.projectedMonthlyBurn) })] }), _jsx(Progress, { value: projectedSpendPercent })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "rounded-sm border border-orange-500/20 bg-black/35 p-3", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-white/50", children: "Runway" }), _jsx("p", { className: "text-lg font-semibold text-white", children: runwayLabel })] }), _jsxs("div", { className: "rounded-sm border border-orange-500/20 bg-black/35 p-3", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-white/50", children: "Balance" }), _jsx("p", { className: "text-lg font-semibold text-white", children: currencyFormatter.format(creditBalance) })] })] })] }), _jsx(CostAlerts, { costTrending: costTrending, creditBalance: creditBalance })] })] }));
+}

package/cloud-ui/components/analytics/export-button.d.ts

@@ -0,0 +1,20 @@
+type AnalyticsExportFormat = "csv" | "json" | "excel";
+type AnalyticsExportType = "timeseries" | "users" | "providers" | "models";
+interface ExportButtonProps {
+    startDate: Date | string;
+    endDate: Date | string;
+    granularity: string;
+    format?: AnalyticsExportFormat;
+    type?: AnalyticsExportType;
+    variant?: "simple" | "dropdown";
+    onExport?: (options: {
+        format: AnalyticsExportFormat;
+        type: AnalyticsExportType;
+        startDate: Date | string;
+        endDate: Date | string;
+        granularity: string;
+    }) => void;
+}
+export declare function ExportButton({ startDate, endDate, granularity, format, type, variant, onExport, }: ExportButtonProps): import("react/jsx-runtime").JSX.Element;
+export type { AnalyticsExportFormat, AnalyticsExportType, ExportButtonProps };
+//# sourceMappingURL=export-button.d.ts.map

package/cloud-ui/components/analytics/export-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"export-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/analytics/export-button.tsx"],"names":[],"mappings":"AAaA,KAAK,qBAAqB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AACtD,KAAK,mBAAmB,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE3E,UAAU,iBAAiB;IACzB,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,OAAO,EAAE,IAAI,GAAG,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QACnB,MAAM,EAAE,qBAAqB,CAAC;QAC9B,IAAI,EAAE,mBAAmB,CAAC;QAC1B,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;QACzB,OAAO,EAAE,IAAI,GAAG,MAAM,CAAC;QACvB,WAAW,EAAE,MAAM,CAAC;KACrB,KAAK,IAAI,CAAC;CACZ;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,OAAO,EACP,WAAW,EACX,MAAc,EACd,IAAmB,EACnB,OAAkB,EAClB,QAAQ,GACT,EAAE,iBAAiB,2CAiGnB;AAED,YAAY,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,CAAC"}