@flowgram.ai/form-materials 0.1.0-alpha.14 → 0.1.0-alpha.16

package/dist/esm/components/condition-context/index.mjs

@@ -0,0 +1,4 @@
+import { ConditionPresetOp } from "./op.mjs";
+import { ConditionProvider, useConditionContext } from "./context.mjs";
+import { useCondition } from "./hooks/use-condition.mjs";
+export { ConditionPresetOp, ConditionProvider, useCondition, useConditionContext };

package/dist/esm/components/condition-context/op.mjs

@@ -0,0 +1,80 @@
+var op_ConditionPresetOp = /*#__PURE__*/ function(ConditionPresetOp) {
+    ConditionPresetOp["EQ"] = "eq";
+    ConditionPresetOp["NEQ"] = "neq";
+    ConditionPresetOp["GT"] = "gt";
+    ConditionPresetOp["GTE"] = "gte";
+    ConditionPresetOp["LT"] = "lt";
+    ConditionPresetOp["LTE"] = "lte";
+    ConditionPresetOp["IN"] = "in";
+    ConditionPresetOp["NIN"] = "nin";
+    ConditionPresetOp["CONTAINS"] = "contains";
+    ConditionPresetOp["NOT_CONTAINS"] = "not_contains";
+    ConditionPresetOp["IS_EMPTY"] = "is_empty";
+    ConditionPresetOp["IS_NOT_EMPTY"] = "is_not_empty";
+    ConditionPresetOp["IS_TRUE"] = "is_true";
+    ConditionPresetOp["IS_FALSE"] = "is_false";
+    return ConditionPresetOp;
+}({});
+const defaultConditionOpConfigs = {
+    ["eq"]: {
+        label: 'Equal',
+        abbreviation: '='
+    },
+    ["neq"]: {
+        label: 'Not Equal',
+        abbreviation: '≠'
+    },
+    ["gt"]: {
+        label: 'Greater Than',
+        abbreviation: '>'
+    },
+    ["gte"]: {
+        label: 'Greater Than or Equal',
+        abbreviation: '>='
+    },
+    ["lt"]: {
+        label: 'Less Than',
+        abbreviation: '<'
+    },
+    ["lte"]: {
+        label: 'Less Than or Equal',
+        abbreviation: '<='
+    },
+    ["in"]: {
+        label: 'In',
+        abbreviation: '∈'
+    },
+    ["nin"]: {
+        label: 'Not In',
+        abbreviation: '∉'
+    },
+    ["contains"]: {
+        label: 'Contains',
+        abbreviation: '⊇'
+    },
+    ["not_contains"]: {
+        label: 'Not Contains',
+        abbreviation: '⊉'
+    },
+    ["is_empty"]: {
+        label: 'Is Empty',
+        abbreviation: '=',
+        rightDisplay: 'Empty'
+    },
+    ["is_not_empty"]: {
+        label: 'Is Not Empty',
+        abbreviation: '≠',
+        rightDisplay: 'Empty'
+    },
+    ["is_true"]: {
+        label: 'Is True',
+        abbreviation: '=',
+        rightDisplay: 'True'
+    },
+    ["is_false"]: {
+        label: 'Is False',
+        abbreviation: '=',
+        rightDisplay: 'False'
+    }
+};
+export { op_ConditionPresetOp as ConditionPresetOp, defaultConditionOpConfigs };

package/dist/esm/components/condition-row/index.mjs

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { I18n, useScopeAvailable } from "@flowgram.ai/editor";
+import { Button, Input, Select } from "@douyinfe/semi-ui";
+import { IconChevronDownStroked } from "@douyinfe/semi-icons";
+import { InjectVariableSelector } from "../variable-selector/index.mjs";
+import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
+import { useCondition } from "../condition-context/index.mjs";
+import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from "./styles.mjs";
+const defaultRuleConfig = {
+    ops: {},
+    rules: {}
+};
+function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRuleConfig }) {
+    const { left, operator, right } = value || {};
+    const available = useScopeAvailable();
+    const variable = useMemo(()=>{
+        if (!left) return;
+        return available.getByKeyPath(left.content);
+    }, [
+        available,
+        left
+    ]);
+    const leftSchema = useMemo(()=>{
+        if (!variable) return;
+        return JsonSchemaUtils.astToSchema(variable.type, {
+            drilldown: false
+        });
+    }, [
+        variable?.type?.hash
+    ]);
+    const { rule, opConfig, opOptionList, targetSchema } = useCondition({
+        leftSchema,
+        operator
+    });
+    const renderOpSelect = ()=>/*#__PURE__*/ jsx(Select, {
+            style: {
+                height: 22
+            },
+            disabled: readonly,
+            size: "small",
+            value: operator,
+            optionList: opOptionList,
+            onChange: (v)=>{
+                onChange({
+                    ...value,
+                    operator: v
+                });
+            },
+            triggerRender: ({ value })=>/*#__PURE__*/ jsx(Button, {
+                    size: "small",
+                    disabled: !rule,
+                    children: opConfig?.abbreviation || /*#__PURE__*/ jsx(IconChevronDownStroked, {
+                        size: "small"
+                    })
+                })
+        });
+    return /*#__PURE__*/ jsxs(UIContainer, {
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(UIOperator, {
+                children: renderOpSelect()
+            }),
+            /*#__PURE__*/ jsxs(UIValues, {
+                children: [
+                    /*#__PURE__*/ jsx(UILeft, {
+                        children: /*#__PURE__*/ jsx(InjectVariableSelector, {
+                            readonly: readonly,
+                            style: {
+                                width: '100%'
+                            },
+                            value: left?.content,
+                            onChange: (v)=>onChange({
+                                    ...value,
+                                    left: {
+                                        type: 'ref',
+                                        content: v
+                                    }
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(UIRight, {
+                        children: targetSchema ? /*#__PURE__*/ jsx(InjectDynamicValueInput, {
+                            readonly: readonly || !rule,
+                            value: right,
+                            schema: targetSchema,
+                            onChange: (v)=>onChange({
+                                    ...value,
+                                    right: v
+                                })
+                        }) : /*#__PURE__*/ jsx(Input, {
+                            size: "small",
+                            disabled: true,
+                            style: {
+                                pointerEvents: 'none'
+                            },
+                            value: opConfig?.rightDisplay || I18n.t('Empty')
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { ConditionRow };

package/dist/esm/components/condition-row/styles.mjs

@@ -0,0 +1,21 @@
+import styled_components from "styled-components";
+const UIContainer = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const UIOperator = styled_components.div``;
+const UILeft = styled_components.div`
+  width: 100%;
+`;
+const UIRight = styled_components.div`
+  width: 100%;
+`;
+const UIValues = styled_components.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+`;
+export { UIContainer, UILeft, UIOperator, UIRight, UIValues };

package/dist/esm/components/constant-input/index.mjs

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import react, { useMemo } from "react";
+import { Input } from "@douyinfe/semi-ui";
+import { useTypeManager } from "../../plugins/index.mjs";
+function ConstantInput(props) {
+    const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;
+    const typeManager = useTypeManager();
+    const Renderer = useMemo(()=>{
+        const strategy = (strategies || []).find((_strategy)=>_strategy.hit(schema));
+        if (!strategy) return typeManager.getTypeBySchema(schema)?.ConstantRenderer;
+        return strategy?.Renderer;
+    }, [
+        strategies,
+        schema
+    ]);
+    if (!Renderer) {
+        if (fallbackRenderer) return /*#__PURE__*/ react.createElement(fallbackRenderer, {
+            value,
+            onChange,
+            readonly,
+            ...rest
+        });
+        return /*#__PURE__*/ jsx(Input, {
+            size: "small",
+            disabled: true,
+            placeholder: "Unsupported type"
+        });
+    }
+    return /*#__PURE__*/ jsx(Renderer, {
+        value: value,
+        onChange: onChange,
+        readonly: readonly,
+        ...rest
+    });
+}
+export { ConstantInput };

package/dist/esm/components/coze-editor-extensions/extensions/inputs-tree.mjs

@@ -0,0 +1,135 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { isPlainObject, last } from "lodash-es";
+import { ASTMatch, useScopeAvailable } from "@flowgram.ai/editor";
+import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
+import { Popover, Tree } from "@douyinfe/semi-ui";
+import { FlowValueUtils } from "../../../shared/index.mjs";
+function InputsPicker({ inputsValues, onSelect }) {
+    const available = useScopeAvailable();
+    const getArrayDrilldown = (type, depth = 1)=>{
+        if (ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
+        return {
+            type: type.items,
+            depth: depth
+        };
+    };
+    const renderVariable = (variable, keyPath)=>{
+        let type = variable?.type;
+        let children;
+        if (ASTMatch.isObject(type)) children = (type.properties || []).map((_property)=>renderVariable(_property, [
+                ...keyPath,
+                _property.key
+            ])).filter(Boolean);
+        if (ASTMatch.isArray(type)) {
+            const drilldown = getArrayDrilldown(type);
+            if (ASTMatch.isObject(drilldown.type)) children = (drilldown.type.properties || []).map((_property)=>renderVariable(_property, [
+                    ...keyPath,
+                    ...new Array(drilldown.depth).fill('[0]'),
+                    _property.key
+                ])).filter(Boolean);
+        }
+        const key = keyPath.map((_key, idx)=>'[0]' === _key || 0 === idx ? _key : `.${_key}`).join('');
+        return {
+            key: key,
+            label: last(keyPath),
+            value: key,
+            children
+        };
+    };
+    const getTreeData = (value, keyPath)=>{
+        const currKey = keyPath.join('.');
+        if (FlowValueUtils.isFlowValue(value)) {
+            if (FlowValueUtils.isRef(value)) {
+                const variable = available.getByKeyPath(value.content || []);
+                if (variable) return renderVariable(variable, keyPath);
+            }
+            return {
+                key: currKey,
+                value: currKey,
+                label: last(keyPath)
+            };
+        }
+        if (isPlainObject(value)) return {
+            key: currKey,
+            value: currKey,
+            label: last(keyPath),
+            children: Object.entries(value).map(([key, value])=>getTreeData(value, [
+                    ...keyPath,
+                    key
+                ])).filter(Boolean)
+        };
+    };
+    const treeData = useMemo(()=>Object.entries(inputsValues).map(([key, value])=>getTreeData(value, [
+                key
+            ])).filter(Boolean), []);
+    return /*#__PURE__*/ jsx(Tree, {
+        treeData: treeData,
+        onSelect: (v)=>onSelect(v)
+    });
+}
+const DEFAULT_TRIGGER_CHARACTERS = [
+    '{',
+    '{}',
+    '@'
+];
+function InputsTree({ inputsValues, triggerCharacters = DEFAULT_TRIGGER_CHARACTERS }) {
+    const [posKey, setPosKey] = useState('');
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState(-1);
+    const editor = useEditor();
+    function insert(variablePath) {
+        const range = getCurrentMentionReplaceRange(editor.$view.state);
+        if (!range) return;
+        let { from, to } = range;
+        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
+        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
+        editor.replaceText({
+            ...range,
+            text: '{{' + variablePath + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    useEffect(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Mention, {
+                triggerCharacters: triggerCharacters,
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
+                    },
+                    children: /*#__PURE__*/ jsx(InputsPicker, {
+                        inputsValues: inputsValues,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ jsx(PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+export { InputsPicker, InputsTree };

package/dist/esm/components/coze-editor-extensions/extensions/variable-tag.mjs

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect } from "react";
+import { isEqual, last } from "lodash-es";
+import { Disposable, DisposableCollection, useCurrentScope } from "@flowgram.ai/editor";
+import { useInjector } from "@flowgram.ai/coze-editor/react";
+import { Popover } from "@douyinfe/semi-ui";
+import { IconIssueStroked } from "@douyinfe/semi-icons";
+import { Decoration, EditorView, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
+import { polyfillCreateRoot } from "../../../shared/index.mjs";
+import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from "../styles.mjs";
+class VariableTagWidget extends WidgetType {
+    constructor({ keyPath, scope }){
+        super(), this.toDispose = new DisposableCollection(), this.renderIcon = (icon)=>{
+            if ('string' == typeof icon) return /*#__PURE__*/ jsx("img", {
+                style: {
+                    marginRight: 8
+                },
+                width: 12,
+                height: 12,
+                src: icon
+            });
+            return icon;
+        };
+        this.keyPath = keyPath;
+        this.scope = scope;
+    }
+    renderVariable(v) {
+        if (!v) return void this.root.render(/*#__PURE__*/ jsx(UITag, {
+            prefixIcon: /*#__PURE__*/ jsx(IconIssueStroked, {}),
+            color: "amber",
+            children: "Unknown"
+        }));
+        const rootField = last(v.parentFields) || v;
+        const isRoot = v === rootField;
+        const rootTitle = /*#__PURE__*/ jsx(UIRootTitle, {
+            children: rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''
+        });
+        const rootIcon = this.renderIcon(rootField?.meta.icon);
+        this.root.render(/*#__PURE__*/ jsx(Popover, {
+            content: /*#__PURE__*/ jsxs(UIPopoverContent, {
+                children: [
+                    rootIcon,
+                    rootTitle,
+                    /*#__PURE__*/ jsx(UIVarName, {
+                        children: v?.keyPath.slice(1).join('.')
+                    })
+                ]
+            }),
+            children: /*#__PURE__*/ jsxs(UITag, {
+                prefixIcon: rootIcon,
+                children: [
+                    rootTitle,
+                    !isRoot && /*#__PURE__*/ jsx(UIVarName, {
+                        children: v?.key
+                    })
+                ]
+            })
+        }));
+    }
+    toDOM(view) {
+        const dom = document.createElement('span');
+        this.root = polyfillCreateRoot(dom);
+        this.toDispose.push(Disposable.create(()=>{
+            this.root.unmount();
+        }));
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
+            this.renderVariable(v);
+        }, {
+            triggerOnInit: false
+        }));
+        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        return dom;
+    }
+    eq(other) {
+        return isEqual(this.keyPath, other.keyPath);
+    }
+    ignoreEvent() {
+        return false;
+    }
+    destroy(dom) {
+        this.toDispose.dispose();
+    }
+}
+function VariableTagInject() {
+    const injector = useInjector();
+    const scope = useCurrentScope();
+    useLayoutEffect(()=>{
+        const atMatcher = new MatchDecorator({
+            regexp: /\{\{([^\}\{]+)\}\}/g,
+            decoration: (match)=>Decoration.replace({
+                    widget: new VariableTagWidget({
+                        keyPath: match[1]?.split('.') ?? [],
+                        scope
+                    })
+                })
+        });
+        return injector.inject([
+            ViewPlugin.fromClass(class {
+                constructor(view){
+                    this.view = view;
+                    this.decorations = atMatcher.createDeco(view);
+                }
+                update() {
+                    this.decorations = atMatcher.createDeco(this.view);
+                }
+            }, {
+                decorations: (p)=>p.decorations,
+                provide (p) {
+                    return EditorView.atomicRanges.of((view)=>view.plugin(p)?.decorations ?? Decoration.none);
+                }
+            })
+        ]);
+    }, [
+        injector
+    ]);
+    return null;
+}
+export { VariableTagInject };

package/dist/esm/components/coze-editor-extensions/extensions/variable-tree.mjs

@@ -0,0 +1,75 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
+import { Popover, Tree } from "@douyinfe/semi-ui";
+import { useVariableTree } from "../../variable-selector/index.mjs";
+const DEFAULT_TRIGGER_CHARACTER = [
+    '{',
+    '{}',
+    '@'
+];
+function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
+    const [posKey, setPosKey] = useState('');
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState(-1);
+    const editor = useEditor();
+    function insert(variablePath) {
+        const range = getCurrentMentionReplaceRange(editor.$view.state);
+        if (!range) return;
+        let { from, to } = range;
+        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
+        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
+        editor.replaceText({
+            from,
+            to,
+            text: '{{' + variablePath + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    useEffect(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    const treeData = useVariableTree({});
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Mention, {
+                triggerCharacters: triggerCharacters,
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
+                    },
+                    children: /*#__PURE__*/ jsx(Tree, {
+                        treeData: treeData,
+                        onExpand: (v)=>{
+                            setPosKey(String(Math.random()));
+                        },
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ jsx(PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+export { VariableTree };

package/dist/esm/components/coze-editor-extensions/index.mjs

@@ -0,0 +1,18 @@
+import { lazy } from "react";
+import { createInjectMaterial } from "../../shared/index.mjs";
+const EditorVariableTree = createInjectMaterial(/*#__PURE__*/ lazy(()=>import("./extensions/variable-tree.mjs").then((module)=>({
+            default: module.VariableTree
+        }))), {
+    renderKey: 'EditorVariableTree'
+});
+const EditorVariableTagInject = createInjectMaterial(/*#__PURE__*/ lazy(()=>import("./extensions/variable-tag.mjs").then((module)=>({
+            default: module.VariableTagInject
+        }))), {
+    renderKey: 'EditorVariableTagInject'
+});
+const EditorInputsTree = createInjectMaterial(/*#__PURE__*/ lazy(()=>import("./extensions/inputs-tree.mjs").then((module)=>({
+            default: module.InputsTree
+        }))), {
+    renderKey: 'EditorInputsTree'
+});
+export { EditorInputsTree, EditorVariableTagInject, EditorVariableTree };

package/{src/components/prompt-editor-with-variables/styles.tsx → dist/esm/components/coze-editor-extensions/styles.mjs}

@@ -1,12 +1,6 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import styled from 'styled-components';
-import { Tag } from '@douyinfe/semi-ui';
-
-export const UIRootTitle = styled.div`
+import styled_components from "styled-components";
+import { Tag } from "@douyinfe/semi-ui";
+const UIRootTitle = styled_components.div`
   margin-right: 4px;
   min-width: 20px;
   overflow: hidden;
@@ -14,14 +8,12 @@ export const UIRootTitle = styled.div`
   white-space: nowrap;
   color: var(--semi-color-text-2);
 `;
-
-export const UIVarName = styled.div`
+const UIVarName = styled_components.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-
-export const UITag = styled(Tag)`
+const UITag = styled_components(Tag)`
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
@@ -35,10 +27,10 @@ export const UITag = styled(Tag)`
     margin: 0 5px;
   }
 `;
-
-export const UIPopoverContent = styled.div`
+const UIPopoverContent = styled_components.div`
   padding: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
 `;
+export { UIPopoverContent, UIRootTitle, UITag, UIVarName };