@lowdefy/blocks-antd-x 6.0.0 → 7.0.0

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

@@ -119,3 +119,240 @@ 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.
+
+  # 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
+              - ''

package/dist/blocks/IntentInput/IntentInput.js

@@ -0,0 +1,230 @@
+/*
+  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, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { theme } from 'antd';
+import { type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import answerScores from './answerScores.js';
+import nextIntentState from './nextIntentState.js';
+import css from './IntentInput.module.css';
+const IDLE = {
+    intent: null,
+    challenger: undefined,
+    mode: 'idle',
+    choices: []
+};
+const CLASSIFY_DELAY = 150;
+const SETTLE_DELAY = 450;
+// A text input that becomes what the user means. The app classifies the text on
+// onClassify (typically a Decide request) and passes the answer back; each intent
+// has a slot of the same name. The block only decides which slot to show and how
+// sure to look, and animates between them.
+function IntentInput({ blockId, classNames = {}, components: { Icon }, content, methods, properties, styles = {}, value }) {
+    const { token } = theme.useToken();
+    const intents = properties.intents ?? {};
+    const confidence = {
+        preview: properties.confidence?.preview ?? 0.3,
+        show: properties.confidence?.show ?? 0.6,
+        switch: properties.confidence?.switch ?? 0.85
+    };
+    const text = value?.text ?? '';
+    // Keep the last answer while the next one loads, so the slot does not drop out
+    // between keystrokes.
+    const heldAnswer = useRef(null);
+    if (!type.isNone(properties.answer)) heldAnswer.current = properties.answer;
+    const scores = answerScores({
+        answer: heldAnswer.current,
+        intents
+    });
+    const [state, setState] = useState(IDLE);
+    const [pinned, setPinned] = useState(null);
+    // A round runs each time the latest classification finishes, not when the scores
+    // change: an answer that repeats the last one (the same text typed again after a
+    // clear) still counts, and a classification a newer one replaced does not.
+    const [round, setRound] = useState(0);
+    const latestClassify = useRef(0);
+    useEffect(()=>{
+        latestClassify.current += 1;
+        if (!text) {
+            setState(IDLE);
+            setPinned(null);
+            return undefined;
+        }
+        const classify = latestClassify.current;
+        const timer = setTimeout(async ()=>{
+            const result = await methods.triggerEvent({
+                name: 'onClassify',
+                event: {
+                    text
+                }
+            });
+            if (classify === latestClassify.current && result.success) setRound((n)=>n + 1);
+        }, CLASSIFY_DELAY);
+        return ()=>clearTimeout(timer);
+    }, [
+        text
+    ]);
+    useEffect(()=>{
+        if (!text) return;
+        setState((current)=>nextIntentState({
+                state: current,
+                scores,
+                confidence
+            }));
+    }, [
+        round
+    ]);
+    // Typing restarts the pause, so a challenger only wins on a pause while the user
+    // is not typing.
+    useEffect(()=>{
+        if (state.challenger === undefined) return undefined;
+        const timer = setTimeout(()=>setState((current)=>nextIntentState({
+                    state: current,
+                    scores,
+                    confidence
+                })), SETTLE_DELAY);
+        return ()=>clearTimeout(timer);
+    }, [
+        state.challenger,
+        round,
+        text
+    ]);
+    // A picked choice holds until the scores commit to a different intent on their own.
+    useEffect(()=>{
+        if (pinned && state.mode === 'committed' && state.intent !== pinned) setPinned(null);
+    }, [
+        state
+    ]);
+    const intent = pinned ?? state.intent;
+    const mode = pinned ? 'committed' : state.mode;
+    // onIntentChange fires when the shown intent or mode changes, not on mount.
+    const shown = useRef({
+        intent: null,
+        mode: 'idle'
+    });
+    useEffect(()=>{
+        if (value?.intent !== intent || value?.mode !== mode) methods.setValue({
+            text,
+            intent,
+            mode
+        });
+        if (shown.current.intent === intent && shown.current.mode === mode) return;
+        shown.current = {
+            intent,
+            mode
+        };
+        methods.triggerEvent({
+            name: 'onIntentChange',
+            event: {
+                intent,
+                mode
+            }
+        });
+    }, [
+        intent,
+        mode
+    ]);
+    const innerRef = useRef(null);
+    const [height, setHeight] = useState(0);
+    useLayoutEffect(()=>{
+        const observer = new ResizeObserver(([entry])=>setHeight(entry.target.offsetHeight));
+        observer.observe(innerRef.current);
+        return ()=>observer.disconnect();
+    }, []);
+    const accentOf = (key)=>intents[key]?.color ?? token.colorPrimary;
+    const labelOf = (key)=>intents[key]?.label ?? key;
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        "data-mode": mode,
+        className: `${css.root} ${classNames.element ?? ''}`,
+        style: {
+            '--accent': intent ? accentOf(intent) : token.colorPrimary,
+            '--border': token.colorBorderSecondary,
+            '--bg': token.colorBgContainer,
+            '--text': token.colorText,
+            '--muted': token.colorTextTertiary,
+            fontFamily: token.fontFamily,
+            ...styles.element
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: css.field
+    }, /*#__PURE__*/ React.createElement("input", {
+        id: `${blockId}_input`,
+        className: css.input,
+        autoFocus: properties.autoFocus,
+        autoComplete: "off",
+        placeholder: properties.placeholder,
+        value: text,
+        onChange: (event)=>{
+            methods.setValue({
+                text: event.target.value,
+                intent,
+                mode
+            });
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    text: event.target.value
+                }
+            });
+        },
+        onKeyDown: (event)=>{
+            // Enter while an IME is composing picks a candidate; it must not submit.
+            if (event.key !== 'Enter' || event.nativeEvent.isComposing) return;
+            methods.triggerEvent({
+                name: 'onSubmit',
+                event: {
+                    text,
+                    intent,
+                    mode
+                }
+            });
+        }
+    }), intent && /*#__PURE__*/ React.createElement("span", {
+        key: intent,
+        className: css.badge
+    }, intents[intent]?.icon && /*#__PURE__*/ React.createElement(Icon, {
+        blockId: `${blockId}_badge_icon`,
+        properties: intents[intent].icon
+    }), labelOf(intent), mode !== 'committed' && '?')), /*#__PURE__*/ React.createElement("div", {
+        className: css.morph,
+        style: {
+            height
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: innerRef,
+        className: css.inner
+    }, mode === 'choose' && /*#__PURE__*/ React.createElement("div", {
+        className: css.choices
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: css.choicesLabel
+    }, "Did you mean"), state.choices.map((key)=>/*#__PURE__*/ React.createElement("button", {
+            key: key,
+            type: "button",
+            className: css.choice,
+            style: {
+                '--accent': accentOf(key)
+            },
+            onClick: ()=>setPinned(key)
+        }, intents[key]?.icon && /*#__PURE__*/ React.createElement(Icon, {
+            blockId: `${blockId}_choice_${key}_icon`,
+            properties: intents[key].icon
+        }), labelOf(key)))), intent && content[intent] && /*#__PURE__*/ React.createElement("div", {
+        key: intent,
+        className: css.slot,
+        "data-preview": mode !== 'committed'
+    }, content[intent]()))));
+}
+export default withBlockDefaults(IntentInput);