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

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

@@ -15,31 +15,23 @@ import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 import { IConditionRule, ConditionOpConfigs, useCondition } from '@/components/condition-context';
 
 import { ConditionRowValueType } from './types';
-import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
+import './styles.css';
 
 interface PropTypes {
   value?: ConditionRowValueType;
   onChange: (value?: ConditionRowValueType) => void;
   style?: React.CSSProperties;
   readonly?: boolean;
+  /**
+   * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+   */
   ruleConfig?: {
     ops?: ConditionOpConfigs;
     rules?: Record<string, IConditionRule>;
   };
 }
 
-const defaultRuleConfig = {
-  ops: {},
-  rules: {},
-};
-
-export function ConditionRow({
-  style,
-  value,
-  onChange,
-  readonly,
-  ruleConfig = defaultRuleConfig,
-}: PropTypes) {
+export function ConditionRow({ style, value, onChange, readonly, ruleConfig }: PropTypes) {
   const { left, operator, right } = value || {};
 
   const available = useScopeAvailable();
@@ -57,6 +49,19 @@ export function ConditionRow({
   const { rule, opConfig, opOptionList, targetSchema } = useCondition({
     leftSchema,
     operator,
+    ruleConfig,
+    onClearOp() {
+      onChange({
+        ...value,
+        operator: undefined,
+      });
+    },
+    onClearRight() {
+      onChange({
+        ...value,
+        right: undefined,
+      });
+    },
   });
 
   const renderOpSelect = () => (
@@ -81,10 +86,10 @@ export function ConditionRow({
   );
 
   return (
-    <UIContainer style={style}>
-      <UIOperator>{renderOpSelect()}</UIOperator>
-      <UIValues>
-        <UILeft>
+    <div className="gedit-m-condition-row-container" style={style}>
+      <div className="gedit-m-condition-row-operator">{renderOpSelect()}</div>
+      <div className="gedit-m-condition-row-values">
+        <div className="gedit-m-condition-row-left">
           <InjectVariableSelector
             readonly={readonly}
             style={{ width: '100%' }}
@@ -99,8 +104,8 @@ export function ConditionRow({
               })
             }
           />
-        </UILeft>
-        <UIRight>
+        </div>
+        <div className="gedit-m-condition-row-right">
           {targetSchema ? (
             <InjectDynamicValueInput
               readonly={readonly || !rule}
@@ -116,9 +121,9 @@ export function ConditionRow({
               value={opConfig?.rightDisplay || I18n.t('Empty')}
             />
           )}
-        </UIRight>
-      </UIValues>
-    </UIContainer>
+        </div>
+      </div>
+    </div>
   );
 }
 

package/src/components/condition-row/{styles.tsx → styles.css}

@@ -3,28 +3,28 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIContainer = styled.div`
+.gedit-m-condition-row-container {
   display: flex;
   align-items: center;
   gap: 4px;
-`;
+}
 
-export const UIOperator = styled.div``;
+.gedit-m-condition-row-operator {
+}
 
-export const UILeft = styled.div`
+.gedit-m-condition-row-left {
   width: 100%;
-`;
+}
 
-export const UIRight = styled.div`
+.gedit-m-condition-row-right {
   width: 100%;
-`;
+}
 
-export const UIValues = styled.div`
+.gedit-m-condition-row-values {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
-`;
+  overflow: hidden;
+}

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,
@@ -24,7 +24,8 @@ 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';
+import { IInputsValues } from '@/shared/flow-value/types';
+import { FlowValueUtils } from '@/shared';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
@@ -32,10 +33,10 @@ export function InputsPicker({
   inputsValues,
   onSelect,
 }: {
-  inputsValues: any;
+  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)) {
@@ -89,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);
         }
@@ -130,7 +131,7 @@ export function InputsTree({
   inputsValues,
   triggerCharacters = DEFAULT_TRIGGER_CHARACTERS,
 }: {
-  inputsValues: Record<string, IFlowValue>;
+  inputsValues: IInputsValues;
   triggerCharacters?: string[];
 }) {
   const [posKey, setPosKey] = useState('');

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

@@ -14,7 +14,7 @@ import {
   useCurrentScope,
 } from '@flowgram.ai/editor';
 import { useInjector } from '@flowgram.ai/coze-editor/react';
-import { Popover } from '@douyinfe/semi-ui';
+import { Popover, Tag } from '@douyinfe/semi-ui';
 import { IconIssueStroked } from '@douyinfe/semi-icons';
 import {
   Decoration,
@@ -27,7 +27,7 @@ import {
 
 import { IPolyfillRoot, polyfillCreateRoot } from '@/shared';
 
-import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';
+import '../styles.css';
 
 class VariableTagWidget extends WidgetType {
   keyPath?: string[];
@@ -56,9 +56,10 @@ class VariableTagWidget extends WidgetType {
   renderVariable(v?: BaseVariableField) {
     if (!v) {
       this.root.render(
-        <UITag prefixIcon={<IconIssueStroked />} color="amber">
-          Unknown
-        </UITag>
+        <Tag className="gedit-m-coze-editor-tag" color="amber">
+          <IconIssueStroked style={{ marginRight: '4px' }} />
+          <span>Unknown</span>
+        </Tag>
       );
       return;
     }
@@ -67,26 +68,30 @@ class VariableTagWidget extends WidgetType {
     const isRoot = v === rootField;
 
     const rootTitle = (
-      <UIRootTitle>
+      <span className="gedit-m-coze-editor-root-title">
         {rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''}
-      </UIRootTitle>
+      </span>
     );
     const rootIcon = this.renderIcon(rootField?.meta.icon);
 
     this.root.render(
       <Popover
         content={
-          <UIPopoverContent>
+          <div className="gedit-m-coze-editor-popover-content">
             {rootIcon}
             {rootTitle}
-            <UIVarName>{v?.keyPath.slice(1).join('.')}</UIVarName>
-          </UIPopoverContent>
+            <span className="gedit-m-coze-editor-var-name">{v?.keyPath.slice(1).join('.')}</span>
+          </div>
         }
       >
-        <UITag prefixIcon={rootIcon}>
+        <Tag
+          className="gedit-m-coze-editor-tag"
+          style={{ display: 'inline-flex', alignItems: 'center' }}
+        >
+          {rootIcon}
           {rootTitle}
-          {!isRoot && <UIVarName>{v?.key}</UIVarName>}
-        </UITag>
+          {!isRoot && <span className="gedit-m-coze-editor-var-name">{v?.key}</span>}
+        </Tag>
       </Popover>
     );
   }
@@ -102,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;
   }
@@ -133,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/coze-editor-extensions/extensions/variable-tree.tsx

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
+import { debounce } from 'lodash-es';
 import {
   Mention,
   MentionOpenChangeEvent,
@@ -69,6 +70,11 @@ export function VariableTree({
 
   const treeData = useVariableTree({});
 
+  const debounceUpdatePosKey = useCallback(
+    debounce(() => setPosKey(String(Math.random())), 100),
+    []
+  );
+
   return (
     <>
       <Mention triggerCharacters={triggerCharacters} onOpenChange={handleOpenChange} />
@@ -82,8 +88,9 @@ export function VariableTree({
           <div style={{ width: 300, maxHeight: 300, overflowY: 'auto' }}>
             <Tree
               treeData={treeData}
-              onExpand={(v) => {
-                setPosKey(String(Math.random()));
+              onExpand={() => {
+                // When Expand, an animation is triggered, so we need to update the position by debounce
+                debounceUpdatePosKey();
               }}
               onSelect={(v) => {
                 insert(v);
@@ -96,7 +103,10 @@ export function VariableTree({
         <PositionMirror
           position={position}
           // When Doc scroll, update position
-          onChange={() => setPosKey(String(Math.random()))}
+          onChange={() => {
+            // Update immediately to avoid the popover position lagging behind the cursor
+            setPosKey(String(Math.random()));
+          }}
         />
       </Popover>
     </>

package/src/components/coze-editor-extensions/{styles.tsx → styles.css}

@@ -3,25 +3,22 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-import { Tag } from '@douyinfe/semi-ui';
-
-export const UIRootTitle = styled.div`
+.gedit-m-coze-editor-root-title {
   margin-right: 4px;
   min-width: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--semi-color-text-2);
-`;
+}
 
-export const UIVarName = styled.div`
+.gedit-m-coze-editor-var-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`;
+}
 
-export const UITag = styled(Tag)`
+.gedit-m-coze-editor-tag {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
@@ -34,11 +31,11 @@ export const UITag = styled(Tag)`
   &.semi-tag {
     margin: 0 5px;
   }
-`;
+}
 
-export const UIPopoverContent = styled.div`
+.gedit-m-coze-editor-popover-content {
   padding: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
-`;
+}

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

@@ -18,15 +18,7 @@ import {
 } from '@/components/condition-context';
 
 import { DBConditionOptionType, DBConditionRowValueType } from './types';
-import {
-  UIContainer,
-  UILeft,
-  UIOperator,
-  UIOptionLabel,
-  UIRight,
-  UISelect,
-  UIValues,
-} from './styles';
+import './styles.css';
 
 interface PropTypes {
   value?: DBConditionRowValueType;
@@ -34,24 +26,22 @@ interface PropTypes {
   style?: React.CSSProperties;
   options?: DBConditionOptionType[];
   readonly?: boolean;
+  /**
+   * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+   */
   ruleConfig?: {
     ops?: ConditionOpConfigs;
     rules?: Record<string, IConditionRule>;
   };
 }
 
-const defaultRuleConfig = {
-  ops: {},
-  rules: {},
-};
-
 export function DBConditionRow({
   style,
   value,
   onChange,
   readonly,
   options,
-  ruleConfig = defaultRuleConfig,
+  ruleConfig,
 }: PropTypes) {
   const { left, operator, right } = value || {};
 
@@ -66,10 +56,23 @@ export function DBConditionRow({
     leftSchema,
     operator,
     ruleConfig,
+    onClearOp() {
+      onChange({
+        ...value,
+        operator: undefined,
+      });
+    },
+    onClearRight() {
+      onChange({
+        ...value,
+        right: undefined,
+      });
+    },
   });
 
   const renderDBOptionSelect = () => (
-    <UISelect
+    <Select
+      className="gedit-m-db-condition-row-select"
       disabled={readonly}
       size="small"
       style={{ width: '100%' }}
@@ -83,10 +86,10 @@ export function DBConditionRow({
       optionList={
         options?.map((item) => ({
           label: (
-            <UIOptionLabel>
+            <div className="gedit-m-db-condition-row-option-label">
               <Icon size="small" svg={typeManager.getDisplayIcon(item.schema)} />
               {item.label}
-            </UIOptionLabel>
+            </div>
           ),
           value: item.value,
         })) || []
@@ -116,11 +119,11 @@ export function DBConditionRow({
   );
 
   return (
-    <UIContainer style={style}>
-      <UIOperator>{renderOpSelect()}</UIOperator>
-      <UIValues>
-        <UILeft>{renderDBOptionSelect()}</UILeft>
-        <UIRight>
+    <div className="gedit-m-db-condition-row-container" style={style}>
+      <div className="gedit-m-db-condition-row-operator">{renderOpSelect()}</div>
+      <div className="gedit-m-db-condition-row-values">
+        <div className="gedit-m-db-condition-row-left">{renderDBOptionSelect()}</div>
+        <div className="gedit-m-db-condition-row-right">
           {targetSchema ? (
             <InjectDynamicValueInput
               readonly={readonly || !rule}
@@ -136,9 +139,9 @@ export function DBConditionRow({
               value={opConfig?.rightDisplay || I18n.t('Empty')}
             />
           )}
-        </UIRight>
-      </UIValues>
-    </UIContainer>
+        </div>
+      </div>
+    </div>
   );
 }
 

package/src/components/db-condition-row/{styles.tsx → styles.css}

@@ -3,41 +3,39 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-import { Select } from '@douyinfe/semi-ui';
-
-export const UIContainer = styled.div`
+.gedit-m-db-condition-row-container {
   display: flex;
   align-items: center;
   gap: 4px;
-`;
+}
 
-export const UIOperator = styled.div``;
+.gedit-m-db-condition-row-operator {
+}
 
-export const UILeft = styled.div`
+.gedit-m-db-condition-row-left {
   width: 100%;
-`;
+}
 
-export const UIRight = styled.div`
+.gedit-m-db-condition-row-right {
   width: 100%;
-`;
+}
 
-export const UIValues = styled.div`
+.gedit-m-db-condition-row-values {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
-`;
+}
 
-export const UIOptionLabel = styled.div`
+.gedit-m-db-condition-row-option-label {
   display: flex;
   align-items: center;
   gap: 10px;
-`;
+}
 
-export const UISelect = styled(Select)`
+.gedit-m-db-condition-row-select {
   & .semi-select-selection {
     margin-left: 5px;
   }
-`;
+}

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

@@ -9,7 +9,6 @@ import { IFlowConstantRefValue } from '@/shared';
 
 export interface DBConditionRowValueType {
   left?: string;
-  schema?: IJsonSchema;
   operator?: string;
   right?: IFlowConstantRefValue;
 }

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

@@ -8,14 +8,15 @@ import React, { useMemo } from 'react';
 import { isPlainObject } from 'lodash-es';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
+import { IInputsValues } from '@/shared/flow-value';
 import { FlowValueUtils } from '@/shared';
 import { DisplayFlowValue } from '@/components/display-flow-value';
 
-import { DisplayInputsWrapper } from './styles';
+import './styles.css';
 import { DisplaySchemaTag } from '../display-schema-tag';
 
 interface PropsType {
-  value?: any;
+  value?: IInputsValues;
   showIconInTree?: boolean;
 }
 
@@ -23,7 +24,7 @@ export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
   const childEntries = Object.entries(value || {});
 
   return (
-    <DisplayInputsWrapper>
+    <div className="gedit-m-display-inputs-wrapper">
       {childEntries.map(([key, value]) => {
         if (FlowValueUtils.isFlowValue(value)) {
           return (
@@ -44,7 +45,7 @@ export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
 
         return null;
       })}
-    </DisplayInputsWrapper>
+    </div>
   );
 }
 

package/src/components/display-inputs-values/{styles.ts → styles.css}

@@ -3,10 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const DisplayInputsWrapper = styled.div`
+.gedit-m-display-inputs-wrapper {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
-`;
+}

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

@@ -3,28 +3,29 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 
 import { IJsonSchema, JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useCurrentScope, useRefresh } from '@flowgram.ai/editor';
 
 import { DisplaySchemaTag } from '@/components/display-schema-tag';
 
-import { DisplayOutputsWrapper } from './styles';
+import './styles.css';
 
 interface PropsType {
   value?: IJsonSchema;
   showIconInTree?: boolean;
   displayFromScope?: boolean;
   typeManager?: JsonSchemaTypeManager;
+  style?: React.CSSProperties;
 }
 
-export function DisplayOutputs({ value, showIconInTree, displayFromScope }: PropsType) {
+export function DisplayOutputs({ value, showIconInTree, displayFromScope, style }: PropsType) {
   const scope = useCurrentScope();
   const refresh = useRefresh();
 
-  useEffect(() => {
-    if (!displayFromScope) {
+  useLayoutEffect(() => {
+    if (!displayFromScope || !scope) {
       return () => null;
     }
 
@@ -38,7 +39,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 || {}),
@@ -50,7 +51,7 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
   const childEntries = Object.entries(properties || {});
 
   return (
-    <DisplayOutputsWrapper>
+    <div className="gedit-m-display-outputs-wrapper" style={style}>
       {childEntries.map(([key, schema]) => (
         <DisplaySchemaTag
           key={key}
@@ -60,6 +61,6 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
           warning={!schema}
         />
       ))}
-    </DisplayOutputsWrapper>
+    </div>
   );
 }