@lowdefy/blocks-antd-x 6.1.0 → 7.1.0

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);

package/dist/blocks/IntentInput/IntentInput.module.css

@@ -0,0 +1,159 @@
+.root {
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: var(--bg);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 4%),
+    0 10px 30px -14px rgb(0 0 0 / 18%);
+  transition:
+    border-color 320ms ease,
+    box-shadow 320ms ease;
+  overflow: hidden;
+}
+
+.root[data-mode='committed'] {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
+  box-shadow:
+    0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent),
+    0 14px 36px -18px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+.field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 20px;
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 18px;
+}
+
+.input::placeholder {
+  color: var(--muted);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border: 1px dashed var(--border);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+  animation: pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
+  transition:
+    color 260ms ease,
+    background 260ms ease,
+    border-color 260ms ease;
+}
+
+.root[data-mode='committed'] .badge {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  color: color-mix(in srgb, var(--accent) 60%, var(--text));
+}
+
+.morph {
+  overflow: hidden;
+  transition: height 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.inner:not(:empty) {
+  border-top: 1px solid var(--border);
+}
+
+.choices {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px 0;
+  animation: rise 220ms ease;
+}
+
+.choicesLabel {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.choice {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    color 160ms ease;
+}
+
+.choice:hover {
+  border-color: var(--accent);
+  color: color-mix(in srgb, var(--accent) 60%, var(--text));
+}
+
+.slot {
+  padding: 16px 20px 20px;
+  animation: rise 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  transform-origin: top center;
+  transition:
+    opacity 280ms ease,
+    filter 280ms ease,
+    transform 280ms ease;
+}
+
+.slot[data-preview='true'] {
+  opacity: 0.42;
+  filter: saturate(0.2) blur(0.6px);
+  transform: scale(0.985);
+  pointer-events: none;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes pop {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root,
+  .badge,
+  .morph,
+  .choices,
+  .slot {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/blocks/IntentInput/answerScores.js

@@ -0,0 +1,34 @@
+/*
+  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.
+*/ // A Decide choice answer ({ choice, confidence, probabilities }) as a score per
+// intent. Options without an intent (such as a `none` escape option) drop out.
+// The provider's calibrated confidence, where it reports one, is the chosen
+// intent's score, and the other intents keep their ratio to it: mixing calibrated
+// and raw scores could rank a rival above the intent the model chose.
+function answerScores({ answer, intents }) {
+    const probabilities = answer?.probabilities ?? {};
+    const chosen = Object.hasOwn(intents, answer?.choice ?? '') ? answer.choice : null;
+    let scale = 1;
+    if (chosen && Number.isFinite(answer.confidence) && probabilities[chosen] > 0) {
+        scale = answer.confidence / probabilities[chosen];
+    }
+    const scores = {};
+    Object.keys(intents).forEach((key)=>{
+        if (Number.isFinite(probabilities[key])) scores[key] = probabilities[key] * scale;
+    });
+    if (chosen && Number.isFinite(answer.confidence)) scores[chosen] = answer.confidence;
+    return scores;
+}
+export default answerScores;

package/dist/blocks/IntentInput/gallery.yaml

@@ -0,0 +1,81 @@
+# 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.
+
+# A keyword classifier stands in for a Decide request so the example runs
+# without a model. Try "fix the login bug", "sync with Sam friday 2pm" or
+# "standup".
+- title: Capture box
+  blocks:
+    - id: capture_demo
+      type: IntentInput
+      properties:
+        placeholder: Try "fix the login bug" or "sync with Sam friday 2pm"
+        intents:
+          task:
+            label: Task
+            icon: CircleCheck
+            color: '#6366f1'
+          meeting:
+            label: Meeting
+            icon: Calendar
+            color: '#0ea5e9'
+        answer:
+          _state: capture_demo_answer
+      events:
+        onClassify:
+          - id: classify
+            type: SetState
+            params:
+              capture_demo_answer:
+                _js:
+                  fn: |
+                    const text = args.text.toLowerCase();
+                    const probabilities = { task: 0.05, meeting: 0.05 };
+                    if (/^(fix|add|build|update|remove)\b/.test(text)) probabilities.task = 0.9;
+                    if (/\b(sync|meeting|call|standup)\b/.test(text)) {
+                      probabilities.meeting = /\d|today|tomorrow|day\b/.test(text) ? 0.9 : 0.4;
+                    }
+                    return { probabilities };
+                  args:
+                    text:
+                      _event: text
+      slots:
+        task:
+          blocks:
+            - id: capture_demo_task
+              type: Paragraph
+              properties:
+                content:
+                  _string.concat:
+                    - 'New task: '
+                    - _state: capture_demo.text
+            - id: capture_demo_create
+              type: Button
+              properties:
+                title: Create task
+                type: primary
+        meeting:
+          blocks:
+            - id: capture_demo_meeting
+              type: Paragraph
+              properties:
+                content:
+                  _string.concat:
+                    - 'New meeting: '
+                    - _state: capture_demo.text
+            - id: capture_demo_invite
+              type: Button
+              properties:
+                title: Send invite
+                type: primary

package/dist/blocks/IntentInput/meta.js

@@ -0,0 +1,164 @@
+/*
+  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.
+*/ const level = {
+    type: 'number',
+    minimum: 0,
+    maximum: 1
+};
+const mode = '`idle` (nothing recognised), `preview`, `choose` or `committed`.';
+export default {
+    // An input with slots: its value is { text, intent, mode }, and each intent shows the
+    // slot named after it, so slot names are authored and cannot be enumerated.
+    category: 'input-container',
+    icons: [],
+    valueType: 'object',
+    slots: false,
+    cssKeys: {
+        element: 'The IntentInput element.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when the user types.',
+            event: {
+                text: 'The current text.'
+            }
+        },
+        onClassify: {
+            description: 'Trigger actions shortly after the text changes, to classify it. Typically runs a Decide request whose answer is passed back as `answer`.',
+            event: {
+                text: 'The text to classify.'
+            }
+        },
+        onIntentChange: {
+            description: 'Trigger actions when the shown intent or its mode changes.',
+            event: {
+                intent: 'The shown intent, or null.',
+                mode
+            }
+        },
+        onSubmit: {
+            description: 'Trigger actions when Enter is pressed.',
+            event: {
+                text: 'The current text.',
+                intent: 'The shown intent, or null.',
+                mode
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            autoFocus: {
+                type: 'boolean',
+                description: 'Focus the input on mount.'
+            },
+            placeholder: {
+                type: 'string',
+                description: 'Placeholder text.'
+            },
+            intents: {
+                type: 'object',
+                description: 'The intents the text can become, by name. Each name is also the slot shown for it. The same object can be the options of the Decide question that classifies the text.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                additionalProperties: {
+                    type: 'object',
+                    additionalProperties: false,
+                    properties: {
+                        label: {
+                            type: 'string',
+                            description: 'Name shown on the badge and choices.'
+                        },
+                        icon: {
+                            type: [
+                                'string',
+                                'object'
+                            ],
+                            description: 'Icon name or Icon block properties for the badge and choices.'
+                        },
+                        color: {
+                            type: 'string',
+                            description: 'Accent color of the edge and badge.'
+                        },
+                        description: {
+                            type: 'string',
+                            description: 'What the intent means. Read by the classifier, not shown.'
+                        }
+                    }
+                }
+            },
+            answer: {
+                type: [
+                    'object',
+                    'null'
+                ],
+                description: 'The classification of the current text, in the shape of a Decide choice answer: `_request: classify.intent`. Options that are not intents, such as a `none` option, are ignored. While a new answer loads, the last one is kept.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                properties: {
+                    choice: {
+                        type: [
+                            'string',
+                            'null'
+                        ]
+                    },
+                    confidence: {
+                        type: [
+                            'number',
+                            'null'
+                        ]
+                    },
+                    probabilities: {
+                        type: [
+                            'object',
+                            'null'
+                        ],
+                        additionalProperties: {
+                            type: 'number'
+                        }
+                    }
+                }
+            },
+            confidence: {
+                type: 'object',
+                additionalProperties: false,
+                description: 'How sure the answer must be before the slot changes how it looks.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                properties: {
+                    preview: {
+                        ...level,
+                        default: 0.3,
+                        description: 'Show a faded preview of the slot from this confidence.'
+                    },
+                    show: {
+                        ...level,
+                        default: 0.6,
+                        description: 'Commit to the intent and show its slot solid from this confidence.'
+                    },
+                    switch: {
+                        ...level,
+                        default: 0.85,
+                        description: 'Replace the shown intent at once from this confidence. Below it, another intent must lead twice in a row, or hold the lead while the user pauses.'
+                    }
+                }
+            }
+        }
+    }
+};