@flowgram.ai/form-materials 0.1.0-alpha.18 → 0.1.0-alpha.20

package/src/components/prompt-editor/editor.tsx

@@ -14,11 +14,12 @@ import {
 import preset, { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
 
 import { PropsType } from './types';
-import { UIContainer } from './styles';
 import MarkdownHighlight from './extensions/markdown';
 import LanguageSupport from './extensions/language-support';
 import JinjaHighlight from './extensions/jinja';
 
+import './styles.css';
+
 type Preset = typeof preset;
 type Options = Partial<InferValues<Preset[number]>>;
 
@@ -42,22 +43,32 @@ export function PromptEditor(props: PromptEditorPropsType) {
 
   const editorRef = useRef<EditorAPI | null>(null);
 
+  const editorValue = String(value?.content || '');
+
   useEffect(() => {
     // listen to value change
-    if (editorRef.current?.getValue() !== value?.content) {
-      editorRef.current?.setValue(String(value?.content || ''));
+    if (editorRef.current?.getValue() !== editorValue) {
+      // apply updates on readonly mode
+      const editorView = editorRef.current?.$view;
+      editorView?.dispatch({
+        changes: {
+          from: 0,
+          to: editorView?.state.doc.length,
+          insert: editorValue,
+        },
+      });
     }
-  }, [value]);
+  }, [editorValue]);
 
   return (
-    <UIContainer $hasError={hasError} style={style}>
+    <div className={`gedit-m-prompt-editor-container ${hasError ? 'has-error' : ''}`} style={style}>
       <EditorProvider>
         <Renderer
           didMount={(editor: EditorAPI) => {
             editorRef.current = editor;
           }}
           plugins={preset}
-          defaultValue={String(value?.content)}
+          defaultValue={editorValue}
           options={{
             readOnly: readonly,
             editable: !readonly,
@@ -76,6 +87,6 @@ export function PromptEditor(props: PromptEditorPropsType) {
         <JinjaHighlight />
         {children}
       </EditorProvider>
-    </UIContainer>
+    </div>
   );
 }

package/src/components/prompt-editor/styles.css

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-prompt-editor-container {
+  background-color: var(--semi-color-fill-0);
+  padding-left: 10px;
+  padding-right: 6px;
+}
+
+.gedit-m-prompt-editor-container.has-error {
+  border: 1px solid var(--semi-color-danger-6);
+}

package/src/components/prompt-editor-with-inputs/index.tsx

@@ -3,10 +3,23 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazySuspense } from '@/shared';
+import React from 'react';
 
-export const PromptEditorWithInputs = lazySuspense(() =>
-  import('./editor').then((module) => ({ default: module.PromptEditorWithInputs }))
-);
+import type { IInputsValues } from '@/shared/flow-value';
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+import { EditorInputsTree } from '@/components/coze-editor-extensions';
 
-export type { PromptEditorWithInputsProps } from './editor';
+export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
+  inputsValues: IInputsValues;
+}
+
+export function PromptEditorWithInputs({
+  inputsValues,
+  ...restProps
+}: PromptEditorWithInputsProps) {
+  return (
+    <PromptEditor {...restProps}>
+      <EditorInputsTree inputsValues={inputsValues} />
+    </PromptEditor>
+  );
+}

package/src/components/prompt-editor-with-variables/index.tsx

@@ -3,10 +3,18 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazySuspense } from '@/shared';
+import React from 'react';
 
-export const PromptEditorWithVariables = lazySuspense(() =>
-  import('./editor').then((module) => ({ default: module.PromptEditorWithVariables }))
-);
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
 
-export type { PromptEditorWithVariablesProps } from './editor';
+export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
+
+export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
+  return (
+    <PromptEditor {...props}>
+      <EditorVariableTree />
+      <EditorVariableTagInject />
+    </PromptEditor>
+  );
+}

package/src/components/variable-selector/context.tsx

@@ -5,10 +5,19 @@
 
 import React, { createContext, useContext, useMemo } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { BaseVariableField } from '@flowgram.ai/editor';
 
+type VariableField = BaseVariableField<{
+  icon?: string | JSX.Element;
+  title?: string;
+  disabled?: boolean;
+}>;
+
 export const VariableSelectorContext = createContext<{
-  skipVariable?: (variable?: BaseVariableField) => boolean;
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
+  skipVariable?: (variable: VariableField) => boolean;
 }>({});
 
 export const useVariableSelectorContext = () => useContext(VariableSelectorContext);
@@ -16,11 +25,22 @@ export const useVariableSelectorContext = () => useContext(VariableSelectorConte
 export const VariableSelectorProvider = ({
   children,
   skipVariable,
+  includeSchema,
+  excludeSchema,
 }: {
   skipVariable?: (variable?: BaseVariableField) => boolean;
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
   children: React.ReactNode;
 }) => {
-  const context = useMemo(() => ({ skipVariable }), [skipVariable]);
+  const context = useMemo(
+    () => ({
+      skipVariable,
+      includeSchema,
+      excludeSchema,
+    }),
+    [skipVariable, includeSchema, excludeSchema]
+  );
 
   return (
     <VariableSelectorContext.Provider value={context}>{children}</VariableSelectorContext.Provider>

package/src/components/variable-selector/index.tsx

@@ -9,15 +9,16 @@ import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
 import { type TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
-import { Popover } from '@douyinfe/semi-ui';
+import { Popover, Tag, TreeSelect } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
 import { createInjectMaterial } from '@/shared';
 
 import { useVariableTree } from './use-variable-tree';
-import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 import { useVariableSelectorContext } from './context';
 
+import './styles.css';
+
 export interface VariableSelectorProps {
   value?: string[];
   config?: {
@@ -75,62 +76,71 @@ export const VariableSelector = ({
 
   return (
     <>
-      <UITreeSelect
+      <TreeSelect
+        className={`gedit-m-variable-selector-tree-select ${hasError ? 'error' : ''}`}
         dropdownMatchSelectWidth={false}
         disabled={readonly}
         treeData={treeData}
         size="small"
         value={treeValue}
         clearIcon={null}
-        $error={hasError}
         style={style}
         validateStatus={hasError ? 'error' : undefined}
+        dropdownClassName="gedit-m-variable-selector-dropdown"
         onChange={(_, _config) => {
           onChange((_config as TreeNodeData).keyPath as string[]);
         }}
         renderSelectedItem={(_option: TreeNodeData) => {
           if (!_option?.keyPath) {
             return (
-              <UITag
+              <Tag
+                className="gedit-m-variable-selector-tag"
                 prefixIcon={<IconIssueStroked />}
                 color="amber"
                 closable={!readonly}
                 onClose={() => onChange(undefined)}
               >
                 {config?.notFoundContent ?? 'Undefined'}
-              </UITag>
+              </Tag>
             );
           }
 
           const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
 
           const rootTitle = (
-            <UIRootTitle>
+            <div className="gedit-m-variable-selector-root-title">
               {_option.rootMeta?.title
                 ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} `
                 : null}
-            </UIRootTitle>
+            </div>
           );
 
           return (
             <div>
               <Popover
                 content={
-                  <UIPopoverContent>
+                  <div className="gedit-m-variable-selector-tag-pop">
                     {rootIcon}
                     {rootTitle}
-                    <UIVarName>{_option.keyPath.slice(1).join('.')}</UIVarName>
-                  </UIPopoverContent>
+                    <div className="gedit-m-variable-selector-var-name">
+                      {_option.keyPath.slice(1).join('.')}
+                    </div>
+                  </div>
                 }
               >
-                <UITag
+                <Tag
+                  className="gedit-m-variable-selector-tag"
                   prefixIcon={rootIcon}
                   closable={!readonly}
                   onClose={() => onChange(undefined)}
                 >
                   {rootTitle}
-                  {!_option.isRoot && <UIVarName $inSelector>{_option.label}</UIVarName>}
-                </UITag>
+                  {!_option.isRoot && (
+                    <div className="gedit-m-variable-selector-var-name in-selector">
+                      {_option.label}
+                    </div>
+                  )}
+                </Tag>
               </Popover>
             </div>
           );

package/src/components/variable-selector/styles.css

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-variable-selector-root-title {
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+}
+
+.gedit-m-variable-selector-var-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.in-selector {
+    min-width: 50%;
+  }
+}
+
+.gedit-m-variable-selector-tag {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  height: 22px;
+
+  .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+}
+
+.gedit-m-variable-selector-tree-select {
+  outline: none;
+
+  &.error {
+    outline: 1px solid red;
+  }
+
+  .semi-tree-select-selection {
+    padding: 0px;
+    height: 22px;
+  }
+
+  .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+}
+
+.gedit-m-variable-selector-tag-pop {
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+}
+
+.gedit-m-variable-selector-dropdown {
+  max-height: 300px;
+  overflow: auto;
+}

package/src/components/variable-selector/use-variable-tree.tsx

@@ -15,6 +15,8 @@ import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
+import { useVariableSelectorContext } from './context';
+
 type VariableField = BaseVariableField<{
   icon?: string | JSX.Element;
   title?: string;
@@ -26,7 +28,13 @@ export function useVariableTree(params: {
   excludeSchema?: IJsonSchema | IJsonSchema[];
   skipVariable?: (variable: VariableField) => boolean;
 }): TreeNodeData[] {
-  const { includeSchema, excludeSchema, skipVariable } = params;
+  const context = useVariableSelectorContext();
+
+  const {
+    includeSchema = context.includeSchema,
+    excludeSchema = context.excludeSchema,
+    skipVariable = context.skipVariable,
+  } = params;
 
   const typeManager = useTypeManager() as JsonSchemaTypeManager;
   const variables = useAvailableVariables();

package/src/effects/validate-when-variable-sync/index.ts

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isEmpty } from 'lodash-es';
 import {
   DataEvent,
   Effect,
@@ -19,12 +18,17 @@ export const validateWhenVariableSync = ({
 } = {}): EffectOptions[] => [
   {
     event: DataEvent.onValueInit,
-    effect: (({ context, form }) => {
+    effect: (({ context, form, name }) => {
       const nodeScope =
         scope === 'private' ? getNodePrivateScope(context.node) : getNodeScope(context.node);
 
       const disposable = nodeScope.available.onListOrAnyVarChange(() => {
-        if (!isEmpty(form.state.errors)) {
+        const errorKeys = Object.entries(form.state.errors || {})
+          .filter(([_, errors]) => errors?.length > 0)
+          .filter(([key]) => key.startsWith(name) || name.startsWith(key))
+          .map(([key]) => key);
+
+        if (errorKeys.length > 0) {
           form.validate();
         }
       });

package/src/index.ts

@@ -34,6 +34,7 @@ export {
   InputsValuesTree,
   JsonCodeEditor,
   JsonEditorWithVariables,
+  JsonSchemaCreator,
   JsonSchemaEditor,
   PromptEditor,
   PromptEditorWithInputs,
@@ -59,6 +60,7 @@ export {
   type IConditionRule,
   type IConditionRuleFactory,
   type JsonEditorWithVariablesProps,
+  type JsonSchemaCreatorProps,
   type PromptEditorPropsType,
   type PromptEditorWithInputsProps,
   type PromptEditorWithVariablesProps,
@@ -115,6 +117,7 @@ export {
   type IFlowTemplateValue,
   type IFlowValue,
   type IFlowValueExtra,
+  type IInputsValues,
   type IPolyfillRoot,
   unstableSetCreateRoot,
   withSuspense,

package/src/plugins/json-schema-preset/create-type-preset-plugin.tsx

@@ -8,23 +8,28 @@ import {
   jsonSchemaContainerModule,
   JsonSchemaTypeManager,
 } from '@flowgram.ai/json-schema';
-import { definePluginCreator } from '@flowgram.ai/editor';
+import { definePluginCreator, type PluginCreator } from '@flowgram.ai/editor';
 
 import { JsonSchemaTypeRegistry } from './types';
 import { initRegistries, jsonSchemaTypePreset } from './type-definition';
 
 initRegistries();
 
-export const createTypePresetPlugin = definePluginCreator<{
-  types?: Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>[];
+type TypePresetRegistry = Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>;
+
+interface TypePresetPluginOptions {
+  types?: TypePresetRegistry[];
   unregisterTypes?: string[];
-}>({
-  onInit(ctx, opts) {
-    const typeManager = ctx.get(BaseTypeManager) as JsonSchemaTypeManager;
-    jsonSchemaTypePreset.forEach((_type) => typeManager.register(_type));
+}
+
+export const createTypePresetPlugin: PluginCreator<TypePresetPluginOptions> =
+  definePluginCreator<TypePresetPluginOptions>({
+    onInit(ctx, opts) {
+      const typeManager = ctx.get(BaseTypeManager) as JsonSchemaTypeManager;
+      jsonSchemaTypePreset.forEach((_type) => typeManager.register(_type));
 
-    opts.types?.forEach((_type) => typeManager.register(_type));
-    opts.unregisterTypes?.forEach((_type) => typeManager.unregister(_type));
-  },
-  containerModules: [jsonSchemaContainerModule],
-});
+      opts.types?.forEach((_type) => typeManager.register(_type));
+      opts.unregisterTypes?.forEach((_type) => typeManager.unregister(_type));
+    },
+    containerModules: [jsonSchemaContainerModule],
+  });

package/src/shared/flow-value/index.ts

@@ -13,4 +13,5 @@ export {
   type IFlowExpressionValue,
   type IFlowTemplateValue,
   type IFlowConstantRefValue,
+  type IInputsValues,
 } from './types';

package/src/shared/flow-value/types.ts

@@ -43,3 +43,7 @@ export type IFlowValue =
   | IFlowTemplateValue;
 
 export type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;
+
+export interface IInputsValues {
+  [key: string]: IInputsValues | IFlowValue | undefined;
+}

package/src/shared/index.ts

@@ -13,6 +13,7 @@ export {
   type IFlowTemplateValue,
   type IFlowValue,
   type IFlowValueExtra,
+  type IInputsValues,
 } from './flow-value';
 export {
   formatLegacyRefOnInit,

package/src/shared/inject-material/index.tsx

@@ -62,7 +62,7 @@ export function createInjectMaterial<Props>(
     const container = usePlaygroundContainer();
 
     // Check if renderer registry is bound in container
-    if (!container?.isBound(FlowRendererRegistry)) {
+    if (!container?.isBound?.(FlowRendererRegistry)) {
       // If no registry, use default component directly
       return React.createElement(Component as (props?: any) => any, { ...props });
     }

package/dist/cjs/components/condition-row/styles.js

@@ -1,77 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    UIOperator: ()=>UIOperator,
-    UIContainer: ()=>UIContainer,
-    UIRight: ()=>UIRight,
-    UIValues: ()=>UIValues,
-    UILeft: ()=>UILeft
-});
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
-const UIContainer = external_styled_components_default().div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-const UIOperator = external_styled_components_default().div``;
-const UILeft = external_styled_components_default().div`
-  width: 100%;
-`;
-const UIRight = external_styled_components_default().div`
-  width: 100%;
-`;
-const UIValues = external_styled_components_default().div`
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-`;
-exports.UIContainer = __webpack_exports__.UIContainer;
-exports.UILeft = __webpack_exports__.UILeft;
-exports.UIOperator = __webpack_exports__.UIOperator;
-exports.UIRight = __webpack_exports__.UIRight;
-exports.UIValues = __webpack_exports__.UIValues;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "UIContainer",
-    "UILeft",
-    "UIOperator",
-    "UIRight",
-    "UIValues"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/cjs/components/coze-editor-extensions/styles.js

@@ -1,89 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    UIRootTitle: ()=>UIRootTitle,
-    UIPopoverContent: ()=>UIPopoverContent,
-    UIVarName: ()=>UIVarName,
-    UITag: ()=>UITag
-});
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
-const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
-const UIRootTitle = external_styled_components_default().div`
-  margin-right: 4px;
-  min-width: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--semi-color-text-2);
-`;
-const UIVarName = external_styled_components_default().div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-const UITag = external_styled_components_default()(semi_ui_namespaceObject.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 = external_styled_components_default().div`
-  padding: 10px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-`;
-exports.UIPopoverContent = __webpack_exports__.UIPopoverContent;
-exports.UIRootTitle = __webpack_exports__.UIRootTitle;
-exports.UITag = __webpack_exports__.UITag;
-exports.UIVarName = __webpack_exports__.UIVarName;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "UIPopoverContent",
-    "UIRootTitle",
-    "UITag",
-    "UIVarName"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});