@promptbook/components 0.112.0-48 → 0.112.0-49

package/esm/index.es.js

@@ -40,7 +40,7 @@ const BOOK_LANGUAGE_VERSION = '2.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.112.0-48';
+const PROMPTBOOK_ENGINE_VERSION = '0.112.0-49';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -1519,10 +1519,22 @@ function createAvatarRandomFactory(avatarDefinition) {
  */
 function prepareAvatarCanvas(canvas, context, size, devicePixelRatio) {
     const normalizedDevicePixelRatio = Math.max(1, Math.round(devicePixelRatio * 100) / 100);
-    canvas.width = Math.round(size * normalizedDevicePixelRatio);
-    canvas.height = Math.round(size * normalizedDevicePixelRatio);
-    canvas.style.width = `${size}px`;
-    canvas.style.height = `${size}px`;
+    const nextCanvasWidth = Math.round(size * normalizedDevicePixelRatio);
+    const nextCanvasHeight = Math.round(size * normalizedDevicePixelRatio);
+    const nextCanvasStyleWidth = `${size}px`;
+    const nextCanvasStyleHeight = `${size}px`;
+    if (canvas.width !== nextCanvasWidth) {
+        canvas.width = nextCanvasWidth;
+    }
+    if (canvas.height !== nextCanvasHeight) {
+        canvas.height = nextCanvasHeight;
+    }
+    if (canvas.style.width !== nextCanvasStyleWidth) {
+        canvas.style.width = nextCanvasStyleWidth;
+    }
+    if (canvas.style.height !== nextCanvasStyleHeight) {
+        canvas.style.height = nextCanvasStyleHeight;
+    }
     context.setTransform(normalizedDevicePixelRatio, 0, 0, normalizedDevicePixelRatio, 0, 0);
     context.clearRect(0, 0, size, size);
 }
@@ -26079,6 +26091,138 @@ function interpolateExponentially(currentValue, targetValue, deltaMs, smoothingW
     return currentValue + (targetValue - currentValue) * blend;
 }
 
+// Note: [💞] Ignore a discrepancy between file name and entity name
+/**
+ * Next registration id used by the shared avatar animation scheduler.
+ *
+ * @private utility of the avatar rendering system
+ */
+let nextAvatarAnimationListenerId = 1;
+/**
+ * Active avatar animation callbacks keyed by their registration id.
+ *
+ * @private utility of the avatar rendering system
+ */
+const avatarAnimationListeners = new Map();
+/**
+ * Active shared animation-frame handle.
+ *
+ * @private utility of the avatar rendering system
+ */
+let avatarAnimationFrameId = null;
+/**
+ * Registers one avatar animation callback in the shared animation loop.
+ *
+ * @param avatarAnimationListener Frame callback invoked on every animation frame.
+ * @returns Cleanup function that unregisters the callback.
+ *
+ * @private utility of the avatar rendering system
+ */
+function retainAvatarAnimationListener(avatarAnimationListener) {
+    if (typeof window === 'undefined') {
+        return () => undefined;
+    }
+    const listenerId = nextAvatarAnimationListenerId++;
+    avatarAnimationListeners.set(listenerId, avatarAnimationListener);
+    ensureAvatarAnimationLoop();
+    return () => {
+        avatarAnimationListeners.delete(listenerId);
+        if (avatarAnimationListeners.size === 0 && avatarAnimationFrameId !== null) {
+            window.cancelAnimationFrame(avatarAnimationFrameId);
+            avatarAnimationFrameId = null;
+        }
+    };
+}
+/**
+ * Ensures the shared animation loop is running while at least one avatar listener is active.
+ *
+ * @private utility of the avatar rendering system
+ */
+function ensureAvatarAnimationLoop() {
+    if (avatarAnimationFrameId !== null || avatarAnimationListeners.size === 0 || typeof window === 'undefined') {
+        return;
+    }
+    const runFrame = (now) => {
+        avatarAnimationFrameId = null;
+        for (const avatarAnimationListener of [...avatarAnimationListeners.values()]) {
+            avatarAnimationListener(now);
+        }
+        ensureAvatarAnimationLoop();
+    };
+    avatarAnimationFrameId = window.requestAnimationFrame(runFrame);
+}
+
+// Note: [💞] Ignore a discrepancy between file name and entity name
+/**
+ * Shared `IntersectionObserver` callbacks grouped by observed element.
+ *
+ * @private utility of the avatar rendering system
+ */
+const avatarVisibilityListeners = new Map();
+/**
+ * Lazily created shared `IntersectionObserver` used by avatar canvases.
+ *
+ * @private utility of the avatar rendering system
+ */
+let avatarVisibilityObserver = null;
+/**
+ * Observes one avatar element and notifies the caller when it enters or leaves the viewport.
+ *
+ * @param element Observed avatar element.
+ * @param avatarVisibilityListener Listener notified with the current visibility state.
+ * @returns Cleanup function that stops observing the element.
+ *
+ * @private utility of the avatar rendering system
+ */
+function observeAvatarVisibility(element, avatarVisibilityListener) {
+    if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') {
+        avatarVisibilityListener(true);
+        return () => undefined;
+    }
+    const observer = getAvatarVisibilityObserver();
+    const elementListeners = avatarVisibilityListeners.get(element) || new Set();
+    elementListeners.add(avatarVisibilityListener);
+    avatarVisibilityListeners.set(element, elementListeners);
+    observer.observe(element);
+    return () => {
+        const currentElementListeners = avatarVisibilityListeners.get(element);
+        if (!currentElementListeners) {
+            return;
+        }
+        currentElementListeners.delete(avatarVisibilityListener);
+        if (currentElementListeners.size > 0) {
+            return;
+        }
+        avatarVisibilityListeners.delete(element);
+        observer.unobserve(element);
+    };
+}
+/**
+ * Creates the shared `IntersectionObserver` used by all avatar canvases.
+ *
+ * @returns Shared observer instance.
+ *
+ * @private utility of the avatar rendering system
+ */
+function getAvatarVisibilityObserver() {
+    if (avatarVisibilityObserver) {
+        return avatarVisibilityObserver;
+    }
+    avatarVisibilityObserver = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            const elementListeners = avatarVisibilityListeners.get(entry.target);
+            if (!elementListeners) {
+                continue;
+            }
+            const isVisible = entry.isIntersecting && entry.intersectionRatio > 0;
+            for (const avatarVisibilityListener of elementListeners) {
+                avatarVisibilityListener(isVisible);
+            }
+        }
+    });
+    return avatarVisibilityObserver;
+}
+
 // Note: [💞] Ignore a discrepancy between file name and entity name
 /**
  * Active avatar instances currently consuming the shared pointer tracker.
@@ -26092,6 +26236,18 @@ let avatarPointerTrackingConsumerCount = 0;
  * @private utility of the avatar rendering system
  */
 let currentAvatarPointerSnapshot = null;
+/**
+ * Monotonic version incremented whenever the shared pointer snapshot changes.
+ *
+ * @private utility of the avatar rendering system
+ */
+let currentAvatarPointerSnapshotVersion = 0;
+/**
+ * Monotonic version incremented whenever scrolling or resizing may invalidate cached avatar bounds.
+ *
+ * @private utility of the avatar rendering system
+ */
+let currentAvatarViewportLayoutVersion = 0;
 /**
  * Cleanup function for the lazily attached global listeners.
  *
@@ -26129,6 +26285,26 @@ function retainAvatarPointerTracking() {
 function getAvatarPointerSnapshot() {
     return currentAvatarPointerSnapshot;
 }
+/**
+ * Returns the current pointer snapshot version.
+ *
+ * @returns Monotonic pointer snapshot version.
+ *
+ * @private utility of the avatar rendering system
+ */
+function getAvatarPointerSnapshotVersion() {
+    return currentAvatarPointerSnapshotVersion;
+}
+/**
+ * Returns the current viewport-layout version used to invalidate cached avatar bounds.
+ *
+ * @returns Monotonic viewport-layout version.
+ *
+ * @private utility of the avatar rendering system
+ */
+function getAvatarViewportLayoutVersion() {
+    return currentAvatarViewportLayoutVersion;
+}
 /**
  * Attaches the global pointer/touch listeners used by all live avatar canvases.
  *
@@ -26141,7 +26317,11 @@ function attachAvatarPointerTrackingListeners() {
         return () => undefined;
     }
     const clearPointerSnapshot = () => {
+        if (currentAvatarPointerSnapshot === null) {
+            return;
+        }
         currentAvatarPointerSnapshot = null;
+        currentAvatarPointerSnapshotVersion++;
     };
     const updatePointerSnapshot = (clientX, clientY, pointerType) => {
         currentAvatarPointerSnapshot = {
@@ -26150,6 +26330,10 @@ function attachAvatarPointerTrackingListeners() {
             isPointerActive: true,
             pointerType,
         };
+        currentAvatarPointerSnapshotVersion++;
+    };
+    const invalidateViewportLayout = () => {
+        currentAvatarViewportLayoutVersion++;
     };
     const handlePointerMove = (event) => {
         updatePointerSnapshot(event.clientX, event.clientY, normalizeAvatarPointerType(event.pointerType));
@@ -26185,6 +26369,8 @@ function attachAvatarPointerTrackingListeners() {
     window.addEventListener('touchmove', handleTouchEvent, { passive: true });
     window.addEventListener('touchend', clearPointerSnapshot, { passive: true });
     window.addEventListener('touchcancel', clearPointerSnapshot, { passive: true });
+    window.addEventListener('scroll', invalidateViewportLayout, { passive: true, capture: true });
+    window.addEventListener('resize', invalidateViewportLayout, { passive: true });
     return () => {
         window.removeEventListener('pointermove', handlePointerMove);
         window.removeEventListener('pointerdown', handlePointerDown);
@@ -26196,6 +26382,8 @@ function attachAvatarPointerTrackingListeners() {
         window.removeEventListener('touchmove', handleTouchEvent);
         window.removeEventListener('touchend', clearPointerSnapshot);
         window.removeEventListener('touchcancel', clearPointerSnapshot);
+        window.removeEventListener('scroll', invalidateViewportLayout, true);
+        window.removeEventListener('resize', invalidateViewportLayout);
     };
 }
 /**
@@ -28466,32 +28654,55 @@ function getAvatarVisualById(visualId) {
     return avatarVisual;
 }
 
+/**
+ * Resolves the stable avatar render inputs reused across multiple frames.
+ *
+ * @param options Avatar identity and visual selection.
+ * @returns Stable render data ready to be used by `renderAvatarVisual`.
+ *
+ * @private shared helper for canvas avatar rendering
+ */
+function resolveAvatarRenderDefinition(options) {
+    const avatarDefinition = normalizeAvatarDefinition(options.avatarDefinition);
+    const surface = options.surface || 'framed';
+    return {
+        avatarDefinition,
+        avatarVisual: getAvatarVisualById(options.visualId),
+        surface,
+        palette: createAvatarPalette(avatarDefinition, surface),
+        createRandom: createAvatarRandomFactory(avatarDefinition),
+    };
+}
 /**
  * Renders one deterministic avatar frame into the provided canvas.
  *
  * @param options Rendering options.
+ * @param resolvedAvatarRenderDefinition Optional stable render data reused between frames.
  *
  * @private shared helper for canvas avatar rendering
  */
-function renderAvatarVisual(options) {
-    const normalizedAvatarDefinition = normalizeAvatarDefinition(options.avatarDefinition);
-    const avatarVisual = getAvatarVisualById(options.visualId);
-    const surface = options.surface || 'framed';
+function renderAvatarVisual(options, resolvedAvatarRenderDefinition) {
+    const resolvedRenderDefinition = resolvedAvatarRenderDefinition ||
+        resolveAvatarRenderDefinition({
+            avatarDefinition: options.avatarDefinition,
+            visualId: options.visualId,
+            surface: options.surface,
+        });
     const context = options.canvas.getContext('2d');
     if (!context) {
         throw new Error('2D canvas rendering context is unavailable.');
     }
     prepareAvatarCanvas(options.canvas, context, options.size, options.devicePixelRatio || 1);
-    avatarVisual.render({
+    resolvedRenderDefinition.avatarVisual.render({
         canvas: options.canvas,
         context,
         size: options.size,
         devicePixelRatio: options.devicePixelRatio || 1,
         timeMs: options.timeMs,
-        avatarDefinition: normalizedAvatarDefinition,
-        palette: createAvatarPalette(normalizedAvatarDefinition, surface),
-        createRandom: createAvatarRandomFactory(normalizedAvatarDefinition),
-        surface,
+        avatarDefinition: resolvedRenderDefinition.avatarDefinition,
+        palette: resolvedRenderDefinition.palette,
+        createRandom: resolvedRenderDefinition.createRandom,
+        surface: resolvedRenderDefinition.surface,
         interaction: options.interaction || createIdleAvatarInteractionState(),
     });
 }
@@ -28502,6 +28713,14 @@ function renderAvatarVisual(options) {
  * @private helper of `<Avatar/>`
  */
 const AVATAR_CANVAS_RADIUS_RATIO = 0.18;
+/**
+ * Maximum time between layout-bound refreshes while pointer tracking is active.
+ *
+ * This keeps pointer-aware visuals aligned with chat/layout shifts without forcing a layout read every frame.
+ *
+ * @private helper of `<Avatar/>`
+ */
+const ACTIVE_POINTER_BOUNDS_REFRESH_MS = 120;
 /**
  * Canvas-based deterministic avatar component.
  *
@@ -28512,21 +28731,58 @@ function Avatar(props) {
     const canvasRef = useRef(null);
     const animationStartRef = useRef(null);
     const interactionRuntimeStateRef = useRef(createAvatarInteractionRuntimeState());
+    const avatarBoundsRef = useRef(null);
+    const lastResolvedPointerVersionRef = useRef(-1);
+    const lastResolvedViewportLayoutVersionRef = useRef(-1);
+    const lastAvatarBoundsRefreshAtRef = useRef(0);
     const avatarColorsKey = avatarDefinition.colors.join('|');
-    const normalizedAvatarDefinition = useMemo(() => normalizeAvatarDefinition(avatarDefinition), [avatarDefinition.agentHash, avatarDefinition.agentName, avatarColorsKey]);
-    const avatarDefinitionKey = useMemo(() => createAvatarDefinitionKey(normalizedAvatarDefinition), [normalizedAvatarDefinition.agentHash, normalizedAvatarDefinition.agentName, normalizedAvatarDefinition.colors.join('|')]);
-    const avatarVisual = useMemo(() => getAvatarVisualById(visualId), [visualId]);
+    const resolvedAvatarRenderDefinition = useMemo(() => resolveAvatarRenderDefinition({
+        avatarDefinition,
+        visualId,
+        surface,
+    }), [avatarDefinition.agentHash, avatarDefinition.agentName, avatarColorsKey, surface, visualId]);
+    const avatarDefinitionKey = useMemo(() => createAvatarDefinitionKey(resolvedAvatarRenderDefinition.avatarDefinition), [
+        resolvedAvatarRenderDefinition.avatarDefinition.agentHash,
+        resolvedAvatarRenderDefinition.avatarDefinition.agentName,
+        resolvedAvatarRenderDefinition.avatarDefinition.colors.join('|'),
+    ]);
+    const [isVisible, setIsVisible] = useState(true);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            throw new Error('Avatar canvas is not mounted.');
+        }
+        return observeAvatarVisibility(canvas, setIsVisible);
+    }, []);
     useEffect(() => {
         interactionRuntimeStateRef.current = createAvatarInteractionRuntimeState();
-    }, [avatarDefinitionKey, visualId]);
+        avatarBoundsRef.current = null;
+        lastResolvedPointerVersionRef.current = -1;
+        lastResolvedViewportLayoutVersionRef.current = -1;
+        lastAvatarBoundsRefreshAtRef.current = 0;
+    }, [avatarDefinitionKey, isVisible, visualId]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            avatarBoundsRef.current = null;
+        });
+        resizeObserver.observe(canvas);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
     useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) {
             throw new Error('Avatar canvas is not mounted.');
         }
+        const avatarVisual = resolvedAvatarRenderDefinition.avatarVisual;
         const isDynamicAvatar = avatarVisual.isAnimated || avatarVisual.supportsPointerTracking === true;
-        const releasePointerTracking = avatarVisual.supportsPointerTracking ? retainAvatarPointerTracking() : null;
-        let animationFrameId = null;
+        const shouldTrackPointer = avatarVisual.supportsPointerTracking === true && isVisible;
+        const releasePointerTracking = shouldTrackPointer ? retainAvatarPointerTracking() : null;
         if (animationStartRef.current === null) {
             animationStartRef.current = performance.now();
         }
@@ -28534,7 +28790,18 @@ function Avatar(props) {
             const pointerSnapshot = avatarVisual.supportsPointerTracking ? getAvatarPointerSnapshot() : null;
             let interactionState = createIdleAvatarInteractionState();
             if (avatarVisual.supportsPointerTracking && pointerSnapshot) {
-                interactionRuntimeStateRef.current = stepAvatarInteractionRuntimeState(interactionRuntimeStateRef.current, resolveAvatarPointerTarget(canvas.getBoundingClientRect(), pointerSnapshot), now);
+                const pointerSnapshotVersion = getAvatarPointerSnapshotVersion();
+                const viewportLayoutVersion = getAvatarViewportLayoutVersion();
+                if (avatarBoundsRef.current === null ||
+                    lastResolvedPointerVersionRef.current !== pointerSnapshotVersion ||
+                    lastResolvedViewportLayoutVersionRef.current !== viewportLayoutVersion ||
+                    now - lastAvatarBoundsRefreshAtRef.current >= ACTIVE_POINTER_BOUNDS_REFRESH_MS) {
+                    avatarBoundsRef.current = canvas.getBoundingClientRect();
+                    lastResolvedPointerVersionRef.current = pointerSnapshotVersion;
+                    lastResolvedViewportLayoutVersionRef.current = viewportLayoutVersion;
+                    lastAvatarBoundsRefreshAtRef.current = now;
+                }
+                interactionRuntimeStateRef.current = stepAvatarInteractionRuntimeState(interactionRuntimeStateRef.current, resolveAvatarPointerTarget(avatarBoundsRef.current, pointerSnapshot), now);
                 interactionState = interactionRuntimeStateRef.current;
             }
             else if (avatarVisual.supportsPointerTracking) {
@@ -28543,35 +28810,35 @@ function Avatar(props) {
             }
             renderAvatarVisual({
                 canvas,
-                avatarDefinition: normalizedAvatarDefinition,
+                avatarDefinition: resolvedAvatarRenderDefinition.avatarDefinition,
                 visualId,
                 surface,
                 size,
                 timeMs: now - animationStartRef.current,
                 devicePixelRatio: window.devicePixelRatio || 1,
                 interaction: interactionState,
-            });
-            if (isDynamicAvatar) {
-                animationFrameId = window.requestAnimationFrame(renderFrame);
-            }
+            }, resolvedAvatarRenderDefinition);
         };
         renderFrame(performance.now());
+        if (!isDynamicAvatar || !isVisible) {
+            return () => {
+                releasePointerTracking === null || releasePointerTracking === void 0 ? void 0 : releasePointerTracking();
+            };
+        }
+        const releaseAnimationListener = retainAvatarAnimationListener(renderFrame);
         return () => {
-            if (animationFrameId !== null) {
-                window.cancelAnimationFrame(animationFrameId);
-            }
+            releaseAnimationListener();
             releasePointerTracking === null || releasePointerTracking === void 0 ? void 0 : releasePointerTracking();
         };
     }, [
         avatarDefinitionKey,
-        avatarVisual.isAnimated,
-        avatarVisual.supportsPointerTracking,
-        normalizedAvatarDefinition,
+        isVisible,
+        resolvedAvatarRenderDefinition,
         size,
         surface,
         visualId,
     ]);
-    return (jsx("canvas", { ref: canvasRef, title: title || `${normalizedAvatarDefinition.agentName} avatar`, className: className, style: {
+    return (jsx("canvas", { ref: canvasRef, title: title || `${resolvedAvatarRenderDefinition.avatarDefinition.agentName} avatar`, className: className, style: {
             width: size,
             height: size,
             display: 'block',
@@ -49543,12 +49810,6 @@ function TeamToolCallModalContent(options) {
             });
         }
     }
-    const staticConversationDelayConfig = {
-        ...FAST_FLOW,
-        beforeFirstMessage: 0,
-        // Show the full internal exchange immediately so the modal never opens as a blank panel.
-        showIntermediateMessages: messages.length,
-    };
     const agentName = ((_c = (_b = teamResult.conversation) === null || _b === void 0 ? void 0 : _b.find((entry) => entry.sender === 'AGENT' || entry.role === 'AGENT')) === null || _c === void 0 ? void 0 : _c.name) || 'Agent';
     const teammateConversationName = ((_e = (_d = teamResult.conversation) === null || _d === void 0 ? void 0 : _d.find((entry) => entry.sender === 'TEAMMATE' || entry.role === 'TEAMMATE')) === null || _e === void 0 ? void 0 : _e.name) || '';
     const teammateProfile = teammateUrl ? teamProfiles[teammateUrl] : undefined;
@@ -49585,7 +49846,12 @@ function TeamToolCallModalContent(options) {
             avatarSrc: resolvedTeammateAvatar || undefined,
         },
     ];
-    return (jsxs(Fragment, { children: [jsx("div", { className: classNames(styles$5.searchModalHeader, styles$5.teamModalHeader), children: jsxs("div", { className: styles$5.teamHeaderParticipants, children: [jsx(TeamHeaderProfile, { label: resolvedAgentLabel, avatarSrc: resolvedAgentAvatar, avatarDefinition: resolvedAgentAvatarDefinition, avatarVisualId: resolvedAgentAvatarVisualId, fallbackColor: resolvedAgentHeaderColor }), jsx("span", { className: styles$5.teamHeaderDivider, children: "talking with" }), jsx(TeamHeaderProfile, { label: resolvedTeammateLabel, avatarSrc: resolvedTeammateAvatar, fallbackColor: "#0ea5e9", href: teammateLink })] }) }), jsxs("div", { className: styles$5.searchModalContent, children: [messages.length > 0 ? (jsx("div", { className: styles$5.teamChatContainer, children: jsx(MockedChat, { title: `Chat between ${resolvedAgentLabel} and ${resolvedTeammateLabel}`, messages: messages, participants: participants, isResettable: false, isPausable: false, isSaveButtonEnabled: false, isCopyButtonEnabled: false, visual: "STANDALONE", delayConfig: staticConversationDelayConfig }) })) : (jsx("div", { className: styles$5.noResults, children: "No teammate conversation available." })), (hasTeamToolCalls || hasTeamCitations) && (jsxs("div", { className: styles$5.teamToolCallSection, children: [hasTeamToolCalls && (jsxs("div", { className: styles$5.teamToolCallGroup, children: [jsx("div", { className: styles$5.teamToolCallHeading, children: "Actions" }), jsx("div", { className: styles$5.teamToolCallChips, children: teamToolCalls.map((toolCallEntry, index) => {
+    return (jsxs(Fragment, { children: [jsx("div", { className: classNames(styles$5.searchModalHeader, styles$5.teamModalHeader), children: jsxs("div", { className: styles$5.teamHeaderParticipants, children: [jsx(TeamHeaderProfile, { label: resolvedAgentLabel, avatarSrc: resolvedAgentAvatar, avatarDefinition: resolvedAgentAvatarDefinition, avatarVisualId: resolvedAgentAvatarVisualId, fallbackColor: resolvedAgentHeaderColor }), jsx("span", { className: styles$5.teamHeaderDivider, children: "talking with" }), jsx(TeamHeaderProfile, { label: resolvedTeammateLabel, avatarSrc: resolvedTeammateAvatar, fallbackColor: "#0ea5e9", href: teammateLink })] }) }), jsxs("div", { className: styles$5.searchModalContent, children: [messages.length > 0 ? (jsx("div", { className: styles$5.teamChatContainer, children: jsx(MockedChat, { title: `Chat between ${resolvedAgentLabel} and ${resolvedTeammateLabel}`, messages: messages, participants: participants, isResettable: false, isPausable: false, isSaveButtonEnabled: false, isCopyButtonEnabled: false, layout: "STANDALONE", delayConfig: {
+                                // Note+TODO: For some strange reason, <MockedChat/> is not running and stays static on the initial frame, so doing this hack to force it to show the entire chat at once. Need to investigate why the animation is not running as expected and then just use `delayConfig={FAST_FLOW}`
+                                ...FAST_FLOW,
+                                beforeFirstMessage: 0,
+                                showIntermediateMessages: messages.length,
+                            }, visualMode: "BUBBLE_MODE" }) })) : (jsx("div", { className: styles$5.noResults, children: "No teammate conversation available." })), (hasTeamToolCalls || hasTeamCitations) && (jsxs("div", { className: styles$5.teamToolCallSection, children: [hasTeamToolCalls && (jsxs("div", { className: styles$5.teamToolCallGroup, children: [jsx("div", { className: styles$5.teamToolCallHeading, children: "Actions" }), jsx("div", { className: styles$5.teamToolCallChips, children: teamToolCalls.map((toolCallEntry, index) => {
                                             const chipletInfo = getToolCallChipletInfo(toolCallEntry.toolCall, undefined, toolTitles);
                                             const chipletText = buildToolCallChipText(chipletInfo);
                                             return (jsxs("button", { className: styles$5.completedToolCall, onClick: () => {
@@ -50524,7 +50790,7 @@ function hasChatActions(postprocessedMessages, { onReset, newChatButtonHref, onU
  * @public exported from `@promptbook/components`
  */
 function Chat(props) {
-    const { title = 'Chat', messages, onChange, onMessage, onActionButton, onQuickMessageButton, onReplyToMessage, onCancelReply, onReset, resetRequiresConfirmation = true, newChatButtonHref, onFeedback, feedbackMode = 'stars', feedbackTranslations, timingTranslations, onFileUpload, chatLocale, speechRecognition, placeholderMessageContent, defaultMessage, enterBehavior, resolveEnterBehavior, children, className, style, isAiTextHumanizedAndPromptbookified = true, isVoiceCalling = false, isFocusedOnLoad, participants = [], canReplyToMessage, replyingToMessage, extraActions, actionsContainer, saveFormats, isSaveButtonEnabled = true, isCopyButtonEnabled = true, buttonColor: buttonColorRaw, onUseTemplate, onCreateAgent, toolTitles, teammates, teamAgentProfiles, visual, visualMode = 'ARTICLE_MODE', effectConfigs, soundSystem, speechRecognitionLanguage, isSpeechPlaybackEnabled = true, elevenLabsVoiceId, chatUiTranslations, } = props;
+    const { title = 'Chat', messages, onChange, onMessage, onActionButton, onQuickMessageButton, onReplyToMessage, onCancelReply, onReset, resetRequiresConfirmation = true, newChatButtonHref, onFeedback, feedbackMode = 'stars', feedbackTranslations, timingTranslations, onFileUpload, chatLocale, speechRecognition, placeholderMessageContent, defaultMessage, enterBehavior, resolveEnterBehavior, children, className, style, isAiTextHumanizedAndPromptbookified = true, isVoiceCalling = false, isFocusedOnLoad, participants = [], canReplyToMessage, replyingToMessage, extraActions, actionsContainer, saveFormats, isSaveButtonEnabled = true, isCopyButtonEnabled = true, buttonColor: buttonColorRaw, onUseTemplate, onCreateAgent, toolTitles, teammates, teamAgentProfiles, layout, visualMode = 'ARTICLE_MODE', effectConfigs, soundSystem, speechRecognitionLanguage, isSpeechPlaybackEnabled = true, elevenLabsVoiceId, chatUiTranslations, } = props;
     const buttonColor = useMemo(() => Color.from(buttonColorRaw || '#0066cc'), [buttonColorRaw]);
     const agentParticipant = useMemo(() => participants.find((participant) => participant.name === 'AGENT'), [participants]);
     const postprocessedMessages = useChatPostprocessedMessages({
@@ -50565,11 +50831,11 @@ function Chat(props) {
         extraActions,
         isSaveButtonEnabled,
     });
-    const isConstrainedArticleMode = visualMode === 'ARTICLE_MODE' && visual === 'FULL_PAGE';
+    const isConstrainedArticleMode = visualMode === 'ARTICLE_MODE' && layout === 'FULL_PAGE';
     useChatCompleteNotification(messages, soundSystem);
     return (jsxs(Fragment, { children: [feedbackStatus && (jsx("div", { className: classNames(styles$5.feedbackStatus, feedbackStatus.variant === 'success'
                     ? styles$5.feedbackStatusSuccess
-                    : styles$5.feedbackStatusError), "aria-live": "polite", role: "status", children: feedbackStatus.message })), effectConfigs && effectConfigs.length > 0 && (jsx(ChatEffectsSystem, { messages: postprocessedMessages, effectConfigs: effectConfigs, soundSystem: soundSystem })), jsx("div", { className: classNames(className, styles$5.Chat, visual === 'STANDALONE' && styles$5.standaloneVisual, visual === 'FULL_PAGE' && styles$5.fullPageVisual, isConstrainedArticleMode && styles$5.constrainedArticleVisual, getChatCssClassName('Chat'), chatCssClassNames.chat), style, children: jsxs("div", { className: classNames(className, styles$5.chatMainFlow, getChatCssClassName('chatMainFlow'), chatCssClassNames.chatMainFlow), children: [children && jsx("div", { className: classNames(styles$5.chatChildren), children: children }), shouldShowScrollToBottom && (jsx("div", { className: styles$5.scrollToBottomContainer, children: jsxs("div", { className: styles$5.scrollToBottomWrapper, children: [jsx(SolidArrowButton, { "data-button-type": "custom", direction: "down", iconSize: 33, className: classNames(styles$5.scrollToBottom, scrollToBottomCssClassName), onClick: handleButtonClick(() => scrollToBottom()), "aria-label": ariaLabel, title: ariaLabel }), badgeLabel && (jsx("span", { className: styles$5.scrollToBottomBadge, "aria-live": "polite", role: "status", children: badgeLabel }))] }) })), isVoiceCalling && (jsx("div", { className: styles$5.voiceCallIndicatorBar, children: jsxs("div", { className: styles$5.voiceCallIndicator, children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }), jsx("span", { children: "Voice call active" }), jsx("div", { className: styles$5.voiceCallPulse })] }) })), jsx(ChatActionsBar, { actionsRef: actionsRef, actionsContainer: actionsContainer, messages: postprocessedMessages, participants: participants, title: title, onReset: onReset, resetRequiresConfirmation: resetRequiresConfirmation, newChatButtonHref: newChatButtonHref, onUseTemplate: onUseTemplate, extraActions: extraActions, saveFormats: saveFormats, isSaveButtonEnabled: isSaveButtonEnabled, shouldFadeActions: shouldFadeActions, shouldDisableActions: shouldDisableActions, chatUiTranslations: chatUiTranslations, onButtonClick: handleButtonClick }), jsx(ChatMessageList, { messages: postprocessedMessages, participants: participants, expandedMessageId: expandedMessageId, messageRatings: messageRatings, setExpandedMessageId: setExpandedMessageId, handleRating: handleRating, mode: mode, isCopyButtonEnabled: isCopyButtonEnabled, isFeedbackEnabled: isFeedbackEnabled, feedbackMode: feedbackMode, feedbackTranslations: feedbackTranslations, timingTranslations: timingTranslations, chatLocale: chatLocale, onCopy: handleCopy, onMessage: onMessage, onActionButton: onActionButton, onQuickMessageButton: onQuickMessageButton, onReplyToMessage: onReplyToMessage, canReplyToMessage: canReplyToMessage, onCreateAgent: onCreateAgent, toolTitles: toolTitles, teammates: teammates, teamAgentProfiles: teamAgentProfiles, visualMode: visualMode, soundSystem: soundSystem, onToolCallClick: openToolCall, onCitationClick: openCitation, setChatMessagesElement: setChatMessagesElement, onScroll: handleChatScroll, isSpeechPlaybackEnabled: isSpeechPlaybackEnabled, elevenLabsVoiceId: elevenLabsVoiceId, chatUiTranslations: chatUiTranslations, chatMessagesClassName: classNames(isConstrainedArticleMode && styles$5.articleModeChatMessages, getChatCssClassName('chatMessages'), chatCssClassNames.chatMessages), hasActions: hasActions }), onMessage && (jsx(ChatInputArea, { onMessage: onMessage, onChange: onChange, onFileUpload: onFileUpload, speechRecognition: speechRecognition, speechRecognitionLanguage: speechRecognitionLanguage, replyingToMessage: replyingToMessage, onCancelReply: onCancelReply, defaultMessage: defaultMessage, enterBehavior: enterBehavior, resolveEnterBehavior: resolveEnterBehavior, placeholderMessageContent: placeholderMessageContent || (chatUiTranslations === null || chatUiTranslations === void 0 ? void 0 : chatUiTranslations.inputPlaceholder), isFocusedOnLoad: isFocusedOnLoad, isMobile: isMobile, isVoiceCalling: isVoiceCalling, participants: participants, buttonColor: buttonColor, soundSystem: soundSystem, onButtonClick: handleButtonClick, chatUiTranslations: chatUiTranslations, chatInputClassName: classNames(isConstrainedArticleMode && styles$5.articleModeChatInput, getChatCssClassName('chatInput'), chatCssClassNames.chatInput) }))] }) }), jsx(ChatToolCallModal, { isOpen: toolCallModalOpen, toolCall: selectedToolCall, toolCallIdentity: selectedToolCallIdentity, onClose: closeToolCallModal, toolTitles: toolTitles, agentParticipant: agentParticipant, buttonColor: buttonColor, teamAgentProfiles: teamAgentProfiles, chatUiTranslations: chatUiTranslations, locale: chatLocale, availableTools: selectedMessageAvailableTools }), jsx(ChatCitationModal, { isOpen: citationModalOpen, citation: selectedCitation, participants: participants, soundSystem: soundSystem, onClose: closeCitationModal }), jsx(ChatRatingModal, { isOpen: ratingModalOpen, selectedMessage: selectedMessage, postprocessedMessages: postprocessedMessages, messages: messages, hoveredRating: hoveredRating, messageRatings: messageRatings, textRating: textRating, feedbackMode: feedbackMode, feedbackTranslations: feedbackTranslations, mode: mode, isMobile: isMobile, onClose: () => setRatingModalOpen(false), setHoveredRating: setHoveredRating, setMessageRatings: setMessageRatings, setSelectedMessage: setSelectedMessage, setTextRating: setTextRating, submitRating: submitRating })] }));
+                    : styles$5.feedbackStatusError), "aria-live": "polite", role: "status", children: feedbackStatus.message })), effectConfigs && effectConfigs.length > 0 && (jsx(ChatEffectsSystem, { messages: postprocessedMessages, effectConfigs: effectConfigs, soundSystem: soundSystem })), jsx("div", { className: classNames(className, styles$5.Chat, layout === 'STANDALONE' && styles$5.standaloneVisual, layout === 'FULL_PAGE' && styles$5.fullPageVisual, isConstrainedArticleMode && styles$5.constrainedArticleVisual, getChatCssClassName('Chat'), chatCssClassNames.chat), style, children: jsxs("div", { className: classNames(className, styles$5.chatMainFlow, getChatCssClassName('chatMainFlow'), chatCssClassNames.chatMainFlow), children: [children && jsx("div", { className: classNames(styles$5.chatChildren), children: children }), shouldShowScrollToBottom && (jsx("div", { className: styles$5.scrollToBottomContainer, children: jsxs("div", { className: styles$5.scrollToBottomWrapper, children: [jsx(SolidArrowButton, { "data-button-type": "custom", direction: "down", iconSize: 33, className: classNames(styles$5.scrollToBottom, scrollToBottomCssClassName), onClick: handleButtonClick(() => scrollToBottom()), "aria-label": ariaLabel, title: ariaLabel }), badgeLabel && (jsx("span", { className: styles$5.scrollToBottomBadge, "aria-live": "polite", role: "status", children: badgeLabel }))] }) })), isVoiceCalling && (jsx("div", { className: styles$5.voiceCallIndicatorBar, children: jsxs("div", { className: styles$5.voiceCallIndicator, children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }), jsx("span", { children: "Voice call active" }), jsx("div", { className: styles$5.voiceCallPulse })] }) })), jsx(ChatActionsBar, { actionsRef: actionsRef, actionsContainer: actionsContainer, messages: postprocessedMessages, participants: participants, title: title, onReset: onReset, resetRequiresConfirmation: resetRequiresConfirmation, newChatButtonHref: newChatButtonHref, onUseTemplate: onUseTemplate, extraActions: extraActions, saveFormats: saveFormats, isSaveButtonEnabled: isSaveButtonEnabled, shouldFadeActions: shouldFadeActions, shouldDisableActions: shouldDisableActions, chatUiTranslations: chatUiTranslations, onButtonClick: handleButtonClick }), jsx(ChatMessageList, { messages: postprocessedMessages, participants: participants, expandedMessageId: expandedMessageId, messageRatings: messageRatings, setExpandedMessageId: setExpandedMessageId, handleRating: handleRating, mode: mode, isCopyButtonEnabled: isCopyButtonEnabled, isFeedbackEnabled: isFeedbackEnabled, feedbackMode: feedbackMode, feedbackTranslations: feedbackTranslations, timingTranslations: timingTranslations, chatLocale: chatLocale, onCopy: handleCopy, onMessage: onMessage, onActionButton: onActionButton, onQuickMessageButton: onQuickMessageButton, onReplyToMessage: onReplyToMessage, canReplyToMessage: canReplyToMessage, onCreateAgent: onCreateAgent, toolTitles: toolTitles, teammates: teammates, teamAgentProfiles: teamAgentProfiles, visualMode: visualMode, soundSystem: soundSystem, onToolCallClick: openToolCall, onCitationClick: openCitation, setChatMessagesElement: setChatMessagesElement, onScroll: handleChatScroll, isSpeechPlaybackEnabled: isSpeechPlaybackEnabled, elevenLabsVoiceId: elevenLabsVoiceId, chatUiTranslations: chatUiTranslations, chatMessagesClassName: classNames(isConstrainedArticleMode && styles$5.articleModeChatMessages, getChatCssClassName('chatMessages'), chatCssClassNames.chatMessages), hasActions: hasActions }), onMessage && (jsx(ChatInputArea, { onMessage: onMessage, onChange: onChange, onFileUpload: onFileUpload, speechRecognition: speechRecognition, speechRecognitionLanguage: speechRecognitionLanguage, replyingToMessage: replyingToMessage, onCancelReply: onCancelReply, defaultMessage: defaultMessage, enterBehavior: enterBehavior, resolveEnterBehavior: resolveEnterBehavior, placeholderMessageContent: placeholderMessageContent || (chatUiTranslations === null || chatUiTranslations === void 0 ? void 0 : chatUiTranslations.inputPlaceholder), isFocusedOnLoad: isFocusedOnLoad, isMobile: isMobile, isVoiceCalling: isVoiceCalling, participants: participants, buttonColor: buttonColor, soundSystem: soundSystem, onButtonClick: handleButtonClick, chatUiTranslations: chatUiTranslations, chatInputClassName: classNames(isConstrainedArticleMode && styles$5.articleModeChatInput, getChatCssClassName('chatInput'), chatCssClassNames.chatInput) }))] }) }), jsx(ChatToolCallModal, { isOpen: toolCallModalOpen, toolCall: selectedToolCall, toolCallIdentity: selectedToolCallIdentity, onClose: closeToolCallModal, toolTitles: toolTitles, agentParticipant: agentParticipant, buttonColor: buttonColor, teamAgentProfiles: teamAgentProfiles, chatUiTranslations: chatUiTranslations, locale: chatLocale, availableTools: selectedMessageAvailableTools }), jsx(ChatCitationModal, { isOpen: citationModalOpen, citation: selectedCitation, participants: participants, soundSystem: soundSystem, onClose: closeCitationModal }), jsx(ChatRatingModal, { isOpen: ratingModalOpen, selectedMessage: selectedMessage, postprocessedMessages: postprocessedMessages, messages: messages, hoveredRating: hoveredRating, messageRatings: messageRatings, textRating: textRating, feedbackMode: feedbackMode, feedbackTranslations: feedbackTranslations, mode: mode, isMobile: isMobile, onClose: () => setRatingModalOpen(false), setHoveredRating: setHoveredRating, setMessageRatings: setMessageRatings, setSelectedMessage: setSelectedMessage, setTextRating: setTextRating, submitRating: submitRating })] }));
 }
 
 /**
@@ -51875,7 +52141,7 @@ function PromptbookAgentSeamlessIntegration(props) {
                                 : styles.PromptbookAgentSeamlessIntegrationStatusPending) }), jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationText, children: [jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLabel, children: "Chat" }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationHint, children: displayName })] }), jsx("span", { className: styles.PromptbookAgentSeamlessIntegrationScreenReaderOnly, children: connectionStatusText })] }), isOpen && (jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationWindow, id: windowId, children: [jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationHeader, style: { backgroundColor: color }, ref: setHeaderElement, children: [jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationTitleWrap, children: [jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationTitle, children: displayName }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationSubtitle, children: connectionStatusText })] }), isIframeUsed && (jsx("button", { className: styles.PromptbookAgentSeamlessIntegrationClose, onClick: () => setOpen(false), title: "Close", "aria-label": "Close chat", children: jsx(CloseIcon, {}) }))] }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationContent, children: isIframeUsed ? (jsxs(Fragment, { children: [!isIframeLoaded && (jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationLoading, children: [jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingShimmer }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingSpinner }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingTitle, children: "Preparing your chat" }), jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingText, children: ["Connecting to ", displayName, "..."] })] })), jsx("iframe", { src: agentUrl + '/chat?headless', className: styles.PromptbookAgentSeamlessIntegrationIframe, style: { opacity: isIframeLoaded ? 1 : 0 }, tabIndex: -1, onLoad: () => {
                                         setIsIframeLoaded(true);
                                         setIsChatConnected(true);
-                                    } })] })) : agent ? (jsx(AgentChat, { agent: agent, actionsContainer: headerElement, isFocusedOnLoad: isFocusedOnLoad, extraActions: jsx("button", { className: styles.PromptbookAgentSeamlessIntegrationClose, onClick: () => setOpen(false), title: "Close", "aria-label": "Close chat", children: jsx(CloseIcon, {}) }), visual: "STANDALONE" })) : error ? (jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationError, children: [jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationErrorTitle, children: "Failed to connect to the agent" }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationErrorMessage, children: error.message })] })) : (jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationLoading, children: [jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingShimmer }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingSpinner }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingTitle, children: "Preparing your chat" }), jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingText, children: ["Connecting to ", displayName, "..."] })] })) })] }))] }));
+                                    } })] })) : agent ? (jsx(AgentChat, { agent: agent, actionsContainer: headerElement, isFocusedOnLoad: isFocusedOnLoad, extraActions: jsx("button", { className: styles.PromptbookAgentSeamlessIntegrationClose, onClick: () => setOpen(false), title: "Close", "aria-label": "Close chat", children: jsx(CloseIcon, {}) }), layout: "STANDALONE" })) : error ? (jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationError, children: [jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationErrorTitle, children: "Failed to connect to the agent" }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationErrorMessage, children: error.message })] })) : (jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationLoading, children: [jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingShimmer }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingSpinner }), jsx("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingTitle, children: "Preparing your chat" }), jsxs("div", { className: styles.PromptbookAgentSeamlessIntegrationLoadingText, children: ["Connecting to ", displayName, "..."] })] })) })] }))] }));
 }
 
 /**