@lowdefy/blocks-antd-x 6.1.0 → 7.1.0

package/dist/blocks/AgentChat/DrawerLauncher.js

@@ -0,0 +1,32 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { FloatButton } from 'antd';
+// Shared by the loading fallback and the drawer, so the button painted before the
+// implementation loads is the same one that replaces it.
+function DrawerLauncher({ blockId, config, Icon, onClick }) {
+    return /*#__PURE__*/ React.createElement(FloatButton, {
+        icon: /*#__PURE__*/ React.createElement(Icon, {
+            blockId: `${blockId}_launcher_icon`,
+            properties: {
+                name: 'message',
+                title: ''
+            }
+        }),
+        onClick: onClick,
+        tooltip: config?.title ?? 'Chat'
+    });
+}
+export default DrawerLauncher;

package/dist/blocks/AgentChat/DrawerWrapper.js

@@ -13,14 +13,15 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState } from 'react';
-import { Drawer, FloatButton } from 'antd';
-import { MessageOutlined } from '@ant-design/icons';
-function DrawerWrapper({ config, children }) {
-    const [open, setOpen] = useState(false);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(FloatButton, {
-        icon: /*#__PURE__*/ React.createElement(MessageOutlined, null),
-        onClick: ()=>setOpen(true),
-        tooltip: config?.title ?? 'Chat'
+import { Drawer } from 'antd';
+import DrawerLauncher from './DrawerLauncher.js';
+function DrawerWrapper({ blockId, config, defaultOpen, children, Icon }) {
+    const [open, setOpen] = useState(defaultOpen);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(DrawerLauncher, {
+        blockId: blockId,
+        config: config,
+        Icon: Icon,
+        onClick: ()=>setOpen(true)
     }), /*#__PURE__*/ React.createElement(Drawer, {
         title: config?.title ?? 'Chat',
         placement: config?.placement ?? 'right',

package/dist/blocks/AgentChat/LowdefyChatTransport.js

@@ -13,10 +13,10 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import { DefaultChatTransport } from 'ai';
-function createLowdefyChatTransport({ pageId, agentId, conversationId, urlQuery, sharedStateRef }) {
+function createLowdefyChatTransport({ basePath = '', pageId, agentId, conversationId, urlQuery, pathParams, sharedStateRef, sharedStateReadOnlyRef }) {
     // The server route takes the last path segment as the agentId — module-scoped
     // agent ids contain '/', so encode the agentId into a single segment.
-    const base = `/api/agent/${pageId}/${encodeURIComponent(agentId)}`;
+    const base = `${basePath}/api/agent/${pageId}/${encodeURIComponent(agentId)}`;
     const api = conversationId ? `${base}?conversationId=${encodeURIComponent(conversationId)}` : base;
     return new DefaultChatTransport({
         api,
@@ -27,8 +27,14 @@ function createLowdefyChatTransport({ pageId, agentId, conversationId, urlQuery,
                 ...urlQuery ? {
                     urlQuery
                 } : {},
+                ...pathParams ? {
+                    pathParams
+                } : {},
                 ...sharedState ? {
                     sharedState
+                } : {},
+                ...sharedStateReadOnlyRef?.current ? {
+                    sharedStateReadOnly: true
                 } : {}
             };
         }

package/dist/blocks/AgentChat/MessageBubble.js

@@ -12,31 +12,14 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ import React, { useMemo } from 'react';
+*/ import React, { Suspense, lazy, useEffect, useMemo, useState } from 'react';
 import Markdown from '@ant-design/x-markdown';
-import { Actions, CodeHighlighter, FileCard, Mermaid, Sources, ThoughtChain, Think } from '@ant-design/x';
-import { DeleteOutlined, ReloadOutlined, RobotOutlined } from '@ant-design/icons';
+import { Actions, FileCard, Sources, ThoughtChain, Think } from '@ant-design/x';
+import { getSafeHref } from '@lowdefy/block-utils';
 import { getFileCardType, getFileCardIcon, getFileName } from './fileCardUtils.js';
 import formatToolResult from './formatToolResult.js';
 import { getToolInfo, partCategory } from './messageParts.js';
 import ToolApproval from './ToolApproval.js';
-// Module-level singleton for the LaTeX marked extension.
-// Loaded once on first use — the Latex plugin from @ant-design/x-markdown
-// includes KaTeX CSS import and handles $...$ inline and $$...$$ display math.
-let latexConfig = null;
-function getLatexConfig() {
-    if (latexConfig) return latexConfig;
-    try {
-        // eslint-disable-next-line global-require
-        const Latex = require('@ant-design/x-markdown/plugins/Latex').default;
-        latexConfig = {
-            extensions: Latex()
-        };
-    } catch  {
-        latexConfig = {};
-    }
-    return latexConfig;
-}
 // Renders a code block as plain text without syntax highlighting or mermaid rendering.
 function PlainCodeBlock({ children, block, lang }) {
     if (!block) {
@@ -46,31 +29,97 @@ function PlainCodeBlock({ children, block, lang }) {
         className: lang ? `language-${lang}` : undefined
     }, children));
 }
+// Mermaid and the Prism highlighter are most of AgentChat's weight, and a plain reply
+// uses neither. Deep paths keep them out of the chunk that imports the @ant-design/x
+// barrel; they load the first time a message renders a fence that needs them. A chunk
+// that fails to load (a deploy replaced it) degrades to plain code, not a broken chat.
+function lazyCodeRenderer(load, name) {
+    return /*#__PURE__*/ lazy(()=>load().catch((error)=>{
+            console.warn(`AgentChat could not load ${name}; showing plain code.`, error);
+            return {
+                default: function PlainCode({ children, lang }) {
+                    return /*#__PURE__*/ React.createElement(PlainCodeBlock, {
+                        block: true,
+                        lang: lang
+                    }, children);
+                }
+            };
+        }));
+}
+const Mermaid = lazyCodeRenderer(()=>import('@ant-design/x/es/mermaid/index.js'), 'Mermaid');
+const CodeHighlighter = lazyCodeRenderer(()=>import('@ant-design/x/es/code-highlighter/index.js'), 'CodeHighlighter');
 // Renders code blocks with syntax highlighting via CodeHighlighter and
 // mermaid diagrams via the Mermaid component from @ant-design/x.
+// Each lazy renderer sits in its own Suspense, so a first load shows the plain code in
+// place rather than suspending the whole chat.
 function RichCodeBlock({ renderMermaid, codeHighlighter }) {
     return function CodeBlock({ children, block, lang }) {
         if (!block) {
             return /*#__PURE__*/ React.createElement("code", null, children);
         }
+        const plain = /*#__PURE__*/ React.createElement(PlainCodeBlock, {
+            block: true,
+            lang: lang
+        }, children);
         if (renderMermaid && lang === 'mermaid') {
             return /*#__PURE__*/ React.createElement("div", {
                 style: {
                     width: '100%'
                 }
-            }, /*#__PURE__*/ React.createElement(Mermaid, null, children));
+            }, /*#__PURE__*/ React.createElement(Suspense, {
+                fallback: plain
+            }, /*#__PURE__*/ React.createElement(Mermaid, null, children)));
         }
         if (codeHighlighter) {
-            return /*#__PURE__*/ React.createElement(CodeHighlighter, {
+            return /*#__PURE__*/ React.createElement(Suspense, {
+                fallback: plain
+            }, /*#__PURE__*/ React.createElement(CodeHighlighter, {
                 lang: lang,
                 prismLightMode: false
-            }, children);
+            }, children));
         }
-        return /*#__PURE__*/ React.createElement("pre", null, /*#__PURE__*/ React.createElement("code", {
-            className: lang ? `language-${lang}` : undefined
-        }, children));
+        return plain;
     };
 }
+// The LaTeX marked extension (KaTeX and its CSS) loads only for chats that set
+// messageDisplay.renderLatex. Markdown renders without it until it arrives, then re-renders
+// with it. One config object is shared so every bubble passes Markdown the same reference.
+let latexConfig = null;
+let latexConfigPromise = null;
+function loadLatexConfig() {
+    if (!latexConfigPromise) {
+        latexConfigPromise = import('@ant-design/x-markdown/plugins/Latex/index.js').then(({ default: Latex })=>{
+            latexConfig = {
+                extensions: Latex()
+            };
+            return latexConfig;
+        }, (error)=>{
+            // Cleared so a later chat mount tries again.
+            latexConfigPromise = null;
+            console.warn('AgentChat could not load LaTeX rendering; showing the source.', error);
+            return null;
+        });
+    }
+    return latexConfigPromise;
+}
+function useLatexConfig(renderLatex) {
+    const [loadedConfig, setLoadedConfig] = useState(latexConfig);
+    useEffect(()=>{
+        if (!renderLatex || loadedConfig) return undefined;
+        let mounted = true;
+        loadLatexConfig().then((config)=>{
+            if (mounted && config) setLoadedConfig(config);
+        });
+        return ()=>{
+            mounted = false;
+        };
+    }, [
+        renderLatex,
+        loadedConfig
+    ]);
+    if (!renderLatex) return undefined;
+    return loadedConfig ?? undefined;
+}
 function summarizeToolOutput(output, translate) {
     if (output === null || output === undefined) return translate('agent.toolResult.completedNoData');
     if (Array.isArray(output)) {
@@ -115,7 +164,8 @@ function linkText(children) {
 // new tab for the same reason. Both still report the click, so an app that handles
 // onLinkClick can show the target in place instead.
 function MarkdownLink({ Link, onLinkClick }) {
-    return function MarkdownAnchor({ href, children, ...props }) {
+    return function MarkdownAnchor({ href: rawHref, children, ...props }) {
+        const href = getSafeHref(rawHref);
         if (!href) return /*#__PURE__*/ React.createElement("span", props, children);
         const text = linkText(children);
         const handleClick = (domEvent)=>onLinkClick?.({
@@ -124,7 +174,7 @@ function MarkdownLink({ Link, onLinkClick }) {
                 domEvent
             });
         const external = /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith('//');
-        // A fragment cannot be expressed as a pageId link, so it keeps the anchor.
+        // A fragment moves within the document, which the router cannot do, so it keeps the anchor.
         const inApp = !external && href.startsWith('/') && !href.includes('#');
         if (!inApp || !Link) {
             return /*#__PURE__*/ React.createElement("a", {
@@ -135,14 +185,9 @@ function MarkdownLink({ Link, onLinkClick }) {
                 onClick: handleClick
             }, children);
         }
-        // `pageId`, not `href`: Link renders a plain anchor for href and url — its new-origin form —
-        // and only routes client-side for a pageId. Passing the path as href therefore went through
-        // Link and still reloaded the page, dropping the conversation this exists to preserve.
-        const [pathname, search = ''] = href.slice(1).split('?');
         return /*#__PURE__*/ React.createElement(Link, {
             ...props,
-            pageId: pathname,
-            urlQuery: Object.fromEntries(new URLSearchParams(search)),
+            url: href,
             onClick: handleClick
         }, children);
     };
@@ -157,7 +202,7 @@ function normalizeActions(actions) {
     }
     return actions ?? {};
 }
-function BubbleActions({ actions, textContent, messageId, onFeedback, feedbackValue, onRegenerate, onDelete, translate }) {
+function BubbleActions({ Icon, actions, textContent, messageId, onFeedback, feedbackValue, onRegenerate, onDelete, translate }) {
     const normalized = normalizeActions(actions);
     const items = [];
     if (normalized.copy) {
@@ -185,7 +230,13 @@ function BubbleActions({ actions, textContent, messageId, onFeedback, feedbackVa
     if (normalized.regenerate) {
         items.push({
             key: 'regenerate',
-            icon: /*#__PURE__*/ React.createElement(ReloadOutlined, null),
+            icon: /*#__PURE__*/ React.createElement(Icon, {
+                blockId: `${messageId}_regenerate_icon`,
+                properties: {
+                    name: 'refresh',
+                    title: ''
+                }
+            }),
             label: translate('agent.message.regenerate'),
             onItemClick: ()=>onRegenerate?.({
                     messageId
@@ -195,7 +246,13 @@ function BubbleActions({ actions, textContent, messageId, onFeedback, feedbackVa
     if (normalized.delete) {
         items.push({
             key: 'delete',
-            icon: /*#__PURE__*/ React.createElement(DeleteOutlined, null),
+            icon: /*#__PURE__*/ React.createElement(Icon, {
+                blockId: `${messageId}_delete_icon`,
+                properties: {
+                    name: 'delete',
+                    title: ''
+                }
+            }),
             label: translate('agent.message.delete'),
             danger: true,
             onItemClick: ()=>onDelete?.({
@@ -223,7 +280,7 @@ function SourcesDisplay({ sourceParts, config, translate }) {
         expandIconPosition: config?.sourcesDisplay?.expandIconPosition ?? 'end'
     });
 }
-function MessageBubble({ content, isStreaming, parts, config, addToolApprovalResponse, actions, messageId, onFeedback, feedbackValue, onLinkClick, Link, onRegenerate, onDelete, translate }) {
+function MessageBubble({ Icon, content, isStreaming, parts, config, addToolApprovalResponse, actions, messageId, onFeedback, feedbackValue, onLinkClick, Link, onRegenerate, onDelete, translate }) {
     const showThoughtChain = config?.showThoughtChain !== false;
     const showReasoning = config?.showReasoning !== false;
     const reasoningDisplay = config?.reasoningDisplay ?? 'interleaved';
@@ -231,7 +288,7 @@ function MessageBubble({ content, isStreaming, parts, config, addToolApprovalRes
     const renderMermaid = config?.renderMermaid !== false;
     const codeHighlighter = config?.codeHighlighter !== false;
     const renderLatex = config?.renderLatex ?? false;
-    const markdownConfig = renderLatex ? getLatexConfig() : undefined;
+    const markdownConfig = useLatexConfig(renderLatex);
     const markdownComponents = useMemo(()=>{
         const code = !renderMermaid && !codeHighlighter ? PlainCodeBlock : RichCodeBlock({
             renderMermaid,
@@ -266,6 +323,7 @@ function MessageBubble({ content, isStreaming, parts, config, addToolApprovalRes
             config: config,
             translate: translate
         }), showActions && /*#__PURE__*/ React.createElement(BubbleActions, {
+            Icon: Icon,
             actions: normalizedActions,
             textContent: content,
             messageId: messageId,
@@ -464,7 +522,13 @@ function MessageBubble({ content, isStreaming, parts, config, addToolApprovalRes
                         collapsible: true
                     } : {},
                     ...isSubAgent ? {
-                        icon: /*#__PURE__*/ React.createElement(RobotOutlined, null)
+                        icon: /*#__PURE__*/ React.createElement(Icon, {
+                            blockId: `${tool.toolCallId}_icon`,
+                            properties: {
+                                name: 'bot',
+                                title: ''
+                            }
+                        })
                     } : {},
                     ...status === 'loading' ? {
                         blink: true
@@ -539,6 +603,7 @@ function MessageBubble({ content, isStreaming, parts, config, addToolApprovalRes
         config: config,
         translate: translate
     }), showActions && /*#__PURE__*/ React.createElement(BubbleActions, {
+        Icon: Icon,
         actions: normalizedActions,
         textContent: allTextContent,
         messageId: messageId,

package/dist/blocks/AgentChat/MessageList.js

@@ -15,7 +15,6 @@
 */ import React from 'react';
 import { Bubble, FileCard } from '@ant-design/x';
 import { Avatar } from 'antd';
-import { RobotOutlined, UserOutlined } from '@ant-design/icons';
 import { getFileCardType, getFileCardIcon, getFileName } from './fileCardUtils.js';
 import { hasVisibleContent } from './messageParts.js';
 import MessageBubble from './MessageBubble.js';
@@ -56,7 +55,7 @@ function ThinkingBubbleContent({ bubbleId, config }) {
         label: label
     });
 }
-const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ messages, isStreaming, config, welcome, onWelcomePromptFill, addToolApprovalResponse, onFeedback, onLinkClick, Link, feedbackValues, onRegenerate, onDelete, onEditMessage, translate }, ref) {
+const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ Icon, messages, isStreaming, config, welcome, onWelcomePromptFill, addToolApprovalResponse, onFeedback, onLinkClick, Link, feedbackValues, onRegenerate, onDelete, onEditMessage, translate }, ref) {
     // Build a lookup map for message parts.
     // Bubble.List's contentRender callback only receives (content, info) where info.key is the
     // item key — it does not receive the full message object with its parts array. This map
@@ -156,7 +155,13 @@ const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ messag
                 shape: config?.roles?.user?.shape ?? 'round',
                 styles: config?.roles?.user?.styles,
                 classNames: config?.roles?.user?.classNames,
-                avatar: roleAvatar(config?.roles?.user, /*#__PURE__*/ React.createElement(UserOutlined, null)),
+                avatar: roleAvatar(config?.roles?.user, /*#__PURE__*/ React.createElement(Icon, {
+                    blockId: "agent_chat_user_avatar",
+                    properties: {
+                        name: 'user',
+                        title: ''
+                    }
+                })),
                 header: roleHeader(config?.roles?.user, 'agent.message.userHeader', translate),
                 editable: config?.editableMessages !== false ? {
                     onEditConfirm: (key, newContent)=>{
@@ -204,7 +209,13 @@ const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ messag
                 },
                 styles: config?.roles?.assistant?.styles,
                 classNames: config?.roles?.assistant?.classNames,
-                avatar: roleAvatar(config?.roles?.assistant, /*#__PURE__*/ React.createElement(RobotOutlined, null)),
+                avatar: roleAvatar(config?.roles?.assistant, /*#__PURE__*/ React.createElement(Icon, {
+                    blockId: "agent_chat_assistant_avatar",
+                    properties: {
+                        name: 'bot',
+                        title: ''
+                    }
+                })),
                 header: roleHeader(config?.roles?.assistant, 'agent.message.assistantHeader', translate),
                 typing: config?.roles?.assistant?.typing ? config.roles.assistant.typing : {
                     effect: 'fade-in'
@@ -212,6 +223,7 @@ const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ messag
                 contentRender: (content, info)=>{
                     const parts = partsMap.get(info.key);
                     return /*#__PURE__*/ React.createElement(MessageBubble, {
+                        Icon: Icon,
                         content: content,
                         isStreaming: isStreaming,
                         parts: parts,

package/dist/blocks/AgentChat/formatToolResult.js

@@ -13,6 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState } from 'react';
+import { getSafeHref } from '@lowdefy/block-utils';
 const URL_REGEX = /^https?:\/\/\S+$/;
 const ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2})/;
 function isUrl(value) {
@@ -52,7 +53,7 @@ function formatValue(value, depth, translate) {
     }
     if (isUrl(value)) {
         return /*#__PURE__*/ React.createElement("a", {
-            href: value,
+            href: getSafeHref(value),
             target: "_blank",
             rel: "noopener noreferrer",
             style: {

package/dist/blocks/AgentChat/meta.js

@@ -14,7 +14,22 @@
   limitations under the License.
 */ export default {
     category: 'display',
-    icons: [],
+    actions: [
+        'Request',
+        'SetState'
+    ],
+    operators: [
+        '_event'
+    ],
+    icons: [
+        'refresh',
+        'delete',
+        'bot',
+        'message',
+        'user',
+        'attach',
+        'close'
+    ],
     valueType: null,
     events: {
         onMessageComplete: 'Trigger when a message finishes streaming.',
@@ -39,6 +54,7 @@
         regenerate: 'Regenerate the last assistant message. Accepts optional args.messageId to regenerate a specific message.',
         setMessages: 'Replace the message list. Accepts args.messages array.',
         sendMessage: 'Send a message programmatically. Accepts args.text string.',
+        setInput: 'Fill the composer without sending. Accepts args.text string; anything else empties it.',
         clearMessages: 'Clear all messages from the chat.',
         deleteMessage: 'Delete a specific message. Accepts args.messageId string.',
         stop: 'Stop the current streaming response.',

package/dist/blocks/AgentChat/schema.json

@@ -191,9 +191,14 @@
       "description": "URL query parameters to send with each agent request. Available server-side in onFinish hook payload and via _payload operator in agent properties."
     },
     "sharedState": {
-      "description": "When set to a non-empty object, the object is sent to the agent each turn as read context and the agent can write to any top-level key via the update-page-state tool. Typically set to `{ _state: true }` to expose the whole page state, or a curated shape like `{ legal: _state.legal_name }`.",
+      "description": "When set to a non-empty object, the object is sent to the agent each turn as read context and the agent can write to any top-level key via the update-page-state tool (unless `sharedStateReadOnly` is true). Typically set to `{ _state: true }` to expose the whole page state, or a curated shape like `{ legal: _state.legal_name }`.",
       "type": "object"
     },
+    "sharedStateReadOnly": {
+      "type": "boolean",
+      "default": false,
+      "description": "When true, `sharedState` is sent to the agent as read-only context: the update-page-state tool is not offered, so the agent cannot write page state."
+    },
     "sender": {
       "type": "object",
       "properties": {
@@ -227,7 +232,7 @@
             },
             "uploadPolicyRequestId": {
               "type": "string",
-              "description": "Id of an upload-policy request (e.g. AwsS3PresignedPostPolicy, GcsSignedPostPolicy, AzureBlobUploadSas). When set, files are uploaded to storage and their URLs are sent to the LLM instead of base64 data."
+              "description": "Id of an upload-policy request (e.g. AwsS3PresignedPostPolicy, GcsSignedPostPolicy, AzureBlobUploadSas). When set, files are uploaded to storage and their URLs are sent to the LLM instead of base64 data. Each uploaded file part keeps its storage key as providerMetadata.lowdefy.key, which a tool endpoint reads with _agent: files."
             },
             "downloadPolicyRequestId": {
               "type": "string",

package/dist/blocks/AgentChat/tests/AgentChat.e2e.yaml

@@ -337,3 +337,22 @@ blocks:
           parts:
             - type: text
               text: Loaded answer.
+
+  # Both post to the agent route, which the spec intercepts to read the request body.
+  - id: chat_shared_read_only
+    type: AgentChat
+    properties:
+      agentId: test_agent
+      height: 200
+      conversationId: shared-read-only
+      sharedStateReadOnly: true
+      sharedState:
+        space: PEL
+  - id: chat_shared_writable
+    type: AgentChat
+    properties:
+      agentId: test_agent
+      height: 200
+      conversationId: shared-writable
+      sharedState:
+        space: PEL

package/dist/blocks/AgentConversations/AgentConversations.js

@@ -14,9 +14,24 @@
   limitations under the License.
 */ import React from 'react';
 import { Conversations } from '@ant-design/x';
-import { Button } from 'antd';
+import { Button, Spin } from 'antd';
 function AgentConversations({ blockId, methods, properties }) {
-    const { items, activeKey, menu, creation, groupable, width } = properties;
+    const { items, activeKey, loadingKey, menu, creation, groupable, width } = properties;
+    // Conversations has no loading state of its own, so a loading row swaps its icon slot
+    // for a spinner. aria-busy and data-loading reach the <li> through the item's DOM attrs.
+    const conversationItems = (items ?? []).map((item)=>{
+        if (item.loading !== true && item.key !== loadingKey) {
+            return item;
+        }
+        return {
+            ...item,
+            icon: /*#__PURE__*/ React.createElement(Spin, {
+                size: "small"
+            }),
+            'aria-busy': true,
+            'data-loading': true
+        };
+    });
     function handleNew() {
         methods.triggerEvent({
             name: 'onNew',
@@ -64,7 +79,7 @@ function AgentConversations({ blockId, methods, properties }) {
         block: true,
         onClick: handleNew
     }, "+ New Chat")), /*#__PURE__*/ React.createElement(Conversations, {
-        items: items ?? [],
+        items: conversationItems,
         activeKey: activeKey,
         onActiveChange: (key)=>{
             methods.triggerEvent({

package/dist/blocks/AgentConversations/meta.js

@@ -26,11 +26,15 @@
         properties: {
             items: {
                 type: 'array',
-                description: 'Conversation list. Each item: { key, label, icon?, disabled?, timestamp?, group? }.'
+                description: 'Conversation list. Each item: { key, label, icon?, disabled?, loading?, timestamp?, group? }.'
             },
             activeKey: {
                 type: 'string',
                 description: 'Currently selected conversation key.'
+            },
+            loadingKey: {
+                type: 'string',
+                description: 'Key of a conversation that is still loading. That row shows a spinner in place of its icon.'
             }
         }
     }

package/dist/blocks/AgentConversations/schema.json

@@ -10,6 +10,10 @@
           "label": { "type": "string" },
           "icon": {},
           "disabled": { "type": "boolean" },
+          "loading": {
+            "type": "boolean",
+            "description": "Show a spinner in place of this row's icon."
+          },
           "timestamp": { "type": "number" },
           "group": { "type": "string" }
         }
@@ -17,6 +21,10 @@
       "default": []
     },
     "activeKey": { "type": "string" },
+    "loadingKey": {
+      "type": "string",
+      "description": "Key of a conversation that is still loading, for example while its transcript is read after a select. That row shows a spinner in place of its icon."
+    },
     "menu": {
       "type": "array",
       "items": {

package/dist/blocks/AgentConversations/tests/AgentConversations.e2e.yaml

@@ -0,0 +1,69 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+id: agent-conversations
+type: PageHeaderMenu
+properties:
+  title: AgentConversations
+events:
+  onInit:
+    - id: init
+      type: SetState
+      params:
+        active: conv-1
+blocks:
+  # Selecting a row marks it as loading until finish_loading clears loadingKey, standing in
+  # for an app that reads the transcript on select.
+  - id: conversations
+    type: AgentConversations
+    properties:
+      activeKey:
+        _state: active
+      loadingKey:
+        _state: loading
+      items:
+        - key: conv-1
+          label: First conversation
+        - key: conv-2
+          label: Second conversation
+        - key: conv-3
+          label: Generating a title
+          loading: true
+    events:
+      onSelect:
+        - id: select
+          type: SetState
+          params:
+            active:
+              _event: key
+            loading:
+              _event: key
+  - id: finish_loading
+    type: Button
+    properties:
+      title: Finish loading
+    events:
+      onClick:
+        - id: clear_loading
+          type: SetState
+          params:
+            loading: null
+  - id: readout_active
+    type: Html
+    properties:
+      html:
+        _string.concat:
+          - _if_none:
+              - _state: active
+              - ''