@lowdefy/blocks-antd-x 5.5.0 → 5.6.0

package/dist/blocks/AgentChat/AgentChat.js

@@ -12,25 +12,26 @@
   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, { useRef, useMemo, useEffect, useState } from 'react';
+*/ import React, { useRef, useMemo, useEffect, useState, useCallback } from 'react';
 import { useChat } from '@ai-sdk/react';
 import { lastAssistantMessageIsCompleteWithApprovalResponses, lastAssistantMessageIsCompleteWithToolCalls } from 'ai';
 import { FileCard, Prompts, Sender } from '@ant-design/x';
 import { Button } from 'antd';
 import { PaperClipOutlined } from '@ant-design/icons';
-import { type } from '@lowdefy/helpers';
+import { isReserved, setKey, type } from '@lowdefy/helpers';
 import { getFileCardType, getFileCardIcon } from './fileCardUtils.js';
 import DrawerWrapper from './DrawerWrapper.js';
 import createLowdefyChatTransport from './LowdefyChatTransport.js';
 import MessageList from './MessageList.js';
 import useAgentEvents, { collectExternalEventIds } from './useAgentEvents.js';
 import WelcomeScreen from './WelcomeScreen.js';
-function AgentChat({ blockId, components: { Icon }, methods, pageId, properties }) {
-    const { agentId, urlQuery, sharedState, welcome, messageDisplay, sender, conversationId, messages: externalMessages, display, drawer: drawerConfig, suggestions } = properties;
+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 senderRef = useRef(null);
     const finishMetaRef = useRef(null);
     const fileInputRef = useRef(null);
     const [attachedFiles, setAttachedFiles] = useState([]);
+    const [dragOver, setDragOver] = useState(false);
     // Mirror the operator-evaluated sharedState object into a ref so transport.body()
     // sees the freshest value at send time without re-constructing the transport.
     const sharedStateRef = useRef(null);
@@ -68,6 +69,16 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
     ]);
     const bubbleListRef = useRef(null);
     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
+        // the useMemo above on a conversationId change is silently ignored, so every
+        // send posts under the mount-time conversationId. Continuing a conversation
+        // the app selected later then persists the whole transcript under the stale
+        // id (a duplicate conversation doc). Keying by id makes useChat swap Chat
+        // instances — and adopt the rebuilt transport — when the conversation
+        // changes; the clear-on-id-change and external-message-sync effects below
+        // compose with the swap unchanged.
+        id: effectiveConversationId,
         transport,
         experimental_throttle: 50,
         sendAutomaticallyWhen: (args)=>lastAssistantMessageIsCompleteWithToolCalls(args) || lastAssistantMessageIsCompleteWithApprovalResponses(args),
@@ -84,8 +95,17 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
                     const writable = {};
                     const ignored = [];
                     for (const [key, value] of Object.entries(updates)){
-                        if (allowedKeys.has(key)) writable[key] = value;
-                        else ignored.push(key);
+                        if (!allowedKeys.has(key)) {
+                            ignored.push(key);
+                            continue;
+                        }
+                        // Same policy as a non-allowlisted key: drop it and report it back
+                        // so the model can self-correct on the next turn.
+                        if (isReserved(key)) {
+                            ignored.push(key);
+                            continue;
+                        }
+                        setKey(writable, key, value);
                     }
                     if (Object.keys(writable).length > 0) {
                         await methods.triggerEvent({
@@ -140,6 +160,21 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
             });
         }
     });
+    // 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.
+    const [feedbackValues, setFeedbackValues] = useState({});
+    // Ratings the app already knows about, keyed by message id — what a reload or a
+    // conversation switch would otherwise lose, since the block stores nothing. A click this
+    // visit wins over the stored value, so the thumb responds immediately and a rating the
+    // user has just withdrawn is not re-lit by a stale prop.
+    // Not memoised: the property arrives from operators that rebuild it every render, so a
+    // dependency on it would miss every time — the same reason the message sync below
+    // compares by count and id rather than by reference.
+    const effectiveFeedbackValues = {
+        ...storedFeedbackValues ?? {},
+        ...feedbackValues
+    };
     // Clear messages when conversationId changes so the new conversation starts clean.
     // Developers load saved messages via the messages property if needed.
     const prevConversationIdRef = useRef(effectiveConversationId);
@@ -147,6 +182,9 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
         if (effectiveConversationId !== prevConversationIdRef.current) {
             prevConversationIdRef.current = effectiveConversationId;
             setMessages([]);
+            // Ratings clicked in the thread being left must not carry over: they are keyed by
+            // message id, and the incoming conversation supplies its own through feedbackValues.
+            setFeedbackValues({});
         }
     }, [
         effectiveConversationId,
@@ -318,6 +356,42 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
             filename: name
         };
     }
+    // One intake for every way a file arrives — the paperclip picker, a
+    // clipboard paste, a drag-and-drop — so the accept list and size cap apply
+    // to all of them, not just the picker's native dialog. Pasted clipboard
+    // images all arrive as "image.png" (every browser), and the attached list
+    // is keyed by name + size, so those get a unique name.
+    function acceptsFile(file) {
+        const accept = attachmentsConfig?.accept;
+        if (!accept) return true;
+        const name = (file.name || '').toLowerCase();
+        const mime = (file.type || '').toLowerCase();
+        return accept.split(',').map((t)=>t.trim().toLowerCase()).filter(Boolean).some((t)=>{
+            if (t.startsWith('.')) return name.endsWith(t);
+            if (t.endsWith('/*')) return mime.startsWith(t.slice(0, -1));
+            return mime === t;
+        });
+    }
+    function addFiles(incoming, { pasted = false } = {}) {
+        const files = Array.from(incoming ?? []).filter((f)=>acceptsFile(f) && !(attachmentsConfig?.maxSize && f.size > attachmentsConfig.maxSize));
+        if (files.length === 0) return;
+        const named = files.map((f)=>{
+            if (!pasted || !/^image\.\w+$/i.test(f.name)) return f;
+            const ext = f.name.split('.').pop();
+            return new File([
+                f
+            ], `pasted-${Date.now()}.${ext}`, {
+                type: f.type
+            });
+        });
+        setAttachedFiles((prev)=>[
+                ...prev,
+                ...named
+            ]);
+    }
+    function dragHasFiles(e) {
+        return Array.from(e.dataTransfer?.types ?? []).includes('Files');
+    }
     async function handleSend(text) {
         if (!text.trim() && attachedFiles.length === 0) return;
         const filesMeta = attachedFiles.map((file)=>({
@@ -431,7 +505,40 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
         messages
     ]);
     const activeSuggestions = agentSuggestions ?? suggestions;
+    // 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
+    // navigating, so wiring nothing changes nothing.
+    //
+    // Modified and non-primary clicks are never intercepted: open-in-new-tab is a
+    // reasonable thing to do with a citation, and preventing it would be a regression.
+    const interceptLinks = Boolean(events?.onLinkClick);
+    // Stable identity: MessageBubble memoises its markdown component map on this, and the map
+    // is rebuilt on every streaming chunk otherwise — remounting every link in the answer as
+    // it streams.
+    const handleLinkClick = useCallback(({ href, text, domEvent })=>{
+        if (!interceptLinks || domEvent.defaultPrevented || domEvent.button !== 0 || domEvent.metaKey || domEvent.ctrlKey || domEvent.shiftKey || domEvent.altKey) {
+            return;
+        }
+        // Prevented synchronously: Link checks defaultPrevented immediately after calling
+        // this, and an external anchor's default fires before any async work could run.
+        domEvent.preventDefault();
+        methods.triggerEvent({
+            name: 'onLinkClick',
+            event: {
+                href,
+                text
+            }
+        });
+    }, [
+        interceptLinks,
+        methods
+    ]);
     function handleFeedback({ messageId, rating }) {
+        setFeedbackValues((prev)=>({
+                ...prev,
+                [messageId]: rating
+            }));
         const message = messages.find((msg)=>msg.id === messageId);
         const messageContent = message?.parts?.filter((part)=>part.type === 'text').map((part)=>part.text).join('') ?? '';
         methods.triggerEvent({
@@ -512,6 +619,9 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
         config: messageDisplay,
         addToolApprovalResponse: addToolApprovalResponse,
         onFeedback: handleFeedback,
+        onLinkClick: handleLinkClick,
+        Link: Link,
+        feedbackValues: effectiveFeedbackValues,
         onRegenerate: handleRegenerate,
         onDelete: handleDelete,
         onEditMessage: handleEditMessage,
@@ -530,8 +640,27 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
         wrap: true
     })), /*#__PURE__*/ React.createElement("div", {
         style: {
-            padding: '8px 16px 24px'
-        }
+            padding: '8px 16px 24px',
+            borderRadius: 12,
+            outline: dragOver ? '2px dashed currentColor' : 'none',
+            outlineOffset: -6,
+            transition: 'outline-color 120ms'
+        },
+        // Drag-in lands in the same intake as the picker and paste. Only
+        // react to drags carrying files, so text selections dragged across
+        // the composer are left to the textarea.
+        onDragOver: attachmentsConfig?.enabled ? (e)=>{
+            if (!dragHasFiles(e)) return;
+            e.preventDefault();
+            if (!dragOver) setDragOver(true);
+        } : undefined,
+        onDragLeave: attachmentsConfig?.enabled ? ()=>setDragOver(false) : undefined,
+        onDrop: attachmentsConfig?.enabled ? (e)=>{
+            if (!dragHasFiles(e)) return;
+            e.preventDefault();
+            setDragOver(false);
+            addFiles(e.dataTransfer.files);
+        } : undefined
     }, attachmentsConfig?.enabled && attachedFiles.length > 0 && /*#__PURE__*/ React.createElement(FileCard.List, {
         style: {
             marginBottom: 4
@@ -565,12 +694,7 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
         accept: attachmentsConfig.accept,
         multiple: true,
         onChange: (e)=>{
-            const files = Array.from(e.target.files);
-            const valid = files.filter((f)=>!(attachmentsConfig.maxSize && f.size > attachmentsConfig.maxSize));
-            setAttachedFiles((prev)=>[
-                    ...prev,
-                    ...valid
-                ]);
+            addFiles(e.target.files);
             e.target.value = '';
         }
     }), /*#__PURE__*/ React.createElement(Sender, {
@@ -579,6 +703,11 @@ function AgentChat({ blockId, components: { Icon }, methods, pageId, properties
         submitType: sender?.submitType ?? 'enter',
         allowSpeech: sender?.allowSpeech ?? false,
         onSubmit: handleSend,
+        // Clipboard paste (a screenshot, a copied file) attaches like the
+        // paperclip does.
+        onPasteFile: attachmentsConfig?.enabled ? (files)=>addFiles(files, {
+                pasted: true
+            }) : undefined,
         onCancel: handleStop,
         loading: isBusy,
         prefix: attachmentsConfig?.enabled ? /*#__PURE__*/ React.createElement(Button, {

package/dist/blocks/AgentChat/MessageBubble.js

@@ -101,6 +101,52 @@ function resolveToolResultMode(toolResultDisplay, toolName) {
     }
     return 'summary';
 }
+// Plain link text arrives as a string, but any inline formatting makes it an element tree —
+// so it is flattened rather than reported as absent.
+function linkText(children) {
+    if (typeof children === 'string') return children;
+    if (typeof children === 'number') return String(children);
+    if (Array.isArray(children)) return children.map(linkText).join('');
+    if (/*#__PURE__*/ React.isValidElement(children)) return linkText(children.props?.children);
+    return '';
+}
+// An in-app path renders through the app's Link, so following a citation is a client-side
+// route rather than a reload that drops the conversation. Anything with a scheme opens in a
+// 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 }) {
+        if (!href) return /*#__PURE__*/ React.createElement("span", props, children);
+        const text = linkText(children);
+        const handleClick = (domEvent)=>onLinkClick?.({
+                href,
+                text,
+                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.
+        const inApp = !external && href.startsWith('/') && !href.includes('#');
+        if (!inApp || !Link) {
+            return /*#__PURE__*/ React.createElement("a", {
+                ...props,
+                href: href,
+                target: external ? '_blank' : undefined,
+                rel: external ? 'noopener noreferrer' : undefined,
+                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)),
+            onClick: handleClick
+        }, children);
+    };
+}
 function normalizeActions(actions) {
     if (Array.isArray(actions)) {
         const obj = {};
@@ -111,7 +157,7 @@ function normalizeActions(actions) {
     }
     return actions ?? {};
 }
-function BubbleActions({ actions, textContent, messageId, onFeedback, onRegenerate, onDelete, translate }) {
+function BubbleActions({ actions, textContent, messageId, onFeedback, feedbackValue, onRegenerate, onDelete, translate }) {
     const normalized = normalizeActions(actions);
     const items = [];
     if (normalized.copy) {
@@ -128,6 +174,7 @@ function BubbleActions({ actions, textContent, messageId, onFeedback, onRegenera
             key: 'feedback',
             label: translate('agent.message.feedback'),
             actionRender: ()=>/*#__PURE__*/ React.createElement(Actions.Feedback, {
+                    value: feedbackValue ?? 'default',
                     onChange: (rating)=>onFeedback?.({
                             messageId,
                             rating
@@ -176,7 +223,7 @@ function SourcesDisplay({ sourceParts, config, translate }) {
         expandIconPosition: config?.sourcesDisplay?.expandIconPosition ?? 'end'
     });
 }
-function MessageBubble({ content, isStreaming, parts, config, addToolApprovalResponse, actions, messageId, onFeedback, onRegenerate, onDelete, translate }) {
+function MessageBubble({ 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';
@@ -186,18 +233,22 @@ function MessageBubble({ content, isStreaming, parts, config, addToolApprovalRes
     const renderLatex = config?.renderLatex ?? false;
     const markdownConfig = renderLatex ? getLatexConfig() : undefined;
     const markdownComponents = useMemo(()=>{
-        if (!renderMermaid && !codeHighlighter) return {
-            code: PlainCodeBlock
-        };
+        const code = !renderMermaid && !codeHighlighter ? PlainCodeBlock : RichCodeBlock({
+            renderMermaid,
+            codeHighlighter
+        });
         return {
-            code: RichCodeBlock({
-                renderMermaid,
-                codeHighlighter
+            code,
+            a: MarkdownLink({
+                Link,
+                onLinkClick
             })
         };
     }, [
         renderMermaid,
-        codeHighlighter
+        codeHighlighter,
+        Link,
+        onLinkClick
     ]);
     const normalizedActions = normalizeActions(actions);
     const showActions = Object.values(normalizedActions).some(Boolean) && !isStreaming;
@@ -219,6 +270,7 @@ function MessageBubble({ content, isStreaming, parts, config, addToolApprovalRes
             textContent: content,
             messageId: messageId,
             onFeedback: onFeedback,
+            feedbackValue: feedbackValue,
             onRegenerate: onRegenerate,
             onDelete: onDelete,
             translate: translate
@@ -491,6 +543,7 @@ function MessageBubble({ content, isStreaming, parts, config, addToolApprovalRes
         textContent: allTextContent,
         messageId: messageId,
         onFeedback: onFeedback,
+        feedbackValue: feedbackValue,
         onRegenerate: onRegenerate,
         onDelete: onDelete,
         translate: translate

package/dist/blocks/AgentChat/MessageList.js

@@ -55,7 +55,7 @@ function ThinkingBubbleContent({ bubbleId, config }) {
         label: label
     });
 }
-const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ messages, isStreaming, config, addToolApprovalResponse, onFeedback, onRegenerate, onDelete, onEditMessage, translate }, ref) {
+const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ messages, isStreaming, config, 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
@@ -189,6 +189,9 @@ const MessageList = /*#__PURE__*/ React.forwardRef(function MessageList({ messag
                         actions: config?.actions,
                         messageId: info.key,
                         onFeedback: onFeedback,
+                        onLinkClick: onLinkClick,
+                        Link: Link,
+                        feedbackValue: feedbackValues?.[info.key],
                         onRegenerate: onRegenerate,
                         onDelete: onDelete,
                         translate: translate

package/dist/blocks/AgentChat/meta.js

@@ -23,7 +23,7 @@
         onUserMessage: 'Trigger when the user sends a message.',
         onConversationStart: 'Trigger once when a conversation starts, on its first user message. Event contains the conversationId (auto-minted when no conversationId property is set).',
         onError: 'Trigger on stream error.',
-        onFeedback: 'Trigger when the user clicks thumbs up or down on a message.',
+        onFeedback: 'Trigger when the user clicks thumbs up or down on a message. Event contains messageId, messageContent and rating, where rating is `like`, `dislike`, or `default` when the user clicks the selected thumb again to clear the rating.',
         onRegenerate: 'Trigger when the user clicks regenerate on a message.',
         onDeleteMessage: 'Trigger when the user deletes a message.',
         onEditMessage: 'Trigger when the user edits and resubmits a message.',
@@ -32,7 +32,8 @@
         onSuggestionClick: 'Trigger when the user clicks a follow-up suggestion.',
         onTitleGenerated: 'Trigger when the agent generates a conversation title.',
         onSwitchChange: 'Trigger when the user toggles a sender switch.',
-        onDataPart: 'Trigger when the agent sends a custom data part. Event contains type, data, and id.'
+        onDataPart: 'Trigger when the agent sends a custom data part. Event contains type, data, and id.',
+        onLinkClick: 'Trigger when the user clicks a link in a message. Event contains href and text. Wiring this event suppresses the default navigation for plain left clicks, so the app can open the target in place; modified clicks (new tab, middle click) always navigate.'
     },
     methods: {
         regenerate: 'Regenerate the last assistant message. Accepts optional args.messageId to regenerate a specific message.',

package/dist/blocks/AgentChat/schema.json

@@ -162,6 +162,10 @@
     "messages": {
       "type": "array"
     },
+    "feedbackValues": {
+      "type": "object",
+      "description": "Ratings already recorded, keyed by message id, each `like` or `dislike`. Restores the thumbs on a conversation the block did not rate this visit. A rating clicked this visit takes precedence."
+    },
     "conversationId": {
       "type": "string",
       "description": "Active conversation ID. When this value changes, messages are automatically cleared."
@@ -186,10 +190,17 @@
         "allowSpeech": { "type": "boolean", "default": false },
         "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.",
           "properties": {
             "enabled": { "type": "boolean" },
-            "accept": { "type": "string" },
-            "maxSize": { "type": "number" },
+            "accept": {
+              "type": "string",
+              "description": "Comma-separated accept list, as for an <input type=\"file\"> — e.g. \"image/*,.pdf\". Applied to picked, pasted and dropped files alike."
+            },
+            "maxSize": {
+              "type": "number",
+              "description": "Maximum file size in bytes. Larger files are silently skipped."
+            },
             "s3PostPolicyRequestId": {
               "type": "string",
               "description": "Request ID of type AwsS3PresignedPostPolicy. When set, files are uploaded to S3 and their URLs are sent to the LLM instead of base64 data."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-antd-x",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "license": "Apache-2.0",
   "description": "Lowdefy Ant Design X Blocks",
   "homepage": "https://lowdefy.com",
@@ -41,11 +41,14 @@
     "@ant-design/icons": "6.1.0",
     "@ant-design/x": "2.7.0",
     "@ant-design/x-markdown": "2.7.0",
-    "@lowdefy/block-utils": "5.5.0",
-    "@lowdefy/helpers": "5.5.0",
+    "@lowdefy/block-utils": "5.6.0",
+    "@lowdefy/helpers": "5.6.0",
     "ai": "6.0.176"
   },
   "devDependencies": {
+    "@lowdefy/block-dev-e2e": "5.6.0",
+    "@lowdefy/e2e-utils": "5.6.0",
+    "@playwright/test": "1.50.1",
     "@swc/cli": "0.8.0",
     "@swc/core": "1.15.18",
     "copyfiles": "2.4.1"
@@ -60,6 +63,8 @@
   "scripts": {
     "build": "swc src --out-dir dist --config-file ../../../../.swcrc --cli-config-file ../../../../.swc-cli.json && pnpm copyfiles",
     "clean": "rm -rf dist",
-    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\""
+    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
+    "e2e": "playwright test --config e2e/playwright.config.js",
+    "e2e:ui": "playwright test --config e2e/playwright.config.js --ui"
   }
 }