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

package/vendor/coze/source/form-extensions/components/output-tree/components/custom-tree-node/components/expand-content/default-value-input.tsx

@@ -0,0 +1,276 @@
+/*
+ * 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 FC, useMemo, useRef } from 'react';
+
+import { ViewVariableType, CONVERSATION_NAME } from '@coze-workflow/base';
+import { I18n } from '@coze-arch/i18n';
+import {
+  Input as InputCore,
+  CozInputNumber,
+  Select,
+} from '@coze-arch/coze-design';
+
+import { getAccept } from '@/hooks/use-upload';
+import { useGlobalState } from '@/hooks/use-global-state';
+import { genFileTypeByViewVarType } from '@/components/test-run/utils/common';
+import { JsonEditorAdapter } from '@/components/test-run/test-form-materials/json-editor';
+import { FileAdapter } from '@/components/test-run/test-form-materials/file';
+
+import { ConversationSelect as ConversationSelectCore } from '../conversation-select';
+import { type TreeNodeCustomData, type DefaultValueType } from '../../type';
+import {
+  type DefaultValueInputComponent,
+  type DefaultValueInputProps,
+} from './types';
+import { InputTime } from './input-time';
+
+import styles from './index.module.less';
+
+const Input: DefaultValueInputComponent = ({
+  data,
+  onChange,
+  defaultValue,
+  onBlur,
+  ...props
+}) => (
+  <InputCore
+    defaultValue={defaultValue as string}
+    onChange={onChange}
+    size="small"
+    placeholder={I18n.t('wf_chatflow_99')}
+    onBlur={e => {
+      onBlur?.(e.target.value);
+    }}
+    {...props}
+  />
+);
+
+const InputNumber: DefaultValueInputComponent = ({
+  data,
+  onChange,
+  onBlur,
+  defaultValue,
+  ...props
+}) => (
+  <CozInputNumber
+    defaultValue={defaultValue as number}
+    onChange={onChange}
+    size="small"
+    placeholder={I18n.t('wf_chatflow_99')}
+    onBlur={e => {
+      onBlur?.(e.target.value);
+    }}
+    {...props}
+  />
+);
+
+const InputInteger: DefaultValueInputComponent = ({
+  data,
+  onChange,
+  onBlur,
+  defaultValue,
+  ...props
+}) => (
+  <CozInputNumber
+    defaultValue={defaultValue as number}
+    onChange={onChange}
+    precision={0.1}
+    size="small"
+    placeholder={I18n.t('wf_chatflow_99')}
+    onBlur={e => {
+      // Get the rounded value
+      setTimeout(() => {
+        onBlur?.(e.target.value);
+      }, 15);
+    }}
+    {...props}
+  />
+);
+
+const BooleanSelect: DefaultValueInputComponent = ({
+  data,
+  onChange,
+  defaultValue,
+  onBlur,
+  ...props
+}) => {
+  const valueRef = useRef(defaultValue as boolean | undefined | null);
+  const handleChange = val => {
+    if (val) {
+      const parsed = JSON.parse(val || 'false') as boolean;
+      onChange(parsed);
+      valueRef.current = parsed;
+    } else {
+      onChange(null);
+      valueRef.current = null;
+    }
+  };
+  return (
+    <Select
+      placeholder={I18n.t('wf_chatflow_99')}
+      size="small"
+      optionList={[
+        {
+          label: 'true',
+          value: 'true',
+        },
+        {
+          label: 'false',
+          value: 'false',
+        },
+      ]}
+      showClear
+      defaultValue={
+        defaultValue !== undefined
+          ? JSON.stringify(Boolean(defaultValue))
+          : undefined
+      }
+      onChange={handleChange}
+      onBlur={() => onBlur?.(valueRef.current)}
+      {...props}
+    />
+  );
+};
+
+const JSONEditor: DefaultValueInputComponent = ({
+  data,
+  onChange,
+  onBlur,
+  defaultValue,
+  ...props
+}) => {
+  const valueRef = useRef(defaultValue as string | undefined);
+  return (
+    <JsonEditorAdapter
+      value={defaultValue as string}
+      onChange={v => {
+        valueRef.current = v;
+        onChange(v || null);
+      }}
+      onBlur={() => {
+        onBlur?.(valueRef.current);
+      }}
+      {...props}
+    />
+  );
+};
+const File: DefaultValueInputComponent = ({
+  defaultValue,
+  data: { type },
+  onChange,
+  onBlur,
+  inputType,
+  onInputTypeChange,
+  ...props
+}) => {
+  const valueRef = useRef(defaultValue as DefaultValueType | null);
+  const handleChange = (val?: string) => {
+    onChange(val || null);
+    valueRef.current = val || null;
+    onBlur?.(valueRef.current);
+  };
+  const accept = getAccept(type);
+  const multiple = ViewVariableType.isArrayType(type);
+  return (
+    <FileAdapter
+      value={defaultValue as string}
+      onChange={handleChange}
+      accept={accept}
+      multiple={multiple}
+      fileType={genFileTypeByViewVarType(type)}
+      containerClassName={styles['expand-content-file-adapter']}
+      onBlur={() => {
+        onBlur?.(valueRef.current);
+      }}
+      fileInputType={inputType}
+      onInputTypeChange={onInputTypeChange}
+      inputTypeSelectClassName={styles['file-type-select']}
+      inputURLClassName={styles['url-input']}
+      enableInputURL={true}
+      {...props}
+    />
+  );
+};
+
+const ConversationSelect: DefaultValueInputComponent = ({
+  defaultValue,
+  onChange,
+  disabled,
+  className,
+  onBlur,
+}) => {
+  const valueRef = useRef(defaultValue as string | undefined | null);
+  const handleChange = val => {
+    onChange(val || null);
+    valueRef.current = val || null;
+  };
+  const { projectId } = useGlobalState();
+  return (
+    <ConversationSelectCore
+      className={className}
+      size="small"
+      disabled={disabled || !projectId}
+      defaultValue={defaultValue as string}
+      enableTypes={['static']}
+      onChange={handleChange}
+      onBlur={() => {
+        onBlur?.(valueRef.current);
+      }}
+    />
+  );
+};
+
+const getInputComponent = (
+  data: TreeNodeCustomData,
+): DefaultValueInputComponent => {
+  if (
+    data.name === CONVERSATION_NAME &&
+    data.type === ViewVariableType.String &&
+    data.isPreset
+  ) {
+    return ConversationSelect;
+  }
+  switch (data.type) {
+    case ViewVariableType.String:
+      return Input;
+    case ViewVariableType.Number:
+      return InputNumber;
+    case ViewVariableType.Integer:
+      return InputInteger;
+    case ViewVariableType.Boolean:
+      return BooleanSelect;
+    case ViewVariableType.Time:
+      return InputTime;
+    default:
+      break;
+  }
+  if (ViewVariableType.isFileType(data.type)) {
+    return File;
+  } else {
+    // Object/Array < String > Array < Object > and other types
+    return JSONEditor;
+  }
+};
+export const DefaultValueInput: FC<DefaultValueInputProps> = ({
+  data,
+  ...props
+}) => {
+  const InputComponent = useMemo(() => getInputComponent(data), [data.type]);
+  return (
+    <InputComponent defaultValue={data.defaultValue} data={data} {...props} />
+  );
+};

package/vendor/coze/source/form-extensions/components/output-tree/components/custom-tree-node/components/expand-content/index.module.less

@@ -0,0 +1,124 @@
+
+.field-content {
+  :global {
+    .field-input {
+      width: 100%;
+
+      &.coz-input {
+        background: #fff;
+
+
+        -webkit-text-fill-color: unset;
+
+        &:not(.semi-input-wrapper-focus, .semi-input-wrapper-disabled) {
+          &:hover {
+            background-color: rgba(var(--coze-bg-5),var(--coze-bg-5-alpha));
+          }
+
+          &:active {
+            background-color: rgba(var(--coze-bg-6), var(--coze-bg-6-alpha));
+          }
+        }
+
+        &.semi-input-wrapper-disabled {
+          background-color: var(--coz-mg-primary);
+        }
+
+        .semi-input-disabled {
+          color: var(--semi-color-text-0);
+        }
+      }
+
+      &.coz-select:not(.semi-select-disabled) {
+        background-color: white;
+
+      }
+
+      &.coz-select.semi-select-disabled {
+        opacity: 1;
+        background-color: var(--coz-mg-primary);
+      }
+
+      &.coz-input-number {
+        .semi-input-wrapper {
+          -webkit-text-fill-color: unset;
+
+          &:not(.semi-input-wrapper-disabled) {
+            background-color: white;
+          }
+        }
+      }
+
+      &:not(.coz-input-number, .semi-input-wrapper-disabled, .coz-select) {
+        background-color: white;
+      }
+
+      &.coz-textarea {
+        line-height: 16px;
+        background: #FFF;
+        border-radius: 6px;
+
+        &:not(.semi-input-textarea-wrapper-focus, .semi-input-textarea-wrapper-disabled) {
+          &:hover {
+            background-color: rgba(var(--coze-bg-5),var(--coze-bg-5-alpha));
+          }
+
+          &:active {
+            background-color: rgba(var(--coze-bg-6), var(--coze-bg-6-alpha));
+          }
+        }
+
+        .semi-input-textarea {
+          max-height: 72px;
+          font-size: 12px;
+          line-height: 16px;
+        }
+      }
+    }
+  }
+}
+
+.expand-content-file-adapter {
+  :global {
+    .semi-upload-drag-area-sub-text {
+      display: none;
+    }
+  }
+}
+
+
+.file-type-select {
+  top: -28px;
+
+  :global {
+    .coz-select.semi-select {
+      background-color: #FFF;
+
+      &:not(.semi-input-wrapper-focus, .semi-input-wrapper-disabled) {
+        &:hover {
+          background-color: rgba(var(--coze-bg-5),var(--coze-bg-5-alpha));
+        }
+
+        &:active {
+          background-color: rgba(var(--coze-bg-6), var(--coze-bg-6-alpha));
+        }
+      }
+    }
+  }
+}
+
+.url-input {
+  background: #fff;
+
+  &:not(.semi-input-wrapper-focus, .semi-input-wrapper-disabled) {
+    &:hover {
+      background-color: rgba(var(--coze-bg-5),var(--coze-bg-5-alpha));
+    }
+
+    &:active {
+      background-color: rgba(var(--coze-bg-6), var(--coze-bg-6-alpha));
+    }
+  }
+}
+
+

package/vendor/coze/source/form-extensions/components/output-tree/components/custom-tree-node/components/expand-content/index.tsx

@@ -0,0 +1,131 @@
+/*
+ * 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 classNames from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import { Typography, Tooltip, TextArea } from '@coze-arch/coze-design';
+
+import { ValidationErrorWrapper } from '@/form-extensions/components/validation/validation-error-wrapper';
+
+import { type TreeNodeCustomData, type DefaultValueType } from '../../type';
+import { DefaultValueInput } from './default-value-input';
+
+import styles from './index.module.less';
+interface ExpandContentProps {
+  data: TreeNodeCustomData;
+  disabled?: boolean;
+  hasObjectLike?: boolean;
+  withDefaultValue?: boolean;
+  withDescription?: boolean;
+  onDescChange: (desc: string) => void;
+  onDefaultValueChange: (defaultValue: DefaultValueType | null) => void;
+  defaultValueInputType?: string;
+  onDefaultValueInputTypeChange?: (v: string) => void;
+  className?: string;
+}
+export const ExpandContent: FC<ExpandContentProps> = props => {
+  const {
+    data,
+    disabled,
+    onDescChange,
+    onDefaultValueChange,
+    defaultValueInputType,
+    onDefaultValueInputTypeChange,
+    withDescription = false,
+    withDefaultValue = false,
+    className,
+  } = props;
+
+  const disabledDesc = disabled || data.isPreset;
+  const descInput = (
+    <TextArea
+      className="field-input"
+      autosize={{ minRows: 1, maxRows: 5 }}
+      disabled={disabledDesc}
+      defaultValue={data.description}
+      maxLength={disabledDesc ? undefined : 1000}
+      onBlur={e => {
+        onDescChange(e.target.value);
+      }}
+      placeholder={I18n.t('wf_chatflow_98')}
+    />
+  );
+  return (
+    <div className={classNames('w-full', className)}>
+      {withDefaultValue ? (
+        <div className="field">
+          <div className="mt-2 mb-1">
+            <Typography.Text className="coz-fg-secondary text-xs leading-4 font-medium">
+              {I18n.t('wf_chatflow_96')}
+            </Typography.Text>
+          </div>
+          <div className={styles['field-content']}>
+            <ValidationErrorWrapper
+              path={`${data.field?.slice(
+                data.field.indexOf('['),
+              )}.defaultValue`}
+              className={styles.container}
+              errorCompClassName={'output-default-value-error-text'}
+            >
+              {options => (
+                <DefaultValueInput
+                  className={'field-input'}
+                  data={data}
+                  disabled={disabled}
+                  onBlur={val => {
+                    options.onBlur();
+                    if (val !== undefined) {
+                      onDefaultValueChange?.(val);
+                    }
+                  }}
+                  onChange={val => {
+                    options.onChange();
+                  }}
+                  inputType={defaultValueInputType}
+                  onInputTypeChange={onDefaultValueInputTypeChange}
+                />
+              )}
+            </ValidationErrorWrapper>
+          </div>
+        </div>
+      ) : null}
+      {withDescription ? (
+        <div className="field">
+          <div className="mt-2 mb-1">
+            <Typography.Text className="coz-fg-secondary text-xs leading-4 font-medium">
+              {I18n.t('wf_chatflow_97')}
+            </Typography.Text>
+          </div>
+          <div className={styles['field-content']}>
+            {disabledDesc && data.description ? (
+              <Tooltip
+                wrapperClassName="w-full"
+                content={data.description}
+                position="top"
+              >
+                {descInput}
+              </Tooltip>
+            ) : (
+              descInput
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/vendor/coze/source/form-extensions/components/output-tree/components/custom-tree-node/components/expand-content/types.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { type TreeNodeCustomData, type DefaultValueType } from '../../type';
+
+export interface DefaultValueInputProps {
+  className?: string;
+  data: TreeNodeCustomData;
+  disabled?: boolean;
+  onChange: (value: DefaultValueType | null) => void;
+  onBlur?: (value?: DefaultValueType | null) => void;
+  defaultValue?: DefaultValueType;
+  inputType?: string;
+  onInputTypeChange?: (type: string) => void;
+}
+
+export type DefaultValueInputComponent = FC<DefaultValueInputProps>;

package/vendor/coze/source/form-extensions/components/output-tree/components/custom-tree-node/components/param-name/index.module.less

@@ -0,0 +1,38 @@
+.container {
+  position: relative;
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-self: stretch;
+
+  min-width: 0;
+
+  :global {
+    .coz-input.semi-input-wrapper {
+      background-color: #FFF;
+
+      &:not(.semi-input-wrapper-focus, .semi-input-wrapper-disabled) {
+        &:hover {
+          background-color: rgba(var(--coze-bg-5),var(--coze-bg-5-alpha));
+        }
+
+        &:active {
+          background-color: rgba(var(--coze-bg-6), var(--coze-bg-6-alpha));
+        }
+      }
+    }
+  }
+
+  .name {
+    display: flex;
+    align-items: flex-start;
+    align-self: stretch;
+    width: 100%;
+    // flex: 1;
+
+    &>div:first-child {
+      flex: 1;
+    }
+  }
+}

package/vendor/coze/source/form-extensions/components/output-tree/components/custom-tree-node/components/param-name/index.tsx

@@ -0,0 +1,101 @@
+/*
+ * 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, { useState } from 'react';
+
+import { useNodeTestId } from '@coze-workflow/base';
+import { I18n } from '@coze-arch/i18n';
+import { type InputProps } from '@coze-arch/bot-semi/Input';
+
+import { type TreeNodeCustomData } from '../../type';
+import { MAX_NAME_LENGTH } from '../../constants';
+import { useOutputTreeContext } from '../../../../context';
+import { ValidationErrorWrapper } from '../../../../../validation/validation-error-wrapper';
+import WorkflowSLInput from '../../../../../../../ui-components/workflow-sl-input';
+
+import styles from './index.module.less';
+
+interface ParamNameProps {
+  data: TreeNodeCustomData;
+  disabled?: boolean;
+  onChange: (name: string) => void;
+  style?: React.CSSProperties;
+}
+
+export default function ParamName({
+  data,
+  disabled,
+  onChange,
+  style,
+}: ParamNameProps) {
+  const { testId } = useOutputTreeContext();
+  const { concatTestId } = useNodeTestId();
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <ValidationErrorWrapper
+      path={`${data.field?.slice(data.field.indexOf('['))}.name`}
+      className={styles.container}
+      style={style}
+      errorCompClassName={'output-param-name-error-text'}
+    >
+      {options =>
+        disabled ? (
+          <div className="w-full flex items-center h-6">
+            <div className="coz-fg-primary font-medium text-xs truncate ">
+              {data.name}
+            </div>
+          </div>
+        ) : (
+          <WorkflowSLInput
+            className={styles.name}
+            value={data.name}
+            disabled={disabled}
+            handleBlur={name => {
+              onChange(name);
+              // There is a problem with the timing of the validator, add setTimeout to avoid the error message flashing.
+              setTimeout(() => {
+                options.onBlur();
+              }, 33);
+              setFocused(false);
+            }}
+            handleFocus={() => {
+              setFocused(true);
+            }}
+            handleChange={(name: string) => {
+              options.onChange();
+            }}
+            inputProps={
+              {
+                placeholder: I18n.t('workflow_detail_end_output_entername'),
+                disabled,
+                maxLength: !disabled && focused ? MAX_NAME_LENGTH : undefined,
+                'data-testid': concatTestId(
+                  testId ?? '',
+                  data.field,
+                  'param-name',
+                ),
+                size: 'small',
+              } as unknown as InputProps
+            }
+            validateStatus={options.showError ? 'error' : 'default'}
+          />
+        )
+      }
+    </ValidationErrorWrapper>
+  );
+}