@flowgram.ai/form-materials 0.4.8 → 0.4.10

package/dist/esm/components/json-editor-with-variables/editor.mjs

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { transformerCreator } from "@flowgram.ai/coze-editor/preset-code";
+import { CodeEditor } from "../code-editor/index.mjs";
+import { VariableTree } from "./extensions/variable-tree.mjs";
+import { VariableTagInject } from "./extensions/variable-tag.mjs";
+function findAllMatches(inputString, regex) {
+    const globalRegex = new RegExp(regex, regex.flags.includes('g') ? regex.flags : regex.flags + 'g');
+    let match;
+    const matches = [];
+    while(null !== (match = globalRegex.exec(inputString))){
+        if (match.index === globalRegex.lastIndex) globalRegex.lastIndex++;
+        matches.push({
+            match: match[0],
+            range: [
+                match.index,
+                match.index + match[0].length
+            ]
+        });
+    }
+    return matches;
+}
+const transformer = transformerCreator((text)=>{
+    const originalSource = text.toString();
+    const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
+    if (matches.length > 0) matches.forEach(({ range })=>{
+        text.replaceRange(range[0], range[1], 'null');
+    });
+    return text;
+});
+function JsonEditorWithVariables(props) {
+    return /*#__PURE__*/ jsxs(CodeEditor, {
+        languageId: "json",
+        activeLinePlaceholder: I18n.t("Press '@' to Select variable"),
+        ...props,
+        options: {
+            transformer,
+            ...props.options || {}
+        },
+        children: [
+            /*#__PURE__*/ jsx(VariableTree, {}),
+            /*#__PURE__*/ jsx(VariableTagInject, {})
+        ]
+    });
+}
+export { JsonEditorWithVariables };

package/dist/esm/components/json-editor-with-variables/extensions/variable-tag.mjs

@@ -0,0 +1,117 @@
+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);
+        const rootTitle = /*#__PURE__*/ jsx(UIRootTitle, {
+            children: rootField?.meta.title ? `${rootField.meta.title} -` : ''
+        });
+        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,
+                    /*#__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/json-editor-with-variables/extensions/variable-tree.mjs

@@ -0,0 +1,63 @@
+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";
+function VariableTree() {
+    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;
+        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
+    ]);
+    const treeData = useVariableTree({});
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Mention, {
+                triggerCharacters: [
+                    '@'
+                ],
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: 300
+                    },
+                    children: /*#__PURE__*/ jsx(Tree, {
+                        treeData: treeData,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ jsx(PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+export { VariableTree };

package/dist/esm/components/json-editor-with-variables/index.mjs

@@ -0,0 +1,5 @@
+import { lazySuspense } from "../../shared/index.mjs";
+const JsonEditorWithVariables = lazySuspense(()=>import("./editor.mjs").then((module)=>({
+            default: module.JsonEditorWithVariables
+        })));
+export { JsonEditorWithVariables };

package/dist/esm/components/json-editor-with-variables/styles.mjs

@@ -0,0 +1,36 @@
+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;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+const UIVarName = styled_components.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const UITag = styled_components(Tag)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 300px;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+`;
+const UIPopoverContent = styled_components.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+export { UIPopoverContent, UIRootTitle, UITag, UIVarName };

package/dist/esm/components/json-schema-editor/default-value.mjs

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { ConstantInput } from "../constant-input/index.mjs";
+import { ConstantInputWrapper } from "./styles.mjs";
+function DefaultValue(props) {
+    const { value, schema, onChange, placeholder } = props;
+    return /*#__PURE__*/ jsx(ConstantInputWrapper, {
+        children: /*#__PURE__*/ jsx(ConstantInput, {
+            value: value,
+            onChange: (_v)=>onChange(_v),
+            schema: schema || {
+                type: 'string'
+            },
+            placeholder: placeholder ?? I18n.t('Default value if parameter is not provided'),
+            enableMultiLineStr: true
+        })
+    });
+}
+export { DefaultValue };

package/dist/esm/components/json-schema-editor/hooks.mjs

@@ -0,0 +1,96 @@
+import { useEffect, useRef, useState } from "react";
+import { difference, omit } from "lodash-es";
+import { produce } from "immer";
+import { useTypeManager } from "@flowgram.ai/json-schema";
+let _id = 0;
+function genId() {
+    return _id++;
+}
+function usePropertiesEdit(value, onChange) {
+    const typeManager = useTypeManager();
+    const drilldownSchema = typeManager.getPropertiesParent(value || {});
+    const canAddField = typeManager.canAddField(value || {});
+    const [propertyList, setPropertyList] = useState([]);
+    const effectVersion = useRef(0);
+    const changeVersion = useRef(0);
+    useEffect(()=>{
+        effectVersion.current = effectVersion.current + 1;
+        if (effectVersion.current === changeVersion.current) return;
+        effectVersion.current = changeVersion.current;
+        setPropertyList((_list)=>{
+            const newNames = Object.entries(drilldownSchema?.properties || {}).sort(([, a], [, b])=>(a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([key])=>key);
+            const oldNames = _list.map((item)=>item.name).filter(Boolean);
+            const addNames = difference(newNames, oldNames);
+            return _list.filter((item)=>!item.name || newNames.includes(item.name)).map((item)=>({
+                    key: item.key,
+                    name: item.name,
+                    isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
+                    ...drilldownSchema?.properties?.[item.name || ''] || item || {}
+                })).concat(addNames.map((_name)=>({
+                    key: genId(),
+                    name: _name,
+                    isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+                    ...drilldownSchema?.properties?.[_name] || {}
+                })));
+        });
+    }, [
+        drilldownSchema
+    ]);
+    const updatePropertyList = (updater)=>{
+        changeVersion.current = changeVersion.current + 1;
+        setPropertyList((_list)=>{
+            const next = updater(_list);
+            const nextProperties = {};
+            const nextRequired = [];
+            for (const _property of next)if (_property.name) {
+                nextProperties[_property.name] = omit(_property, [
+                    'key',
+                    'name',
+                    'isPropertyRequired'
+                ]);
+                if (_property.isPropertyRequired) nextRequired.push(_property.name);
+            }
+            onChange?.(produce(value || {}, (draft)=>{
+                const propertiesParent = typeManager.getPropertiesParent(draft);
+                if (propertiesParent) {
+                    propertiesParent.properties = nextProperties;
+                    propertiesParent.required = nextRequired;
+                    return;
+                }
+            }));
+            return next;
+        });
+    };
+    const onAddProperty = ()=>{
+        setPropertyList((_list)=>[
+                ..._list,
+                {
+                    key: genId(),
+                    name: '',
+                    type: 'string',
+                    extra: {
+                        index: _list.length + 1
+                    }
+                }
+            ]);
+    };
+    const onRemoveProperty = (key)=>{
+        updatePropertyList((_list)=>_list.filter((_property)=>_property.key !== key));
+    };
+    const onEditProperty = (key, nextValue)=>{
+        updatePropertyList((_list)=>_list.map((_property)=>_property.key === key ? nextValue : _property));
+    };
+    useEffect(()=>{
+        if (!canAddField) setPropertyList([]);
+    }, [
+        canAddField
+    ]);
+    return {
+        propertyList,
+        canAddField,
+        onAddProperty,
+        onRemoveProperty,
+        onEditProperty
+    };
+}
+export { usePropertiesEdit };

package/dist/esm/components/json-schema-editor/index.mjs

@@ -0,0 +1,212 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Button, Checkbox, IconButton } from "@douyinfe/semi-ui";
+import { IconChevronDown, IconChevronRight, IconExpand, IconMinus, IconPlus, IconShrink } from "@douyinfe/semi-icons";
+import { InjectTypeSelector } from "../type-selector/index.mjs";
+import { BlurInput } from "../blur-input/index.mjs";
+import { DefaultValueWrapper, IconAddChildren, UIActions, UICollapseTrigger, UICollapsible, UIContainer, UIExpandDetail, UILabel, UIName, UIRequired, UIRow, UITreeItemLeft, UITreeItemMain, UITreeItemRight, UITreeItems, UIType } from "./styles.mjs";
+import { usePropertiesEdit } from "./hooks.mjs";
+import { DefaultValue } from "./default-value.mjs";
+const DEFAULT = {
+    type: 'object'
+};
+function JsonSchemaEditor(props) {
+    const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
+    const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
+    return /*#__PURE__*/ jsxs(UIContainer, {
+        className: props.className,
+        children: [
+            /*#__PURE__*/ jsx(UITreeItems, {
+                children: propertyList.map((_property)=>/*#__PURE__*/ jsx(PropertyEdit, {
+                        readonly: readonly,
+                        value: _property,
+                        config: config,
+                        onChange: (_v)=>{
+                            onEditProperty(_property.key, _v);
+                        },
+                        onRemove: ()=>{
+                            onRemoveProperty(_property.key);
+                        }
+                    }, _property.key))
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                disabled: readonly,
+                size: "small",
+                style: {
+                    marginTop: 10,
+                    marginLeft: 16
+                },
+                icon: /*#__PURE__*/ jsx(IconPlus, {}),
+                onClick: onAddProperty,
+                children: config?.addButtonText ?? I18n.t('Add')
+            })
+        ]
+    });
+}
+function PropertyEdit(props) {
+    const { value, config, readonly, $level = 0, onChange: onChangeProps, onRemove, $isLast } = props;
+    const [expand, setExpand] = useState(false);
+    const [collapse, setCollapse] = useState(false);
+    const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
+    const typeSelectorValue = useMemo(()=>({
+            type,
+            items
+        }), [
+        type,
+        items
+    ]);
+    const { propertyList, canAddField, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
+    const onChange = (key, _value)=>{
+        onChangeProps?.({
+            ...value || {},
+            [key]: _value
+        });
+    };
+    const showCollapse = canAddField && propertyList.length > 0;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(UITreeItemLeft, {
+                $isLast: $isLast,
+                $showLine: $level > 0,
+                $showCollapse: showCollapse,
+                children: showCollapse && /*#__PURE__*/ jsx(UICollapseTrigger, {
+                    onClick: ()=>setCollapse((_collapse)=>!_collapse),
+                    children: collapse ? /*#__PURE__*/ jsx(IconChevronDown, {
+                        size: "small"
+                    }) : /*#__PURE__*/ jsx(IconChevronRight, {
+                        size: "small"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs(UITreeItemRight, {
+                children: [
+                    /*#__PURE__*/ jsxs(UITreeItemMain, {
+                        children: [
+                            /*#__PURE__*/ jsxs(UIRow, {
+                                children: [
+                                    /*#__PURE__*/ jsx(UIName, {
+                                        children: /*#__PURE__*/ jsx(BlurInput, {
+                                            disabled: readonly,
+                                            placeholder: config?.placeholder ?? I18n.t('Input Variable Name'),
+                                            size: "small",
+                                            value: name,
+                                            onChange: (value)=>onChange('name', value)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(UIType, {
+                                        children: /*#__PURE__*/ jsx(InjectTypeSelector, {
+                                            value: typeSelectorValue,
+                                            readonly: readonly,
+                                            onChange: (_value)=>{
+                                                onChangeProps?.({
+                                                    ...value || {},
+                                                    ..._value
+                                                });
+                                            }
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(UIRequired, {
+                                        children: /*#__PURE__*/ jsx(Checkbox, {
+                                            disabled: readonly,
+                                            checked: isPropertyRequired,
+                                            onChange: (e)=>onChange('isPropertyRequired', e.target.checked)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs(UIActions, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(IconButton, {
+                                                disabled: readonly,
+                                                size: "small",
+                                                theme: "borderless",
+                                                icon: expand ? /*#__PURE__*/ jsx(IconShrink, {
+                                                    size: "small"
+                                                }) : /*#__PURE__*/ jsx(IconExpand, {
+                                                    size: "small"
+                                                }),
+                                                onClick: ()=>{
+                                                    setExpand((_expand)=>!_expand);
+                                                }
+                                            }),
+                                            canAddField && /*#__PURE__*/ jsx(IconButton, {
+                                                disabled: readonly,
+                                                size: "small",
+                                                theme: "borderless",
+                                                icon: /*#__PURE__*/ jsx(IconAddChildren, {}),
+                                                onClick: ()=>{
+                                                    onAddProperty();
+                                                    setCollapse(true);
+                                                }
+                                            }),
+                                            /*#__PURE__*/ jsx(IconButton, {
+                                                disabled: readonly,
+                                                size: "small",
+                                                theme: "borderless",
+                                                icon: /*#__PURE__*/ jsx(IconMinus, {
+                                                    size: "small"
+                                                }),
+                                                onClick: onRemove
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            expand && /*#__PURE__*/ jsxs(UIExpandDetail, {
+                                children: [
+                                    /*#__PURE__*/ jsx(UILabel, {
+                                        children: config?.descTitle ?? I18n.t("Description")
+                                    }),
+                                    /*#__PURE__*/ jsx(BlurInput, {
+                                        disabled: readonly,
+                                        size: "small",
+                                        value: description,
+                                        onChange: (value)=>onChange("description", value),
+                                        placeholder: config?.descPlaceholder ?? I18n.t('Help LLM to understand the property')
+                                    }),
+                                    0 === $level && /*#__PURE__*/ jsxs(Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(UILabel, {
+                                                style: {
+                                                    marginTop: 10
+                                                },
+                                                children: config?.defaultValueTitle ?? I18n.t('Default Value')
+                                            }),
+                                            /*#__PURE__*/ jsx(DefaultValueWrapper, {
+                                                children: /*#__PURE__*/ jsx(DefaultValue, {
+                                                    value: defaultValue,
+                                                    schema: value,
+                                                    placeholder: config?.defaultValuePlaceholder ?? I18n.t('Default Value'),
+                                                    onChange: (value)=>onChange('default', value)
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    showCollapse && /*#__PURE__*/ jsx(UICollapsible, {
+                        $collapse: collapse,
+                        children: /*#__PURE__*/ jsx(UITreeItems, {
+                            $shrink: true,
+                            children: propertyList.map((_property, index)=>/*#__PURE__*/ jsx(PropertyEdit, {
+                                    readonly: readonly,
+                                    value: _property,
+                                    config: config,
+                                    $level: $level + 1,
+                                    onChange: (_v)=>{
+                                        onEditProperty(_property.key, _v);
+                                    },
+                                    onRemove: ()=>{
+                                        onRemoveProperty(_property.key);
+                                    },
+                                    $isLast: index === propertyList.length - 1
+                                }, _property.key))
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { JsonSchemaEditor };