@flowgram.ai/form-materials 0.5.6 → 0.5.7

package/dist/cjs/components/blur-input/index.js

@@ -43,7 +43,10 @@ function BlurInput(props) {
         onChange: (value)=>{
             setValue(value);
         },
-        onBlur: (e)=>props.onChange?.(value, e)
+        onBlur: (e)=>{
+            props.onChange?.(value, e);
+            props.onBlur?.(e);
+        }
     });
 }
 exports.BlurInput = __webpack_exports__.BlurInput;

package/dist/cjs/components/condition-context/hooks/use-condition.js

@@ -30,7 +30,7 @@ const external_react_namespaceObject = require("react");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const index_js_namespaceObject = require("../../../plugins/index.js");
 const external_context_js_namespaceObject = require("../context.js");
-function useCondition({ leftSchema, operator, ruleConfig }) {
+function useCondition({ leftSchema, operator, onClearOp, onClearRight, ruleConfig }) {
     const typeManager = (0, index_js_namespaceObject.useTypeManager)();
     const { rules: contextRules, ops: contextOps } = (0, external_context_js_namespaceObject.useConditionContext)();
     const userRules = (0, external_react_namespaceObject.useMemo)(()=>ruleConfig?.rules || contextRules || {}, [
@@ -63,6 +63,14 @@ function useCondition({ leftSchema, operator, ruleConfig }) {
         rule,
         allOps
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!operator || !rule) return;
+        if (!opOptionList.find((item)=>item.value === operator)) onClearOp?.();
+    }, [
+        operator,
+        opOptionList,
+        onClearOp
+    ]);
     const targetSchema = (0, external_react_namespaceObject.useMemo)(()=>{
         const targetType = rule?.[operator || ''] || null;
         if (!targetType) return;
@@ -77,6 +85,14 @@ function useCondition({ leftSchema, operator, ruleConfig }) {
         rule,
         operator
     ]);
+    const prevTargetSchemaRef = (0, external_react_namespaceObject.useRef)(void 0);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (prevTargetSchemaRef.current?.type !== targetSchema?.type) onClearRight?.();
+        prevTargetSchemaRef.current = targetSchema;
+    }, [
+        targetSchema,
+        onClearRight
+    ]);
     const opConfig = (0, external_react_namespaceObject.useMemo)(()=>allOps[operator || ''], [
         operator,
         allOps

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

@@ -57,7 +57,19 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig }) {
     const { rule, opConfig, opOptionList, targetSchema } = (0, external_condition_context_index_js_namespaceObject.useCondition)({
         leftSchema,
         operator,
-        ruleConfig
+        ruleConfig,
+        onClearOp () {
+            onChange({
+                ...value,
+                operator: void 0
+            });
+        },
+        onClearRight () {
+            onChange({
+                ...value,
+                right: void 0
+            });
+        }
     });
     const renderOpSelect = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Select, {
             style: {

package/dist/cjs/components/coze-editor-extensions/extensions/inputs-tree.js

@@ -35,7 +35,7 @@ const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const index_js_namespaceObject = require("../../../shared/index.js");
 function InputsPicker({ inputsValues, onSelect }) {
-    const available = (0, editor_namespaceObject.useScopeAvailable)();
+    const scope = (0, editor_namespaceObject.useCurrentScope)();
     const getArrayDrilldown = (type, depth = 1)=>{
         if (editor_namespaceObject.ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
         return {
@@ -70,7 +70,7 @@ function InputsPicker({ inputsValues, onSelect }) {
         const currKey = keyPath.join('.');
         if (index_js_namespaceObject.FlowValueUtils.isFlowValue(value)) {
             if (index_js_namespaceObject.FlowValueUtils.isRef(value)) {
-                const variable = available.getByKeyPath(value.content || []);
+                const variable = scope?.available?.getByKeyPath(value.content || []);
                 if (variable) return renderVariable(variable, keyPath);
             }
             return {

package/dist/cjs/components/coze-editor-extensions/extensions/variable-tag.js

@@ -109,12 +109,21 @@ class VariableTagWidget extends view_namespaceObject.WidgetType {
         this.toDispose.push(editor_namespaceObject.Disposable.create(()=>{
             this.root.unmount();
         }));
-        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
-            this.renderVariable(v);
-        }, {
+        const refresh = ()=>{
+            this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        };
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, refresh, {
+            triggerOnInit: false
+        }));
+        if (this.keyPath?.[0]) this.toDispose.push(this.scope.available.trackByKeyPath([
+            this.keyPath[0]
+        ], refresh, {
+            selector: (curr)=>({
+                    ...curr?.meta
+                }),
             triggerOnInit: false
         }));
-        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        refresh();
         return dom;
     }
     eq(other) {
@@ -129,7 +138,9 @@ class VariableTagWidget extends view_namespaceObject.WidgetType {
 }
 function VariableTagInject() {
     const injector = (0, react_namespaceObject.useInjector)();
-    const scope = (0, editor_namespaceObject.useCurrentScope)();
+    const scope = (0, editor_namespaceObject.useCurrentScope)({
+        strict: true
+    });
     (0, external_react_namespaceObject.useLayoutEffect)(()=>{
         const atMatcher = new view_namespaceObject.MatchDecorator({
             regexp: /\{\{([^\}\{]+)\}\}/g,

package/dist/cjs/components/db-condition-row/index.js

@@ -45,7 +45,19 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
     const { opConfig, rule, opOptionList, targetSchema } = (0, external_condition_context_index_js_namespaceObject.useCondition)({
         leftSchema,
         operator,
-        ruleConfig
+        ruleConfig,
+        onClearOp () {
+            onChange({
+                ...value,
+                operator: void 0
+            });
+        },
+        onClearRight () {
+            onChange({
+                ...value,
+                right: void 0
+            });
+        }
     });
     const renderDBOptionSelect = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Select, {
             className: "gedit-m-db-condition-row-select",

package/dist/cjs/components/display-outputs/index.js

@@ -36,7 +36,7 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     const scope = (0, editor_namespaceObject.useCurrentScope)();
     const refresh = (0, editor_namespaceObject.useRefresh)();
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!displayFromScope) return ()=>null;
+        if (!displayFromScope || !scope) return ()=>null;
         const disposable = scope.output.onListOrAnyVarChange(()=>{
             refresh();
         });
@@ -46,7 +46,7 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     }, [
         displayFromScope
     ]);
-    const properties = displayFromScope ? scope.output.variables?.reduce((acm, curr)=>{
+    const properties = displayFromScope ? (scope?.output.variables || []).reduce((acm, curr)=>{
         acm = {
             ...acm,
             ...json_schema_namespaceObject.JsonSchemaUtils.astToSchema(curr.type)?.properties || {}

package/dist/cjs/effects/validate-when-variable-sync/index.js

@@ -26,15 +26,15 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     validateWhenVariableSync: ()=>validateWhenVariableSync
 });
-const external_lodash_es_namespaceObject = require("lodash-es");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const validateWhenVariableSync = ({ scope } = {})=>[
         {
             event: editor_namespaceObject.DataEvent.onValueInit,
-            effect: ({ context, form })=>{
+            effect: ({ context, form, name })=>{
                 const nodeScope = 'private' === scope ? (0, editor_namespaceObject.getNodePrivateScope)(context.node) : (0, editor_namespaceObject.getNodeScope)(context.node);
                 const disposable = nodeScope.available.onListOrAnyVarChange(()=>{
-                    if (!(0, external_lodash_es_namespaceObject.isEmpty)(form.state.errors)) form.validate();
+                    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();
                 });
                 return ()=>disposable.dispose();
             }

package/dist/cjs/shared/inject-material/index.js

@@ -42,7 +42,7 @@ function createInjectMaterial(Component, params) {
     const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
     const InjectComponent = (props)=>{
         const container = (0, editor_namespaceObject.usePlaygroundContainer)();
-        if (!container?.isBound(editor_namespaceObject.FlowRendererRegistry)) return /*#__PURE__*/ external_react_default().createElement(Component, {
+        if (!container?.isBound?.(editor_namespaceObject.FlowRendererRegistry)) return /*#__PURE__*/ external_react_default().createElement(Component, {
             ...props
         });
         const rendererRegistry = container.get(editor_namespaceObject.FlowRendererRegistry);

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

@@ -15,7 +15,10 @@ function BlurInput(props) {
         onChange: (value)=>{
             setValue(value);
         },
-        onBlur: (e)=>props.onChange?.(value, e)
+        onBlur: (e)=>{
+            props.onChange?.(value, e);
+            props.onBlur?.(e);
+        }
     });
 }
 export { BlurInput };

package/dist/esm/components/condition-context/hooks/use-condition.mjs

@@ -1,8 +1,8 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { I18n } from "@flowgram.ai/editor";
 import { useTypeManager } from "../../../plugins/index.mjs";
 import { useConditionContext } from "../context.mjs";
-function useCondition({ leftSchema, operator, ruleConfig }) {
+function useCondition({ leftSchema, operator, onClearOp, onClearRight, ruleConfig }) {
     const typeManager = useTypeManager();
     const { rules: contextRules, ops: contextOps } = useConditionContext();
     const userRules = useMemo(()=>ruleConfig?.rules || contextRules || {}, [
@@ -35,6 +35,14 @@ function useCondition({ leftSchema, operator, ruleConfig }) {
         rule,
         allOps
     ]);
+    useEffect(()=>{
+        if (!operator || !rule) return;
+        if (!opOptionList.find((item)=>item.value === operator)) onClearOp?.();
+    }, [
+        operator,
+        opOptionList,
+        onClearOp
+    ]);
     const targetSchema = useMemo(()=>{
         const targetType = rule?.[operator || ''] || null;
         if (!targetType) return;
@@ -49,6 +57,14 @@ function useCondition({ leftSchema, operator, ruleConfig }) {
         rule,
         operator
     ]);
+    const prevTargetSchemaRef = useRef(void 0);
+    useEffect(()=>{
+        if (prevTargetSchemaRef.current?.type !== targetSchema?.type) onClearRight?.();
+        prevTargetSchemaRef.current = targetSchema;
+    }, [
+        targetSchema,
+        onClearRight
+    ]);
     const opConfig = useMemo(()=>allOps[operator || ''], [
         operator,
         allOps

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

@@ -29,7 +29,19 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig }) {
     const { rule, opConfig, opOptionList, targetSchema } = useCondition({
         leftSchema,
         operator,
-        ruleConfig
+        ruleConfig,
+        onClearOp () {
+            onChange({
+                ...value,
+                operator: void 0
+            });
+        },
+        onClearRight () {
+            onChange({
+                ...value,
+                right: void 0
+            });
+        }
     });
     const renderOpSelect = ()=>/*#__PURE__*/ jsx(Select, {
             style: {

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

@@ -1,12 +1,12 @@
 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 { ASTMatch, useCurrentScope } 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 scope = useCurrentScope();
     const getArrayDrilldown = (type, depth = 1)=>{
         if (ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
         return {
@@ -41,7 +41,7 @@ function InputsPicker({ inputsValues, onSelect }) {
         const currKey = keyPath.join('.');
         if (FlowValueUtils.isFlowValue(value)) {
             if (FlowValueUtils.isRef(value)) {
-                const variable = available.getByKeyPath(value.content || []);
+                const variable = scope?.available?.getByKeyPath(value.content || []);
                 if (variable) return renderVariable(variable, keyPath);
             }
             return {

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

@@ -81,12 +81,21 @@ class VariableTagWidget extends WidgetType {
         this.toDispose.push(Disposable.create(()=>{
             this.root.unmount();
         }));
-        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
-            this.renderVariable(v);
-        }, {
+        const refresh = ()=>{
+            this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        };
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, refresh, {
+            triggerOnInit: false
+        }));
+        if (this.keyPath?.[0]) this.toDispose.push(this.scope.available.trackByKeyPath([
+            this.keyPath[0]
+        ], refresh, {
+            selector: (curr)=>({
+                    ...curr?.meta
+                }),
             triggerOnInit: false
         }));
-        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        refresh();
         return dom;
     }
     eq(other) {
@@ -101,7 +110,9 @@ class VariableTagWidget extends WidgetType {
 }
 function VariableTagInject() {
     const injector = useInjector();
-    const scope = useCurrentScope();
+    const scope = useCurrentScope({
+        strict: true
+    });
     useLayoutEffect(()=>{
         const atMatcher = new MatchDecorator({
             regexp: /\{\{([^\}\{]+)\}\}/g,

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

@@ -17,7 +17,19 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
     const { opConfig, rule, opOptionList, targetSchema } = useCondition({
         leftSchema,
         operator,
-        ruleConfig
+        ruleConfig,
+        onClearOp () {
+            onChange({
+                ...value,
+                operator: void 0
+            });
+        },
+        onClearRight () {
+            onChange({
+                ...value,
+                right: void 0
+            });
+        }
     });
     const renderDBOptionSelect = ()=>/*#__PURE__*/ jsx(Select, {
             className: "gedit-m-db-condition-row-select",

package/dist/esm/components/display-outputs/index.mjs

@@ -8,7 +8,7 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     const scope = useCurrentScope();
     const refresh = useRefresh();
     useEffect(()=>{
-        if (!displayFromScope) return ()=>null;
+        if (!displayFromScope || !scope) return ()=>null;
         const disposable = scope.output.onListOrAnyVarChange(()=>{
             refresh();
         });
@@ -18,7 +18,7 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     }, [
         displayFromScope
     ]);
-    const properties = displayFromScope ? scope.output.variables?.reduce((acm, curr)=>{
+    const properties = displayFromScope ? (scope?.output.variables || []).reduce((acm, curr)=>{
         acm = {
             ...acm,
             ...JsonSchemaUtils.astToSchema(curr.type)?.properties || {}

package/dist/esm/effects/validate-when-variable-sync/index.mjs

@@ -1,12 +1,12 @@
-import { isEmpty } from "lodash-es";
 import { DataEvent, getNodePrivateScope, getNodeScope } from "@flowgram.ai/editor";
 const validateWhenVariableSync = ({ scope } = {})=>[
         {
             event: DataEvent.onValueInit,
-            effect: ({ context, form })=>{
+            effect: ({ context, form, name })=>{
                 const nodeScope = 'private' === scope ? getNodePrivateScope(context.node) : getNodeScope(context.node);
                 const disposable = nodeScope.available.onListOrAnyVarChange(()=>{
-                    if (!isEmpty(form.state.errors)) form.validate();
+                    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();
                 });
                 return ()=>disposable.dispose();
             }

package/dist/esm/shared/inject-material/index.mjs

@@ -4,7 +4,7 @@ function createInjectMaterial(Component, params) {
     const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
     const InjectComponent = (props)=>{
         const container = usePlaygroundContainer();
-        if (!container?.isBound(FlowRendererRegistry)) return /*#__PURE__*/ react.createElement(Component, {
+        if (!container?.isBound?.(FlowRendererRegistry)) return /*#__PURE__*/ react.createElement(Component, {
             ...props
         });
         const rendererRegistry = container.get(FlowRendererRegistry);

package/dist/types/components/condition-context/hooks/use-condition.d.ts

@@ -5,9 +5,24 @@
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { IConditionRule, ConditionOpConfigs } from '../types';
 interface HooksParams {
+    /**
+     * Left schema of condition
+     */
     leftSchema?: IJsonSchema;
+    /**
+     * Operator of condition
+     */
     operator?: string;
     /**
+     * If op is not in opOptionList, clear it
+     */
+    onClearOp?: () => void;
+    /**
+     * If targetSchema updated, clear it
+     */
+    onClearRight?: () => void;
+    /**
+     * @deprecated use ConditionProvider instead
      * custom rule config
      */
     ruleConfig?: {
@@ -15,7 +30,7 @@ interface HooksParams {
         rules?: Record<string, IConditionRule>;
     };
 }
-export declare function useCondition({ leftSchema, operator, ruleConfig }: HooksParams): {
+export declare function useCondition({ leftSchema, operator, onClearOp, onClearRight, ruleConfig, }: HooksParams): {
     rule: IConditionRule | undefined;
     opConfig: import("..").ConditionOpConfig;
     opOptionList: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -67,9 +67,9 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "0.5.6",
-    "@flowgram.ai/json-schema": "0.5.6",
-    "@flowgram.ai/coze-editor": "0.5.6"
+    "@flowgram.ai/json-schema": "0.5.7",
+    "@flowgram.ai/editor": "0.5.7",
+    "@flowgram.ai/coze-editor": "0.5.7"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -86,8 +86,8 @@
     "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
     "date-fns": "~4.1.0",
-    "@flowgram.ai/eslint-config": "0.5.6",
-    "@flowgram.ai/ts-config": "0.5.6"
+    "@flowgram.ai/eslint-config": "0.5.7",
+    "@flowgram.ai/ts-config": "0.5.7"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/blur-input/index.tsx

@@ -30,7 +30,10 @@ export function BlurInput(props: InputProps) {
       onChange={(value) => {
         setValue(value);
       }}
-      onBlur={(e) => props.onChange?.(value, e)}
+      onBlur={(e) => {
+        props.onChange?.(value, e);
+        props.onBlur?.(e);
+      }}
     />
   );
 }

package/src/components/condition-context/hooks/use-condition.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
@@ -14,10 +14,28 @@ import { IConditionRule, ConditionOpConfigs } from '../types';
 import { useConditionContext } from '../context';
 
 interface HooksParams {
+  /**
+   * Left schema of condition
+   */
   leftSchema?: IJsonSchema;
+
+  /**
+   * Operator of condition
+   */
   operator?: string;
 
   /**
+   * If op is not in opOptionList, clear it
+   */
+  onClearOp?: () => void;
+
+  /**
+   * If targetSchema updated, clear it
+   */
+  onClearRight?: () => void;
+
+  /**
+   * @deprecated use ConditionProvider instead
    * custom rule config
    */
   ruleConfig?: {
@@ -26,26 +44,32 @@ interface HooksParams {
   };
 }
 
-export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams) {
+export function useCondition({
+  leftSchema,
+  operator,
+  onClearOp,
+  onClearRight,
+  ruleConfig,
+}: HooksParams) {
   const typeManager = useTypeManager();
   const { rules: contextRules, ops: contextOps } = useConditionContext();
 
-  // 合并用户规则和上下文规则
+  // Merge user rules and context rules
   const userRules = useMemo(
     () => ruleConfig?.rules || contextRules || {},
     [contextRules, ruleConfig?.rules]
   );
 
-  // 合并用户操作符和上下文操作符
+  // Merge user operators and context operators
   const allOps = useMemo(() => ruleConfig?.ops || contextOps || {}, [contextOps, ruleConfig?.ops]);
 
-  // 获取类型配置
+  // Get type configuration
   const config = useMemo(
     () => (leftSchema ? typeManager.getTypeBySchema(leftSchema) : undefined),
     [leftSchema, typeManager]
   );
 
-  // 计算规则
+  // Calculate rule
   const rule = useMemo(() => {
     if (!config) {
       return undefined;
@@ -59,7 +83,7 @@ export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams)
     return config.conditionRule;
   }, [userRules, leftSchema, config]);
 
-  // 计算操作符选项列表
+  // Calculate operator option list
   const opOptionList = useMemo(
     () =>
       Object.keys(rule || {})
@@ -72,6 +96,16 @@ export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams)
     [rule, allOps]
   );
 
+  // When op not in list, clear it
+  useEffect(() => {
+    if (!operator || !rule) {
+      return;
+    }
+    if (!opOptionList.find((item) => item.value === operator)) {
+      onClearOp?.();
+    }
+  }, [operator, opOptionList, onClearOp]);
+
   // get target schema
   const targetSchema = useMemo(() => {
     const targetType: string | IJsonSchema | null = rule?.[operator || ''] || null;
@@ -87,6 +121,16 @@ export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams)
     return targetType;
   }, [rule, operator]);
 
+  const prevTargetSchemaRef = useRef<IJsonSchema | undefined>(undefined);
+
+  // When type of target schema updated, clear it
+  useEffect(() => {
+    if (prevTargetSchemaRef.current?.type !== targetSchema?.type) {
+      onClearRight?.();
+    }
+    prevTargetSchemaRef.current = targetSchema;
+  }, [targetSchema, onClearRight]);
+
   // get current operator config
   const opConfig = useMemo(() => allOps[operator || ''], [operator, allOps]);
 

package/src/components/condition-row/index.tsx

@@ -50,6 +50,18 @@ export function ConditionRow({ style, value, onChange, readonly, ruleConfig }: P
     leftSchema,
     operator,
     ruleConfig,
+    onClearOp() {
+      onChange({
+        ...value,
+        operator: undefined,
+      });
+    },
+    onClearRight() {
+      onChange({
+        ...value,
+        right: undefined,
+      });
+    },
   });
 
   const renderOpSelect = () => (

package/src/components/coze-editor-extensions/extensions/inputs-tree.tsx

@@ -11,7 +11,7 @@ import {
   ASTMatch,
   type BaseType,
   type BaseVariableField,
-  useScopeAvailable,
+  useCurrentScope,
 } from '@flowgram.ai/editor';
 import {
   Mention,
@@ -36,7 +36,7 @@ export function InputsPicker({
   inputsValues: IInputsValues;
   onSelect: (v: string) => void;
 }) {
-  const available = useScopeAvailable();
+  const scope = useCurrentScope();
 
   const getArrayDrilldown = (type: ArrayType, depth = 1): { type: BaseType; depth: number } => {
     if (ASTMatch.isArray(type.items)) {
@@ -90,7 +90,7 @@ export function InputsPicker({
 
     if (FlowValueUtils.isFlowValue(value)) {
       if (FlowValueUtils.isRef(value)) {
-        const variable = available.getByKeyPath(value.content || []);
+        const variable = scope?.available?.getByKeyPath(value.content || []);
         if (variable) {
           return renderVariable(variable, keyPath);
         }

package/src/components/coze-editor-extensions/extensions/variable-tag.tsx

@@ -107,17 +107,25 @@ class VariableTagWidget extends WidgetType {
       })
     );
 
+    const refresh = () => {
+      this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+    };
+
     this.toDispose.push(
-      this.scope.available.trackByKeyPath(
-        this.keyPath,
-        (v) => {
-          this.renderVariable(v);
-        },
-        { triggerOnInit: false }
-      )
+      this.scope.available.trackByKeyPath(this.keyPath, refresh, { triggerOnInit: false })
     );
 
-    this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+    if (this.keyPath?.[0]) {
+      this.toDispose.push(
+        // listen to root title changed
+        this.scope.available.trackByKeyPath<{ title?: string }>([this.keyPath[0]], refresh, {
+          selector: (curr) => ({ ...curr?.meta }),
+          triggerOnInit: false,
+        })
+      );
+    }
+
+    refresh();
 
     return dom;
   }
@@ -138,7 +146,7 @@ class VariableTagWidget extends WidgetType {
 export function VariableTagInject() {
   const injector = useInjector();
 
-  const scope = useCurrentScope();
+  const scope = useCurrentScope({ strict: true });
 
   // 基于 {{var}} 的正则进行匹配，匹配后进行自定义渲染
   useLayoutEffect(() => {

package/src/components/db-condition-row/index.tsx

@@ -56,6 +56,18 @@ export function DBConditionRow({
     leftSchema,
     operator,
     ruleConfig,
+    onClearOp() {
+      onChange({
+        ...value,
+        operator: undefined,
+      });
+    },
+    onClearRight() {
+      onChange({
+        ...value,
+        right: undefined,
+      });
+    },
   });
 
   const renderDBOptionSelect = () => (

package/src/components/display-outputs/index.tsx

@@ -24,7 +24,7 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
   const refresh = useRefresh();
 
   useEffect(() => {
-    if (!displayFromScope) {
+    if (!displayFromScope || !scope) {
       return () => null;
     }
 
@@ -38,7 +38,7 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
   }, [displayFromScope]);
 
   const properties: IJsonSchema['properties'] = displayFromScope
-    ? scope.output.variables?.reduce((acm, curr) => {
+    ? (scope?.output.variables || []).reduce((acm, curr) => {
         acm = {
           ...acm,
           ...(JsonSchemaUtils.astToSchema(curr.type)?.properties || {}),

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