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

package/vendor/coze/source/components/node-render/node-render-new/fields/overflow-tag-list.tsx

@@ -0,0 +1,162 @@
+/*
+ * 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,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import classnames from 'classnames';
+import { IconCozMore } from '@coze-arch/coze-design/icons';
+import { Tooltip, IconButton } from '@coze-arch/coze-design';
+import { Dropdown } from '@coze-arch/bot-semi';
+
+import s from './overflow-tag-list.module.less';
+
+export interface TagProps {
+  key?: string;
+  icon?: ReactNode;
+  label?: ReactNode;
+  tooltip?: ReactNode;
+}
+
+export interface OverflowTagListProps<T extends TagProps = TagProps> {
+  /* tag list */
+  value?: T[];
+  enableTooltip?: boolean;
+  tagItemRenderer?: (tagData: T) => ReactNode;
+  dropdownClassName?: string;
+  disableMore?: boolean;
+}
+
+const TAG_ITEM_IDENTIFIER_CLASS = 'tag-item-wrapper';
+
+const defaultTagItemRenderer = (tag: TagProps): ReactNode => {
+  const { icon, label = '' } = tag;
+  return (
+    <div className={classnames(s.tagItem, s.limitWidth, 'gap-[4px]')}>
+      {icon ? (
+        <span className={classnames(s.tagItemIcon, 'text-lg', 'coz-fg-dim')}>
+          {icon}
+        </span>
+      ) : null}
+      <span className={s.tagItemLabel}>{label}</span>
+    </div>
+  );
+};
+
+export function OverflowTagList<T extends TagProps = TagProps>({
+  value = [],
+  enableTooltip,
+  tagItemRenderer,
+  dropdownClassName,
+  disableMore,
+}: OverflowTagListProps<T>) {
+  const renderTags = (tags: T[]) =>
+    tags.map(tag => {
+      const { tooltip, key } = tag;
+      const tagItemContent =
+        tagItemRenderer?.(tag) || defaultTagItemRenderer(tag);
+      const tagItem = (
+        <div
+          key={key}
+          className={classnames(TAG_ITEM_IDENTIFIER_CLASS, 'max-w-full')}
+        >
+          {tagItemContent}
+        </div>
+      );
+      if (!tooltip || !enableTooltip) {
+        return tagItem;
+      }
+      return (
+        <Tooltip
+          key={key ? `tooltip-${key}` : undefined}
+          content={<span className="coz-fg-primary text-lg">{tooltip}</span>}
+          style={{ backgroundColor: 'rgba(var(--coze-bg-3), 1)' }}
+        >
+          {tagItem}
+        </Tooltip>
+      );
+    });
+
+  const tagListRef = useRef<HTMLDivElement | null>(null);
+  const [showOverlay, setShowOverlay] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!tagListRef.current) {
+      return;
+    }
+    const listWidth = tagListRef.current?.clientWidth ?? 0;
+    const tags = Array.from(
+      tagListRef.current.getElementsByClassName(TAG_ITEM_IDENTIFIER_CLASS),
+    ) as HTMLElement[];
+    if (!tags?.length) {
+      setShowOverlay(false);
+    } else {
+      const lastTag = tags[tags.length - 1];
+      const right = lastTag.offsetWidth + lastTag.offsetLeft;
+      setShowOverlay(right > listWidth);
+    }
+  }, [value]);
+
+  return (
+    <div
+      ref={tagListRef}
+      className={classnames(s.overflowTagList, 'flex gap-1.5 items-center')}
+    >
+      {renderTags(value)}
+      {showOverlay ? (
+        <div key="overlay" className={s.overlay}>
+          <div className={s.overlayMask}></div>
+          {!disableMore && (
+            <Dropdown
+              position="bottomRight"
+              render={
+                <div
+                  className={classnames(
+                    'w-[230px] p-1.5 gap-1.5 flex flex-row flex-wrap',
+                    {
+                      [dropdownClassName as string]: dropdownClassName,
+                    },
+                  )}
+                >
+                  {renderTags(value)}
+                </div>
+              }
+            >
+              <IconButton
+                className={classnames('w-full', 'h-full')}
+                wrapperClass={classnames(
+                  'pointer-events-auto',
+                  'text-[0px]',
+                  'coz-bg-plus',
+                  'w-[22px]',
+                  'h-[20px]',
+                )}
+                style={{ height: '100%' }}
+                size="mini"
+                iconSize="small"
+                icon={<IconCozMore />}
+              />
+            </Dropdown>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/vendor/coze/source/components/node-render/node-render-new/fields/variable-tag-list.module.less

@@ -0,0 +1,48 @@
+
+.variable-tag {
+  @apply flex items-center coz-mg-primary rounded-mini cursor-pointer coz-fg-secondary font-medium;
+
+  max-width: 100%;
+
+  .variable-tag-label {
+    @apply leading-4 text-base coz-fg-primary;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .variable-tag-icon {
+    @apply flex grow shrink-0;
+  }
+
+  &.variable-tag_default {
+    &:hover {
+      @apply coz-mg-primary-pressed;
+    }
+  }
+
+  &.variable-tag_warning {
+    @apply coz-fg-hglt-yellow coz-mg-hglt-yellow;
+
+    .variable-tag-label {
+      @apply coz-fg-hglt-yellow;
+    }
+
+    .variable-tag-icon {
+      @apply coz-fg-hglt-yellow-dim;
+    }
+  }
+
+  &.variable-tag_success {
+    @apply coz-fg-hglt-green coz-mg-hglt-green;
+
+    .variable-tag-label {
+      @apply coz-fg-hglt-green;
+    }
+
+    .variable-tag-icon {
+      @apply coz-fg-hglt-green-dim;
+    }
+  }
+}

package/vendor/coze/source/components/node-render/node-render-new/fields/variable-tag-list.tsx

@@ -0,0 +1,126 @@
+/*
+ * 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, useMemo } from 'react';
+
+import classnames from 'classnames';
+import {
+  type ViewVariableType,
+  VARIABLE_TYPE_ALIAS_MAP,
+} from '@coze-workflow/base';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozWarningCircle } from '@coze-arch/coze-design/icons';
+
+import { OverflowTagList, type TagProps } from './overflow-tag-list';
+import { VARIABLE_TYPE_ICON_MAP } from './constants';
+
+import s from './variable-tag-list.module.less';
+
+// state
+export enum VariableTagStatus {
+  Success = 'success',
+  Warning = 'warning',
+  Default = 'default',
+}
+
+export interface VariableTagProps {
+  key?: string;
+  /* Variable type */
+  type?: ViewVariableType;
+  /* Variable name, when empty, is displayed as Undefined/Undefined */
+  label?: ReactNode;
+  invalid?: boolean;
+  status?: VariableTagStatus;
+}
+
+export interface VariableTagListProps {
+  /* tag list */
+  value?: VariableTagProps[];
+  /**
+   * The maximum width of each tag, the default is the width of the parent container
+   */
+  maxTagWidth?: number;
+}
+
+interface VariableTagRenderProps extends TagProps {
+  invalid?: boolean;
+  status?: VariableTagStatus;
+}
+
+export const VariableTagList: React.FC<VariableTagListProps> = ({
+  value = [],
+  maxTagWidth,
+}) => {
+  const renderTag = ({
+    icon,
+    label,
+    invalid,
+    status,
+  }: VariableTagRenderProps) => {
+    if (!status && invalid) {
+      status = VariableTagStatus.Warning;
+    }
+
+    return (
+      <div
+        className={classnames(
+          s.variableTag,
+          'px-1 py-0.5 gap-0.5',
+          s[`variable-tag_${status || 'default'}`],
+        )}
+      >
+        <span
+          className={classnames(s.variableTagIcon, 'text-lg', 'coz-fg-dim')}
+        >
+          {icon}
+        </span>
+        <span className={s.variableTagLabel} style={{ maxWidth: maxTagWidth }}>
+          {label}
+        </span>
+      </div>
+    );
+  };
+
+  const formattedValue = useMemo<VariableTagRenderProps[]>(
+    () =>
+      value.map(v => {
+        const label = v.label || I18n.t('workflow_variable_undefined');
+        const icon = v.type ? (
+          VARIABLE_TYPE_ICON_MAP[v.type] || <IconCozWarningCircle />
+        ) : (
+          <IconCozWarningCircle />
+        );
+        const invalid = v.invalid || !v.label || !v.type;
+
+        return {
+          key: v.key,
+          label,
+          icon,
+          invalid,
+          tooltip: v.type ? VARIABLE_TYPE_ALIAS_MAP[v.type] : undefined,
+          status: v.status,
+        };
+      }),
+    [value],
+  );
+  return (
+    <OverflowTagList<VariableTagRenderProps>
+      value={formattedValue}
+      enableTooltip
+      tagItemRenderer={renderTag}
+    />
+  );
+};

package/vendor/coze/source/components/node-wrapper/execute-result-panel/index.module.less

@@ -0,0 +1,97 @@
+.font-normal {
+  color: var(--light-usage-text-color-text-0, #1D1C23);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 22px;
+  /* 157.143% */
+}
+
+.container {
+  position: absolute;
+  top: -46px;
+  left: calc(100% + 16px);
+  width: 380px;
+  border-radius: 8px;
+  background: var(--light-color-grey-grey-0, #F7F7FA);
+  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.30), 0px 4px 68px 3px rgba(0, 0, 0, 0.14);
+
+  .wrapper {
+    position: relative;
+    width: 100%;
+    padding: 24px;
+
+    .delete-icon {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      padding: 4px;
+
+      .icon {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+
+        &>span {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+
+    .title {
+      display: block;
+      .font-normal();
+      overflow: hidden;
+      color: var(--light-usage-text-color-text-0, #1C1F23);
+      font-size: 18px;
+      line-height: 24px;
+      /* 133.333% */
+    }
+
+    .content {
+      margin-top: 32px;
+
+      .icon-config {
+        cursor: pointer;
+        color: rgba(107, 109, 117, 1);
+      }
+
+      .block-item {
+        margin-top: 12px;
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        .info {
+          display: flex;
+          align-items: center;
+
+          .label {
+            .font-normal();
+          }
+
+          .copy {
+            margin-left: 8px;
+          }
+        }
+
+        .code {
+          max-height: 280px;
+          border-radius: 8px;
+          border: 1px solid var(--light-usage-border-color-border, rgba(29, 28, 35, 0.08));
+          background: var(--light-usage-disabled-color-disabled-fill, rgba(46, 46, 56, 0.04));
+          margin-top: 12px;
+          padding: 6px 16px;
+          overflow-y: auto;
+          user-select: text;
+          cursor: text;
+          white-space: break-spaces;
+        }
+      }
+    }
+  }
+}

package/vendor/coze/source/components/node-wrapper/execute-result-panel/index.tsx

@@ -0,0 +1,171 @@
+/*
+ * 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, { useCallback } from 'react';
+
+import copy from 'copy-to-clipboard';
+import classNames from 'classnames';
+import { FlowNodeFormData } from '@flowgram-adapter/free-layout-editor';
+import { type FlowNodeEntity } from '@flowgram-adapter/free-layout-editor';
+import { DEFAULT_NODE_META_PATH } from '@coze-workflow/nodes';
+import { StandardNodeType } from '@coze-workflow/base';
+import { REPORT_EVENTS } from '@coze-arch/report-events';
+import { I18n } from '@coze-arch/i18n';
+import { safeJSONParse } from '@coze-arch/bot-utils';
+import { UIIconButton } from '@coze-arch/bot-semi';
+import { IconCopy, IconWorkflowRunResultClose } from '@coze-arch/bot-icons';
+import { CustomError } from '@coze-arch/bot-error';
+import { Toast, Tooltip } from '@coze-arch/coze-design';
+
+import { useExecStateEntity } from '../../../hooks';
+
+import styles from './index.module.less';
+
+type ExecuteResultPanelProps = React.PropsWithChildren<{
+  id: string;
+  node: FlowNodeEntity;
+  showResult: boolean;
+  onClose?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: (e: React.MouseEvent) => void;
+}>;
+
+/**
+ * raw_output could be a JSON string or a native string
+ */
+const getSafeOutput = (
+  type?: StandardNodeType,
+  output?: string,
+  rawOutput?: string,
+  errorInfo?: string,
+  // eslint-disable-next-line max-params
+) => {
+  let safeOutput = safeJSONParse(output, output) || {};
+  // The LLM CODE node needs to use the output package separately
+  if (type === StandardNodeType.LLM || type === StandardNodeType.Code) {
+    safeOutput = {
+      output: safeOutput,
+    };
+    if (safeOutput && rawOutput) {
+      safeOutput.raw_output = safeJSONParse(rawOutput, rawOutput);
+    }
+  }
+  if (errorInfo) {
+    safeOutput.errorInfo = errorInfo;
+  }
+  return safeOutput;
+};
+
+const JSON_STRINGIFY_FORMAT_CODE = 2;
+
+export default function ExecuteResultPanel({
+  id,
+  node,
+  showResult,
+  onClose,
+  className,
+  style,
+  onClick,
+}: ExecuteResultPanelProps) {
+  const entity = useExecStateEntity();
+
+  const executeResult = entity.getNodeExecResult(id);
+  const type = node.flowNodeType as StandardNodeType;
+  const formData = node.getData(FlowNodeFormData);
+  const title = formData?.formModel.getFormItemValueByPath(
+    node.getNodeMeta().nodeMetaPath || DEFAULT_NODE_META_PATH,
+  )?.title;
+
+  const safeOutput = getSafeOutput(
+    type,
+    executeResult?.output,
+    executeResult?.raw_output,
+    executeResult?.errorInfo,
+  );
+
+  const onCopy = useCallback((text: string) => {
+    const res = copy(text);
+    if (!res) {
+      throw new CustomError(REPORT_EVENTS.parmasValidation, 'empty copy');
+    }
+    Toast.success({
+      content: I18n.t('copy_success'),
+      showClose: false,
+    });
+  }, []);
+
+  const ShowValueOptions = [
+    {
+      label: I18n.t('workflow_detail_node_input'),
+      code: JSON.stringify(
+        safeJSONParse(executeResult?.input) ?? '{}',
+        undefined,
+        JSON_STRINGIFY_FORMAT_CODE,
+      ),
+      copyTip: I18n.t('workflow_detail_title_testrun_copyinput'),
+    },
+    {
+      label: I18n.t('workflow_detail_node_output'),
+      code: JSON.stringify(safeOutput, undefined, JSON_STRINGIFY_FORMAT_CODE),
+      copyTip: I18n.t('workflow_detail_title_testrun_copyoutput'),
+    },
+  ];
+
+  if (!showResult) {
+    return null;
+  }
+  return (
+    <div
+      className={classNames(styles.container, className, 'flow-move-hot-zone')}
+      style={style}
+      onClick={onClick}
+      data-testid="workflow.detail.node.testrun.result-panel"
+    >
+      <div className={styles.wrapper}>
+        <div className={styles['delete-icon']} onClick={onClose}>
+          <IconWorkflowRunResultClose className={styles.icon} />
+        </div>
+        <span className={styles.title}>
+          {title}&ensp;{I18n.t('workflow_detail_title_testrun_process')}
+        </span>
+        <div className={styles.content}>
+          {ShowValueOptions.map(item => (
+            <div className={styles['block-item']} key={item.label}>
+              <div className={styles.info}>
+                <span className={styles.label}>{item.label}</span>
+                <Tooltip content={item.copyTip}>
+                  <UIIconButton
+                    iconSize="small"
+                    className={styles.copy}
+                    icon={<IconCopy className={styles['icon-config']} />}
+                    onClick={() => onCopy(item.code)}
+                  />
+                </Tooltip>
+              </div>
+              <pre
+                className={classNames(styles.code, 'nowheel')}
+                data-testid="workflow.detail.node.testrun.result-item"
+              >
+                {item.code}
+              </pre>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/vendor/coze/source/components/sub-canvas/components/background/index.module.less

@@ -0,0 +1,4 @@
+.sub-canvas-background {
+  position: absolute;
+  inset: 56px 18px 18px;
+}

package/vendor/coze/source/components/sub-canvas/components/header/index.module.less

@@ -0,0 +1,75 @@
+.sub-canvas-header {
+  cursor: move;
+
+  z-index: 0;
+
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+
+  width: 100%;
+  height: 48px;
+  padding: 16px;
+
+  border-radius: 8px 8px 0 0;
+
+  .sub-canvas-logo {
+    position: relative;
+
+    flex-shrink: 0;
+
+    width: 24px;
+    height: 24px;
+
+    border-radius: 4px;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      display: block;
+
+      width: 100%;
+      height: 100%;
+
+      border-radius: 4px;
+      box-shadow: inset 0 0 0 1px var(--coz-stroke-plus);
+    }
+
+    > img {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+    }
+  }
+
+  .sub-canvas-title {
+    margin: 0;
+    padding: 0;
+
+    font-size: 16px;
+    font-weight: 500;
+    font-style: normal;
+    line-height: 22px;
+    color: var(--coz-fg-primary, rgba(6, 7, 9, 80%));
+    text-overflow: ellipsis;
+  }
+
+  .sub-canvas-tooltip {
+    height: 100%;
+  }
+
+  .sub-canvas-tooltip-icon {
+    display: flex;
+    align-items: center;
+
+    width: 16px;
+    height: 100%;
+
+    color: #A7A9B0;
+  }
+}