@flowgram.ai/form-materials 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/esm/components/db-condition-row/hooks/use-left.mjs

@@ -1,52 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useTypeManager } from "@flowgram.ai/json-schema";
-import { Icon } from "@douyinfe/semi-ui";
-import { ConditionRow } from "../../index.mjs";
-import { UIOptionLabel, UISelect } from "../styles.mjs";
-const defaultRules = ConditionRow.defaultRules;
-function useLeft({ left, options, userRules, readonly, onChange }) {
-    const rules = useMemo(()=>({
-            ...defaultRules,
-            ...userRules || {}
-        }), [
-        userRules
-    ]);
-    const typeManager = useTypeManager();
-    const rule = useMemo(()=>{
-        if (!left) return;
-        const option = options?.find((item)=>item.value === left);
-        if (!option?.schema?.type) return;
-        return rules[option.schema.type];
-    }, [
-        left,
-        options,
-        rules
-    ]);
-    const renderDBOptionSelect = ()=>/*#__PURE__*/ jsx(UISelect, {
-            disabled: readonly,
-            size: "small",
-            style: {
-                width: '100%'
-            },
-            value: left,
-            onChange: (v)=>onChange(v),
-            optionList: options?.map((item)=>({
-                    label: /*#__PURE__*/ jsxs(UIOptionLabel, {
-                        children: [
-                            /*#__PURE__*/ jsx(Icon, {
-                                size: "small",
-                                svg: typeManager.getDisplayIcon(item.schema)
-                            }),
-                            item.label
-                        ]
-                    }),
-                    value: item.value
-                })) || []
-        });
-    return {
-        rule,
-        renderDBOptionSelect
-    };
-}
-export { useLeft };

package/dist/esm/components/db-condition-row/hooks/use-op.mjs

@@ -1,45 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { I18n } from "@flowgram.ai/editor";
-import { Button, Select } from "@douyinfe/semi-ui";
-import { IconChevronDownStroked } from "@douyinfe/semi-icons";
-import { ConditionRow } from "../../index.mjs";
-const defaultOpConfigs = ConditionRow.defaultOpConfigs;
-function useOp({ rule, op, onChange, readonly, userOps }) {
-    const options = useMemo(()=>Object.keys(rule || {}).map((_op)=>({
-                ...defaultOpConfigs[_op] || {},
-                ...userOps?.[_op] || {},
-                value: _op,
-                label: I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label)
-            })), [
-        rule,
-        userOps
-    ]);
-    const opConfig = useMemo(()=>defaultOpConfigs[op], [
-        op
-    ]);
-    const renderOpSelect = ()=>/*#__PURE__*/ jsx(Select, {
-            style: {
-                height: 22
-            },
-            disabled: readonly,
-            size: "small",
-            value: op,
-            optionList: options,
-            onChange: (v)=>{
-                onChange(v);
-            },
-            triggerRender: ({ value })=>/*#__PURE__*/ jsx(Button, {
-                    size: "small",
-                    disabled: !rule,
-                    children: opConfig?.abbreviation || /*#__PURE__*/ jsx(IconChevronDownStroked, {
-                        size: "small"
-                    })
-                })
-        });
-    return {
-        renderOpSelect,
-        opConfig
-    };
-}
-export { useOp };

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

@@ -1,63 +0,0 @@
-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/prompt-editor-with-inputs/extensions/inputs-tree.mjs

@@ -1,67 +0,0 @@
-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 } from "@douyinfe/semi-ui";
-import { InputsPicker } from "../inputs-picker.mjs";
-function InputsTree({ inputsValues }) {
-    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: [
-                    '{',
-                    '{}',
-                    '@'
-                ],
-                onOpenChange: handleOpenChange
-            }),
-            /*#__PURE__*/ jsx(Popover, {
-                visible: visible,
-                trigger: "custom",
-                position: "topLeft",
-                rePosKey: posKey,
-                content: /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: 300
-                    },
-                    children: /*#__PURE__*/ jsx(InputsPicker, {
-                        inputsValues: inputsValues,
-                        onSelect: (v)=>{
-                            insert(v);
-                        }
-                    })
-                }),
-                children: /*#__PURE__*/ jsx(PositionMirror, {
-                    position: position,
-                    onChange: ()=>setPosKey(String(Math.random()))
-                })
-            })
-        ]
-    });
-}
-export { InputsTree };

package/dist/esm/components/prompt-editor-with-inputs/inputs-picker.mjs

@@ -1,70 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { isPlainObject, last } from "lodash-es";
-import { ASTMatch, useScopeAvailable } from "@flowgram.ai/editor";
-import { 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)
-    });
-}
-export { InputsPicker };

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

@@ -1,117 +0,0 @@
-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/prompt-editor-with-variables/styles.mjs

@@ -1,36 +0,0 @@
-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/types/components/code-editor/init-worker.d.ts

@@ -1,5 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-export declare const initTsWorker: () => void;

package/dist/types/components/code-editor/language-features.d.ts

@@ -1,5 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-export {};

package/dist/types/components/condition-row/constants.d.ts

@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-import { IRules, OpConfigs } from './types';
-export declare const defaultRules: IRules;
-export declare const defaultOpConfigs: OpConfigs;

package/dist/types/components/condition-row/hooks/useOp.d.ts

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-import React from 'react';
-import { IRule, OpConfigs } from '../types';
-interface HookParams {
-    rule?: IRule;
-    op?: string;
-    onChange: (op: string) => void;
-    readonly?: boolean;
-    userOps?: OpConfigs;
-}
-export declare function useOp({ rule, op, onChange, readonly, userOps }: HookParams): {
-    renderOpSelect: () => React.JSX.Element;
-    opConfig: import("../types").OpConfig;
-};
-export {};

package/dist/types/components/condition-row/hooks/useRule.d.ts

@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-import { IFlowRefValue } from '../../../shared';
-import { IRules } from '../types';
-export declare function useRule(left?: IFlowRefValue, userRules?: IRules): {
-    rule: Partial<Record<string, string | null>> | undefined;
-};

package/dist/types/components/db-condition-row/hooks/use-left.d.ts

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-import React from 'react';
-import { DBConditionOptionType, IRules } from '../types';
-interface HookParams {
-    left?: string;
-    options?: DBConditionOptionType[];
-    userRules?: IRules;
-    readonly?: boolean;
-    onChange: (leftKey: string) => void;
-}
-export declare function useLeft({ left, options, userRules, readonly, onChange }: HookParams): {
-    rule: Partial<Record<string, string | null>> | undefined;
-    renderDBOptionSelect: () => React.JSX.Element;
-};
-export {};

package/dist/types/components/db-condition-row/hooks/use-op.d.ts

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-import React from 'react';
-import { IRule, OpConfigs } from '../types';
-interface HookParams {
-    rule?: IRule;
-    op?: string;
-    onChange: (op: string) => void;
-    readonly?: boolean;
-    userOps?: OpConfigs;
-}
-export declare function useOp({ rule, op, onChange, readonly, userOps }: HookParams): {
-    renderOpSelect: () => React.JSX.Element;
-    opConfig: import("../../condition-row/types").OpConfig;
-};
-export {};

package/dist/types/components/prompt-editor-with-inputs/extensions/inputs-tree.d.ts

@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-import React from 'react';
-import { IFlowValue } from '../../../shared';
-export declare function InputsTree({ inputsValues }: {
-    inputsValues: Record<string, IFlowValue>;
-}): React.JSX.Element;

package/dist/types/components/prompt-editor-with-variables/extensions/variable-tag.d.ts

@@ -1,5 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-export declare function VariableTagInject(): null;

package/dist/types/components/prompt-editor-with-variables/extensions/variable-tree.d.ts

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-import React from 'react';
-export declare function VariableTree(): React.JSX.Element;

package/dist/types/components/prompt-editor-with-variables/styles.d.ts

@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-import { Tag } from '@douyinfe/semi-ui';
-export declare const UIRootTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const UIVarName: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const UITag: import("styled-components").StyledComponent<typeof Tag, any, {}, never>;
-export declare const UIPopoverContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/src/components/code-editor/init-worker.ts

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import { typescript } from '@flowgram.ai/coze-editor/language-typescript';
-
-let tsWorkerInit = false;
-
-export const initTsWorker = () => {
-  if (tsWorkerInit) {
-    return;
-  }
-  tsWorkerInit = true;
-
-  const tsWorker = new Worker(
-    new URL(`@flowgram.ai/coze-editor/language-typescript/worker`, import.meta.url),
-    { type: 'module' }
-  );
-  typescript.languageService.initialize(tsWorker, {
-    compilerOptions: {
-      // eliminate Promise error
-      lib: ['es2015', 'dom'],
-      noImplicitAny: false,
-    },
-  });
-};

package/src/components/code-editor/language-features.ts

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import { languages } from '@flowgram.ai/coze-editor/preset-code';
-import { typescript } from '@flowgram.ai/coze-editor/language-typescript';
-import { shell } from '@flowgram.ai/coze-editor/language-shell';
-import { python } from '@flowgram.ai/coze-editor/language-python';
-import { json } from '@flowgram.ai/coze-editor/language-json';
-import { mixLanguages } from '@flowgram.ai/coze-editor';
-
-languages.register('python', python);
-languages.register('shell', shell);
-languages.register('typescript', typescript);
-
-languages.register('json', {
-  // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
-  language: mixLanguages({
-    outerLanguage: json.language,
-  }),
-  languageService: json.languageService,
-});