@flowgram.ai/form-materials 0.1.0-alpha.14 → 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

@@ -13,9 +13,9 @@ import {
   Scope,
   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 { useInjector } from '@coze-editor/editor/react';
 import {
   Decoration,
   DecorationSet,
@@ -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

@@ -5,19 +5,25 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Popover, Tree } from '@douyinfe/semi-ui';
 import {
   Mention,
   MentionOpenChangeEvent,
   getCurrentMentionReplaceRange,
   useEditor,
   PositionMirror,
-} from '@coze-editor/editor/react';
-import { EditorAPI } from '@coze-editor/editor/preset-prompt';
+} from '@flowgram.ai/coze-editor/react';
+import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
+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

@@ -5,20 +5,7 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { IFlowConstantRefValue } from '@/typings';
-
-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>;
+import { IFlowConstantRefValue } from '@/shared';
 
 export interface DBConditionRowValueType {
   left?: string;

package/src/components/display-flow-value/index.tsx

@@ -8,7 +8,7 @@ import React, { useMemo } from 'react';
 import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowValue } from '@/typings';
+import { IFlowValue } from '@/shared';
 import { FlowValueUtils } from '@/shared';
 import { DisplaySchemaTag } from '@/components/display-schema-tag';
 

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/dynamic-value-input/hooks.ts

@@ -8,7 +8,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowConstantRefValue } from '@/typings';
+import { IFlowConstantRefValue } from '@/shared';
 
 export function useRefVariable(value?: IFlowConstantRefValue) {
   const available = useScopeAvailable();

package/src/components/dynamic-value-input/index.tsx

@@ -14,7 +14,7 @@ import {
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { IFlowConstantRefValue, IFlowConstantValue } from '@/typings';
+import { IFlowConstantRefValue, IFlowConstantValue } from '@/shared';
 import { createInjectMaterial } from '@/shared';
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { TypeSelector } from '@/components/type-selector';

package/src/components/index.ts

@@ -3,28 +3,81 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './variable-selector';
-export * from './type-selector';
-export * from './json-schema-editor';
-export * from './batch-variable-selector';
-export * from './constant-input';
-export * from './dynamic-value-input';
-export * from './condition-row';
-export * from './db-condition-row';
-export * from './batch-outputs';
-export * from './prompt-editor';
-export * from './prompt-editor-with-variables';
-export * from './prompt-editor-with-inputs';
-export * from './code-editor';
-export * from './code-editor-mini';
-export * from './json-editor-with-variables';
-export * from './inputs-values';
-export * from './display-schema-tree';
-export * from './display-outputs';
-export * from './display-schema-tag';
-export * from './display-flow-value';
-export * from './display-inputs-values';
-export * from './assign-rows';
-export * from './assign-row';
-export * from './blur-input';
-export * from './inputs-values-tree';
+export { AssignRow, type AssignValueType } from './assign-row';
+export { AssignRows } from './assign-rows';
+export { BatchOutputs } from './batch-outputs';
+export { BatchVariableSelector } from './batch-variable-selector';
+export { BlurInput } from './blur-input';
+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,
+  type DBConditionRowValueType,
+} from './db-condition-row';
+export { DisplayFlowValue } from './display-flow-value';
+export { DisplayInputsValueAllInTag, DisplayInputsValues } from './display-inputs-values';
+export { DisplayOutputs } from './display-outputs';
+export { DisplaySchemaTag } from './display-schema-tag';
+export { DisplaySchemaTree } from './display-schema-tree';
+export { DynamicValueInput, InjectDynamicValueInput } from './dynamic-value-input';
+export { InputsValues } from './inputs-values';
+export { InputsValuesTree } from './inputs-values-tree';
+export {
+  JsonEditorWithVariables,
+  type JsonEditorWithVariablesProps,
+} from './json-editor-with-variables';
+export { JsonSchemaEditor } from './json-schema-editor';
+export { PromptEditor, type PromptEditorPropsType } from './prompt-editor';
+export {
+  PromptEditorWithInputs,
+  type PromptEditorWithInputsProps,
+} from './prompt-editor-with-inputs';
+export {
+  PromptEditorWithVariables,
+  type PromptEditorWithVariablesProps,
+} from './prompt-editor-with-variables';
+export {
+  SQLEditorWithVariables,
+  type SQLEditorWithVariablesProps,
+} from './sql-editor-with-variables';
+export {
+  InjectTypeSelector,
+  TypeSelector,
+  getTypeSelectValue,
+  parseTypeSelectValue,
+  type TypeSelectorProps,
+} from './type-selector';
+export {
+  InjectVariableSelector,
+  VariableSelector,
+  VariableSelectorProvider,
+  useVariableTree,
+  type VariableSelectorProps,
+} from './variable-selector';

package/src/components/inputs-values/index.tsx

@@ -9,7 +9,7 @@ import { I18n } from '@flowgram.ai/editor';
 import { Button, IconButton } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
-import { IFlowConstantRefValue, IFlowValue } from '@/typings';
+import { IFlowConstantRefValue, IFlowValue } from '@/shared';
 import { useObjectList } from '@/hooks';
 import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 import { BlurInput } from '@/components/blur-input';

package/src/components/inputs-values/types.ts

@@ -5,7 +5,7 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { IFlowValue } from '@/typings';
+import { IFlowValue } from '@/shared';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 export interface PropsType {

package/src/components/inputs-values-tree/row.tsx

@@ -9,7 +9,7 @@ import { I18n } from '@flowgram.ai/editor';
 import { IconButton, Input } from '@douyinfe/semi-ui';
 import { IconChevronDown, IconChevronRight, IconDelete } from '@douyinfe/semi-icons';
 
-import { IFlowConstantValue } from '@/typings';
+import { IFlowConstantValue } from '@/shared';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 import { PropsType } from './types';

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

@@ -6,13 +6,13 @@
 import React from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
-import { transformerCreator } from '@coze-editor/editor/preset-code';
-import { Text } from '@coze-editor/editor/language-json';
+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/editor.tsx

@@ -10,8 +10,8 @@ import {
   EditorProvider,
   ActiveLinePlaceholder,
   InferValues,
-} from '@coze-editor/editor/react';
-import preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';
+} from '@flowgram.ai/coze-editor/react';
+import preset, { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
 
 import { PropsType } from './types';
 import { UIContainer } from './styles';

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

@@ -5,8 +5,8 @@
 
 import { useLayoutEffect } from 'react';
 
-import { useInjector } from '@coze-editor/editor/react';
-import { astDecorator } from '@coze-editor/editor';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
+import { astDecorator } from '@flowgram.ai/coze-editor';
 import { EditorView } from '@codemirror/view';
 
 function JinjaHighlight() {

package/src/components/prompt-editor/extensions/language-support.tsx

@@ -5,8 +5,8 @@
 
 import { useLayoutEffect } from 'react';
 
-import { useInjector } from '@coze-editor/editor/react';
-import { languageSupport } from '@coze-editor/editor/preset-prompt';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
+import { languageSupport } from '@flowgram.ai/coze-editor/preset-prompt';
 
 function LanguageSupport() {
   const injector = useInjector();

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

@@ -5,8 +5,8 @@
 
 import { useLayoutEffect } from 'react';
 
-import { useInjector } from '@coze-editor/editor/react';
-import { astDecorator } from '@coze-editor/editor';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
+import { astDecorator } from '@flowgram.ai/coze-editor';
 import { EditorView } from '@codemirror/view';
 
 function MarkdownHighlight() {