@fudanda/workflow 0.0.0-stage → 2.20261024.1-beta.1

package/vendor/coze/source/form-extensions/setters/condition/multi-condition/condition-branch.tsx

@@ -0,0 +1,249 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { type ReactNode } from 'react';
+
+import { useNodeTestId } from '@coze-workflow/base';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozMinus, IconCozPlus } from '@coze-arch/coze-design/icons';
+import { IconButton, Tag } from '@coze-arch/coze-design';
+
+import { FormCard } from '../../../components/form-card';
+import { type ConditionValidateResult } from './validate/validate';
+import { Logic, type ConditionBranchValueWithUid } from './types';
+import { useConditionContext } from './context';
+import ConditionParamsItem, {
+  type ConditionParamsItemProps,
+} from './condition-params-item';
+import {
+  ConditionItemLogic,
+  type ConditionItemLogicProps,
+} from './condition-item-logic';
+
+import styles from './condition-branch.module.less';
+
+function getDefaultConditionItems() {
+  return {
+    left: undefined,
+    operator: undefined,
+    right: undefined,
+  };
+}
+
+export interface ConditionBranchProps {
+  index: number;
+  prefixName: string;
+  portId?: string;
+  titleIcon?: ReactNode;
+  branch: ConditionBranchValueWithUid;
+  onChange?: (branch: ConditionBranchValueWithUid) => void;
+  onDelete?: () => void;
+  deletable?: boolean;
+  priority?: number;
+  isFirstBranch?: boolean;
+  branchValidateResult?: ConditionValidateResult[];
+}
+
+export const ConditionBranch = (props: ConditionBranchProps) => {
+  const { readonly, expanded } = useConditionContext();
+  const { concatTestId } = useNodeTestId();
+  const { setterPath } = useConditionContext();
+
+  const {
+    index: branchIndex,
+    branch,
+    onChange,
+    onDelete,
+    deletable = true,
+    prefixName,
+    priority,
+    branchValidateResult,
+    titleIcon,
+    isFirstBranch,
+  } = props;
+
+  const { condition } = branch;
+
+  const handleAdd = () => {
+    onChange?.({
+      ...branch,
+      condition: {
+        ...condition,
+        logic: condition.logic ?? Logic.AND,
+        conditions: (condition.conditions ?? []).concat([
+          getDefaultConditionItems(),
+        ]),
+      },
+    });
+  };
+
+  const handleLogicChange: ConditionItemLogicProps['onChange'] = logic => {
+    onChange?.({
+      ...branch,
+      condition: {
+        ...condition,
+        logic,
+      },
+    });
+  };
+
+  const handleConditionItemChange: (
+    index: number,
+  ) => ConditionParamsItemProps['onDataChange'] = index => conditionItem => {
+    const newConditions = condition.conditions.map((item, subIndex) => {
+      if (subIndex === index) {
+        return {
+          ...conditionItem,
+        };
+      } else {
+        return item;
+      }
+    });
+    onChange?.({
+      ...branch,
+      condition: {
+        ...condition,
+        conditions: newConditions,
+      },
+    });
+  };
+
+  const handleDeleteBranch = () => {
+    // Move the port to be deleted to the end so that the deletion does not affect other connection sequences
+    onDelete?.();
+  };
+
+  const handleDeleteConditionItem: (
+    deleteIndex: number,
+  ) => ConditionParamsItemProps['onDelete'] = deleteIndex => () => {
+    // removeValidateResult(index);
+    const newConditions = condition.conditions.filter(
+      (item, subIndex) => subIndex !== deleteIndex,
+    );
+    if (newConditions.length) {
+      onChange?.({
+        ...branch,
+        condition: {
+          ...condition,
+          conditions: newConditions,
+        },
+      });
+    } else {
+      handleDeleteBranch();
+    }
+  };
+
+  return (
+    <FormCard
+      expand={expanded}
+      motion={false}
+      className="coz-bg-max coz-stroke-plus border border-solid rounded-lg mb-2 !px-2 pb-2"
+      header={
+        <div className="flex items-center">
+          {titleIcon}
+          {prefixName}
+          {priority ? (
+            <Tag className="ml-2" color="primary">
+              {I18n.t('worklfow_condition_priority', {}, 'Priority')} {priority}
+            </Tag>
+          ) : null}
+        </div>
+      }
+      collapsible={false}
+      actionButton={
+        readonly ? (
+          <></>
+        ) : (
+          <>
+            <IconButton
+              data-testid={concatTestId(
+                setterPath,
+                `${branchIndex}`,
+                'branch',
+                'delete',
+              )}
+              color="secondary"
+              size="small"
+              icon={<IconCozMinus className="text-sm" />}
+              disabled={!deletable}
+              onClick={handleDeleteBranch}
+            />
+          </>
+        )
+      }
+      portInfo={undefined}
+    >
+      <div>
+        <div
+          style={
+            readonly
+              ? {
+                  pointerEvents: 'none',
+                }
+              : {}
+          }
+        >
+          <div className="flex">
+            {condition.conditions.length > 1 && (
+              <div className="flex-none w-[50px] mt-4 mb-12">
+                <ConditionItemLogic
+                  logic={condition.logic}
+                  onChange={handleLogicChange}
+                  showStroke={condition?.conditions?.length > 1}
+                />
+              </div>
+            )}
+            <div className="flex-1">
+              {condition.conditions.map((item, index) => (
+                <ConditionParamsItem
+                  key={index}
+                  branchIndex={branchIndex}
+                  index={index}
+                  readonly={readonly}
+                  deletable={!isFirstBranch || index > 0}
+                  data={item}
+                  onDataChange={handleConditionItemChange(index)}
+                  onDelete={handleDeleteConditionItem(index)}
+                  className={styles.item}
+                  conditionValidateResult={branchValidateResult?.[index]}
+                />
+              ))}
+              <IconButton
+                wrapperClass="ml-[48px]"
+                size="small"
+                color="highlight"
+                onClick={handleAdd}
+                icon={<IconCozPlus />}
+                data-testid={concatTestId(
+                  setterPath,
+                  `${branchIndex}`,
+                  'item',
+                  'add',
+                )}
+              >
+                {I18n.t(
+                  'worklfow_condition_add_condition',
+                  {},
+                  'Add condition',
+                )}
+              </IconButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </FormCard>
+  );
+};

package/vendor/coze/source/form-extensions/setters/condition/multi-condition/condition-header.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type FC } from 'react';
+
+import { useNodeTestId } from '@coze-workflow/base';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozPlus } from '@coze-arch/coze-design/icons';
+import { IconButton } from '@coze-arch/coze-design';
+
+import { useConditionContext } from './context';
+
+interface ConditionHeaderProps {
+  onAdd: () => void;
+}
+
+export const ConditionHeader: FC<ConditionHeaderProps> = props => {
+  const { readonly, setterPath } = useConditionContext();
+  const { concatTestId } = useNodeTestId();
+
+  const { onAdd } = props;
+  return (
+    <div className="flex justify-between items-center mb-2 cursor-pointer">
+      <div className="font-semibold">
+        {I18n.t('worklfow_condition_condition_branch', {}, 'Condition branch')}
+      </div>
+      <IconButton
+        size="small"
+        disabled={readonly}
+        onClick={readonly ? () => null : onAdd}
+        color="highlight"
+        icon={<IconCozPlus className="text-sm" />}
+        data-testid={concatTestId(setterPath, 'branch', 'add')}
+      />
+    </div>
+  );
+};

package/vendor/coze/source/form-extensions/setters/condition/multi-condition/condition-item-logic.module.less

@@ -0,0 +1,13 @@
+/* stylelint-disable declaration-no-important */
+.condition-logic-select {
+  border: none !important;
+
+  :global(.semi-select-selection) {
+    font-weight: 400;
+    color: rgba(var(--semi-brand-5), 1)
+  }
+
+  :global(.semi-select-selection-text) {
+    font-size: var(--coze-12) !important;
+  }
+}

package/vendor/coze/source/form-extensions/setters/condition/multi-condition/condition-item-logic.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type FC } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { Select } from '@coze-arch/coze-design';
+
+import { Logic, logicTextMap } from './constants';
+
+import styles from './condition-item-logic.module.less';
+
+export interface ConditionItemLogicProps {
+  /**
+   * And Logic Or
+   */
+  logic: Logic;
+  /**
+   * And Or change the logic
+   */
+  onChange: (logic: Logic) => void;
+  showStroke?: boolean;
+}
+
+export const ConditionItemLogic: FC<ConditionItemLogicProps> = props => {
+  const { logic, onChange, showStroke = false } = props;
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 relative">
+        {showStroke ? (
+          <div className="absolute left-1/2 right-0 top-2.5 bottom-0 rounded-tl-lg border-solid border-0 border-t border-l coz-stroke-plus" />
+        ) : null}
+      </div>
+      <Select
+        className={styles['condition-logic-select']}
+        placeholder={I18n.t('workflow_detail_condition_pleaseselect')}
+        style={{ marginRight: 4 }}
+        value={logic}
+        size="small"
+        optionList={[
+          {
+            label: logicTextMap.get(Logic.AND),
+            value: Logic.AND,
+          },
+          {
+            label: logicTextMap.get(Logic.OR),
+            value: Logic.OR,
+          },
+        ]}
+        onChange={val => onChange(val as Logic)}
+      />
+      <div className="flex-1 relative">
+        {showStroke ? (
+          <div className="absolute left-1/2 right-0 top-0 bottom-2.5 rounded-bl-lg border-solid border-0 border-b border-l coz-stroke-plus" />
+        ) : null}
+      </div>
+    </div>
+  );
+};

package/vendor/coze/source/form-extensions/setters/condition/multi-condition/condition-params-item/delete/index.module.less

@@ -0,0 +1,10 @@
+@import '../../../../../../assets/styles/common.less';
+
+.container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5px;
+}

package/vendor/coze/source/form-extensions/setters/condition/multi-condition/condition-params-item/delete/index.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { IconCozMinus } from '@coze-arch/coze-design/icons';
+import { IconButton } from '@coze-arch/coze-design';
+
+interface DeleteProps {
+  hidden?: boolean;
+  remove?: () => void;
+  testId: string;
+}
+
+export default function Delete({ hidden, remove, testId }: DeleteProps) {
+  return (
+    <div>
+      {hidden ? null : (
+        <IconButton
+          data-testid={testId}
+          color="secondary"
+          size="small"
+          icon={<IconCozMinus className="text-sm" />}
+          onClick={remove}
+        />
+      )}
+    </div>
+  );
+}

package/vendor/coze/source/form-extensions/setters/condition/multi-condition/condition-params-item/index.module.less

@@ -0,0 +1,9 @@
+.multi-mode-input {
+  .semi-input-group {
+    flex-wrap: nowrap;
+  }
+
+  .input {
+    width: 100px;
+  }
+}

package/vendor/coze/source/form-extensions/setters/condition/multi-condition/condition-params-item/index.tsx

@@ -0,0 +1,254 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @coze-arch/no-deep-relative-import */
+import React, { useMemo } from 'react';
+
+import classNames from 'classnames';
+import { useService } from '@flowgram-adapter/free-layout-editor';
+import { useCurrentEntity } from '@flowgram-adapter/free-layout-editor';
+import { useVariableTypeChange } from '@coze-workflow/variable';
+import {
+  WorkflowVariableService,
+  type RefExpression,
+  type ValueExpression,
+  ValueExpressionType,
+} from '@coze-workflow/variable';
+import { useNodeTestId } from '@coze-workflow/base';
+
+import { type ValueExpressionInputProps } from '@/form-extensions/components/value-expression-input';
+
+import { withValidationField } from '../validate/ValidationField';
+import { type ConditionValidateResult } from '../validate/validate';
+import { type ConditionItem, type ElementOfRecord } from '../types';
+import { useConditionContext } from '../context';
+import { VariableSelector } from '../../../../components/tree-variable-selector';
+import { ValueExpressionWithState } from './value-expression-with-state';
+import {
+  calcComparisonDisabled,
+  processConditionData,
+  processLeftSourceTypeChange,
+  processRightDefaultValue,
+  getRightValueInputType,
+} from './utils';
+import Operator from './operator';
+import Delete from './delete';
+const VariableSelectorField =
+  withValidationField<typeof VariableSelector>(VariableSelector);
+const OperatorField = withValidationField<typeof Operator>(Operator);
+const ValueExpressionInputField = withValidationField<
+  typeof ValueExpressionWithState
+>(ValueExpressionWithState);
+
+export interface ConditionParamsItemProps {
+  branchIndex: number;
+  /**
+   * Current condition data index
+   */
+  index: number;
+  /**
+   * Current condition data
+   */
+  data: ConditionItem;
+  /**
+   * read only
+   */
+  readonly?: boolean;
+  /**
+   * Callback after the current condition data has changed
+   */
+  onDataChange: (value: ConditionItem) => void;
+  /**
+   * Remove callback on current condition
+   */
+  onDelete?: () => void;
+  /**
+   * verification result
+   */
+  conditionValidateResult?: ConditionValidateResult;
+  className?: string;
+  style?: React.CSSProperties;
+  deletable?: boolean;
+}
+
+// TODO conversion is received uniformly in one place.
+const valueToRefExpression = (value: string[]): RefExpression => ({
+  type: ValueExpressionType.REF,
+  content: {
+    keyPath: value,
+  },
+});
+
+export default function ConditionParamsItem({
+  index,
+  branchIndex,
+  data,
+  onDataChange,
+  onDelete,
+  className,
+  conditionValidateResult,
+  style,
+  readonly,
+  deletable,
+}: ConditionParamsItemProps) {
+  const { concatTestId } = useNodeTestId();
+  const { setterPath } = useConditionContext();
+  const workflowVariableService = useService<WorkflowVariableService>(
+    WorkflowVariableService,
+  );
+
+  const node = useCurrentEntity();
+
+  const sourceType = workflowVariableService.getWorkflowVariableByKeyPath(
+    data.left?.content?.keyPath,
+    { node },
+  )?.viewType;
+
+  const handleConditionChange =
+    <T extends ElementOfRecord<ConditionItem>>(
+      key: 'left' | 'operator' | 'right',
+    ) =>
+    (value: T): void => {
+      let newData = { ...data, [key]: value };
+
+      newData = processLeftSourceTypeChange(
+        data,
+        newData,
+        workflowVariableService,
+        node,
+      );
+
+      newData = processRightDefaultValue(sourceType, newData);
+
+      newData = processConditionData(
+        data,
+        newData,
+        workflowVariableService,
+        node,
+      );
+
+      onDataChange?.(newData);
+    };
+
+  // Monitor changes in linkage variables to re-trigger the effect
+  useVariableTypeChange({
+    keyPath: data.left?.content?.keyPath,
+    onTypeChange: ({ variableMeta }) => {
+      if (!variableMeta) {
+        // Variables have been deleted
+        onDataChange?.({});
+        return;
+      }
+
+      onDataChange?.({
+        left: data.left,
+      });
+    },
+  });
+  const rightInputTypes = getRightValueInputType({
+    sourceType,
+    operator: data.operator,
+    rightValue: data.right,
+    useCompatibleType: true,
+  });
+  const rightInputTypeProps = useMemo<
+    Pick<ValueExpressionInputProps, 'inputType' | 'inputTypes'>
+  >(() => ({ inputTypes: rightInputTypes }), [rightInputTypes]);
+
+  return (
+    <div
+      className={classNames('flex items-center gap-1 mb-2', className)}
+      style={style}
+    >
+      <div
+        className="overflow-hidden"
+        style={{
+          flex: '0 0 44px',
+        }}
+      >
+        <OperatorField
+          sourceType={sourceType}
+          value={data.operator}
+          onChange={handleConditionChange<ConditionItem['operator']>(
+            'operator',
+          )}
+          validateResult={conditionValidateResult?.operator}
+          testId={concatTestId(
+            setterPath,
+            `${branchIndex}`,
+            `${index}`,
+            'operator',
+          )}
+        />
+      </div>
+      <div className="flex-1">
+        <VariableSelectorField
+          style={{ width: '100%', marginBottom: 4 }}
+          readonly={readonly}
+          value={data.left?.content?.keyPath}
+          onChange={(value: string[]) =>
+            handleConditionChange<RefExpression>('left')(
+              valueToRefExpression(value),
+            )
+          }
+          validateResult={conditionValidateResult?.left}
+          testId={concatTestId(
+            setterPath,
+            `${branchIndex}`,
+            `${index}`,
+            'left',
+          )}
+        />
+        <ValueExpressionInputField
+          readonly={readonly}
+          {...rightInputTypeProps}
+          disabled={calcComparisonDisabled(data.operator)}
+          value={JSON.parse(JSON.stringify(data))?.right}
+          onChange={handleConditionChange<ValueExpression>('right')}
+          validateResult={conditionValidateResult?.right}
+          operator={data.operator}
+          testId={concatTestId(
+            setterPath,
+            `${branchIndex}`,
+            `${index}`,
+            'right',
+          )}
+        />
+      </div>
+      {readonly ? (
+        <></>
+      ) : (
+        <div
+          style={{
+            flex: '0 0 24px',
+          }}
+        >
+          <Delete
+            testId={concatTestId(
+              setterPath,
+              `${branchIndex}`,
+              `${index}`,
+              'item',
+              'remove',
+            )}
+            remove={onDelete}
+            hidden={!deletable}
+          />
+        </div>
+      )}
+    </div>
+  );
+}