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

package/src/components/{prompt-editor-with-inputs/inputs-picker.tsx → coze-editor-extensions/extensions/inputs-tree.tsx}

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
 
 import { isPlainObject, last } from 'lodash-es';
 import {
@@ -13,10 +13,18 @@ import {
   type BaseVariableField,
   useScopeAvailable,
 } from '@flowgram.ai/editor';
-import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
-import { Tree } from '@douyinfe/semi-ui';
-
-import { FlowValueUtils } from '@/shared';
+import {
+  Mention,
+  MentionOpenChangeEvent,
+  getCurrentMentionReplaceRange,
+  useEditor,
+  PositionMirror,
+} from '@flowgram.ai/coze-editor/react';
+import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
+import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+import { Tree, Popover } from '@douyinfe/semi-ui';
+
+import { IFlowValue, FlowValueUtils } from '@/shared';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
@@ -115,3 +123,85 @@ export function InputsPicker({
 
   return <Tree treeData={treeData} onSelect={(v) => onSelect(v)} />;
 }
+
+const DEFAULT_TRIGGER_CHARACTERS = ['{', '{}', '@'];
+
+export function InputsTree({
+  inputsValues,
+  triggerCharacters = DEFAULT_TRIGGER_CHARACTERS,
+}: {
+  inputsValues: Record<string, IFlowValue>;
+  triggerCharacters?: string[];
+}) {
+  const [posKey, setPosKey] = useState('');
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(-1);
+  const editor = useEditor<EditorAPI>();
+
+  function insert(variablePath: string) {
+    const range = getCurrentMentionReplaceRange(editor.$view.state);
+
+    if (!range) {
+      return;
+    }
+
+    /**
+     * When user input {{xxxx}}, {{{xxx}}}(more brackets if possible), replace all brackets with {{xxxx}}
+     */
+    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: MentionOpenChangeEvent) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+
+  return (
+    <>
+      <Mention triggerCharacters={triggerCharacters} onOpenChange={handleOpenChange} />
+
+      <Popover
+        visible={visible}
+        trigger="custom"
+        position="topLeft"
+        rePosKey={posKey}
+        content={
+          <div style={{ width: 300, maxHeight: 300, overflowY: 'auto' }}>
+            <InputsPicker
+              inputsValues={inputsValues}
+              onSelect={(v) => {
+                insert(v);
+              }}
+            />
+          </div>
+        }
+      >
+        {/* PositionMirror allows the Popover to appear at the specified cursor position */}
+        <PositionMirror
+          position={position}
+          // When Doc scroll, update position
+          onChange={() => setPosKey(String(Math.random()))}
+        />
+      </Popover>
+    </>
+  );
+}

package/src/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.tsx

@@ -63,10 +63,13 @@ class VariableTagWidget extends WidgetType {
       return;
     }
 
-    const rootField = last(v.parentFields);
+    const rootField = last(v.parentFields) || v;
+    const isRoot = v === rootField;
 
     const rootTitle = (
-      <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>
+      <UIRootTitle>
+        {rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''}
+      </UIRootTitle>
     );
     const rootIcon = this.renderIcon(rootField?.meta.icon);
 
@@ -82,7 +85,7 @@ class VariableTagWidget extends WidgetType {
       >
         <UITag prefixIcon={rootIcon}>
           {rootTitle}
-          <UIVarName>{v?.key}</UIVarName>
+          {!isRoot && <UIVarName>{v?.key}</UIVarName>}
         </UITag>
       </Popover>
     );

package/src/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.tsx

@@ -17,7 +17,13 @@ import { Popover, Tree } from '@douyinfe/semi-ui';
 
 import { useVariableTree } from '@/components/variable-selector';
 
-export function VariableTree() {
+const DEFAULT_TRIGGER_CHARACTER = ['{', '{}', '@'];
+
+export function VariableTree({
+  triggerCharacters = DEFAULT_TRIGGER_CHARACTER,
+}: {
+  triggerCharacters?: string[];
+}) {
   const [posKey, setPosKey] = useState('');
   const [visible, setVisible] = useState(false);
   const [position, setPosition] = useState(-1);
@@ -65,7 +71,7 @@ export function VariableTree() {
 
   return (
     <>
-      <Mention triggerCharacters={['{', '{}', '@']} onOpenChange={handleOpenChange} />
+      <Mention triggerCharacters={triggerCharacters} onOpenChange={handleOpenChange} />
 
       <Popover
         visible={visible}
@@ -73,9 +79,12 @@ export function VariableTree() {
         position="topLeft"
         rePosKey={posKey}
         content={
-          <div style={{ width: 300 }}>
+          <div style={{ width: 300, maxHeight: 300, overflowY: 'auto' }}>
             <Tree
               treeData={treeData}
+              onExpand={(v) => {
+                setPosKey(String(Math.random()));
+              }}
               onSelect={(v) => {
                 insert(v);
               }}

package/src/components/coze-editor-extensions/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { lazy } from 'react';
+
+import { createInjectMaterial } from '@/shared';
+
+export const EditorVariableTree = createInjectMaterial(
+  lazy(() =>
+    import('./extensions/variable-tree').then((module) => ({ default: module.VariableTree }))
+  ),
+  {
+    renderKey: 'EditorVariableTree',
+  }
+);
+
+export const EditorVariableTagInject = createInjectMaterial(
+  lazy(() =>
+    import('./extensions/variable-tag').then((module) => ({ default: module.VariableTagInject }))
+  ),
+  {
+    renderKey: 'EditorVariableTagInject',
+  }
+);
+
+export const EditorInputsTree = createInjectMaterial(
+  lazy(() => import('./extensions/inputs-tree').then((module) => ({ default: module.InputsTree }))),
+  {
+    renderKey: 'EditorInputsTree',
+  }
+);

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

@@ -6,14 +6,27 @@
 import React, { useMemo } from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
-import { Input } from '@douyinfe/semi-ui';
+import { Button, Icon, Input, Select } from '@douyinfe/semi-ui';
+import { IconChevronDownStroked } from '@douyinfe/semi-icons';
 
+import { useTypeManager } from '@/plugins';
 import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import {
+  useCondition,
+  type ConditionOpConfigs,
+  type IConditionRule,
+} from '@/components/condition-context';
 
-import { DBConditionOptionType, DBConditionRowValueType, IRules, OpConfigs } from './types';
-import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
-import { useOp } from './hooks/use-op';
-import { useLeft } from './hooks/use-left';
+import { DBConditionOptionType, DBConditionRowValueType } from './types';
+import {
+  UIContainer,
+  UILeft,
+  UIOperator,
+  UIOptionLabel,
+  UIRight,
+  UISelect,
+  UIValues,
+} from './styles';
 
 interface PropTypes {
   value?: DBConditionRowValueType;
@@ -22,8 +35,8 @@ interface PropTypes {
   options?: DBConditionOptionType[];
   readonly?: boolean;
   ruleConfig?: {
-    ops?: OpConfigs;
-    rules?: IRules;
+    ops?: ConditionOpConfigs;
+    rules?: Record<string, IConditionRule>;
   };
 }
 
@@ -42,26 +55,65 @@ export function DBConditionRow({
 }: PropTypes) {
   const { left, operator, right } = value || {};
 
-  const { rule, renderDBOptionSelect } = useLeft({
-    left,
-    options,
-    onChange: (leftKey) => onChange({ ...value, left: leftKey }),
-    readonly,
-    userRules: ruleConfig.rules,
-  });
+  const typeManager = useTypeManager();
+
+  const leftSchema = useMemo(
+    () => options?.find((item) => item.value === left)?.schema,
+    [left, options]
+  );
 
-  const { renderOpSelect, opConfig } = useOp({
-    rule,
-    op: operator,
-    onChange: (v) => onChange({ ...value, operator: v }),
-    readonly,
-    userOps: ruleConfig.ops,
+  const { opConfig, rule, opOptionList, targetSchema } = useCondition({
+    leftSchema,
+    operator,
+    ruleConfig,
   });
 
-  const targetSchema = useMemo(() => {
-    const targetType: string | null = rule?.[operator || ''] || null;
-    return targetType ? { type: targetType, extra: { weak: true } } : null;
-  }, [rule, opConfig]);
+  const renderDBOptionSelect = () => (
+    <UISelect
+      disabled={readonly}
+      size="small"
+      style={{ width: '100%' }}
+      value={left}
+      onChange={(v) =>
+        onChange({
+          ...value,
+          left: v as string,
+        })
+      }
+      optionList={
+        options?.map((item) => ({
+          label: (
+            <UIOptionLabel>
+              <Icon size="small" svg={typeManager.getDisplayIcon(item.schema)} />
+              {item.label}
+            </UIOptionLabel>
+          ),
+          value: item.value,
+        })) || []
+      }
+    />
+  );
+
+  const renderOpSelect = () => (
+    <Select
+      style={{ height: 22 }}
+      disabled={readonly}
+      size="small"
+      value={operator}
+      optionList={opOptionList}
+      onChange={(v) => {
+        onChange({
+          ...value,
+          operator: v as string,
+        });
+      }}
+      triggerRender={({ value }) => (
+        <Button size="small" disabled={!rule}>
+          {opConfig?.abbreviation || <IconChevronDownStroked size="small" />}
+        </Button>
+      )}
+    />
+  );
 
   return (
     <UIContainer style={style}>

package/src/components/db-condition-row/types.ts

@@ -7,19 +7,6 @@ import { IJsonSchema } from '@flowgram.ai/json-schema';
 
 import { IFlowConstantRefValue } from '@/shared';
 
-export interface OpConfig {
-  label: string;
-  abbreviation: string;
-  // When right is not a value, display this text
-  rightDisplay?: string;
-}
-
-export type OpConfigs = Record<string, OpConfig>;
-
-export type IRule = Partial<Record<string, string | null>>;
-
-export type IRules = Record<string, IRule>;
-
 export interface DBConditionRowValueType {
   left?: string;
   schema?: IJsonSchema;

package/src/components/display-schema-tree/index.tsx

@@ -5,9 +5,11 @@
 
 import React from 'react';
 
-import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
-
-import { useTypeManager } from '@/plugins';
+import {
+  type IJsonSchema,
+  type JsonSchemaTypeManager,
+  useTypeManager,
+} from '@flowgram.ai/json-schema';
 
 import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
 
@@ -33,7 +35,7 @@ function SchemaTree(props: PropsType) {
     parentKey = '',
   } = props || {};
 
-  const typeManager = useTypeManager();
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
 
   const config = typeManager.getTypeBySchema(schema);
   const title = typeManager.getComplexText(schema);

package/src/components/index.ts

@@ -8,10 +8,34 @@ export { AssignRows } from './assign-rows';
 export { BatchOutputs } from './batch-outputs';
 export { BatchVariableSelector } from './batch-variable-selector';
 export { BlurInput } from './blur-input';
-export { CodeEditor, type CodeEditorPropsType } from './code-editor';
+export {
+  BaseCodeEditor,
+  CodeEditor,
+  JsonCodeEditor,
+  PythonCodeEditor,
+  SQLCodeEditor,
+  ShellCodeEditor,
+  TypeScriptCodeEditor,
+  type CodeEditorPropsType,
+} from './code-editor';
 export { CodeEditorMini } from './code-editor-mini';
+export {
+  ConditionPresetOp,
+  ConditionProvider,
+  type ConditionOpConfig,
+  type ConditionOpConfigs,
+  type IConditionRule,
+  type IConditionRuleFactory,
+  useCondition,
+  useConditionContext,
+} from './condition-context';
 export { ConditionRow, type ConditionRowValueType } from './condition-row';
 export { ConstantInput, type ConstantInputStrategy } from './constant-input';
+export {
+  EditorInputsTree,
+  EditorVariableTagInject,
+  EditorVariableTree,
+} from './coze-editor-extensions';
 export {
   DBConditionRow,
   type DBConditionOptionType,
@@ -39,6 +63,10 @@ export {
   PromptEditorWithVariables,
   type PromptEditorWithVariablesProps,
 } from './prompt-editor-with-variables';
+export {
+  SQLEditorWithVariables,
+  type SQLEditorWithVariablesProps,
+} from './sql-editor-with-variables';
 export {
   InjectTypeSelector,
   TypeSelector,

package/src/components/json-editor-with-variables/editor.tsx

@@ -9,10 +9,10 @@ import { I18n } from '@flowgram.ai/editor';
 import { transformerCreator } from '@flowgram.ai/coze-editor/preset-code';
 import { Text } from '@flowgram.ai/coze-editor/language-json';
 
-import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
+import { JsonCodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
 
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
+const TRIGGER_CHARACTERS = ['@'];
 
 type Match = { match: string; range: [number, number] };
 function findAllMatches(inputString: string, regex: RegExp): Match[] {
@@ -53,8 +53,7 @@ export interface JsonEditorWithVariablesProps extends Omit<CodeEditorPropsType,
 
 export function JsonEditorWithVariables(props: JsonEditorWithVariablesProps) {
   return (
-    <CodeEditor
-      languageId="json"
+    <JsonCodeEditor
       activeLinePlaceholder={I18n.t("Press '@' to Select variable")}
       {...props}
       options={{
@@ -62,8 +61,8 @@ export function JsonEditorWithVariables(props: JsonEditorWithVariablesProps) {
         ...(props.options || {}),
       }}
     >
-      <VariableTree />
-      <VariableTagInject />
-    </CodeEditor>
+      <EditorVariableTree triggerCharacters={TRIGGER_CHARACTERS} />
+      <EditorVariableTagInject />
+    </JsonCodeEditor>
   );
 }

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

@@ -6,8 +6,7 @@
 import React from 'react';
 
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
-
-import { InputsTree } from './extensions/inputs-tree';
+import { EditorInputsTree } from '@/components/coze-editor-extensions';
 
 export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
   inputsValues: any;
@@ -19,7 +18,7 @@ export function PromptEditorWithInputs({
 }: PromptEditorWithInputsProps) {
   return (
     <PromptEditor {...restProps}>
-      <InputsTree inputsValues={inputsValues} />
+      <EditorInputsTree inputsValues={inputsValues} />
     </PromptEditor>
   );
 }

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

@@ -6,17 +6,15 @@
 import React from 'react';
 
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
-
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
 
 export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
 
 export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
   return (
     <PromptEditor {...props}>
-      <VariableTree />
-      <VariableTagInject />
+      <EditorVariableTree />
+      <EditorVariableTagInject />
     </PromptEditor>
   );
 }

package/src/components/sql-editor-with-variables/editor.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
+import { SQLCodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+
+export interface SQLEditorWithVariablesProps extends Omit<CodeEditorPropsType, 'languageId'> {}
+
+export function SQLEditorWithVariables(props: SQLEditorWithVariablesProps) {
+  return (
+    <SQLCodeEditor
+      activeLinePlaceholder={I18n.t("Press '@' to Select variable")}
+      {...props}
+      options={{
+        ...(props.options || {}),
+      }}
+    >
+      <EditorVariableTree />
+      <EditorVariableTagInject />
+    </SQLCodeEditor>
+  );
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { lazySuspense } from '@/shared';
+
+export const SQLEditorWithVariables = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.SQLEditorWithVariables }))
+);
+
+export type { SQLEditorWithVariablesProps } from './editor';

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

@@ -5,11 +5,10 @@
 
 import React, { useMemo } from 'react';
 
-import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { IJsonSchema, useTypeManager, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
 import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
 import { createInjectMaterial } from '@/shared/inject-material';
-import { useTypeManager } from '@/plugins';
 
 export interface TypeSelectorProps {
   value?: Partial<IJsonSchema>;
@@ -47,7 +46,7 @@ export function TypeSelector(props: TypeSelectorProps) {
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
 
-  const typeManager = useTypeManager();
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
 
   const icon = typeManager.getDisplayIcon(value || {});
 

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

@@ -7,8 +7,8 @@ import React, { useMemo } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
-import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
-import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+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 { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 

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

@@ -5,13 +5,16 @@
 
 import React, { useCallback } from 'react';
 
-import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import {
+  IJsonSchema,
+  JsonSchemaTypeManager,
+  JsonSchemaUtils,
+  useTypeManager,
+} from '@flowgram.ai/json-schema';
 import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '@/plugins';
-
 type VariableField = BaseVariableField<{
   icon?: string | JSX.Element;
   title?: string;
@@ -25,7 +28,7 @@ export function useVariableTree(params: {
 }): TreeNodeData[] {
   const { includeSchema, excludeSchema, skipVariable } = params;
 
-  const typeManager = useTypeManager();
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
   const variables = useAvailableVariables();
 
   const getVariableTypeIcon = useCallback((variable: VariableField) => {

package/src/effects/provide-batch-input/index.ts

@@ -8,7 +8,6 @@ import {
   EffectOptions,
   FlowNodeRegistry,
   createEffectFromVariableProvider,
-  getNodeForm,
 } from '@flowgram.ai/editor';
 
 import { IFlowRefValue } from '@/shared';
@@ -19,7 +18,7 @@ export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariable
     ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        title: ctx.node.form?.getValueIn('title'),
         icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
       },
       type: ASTFactory.createObject({

package/src/effects/provide-json-schema-outputs/index.ts

@@ -9,7 +9,6 @@ import {
   EffectOptions,
   FlowNodeRegistry,
   createEffectFromVariableProvider,
-  getNodeForm,
 } from '@flowgram.ai/editor';
 
 export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariableProvider({
@@ -17,7 +16,7 @@ export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariabl
     ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: getNodeForm(ctx.node)?.getValueIn('title') || ctx.node.id,
+        title: ctx.node.form?.getValueIn('title') || ctx.node.id,
         icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
       },
       type: JsonSchemaUtils.schemaToAST(value),