@lowdefy/blocks-antd-x 6.0.0 → 6.2.0

package/dist/blocks/AgentChat/AgentChat.js

@@ -16,7 +16,7 @@
 import { useChat } from '@ai-sdk/react';
 import { lastAssistantMessageIsCompleteWithApprovalResponses, lastAssistantMessageIsCompleteWithToolCalls } from 'ai';
 import { FileCard, Prompts, Sender } from '@ant-design/x';
-import { Button } from 'antd';
+import { Button, Skeleton } from 'antd';
 import { PaperClipOutlined } from '@ant-design/icons';
 import { isReserved, setKey, type } from '@lowdefy/helpers';
 import getLegacyObjectUrl from '@lowdefy/blocks-files/utils/getLegacyObjectUrl.js';
@@ -26,10 +26,11 @@ import { getFileCardType, getFileCardIcon } from './fileCardUtils.js';
 import DrawerWrapper from './DrawerWrapper.js';
 import createLowdefyChatTransport from './LowdefyChatTransport.js';
 import MessageList from './MessageList.js';
+import replayableMessages from './replayableMessages.js';
 import useAgentEvents, { collectExternalEventIds } from './useAgentEvents.js';
 import WelcomeScreen from './WelcomeScreen.js';
 function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageId, properties }) {
-    const { agentId, urlQuery, sharedState, welcome, messageDisplay, sender, conversationId, feedbackValues: storedFeedbackValues, messages: externalMessages, display, drawer: drawerConfig, suggestions } = properties;
+    const { agentId, urlQuery, sharedState, welcome, messageDisplay, sender, conversationId, feedbackValues: storedFeedbackValues, messages: externalMessages, display, drawer: drawerConfig, suggestions, loading } = properties;
     const senderRef = useRef(null);
     const finishMetaRef = useRef(null);
     const fileInputRef = useRef(null);
@@ -76,6 +77,11 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         urlQueryKey
     ]);
     const bubbleListRef = useRef(null);
+    // Call ids of client-side tools still running: their parts sit unanswered until
+    // addToolOutput, exactly like a cut-off call, and must survive the dead-call filter.
+    const pendingToolCallsRef = useRef(new Set());
+    // Read by the filter from mount-time method closures, which would see a stale `status`.
+    const statusRef = useRef('ready');
     const { messages, sendMessage, status, stop, addToolApprovalResponse, addToolOutput, setMessages, regenerate, clearError } = useChat({
         // Key the Chat instance by conversation: without an id, useChat creates its
         // Chat once per mount and CAPTURES that transport — the transport rebuilt by
@@ -93,6 +99,7 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         async onToolCall ({ toolCall }) {
             if (toolCall.dynamic) return;
             if (toolCall.toolName === 'update-page-state') {
+                pendingToolCallsRef.current.add(toolCall.toolCallId);
                 try {
                     const updates = toolCall.input?.updates ?? {};
                     // Allowlist writes against the keys currently exposed via sharedState —
@@ -139,6 +146,8 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
                         state: 'output-error',
                         errorText: err.message
                     });
+                } finally{
+                    pendingToolCallsRef.current.delete(toolCall.toolCallId);
                 }
             }
         },
@@ -175,6 +184,7 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
             });
         }
     });
+    statusRef.current = status;
     // The control is otherwise write-only: it reports a rating and immediately forgets it,
     // so the thumb un-highlights on the next render and the message looks unrated. This holds
     // what was clicked THIS visit; the block still persists nothing itself.
@@ -205,13 +215,29 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         effectiveConversationId,
         setMessages
     ]);
+    // Abort a reply still streaming into the conversation being left. useChat swaps its
+    // Chat instance during the render that changes the id, and the `stop` it returns is
+    // the NEW instance's — calling it in the effect above would stop an idle chat and
+    // leave the old request running, still firing onDataPart / onToolCall / onFinish
+    // into the page (and the server still generating) for a conversation no longer shown.
+    // A cleanup keyed only on the id closes over the previous render's `stop`, which is
+    // the old instance's. stop() on an idle chat is a no-op.
+    useEffect(()=>()=>stop(), [
+        effectiveConversationId
+    ]); // eslint-disable-line react-hooks/exhaustive-deps
     // Sync external messages when provided — undefined means "not provided" (no sync),
     // null means "clear messages", array means "load these messages".
     // Compare by count + last ID to avoid re-syncing on every Lowdefy re-render
     // (operators like _state create new array references even when data hasn't changed).
+    // The conversation id is part of the key: two conversations whose transcripts have the
+    // same length and last id (every assistant message an older onFinish hook persisted
+    // carries id '', so any two same-length transcripts collide) would otherwise not
+    // re-sync on a switch, leaving the new conversation's transcript empty.
+    // Seeded with the mount-time id so an undefined `messages` stays "no sync" on mount.
     const prevExternalRef = useRef({
         count: 0,
-        lastId: null
+        lastId: null,
+        conversationId: effectiveConversationId
     });
     // Event-dedup ids of externally loaded messages. Restored history must not
     // replay onToolCall / onToolResult / onUserMessage / onTitleGenerated side
@@ -222,33 +248,35 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         const msgs = externalMessages ?? [];
         const count = msgs.length;
         const lastId = count > 0 ? msgs[count - 1]?.id : null;
-        if (count !== prevExternalRef.current.count || lastId !== prevExternalRef.current.lastId) {
+        if (count !== prevExternalRef.current.count || lastId !== prevExternalRef.current.lastId || effectiveConversationId !== prevExternalRef.current.conversationId) {
             prevExternalRef.current = {
                 count,
-                lastId
+                lastId,
+                conversationId: effectiveConversationId
             };
-            externalIdsRef.current = collectExternalEventIds(msgs);
-            setMessages(msgs);
+            const replayable = withoutDeadToolCalls(msgs);
+            externalIdsRef.current = collectExternalEventIds(replayable);
+            setMessages(replayable);
         }
     }, [
         externalMessages,
+        effectiveConversationId,
         setMessages
     ]);
     // Register CallMethod methods so YAML actions can control the chat.
     useEffect(()=>{
         methods.registerMethod('regenerate', (args)=>{
-            regenerate(args?.messageId ? {
-                messageId: args.messageId
-            } : undefined);
+            if (sendingRef.current) return;
+            regenerateReply(args?.messageId);
         });
         methods.registerMethod('setMessages', (args)=>{
-            const msgs = args?.messages ?? [];
+            const msgs = withoutDeadToolCalls(args?.messages ?? []);
             externalIdsRef.current = collectExternalEventIds(msgs);
             setMessages(msgs);
         });
         methods.registerMethod('sendMessage', (args)=>{
-            if (args?.text) {
-                sendMessage({
+            if (args?.text && !sendingRef.current) {
+                deliver({
                     text: args.text,
                     ...args.files ? {
                         files: args.files
@@ -335,6 +363,45 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
     });
     const isEmpty = messages.length === 0;
     const isBusy = status === 'streaming' || status === 'submitted';
+    // The app is still fetching this conversation's transcript (the `loading` property): a
+    // skeleton stands in for the message area and the composer is disabled, so nothing can
+    // be sent into a conversation whose history has not synced yet.
+    const isLoading = loading === true;
+    // A send awaits onBeforeSend while useChat still reports `ready`, so every submit during a
+    // slow quota check used to send again. The ref refuses re-entry (state is a render behind a
+    // double click); the state is what the Sender shows. Every other way of sending (prompts,
+    // suggestions, edit, regenerate, the sendMessage and regenerate methods) checks the ref too,
+    // or it would go out first and the composer's message straight after it.
+    const sendingRef = useRef(false);
+    const [sending, setSending] = useState(false);
+    // An unanswered tool call left by a reply cut off this session fails validation for the
+    // whole history, as one in a loaded history does. A reply still streaming is not cut off,
+    // and a client-side tool still running will add its output.
+    function withoutDeadToolCalls(list) {
+        if (statusRef.current === 'streaming' || statusRef.current === 'submitted') return list;
+        return replayableMessages({
+            messages: list,
+            liveToolCallIds: pendingToolCallsRef.current
+        });
+    }
+    // Every send goes through here. useChat applies the setter synchronously, so sendMessage
+    // reads the filtered list.
+    function deliver(message) {
+        setMessages((prev)=>withoutDeadToolCalls(prev));
+        sendMessage(message);
+    }
+    function regenerateReply(messageId) {
+        let kept = [];
+        setMessages((prev)=>{
+            kept = withoutDeadToolCalls(prev);
+            return kept;
+        });
+        // The reply asked for may have held nothing but a dead call and be gone; regenerate
+        // from the end instead of letting useChat throw on the missing id.
+        regenerate(kept.some((m)=>m.id === messageId) ? {
+            messageId
+        } : undefined);
+    }
     function fileToContentPart(file) {
         return new Promise((resolve)=>{
             const reader = new FileReader();
@@ -427,7 +494,18 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         return Array.from(e.dataTransfer?.types ?? []).includes('Files');
     }
     async function handleSend(text) {
+        if (sendingRef.current) return;
         if (!text.trim() && attachedFiles.length === 0) return;
+        sendingRef.current = true;
+        setSending(true);
+        try {
+            await submitMessage(text);
+        } finally{
+            sendingRef.current = false;
+            setSending(false);
+        }
+    }
+    async function submitMessage(text) {
         const filesMeta = attachedFiles.map((file)=>({
                 name: file.name,
                 size: file.size,
@@ -477,12 +555,12 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
                     parts.push(part);
                 }
             }
-            sendMessage({
+            deliver({
                 parts
             });
             setAttachedFiles([]);
         } else {
-            sendMessage({
+            deliver({
                 text
             });
         }
@@ -503,7 +581,8 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         });
     }
     function handlePromptClick(prompt) {
-        sendMessage({
+        if (sendingRef.current) return;
+        deliver({
             text: prompt.label
         });
     }
@@ -514,13 +593,14 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         setInputValue(typeof text === 'string' ? text : '');
     }
     function handleSuggestionClick(suggestion) {
+        if (sendingRef.current) return;
         methods.triggerEvent({
             name: 'onSuggestionClick',
             event: {
                 suggestion
             }
         });
-        sendMessage({
+        deliver({
             text: suggestion.label
         });
     }
@@ -550,6 +630,8 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         messages
     ]);
     const activeSuggestions = agentSuggestions ?? suggestions;
+    // Hidden while a composer send awaits onBeforeSend as well as while a reply streams.
+    const showSuggestions = !isEmpty && !isLoading && (activeSuggestions?.length ?? 0) > 0 && !isBusy && !sending;
     // A link in an answer was a plain anchor: a full browser navigation out of the
     // conversation, with no way for an app to do anything else with it. Default is only
     // prevented when the app actually handles onLinkClick — otherwise the link keeps
@@ -596,6 +678,7 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         });
     }
     function handleRegenerate({ messageId }) {
+        if (sendingRef.current) return;
         methods.triggerEvent({
             name: 'onRegenerate',
             event: {
@@ -603,11 +686,10 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
                 messages
             }
         });
-        regenerate({
-            messageId
-        });
+        regenerateReply(messageId);
     }
     function handleEditMessage({ messageId, originalContent, newContent }) {
+        if (sendingRef.current) return;
         methods.triggerEvent({
             name: 'onEditMessage',
             event: {
@@ -620,7 +702,7 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         const messageIndex = messages.findIndex((m)=>m.id === messageId);
         if (messageIndex >= 0) {
             setMessages((prev)=>prev.slice(0, messageIndex));
-            sendMessage({
+            deliver({
                 text: newContent
             });
         }
@@ -654,7 +736,36 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
             minHeight: 0,
             padding: '16px 0'
         }
-    }, isEmpty && !welcome?.tracks ? /*#__PURE__*/ React.createElement(WelcomeScreen, {
+    }, isLoading ? /*#__PURE__*/ React.createElement("div", {
+        className: "agent-chat-loading",
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 24,
+            padding: '0 16px'
+        }
+    }, /*#__PURE__*/ React.createElement(Skeleton, {
+        active: true,
+        title: false,
+        paragraph: {
+            rows: 2,
+            width: [
+                '60%',
+                '40%'
+            ]
+        }
+    }), /*#__PURE__*/ React.createElement(Skeleton, {
+        active: true,
+        title: false,
+        paragraph: {
+            rows: 3,
+            width: [
+                '90%',
+                '75%',
+                '50%'
+            ]
+        }
+    })) : isEmpty && !welcome?.tracks ? /*#__PURE__*/ React.createElement(WelcomeScreen, {
         config: welcome,
         onPromptClick: handlePromptClick
     }) : /*#__PURE__*/ React.createElement(MessageList, {
@@ -673,7 +784,7 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         onDelete: handleDelete,
         onEditMessage: handleEditMessage,
         translate: methods.translate
-    })), !isEmpty && activeSuggestions && activeSuggestions.length > 0 && !isBusy && /*#__PURE__*/ React.createElement("div", {
+    })), showSuggestions && /*#__PURE__*/ React.createElement("div", {
         style: {
             padding: '0 16px 8px'
         }
@@ -757,8 +868,12 @@ function AgentChat({ blockId, components: { Icon, Link }, events, methods, pageI
         onPasteFile: attachmentsConfig?.enabled ? (files)=>addFiles(files, {
                 pasted: true
             }) : undefined,
-        onCancel: handleStop,
-        loading: isBusy,
+        // Not during the onBeforeSend wait: nothing is streaming, so onStop would be false.
+        onCancel: isBusy ? handleStop : undefined,
+        loading: isBusy || sending,
+        disabled: isLoading,
+        styles: sender?.styles,
+        classNames: sender?.classNames,
         prefix: attachmentsConfig?.enabled ? /*#__PURE__*/ React.createElement(Button, {
             type: "text",
             icon: /*#__PURE__*/ React.createElement(PaperClipOutlined, null),

package/dist/blocks/AgentChat/MessageList.js

@@ -154,6 +154,8 @@ const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ messag
                 placement: 'end',
                 variant: config?.roles?.user?.variant ?? 'filled',
                 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)),
                 header: roleHeader(config?.roles?.user, 'agent.message.userHeader', translate),
                 editable: config?.editableMessages !== false ? {
@@ -200,6 +202,8 @@ const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ messag
                 style: {
                     maxWidth: '100%'
                 },
+                styles: config?.roles?.assistant?.styles,
+                classNames: config?.roles?.assistant?.classNames,
                 avatar: roleAvatar(config?.roles?.assistant, /*#__PURE__*/ React.createElement(RobotOutlined, null)),
                 header: roleHeader(config?.roles?.assistant, 'agent.message.assistantHeader', translate),
                 typing: config?.roles?.assistant?.typing ? config.roles.assistant.typing : {

package/dist/blocks/AgentChat/replayableMessages.js

@@ -0,0 +1,60 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+// A reply cut off mid-stream leaves its tool call with no result, and UIMessage validation
+// rejects the whole history for one such part: every later send fails, and a history stored
+// that way fails on every load. Approval states stay; a pending approval is answerable on resume.
+// A client-side tool the block is still running is in the same state, so its call id is in
+// liveToolCallIds and the part is kept: its output is on the way.
+const UNANSWERED = new Set([
+    'input-streaming',
+    'input-available'
+]);
+function isDeadToolPart({ part, liveToolCallIds }) {
+    const partType = part?.type;
+    const isTool = partType === 'dynamic-tool' || type.isString(partType) && partType.startsWith('tool-');
+    return isTool && UNANSWERED.has(part.state) && !liveToolCallIds.has(part.toolCallId);
+}
+function replayableMessages({ messages, liveToolCallIds = new Set() }) {
+    const list = messages ?? [];
+    let changed = false;
+    const result = [];
+    for (const message of list){
+        if (!type.isArray(message?.parts)) {
+            result.push(message);
+            continue;
+        }
+        const parts = message.parts.filter((part)=>!isDeadToolPart({
+                part,
+                liveToolCallIds
+            }));
+        // Only a step marker left is the empty shell onError already drops.
+        if (!parts.some((part)=>part?.type !== 'step-start')) {
+            changed = true;
+            continue;
+        }
+        if (parts.length === message.parts.length) {
+            result.push(message);
+            continue;
+        }
+        changed = true;
+        result.push({
+            ...message,
+            parts
+        });
+    }
+    return changed ? result : list;
+}
+export default replayableMessages;

package/dist/blocks/AgentChat/schema.json

@@ -137,6 +137,14 @@
                 "shape": {
                   "type": "string",
                   "enum": ["default", "round", "corner"]
+                },
+                "styles": {
+                  "type": "object",
+                  "description": "Inline styles per bubble part: root, content, body, header, footer, avatar, extra. The way to recolour a bubble: the filled and outlined colours come from the theme's colorPrimary and are not reachable from a stylesheet."
+                },
+                "classNames": {
+                  "type": "object",
+                  "description": "Class names per bubble part, same keys as styles."
                 }
               }
             },
@@ -152,6 +160,14 @@
                 "shape": {
                   "type": "string",
                   "enum": ["default", "round", "corner"]
+                },
+                "styles": {
+                  "type": "object",
+                  "description": "Inline styles per bubble part: root, content, body, header, footer, avatar, extra."
+                },
+                "classNames": {
+                  "type": "object",
+                  "description": "Class names per bubble part, same keys as styles."
                 }
               }
             }
@@ -188,6 +204,14 @@
           "default": "enter"
         },
         "allowSpeech": { "type": "boolean", "default": false },
+        "styles": {
+          "type": "object",
+          "description": "Inline styles per composer part: root, prefix, input, suffix, footer, switch, content. The way to recolour the composer border, which the theme sets with a precedence no page stylesheet beats."
+        },
+        "classNames": {
+          "type": "object",
+          "description": "Class names per composer part, same keys as styles."
+        },
         "attachments": {
           "type": "object",
           "description": "File attachments on the composer. When enabled, files can be picked with the paperclip, pasted from the clipboard (e.g. a screenshot) or dragged onto the composer; accept and maxSize apply to all three.",
@@ -243,6 +267,11 @@
         "title": { "type": "string" }
       }
     },
+    "loading": {
+      "type": "boolean",
+      "default": false,
+      "description": "The app is still loading this conversation's transcript. While true, a skeleton replaces the message area, suggestions are hidden and the composer is disabled, so nothing can be sent into a conversation whose messages have not synced yet."
+    },
     "suggestions": {
       "type": "array",
       "items": {

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

@@ -119,3 +119,221 @@ blocks:
           parts:
             - type: text
               text: '[in-app link](/agent-chat-target) and [external link](https://example.com)'
+
+  # A history stored after a reply was cut off mid-stream: c2's tool call never got its result,
+  # c3 is nothing but that, and c4 is a call that completed and must be left alone.
+  - id: chat_cutoff
+    type: AgentChat
+    properties:
+      agentId: test_agent
+      height: 300
+      conversationId: cutoff
+      messages:
+        - id: c1
+          role: user
+          parts:
+            - type: text
+              text: What is in this repo?
+        - id: c2
+          role: assistant
+          parts:
+            - type: step-start
+            - type: text
+              text: Let me look.
+            - type: tool-search
+              toolCallId: tc1
+              state: input-available
+              input: {}
+        - id: c3
+          role: assistant
+          parts:
+            - type: step-start
+            - type: tool-fetch
+              toolCallId: tc2
+              state: input-available
+              input: {}
+        - id: c4
+          role: assistant
+          parts:
+            - type: tool-lookup
+              toolCallId: tc3
+              state: output-available
+              input: {}
+              output:
+                ok: true
+            - type: text
+              text: Done looking.
+
+  # onBeforeSend that takes as long as a quota request might, counts how often it ran, then
+  # refuses the send so nothing ever calls the agent.
+  - id: chat_guarded
+    type: AgentChat
+    properties:
+      agentId: test_agent
+      height: 300
+      conversationId: guarded
+      messages:
+        - id: g1
+          role: assistant
+          parts:
+            - type: text
+              text: Ask me something.
+    events:
+      onBeforeSend:
+        - id: count_before_send
+          type: SetState
+          params:
+            before_send_count:
+              _sum:
+                - _if_none:
+                    - _state: before_send_count
+                    - 0
+                - 1
+        - id: slow_check
+          type: Wait
+          params:
+            ms: 1500
+        - id: refuse
+          type: Throw
+          params:
+            throw: true
+            message: Refused by the test.
+
+  - id: guarded_readout
+    type: Html
+    properties:
+      html:
+        _nunjucks:
+          template: '<span id="readout_before_send">{{ n or 0 }}</span>'
+          on:
+            n:
+              _state: before_send_count
+
+  - id: chat_styled
+    type: AgentChat
+    properties:
+      agentId: test_agent
+      height: 300
+      conversationId: styled
+      messageDisplay:
+        roles:
+          assistant:
+            styles:
+              content:
+                backgroundColor: 'rgb(1, 2, 3)'
+          user:
+            classNames:
+              content: styled-user-content
+      sender:
+        styles:
+          root:
+            borderColor: 'rgb(4, 5, 6)'
+      messages:
+        - id: y1
+          role: user
+          parts:
+            - type: text
+              text: Styled question
+        - id: y2
+          role: assistant
+          parts:
+            - type: text
+              text: Styled answer
+
+  # Two conversations with the SAME message count and the same last id (''), the shape
+  # every persisted transcript had before assistant messages were given ids. Switching
+  # between them has to re-sync the transcript from `messages`.
+  - id: switch_to_a
+    type: Button
+    properties:
+      title: Switch to A
+    events:
+      onClick:
+        - id: set_a
+          type: SetState
+          params:
+            switch_id: conv-a
+  - id: switch_to_b
+    type: Button
+    properties:
+      title: Switch to B
+    events:
+      onClick:
+        - id: set_b
+          type: SetState
+          params:
+            switch_id: conv-b
+  - id: chat_switch
+    type: AgentChat
+    properties:
+      agentId: test_agent
+      height: 300
+      conversationId:
+        _if_none:
+          - _state: switch_id
+          - conv-a
+      messages:
+        _if:
+          test:
+            _eq:
+              - _if_none:
+                  - _state: switch_id
+                  - conv-a
+              - conv-b
+          then:
+            - id: b-user
+              role: user
+              parts:
+                - type: text
+                  text: Question in B
+            - id: ''
+              role: assistant
+              parts:
+                - type: text
+                  text: Answer from conversation B.
+          else:
+            - id: a-user
+              role: user
+              parts:
+                - type: text
+                  text: Question in A
+            - id: ''
+              role: assistant
+              parts:
+                - type: text
+                  text: Answer from conversation A.
+
+  # The loading property: a skeleton in place of the transcript, composer disabled.
+  - id: toggle_loading
+    type: Button
+    properties:
+      title: Toggle loading
+    events:
+      onClick:
+        - id: flip_loading
+          type: SetState
+          params:
+            chat_loading:
+              _not:
+                _eq:
+                  - _state: chat_loading
+                  - true
+  - id: chat_loading
+    type: AgentChat
+    properties:
+      agentId: test_agent
+      height: 300
+      conversationId: loading
+      loading:
+        _eq:
+          - _state: chat_loading
+          - true
+      suggestions:
+        - key: s
+          label: A suggestion
+      messages:
+        - id: l1
+          role: assistant
+          parts:
+            - type: text
+              text: Loaded answer.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-antd-x",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "license": "Apache-2.0",
   "description": "Lowdefy Ant Design X Blocks",
   "homepage": "https://lowdefy.com",
@@ -41,18 +41,19 @@
     "@ant-design/icons": "6.1.0",
     "@ant-design/x": "2.7.0",
     "@ant-design/x-markdown": "2.7.0",
-    "@lowdefy/block-utils": "6.0.0",
-    "@lowdefy/blocks-files": "6.0.0",
-    "@lowdefy/helpers": "6.0.0",
+    "@lowdefy/block-utils": "6.2.0",
+    "@lowdefy/blocks-files": "6.2.0",
+    "@lowdefy/helpers": "6.2.0",
     "ai": "6.0.176"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "6.0.0",
-    "@lowdefy/e2e-utils": "6.0.0",
+    "@lowdefy/block-dev-e2e": "6.2.0",
+    "@lowdefy/e2e-utils": "6.2.0",
     "@playwright/test": "1.59.1",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.32",
-    "copyfiles": "2.4.1"
+    "copyfiles": "2.4.1",
+    "react-dom": "18.2.0"
   },
   "peerDependencies": {
     "antd": "6.3.1",