feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/agent-ide/workflow/src/components/index.module.less

@@ -0,0 +1,135 @@
+/* stylelint-disable declaration-no-important */
+@import '@coze-common/assets/style/common.less';
+@import '@coze-common/assets/style/mixins.less';
+
+.api-table {
+  /* 133.333% */
+  table-layout: fixed;
+  border-collapse: collapse;
+
+  width: 100%;
+
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--light-usage-text-color-text-2, rgb(28 31 35 / 60%));
+  word-wrap: break-word;
+
+  thead {
+    margin-bottom: 4px;
+
+    th {
+      height: 26px;
+      padding: 0;
+
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px; // 133.333%
+      color: var(--light-usage-text-color-text-2, rgb(28 31 35 / 60%));
+      text-align: left;
+    }
+  }
+
+  .api-row {
+    td {
+      overflow: hidden;
+      margin-bottom: 4px;
+      // vertical-align: text-top;
+    }
+
+    &.border-top {
+      cursor: pointer;
+      position: relative;
+
+      td {
+        margin-top: 8px;
+      }
+    }
+
+    :global {
+      .semi-tag-grey-light {
+        background: var(--light-color-white-white, #fff);
+        border-radius: 6px;
+      }
+
+      .semi-tag-content {
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  .api-method {
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    span {
+      color: var(--light-color-grey-grey-5, rgb(107 107 117 / 100%));
+
+    }
+
+    .icon-copy {
+      cursor: pointer;
+      .common-svg-icon(16px, rgba(107, 109, 117, 1));
+    }
+  }
+
+  .api-method-read {
+    justify-content: flex-end;
+  }
+
+  .api-name,
+  .api-desc {
+    width: 126px;
+    padding-right: 4px;
+
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 16px; // 133.333%
+    color: rgb(29 28 35 / 80%);
+  }
+
+  .icon-tips {
+    cursor: pointer;
+    .common-svg-icon(14px, rgba(107, 109, 117, 1));
+  }
+}
+
+// 能力模块默认说明文案样式
+.tip-text {
+  font-size: 14px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 22px;
+  color: var(--light-usage-text-color-text-2, rgb(28 29 35 / 60%));
+}
+
+.icon-button-16 {
+  cursor: pointer;
+
+  &:hover {
+    border-radius: 4px;
+  }
+
+  :global {
+    .semi-button {
+      &.semi-button-size-small {
+        height: 16px;
+        padding: 1px !important;
+
+        svg {
+           @apply text-foreground-2;
+        }
+      }
+    }
+  }
+}
+
+.default-text {
+  .tip-text;
+}
+
+// .workflow-modal {}

frontend/packages/agent-ide/workflow/src/components/workflow-as-agent/workflow-config-area/index.tsx

@@ -0,0 +1,175 @@
+/*
+ * 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 { useEffect, type FC } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import classNames from 'classnames';
+import { useSafeState } from 'ahooks';
+import { useWorkflowPublishedModel } from '@coze-agent-ide/space-bot/hook';
+import { useBotSkillStore } from '@coze-studio/bot-detail-store/bot-skill';
+import { useBotInfoStore } from '@coze-studio/bot-detail-store/bot-info';
+import {
+  type WorkFlowItemType,
+  useBotDetailIsReadonly,
+} from '@coze-studio/bot-detail-store';
+import { useReportTti } from '@coze-arch/report-tti';
+import { PluginType, WorkflowMode } from '@coze-arch/idl/developer_api';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozPlus } from '@coze-arch/coze-design/icons';
+import { CustomError } from '@coze-arch/bot-error';
+import { PluginDevelopApi } from '@coze-arch/bot-api';
+import { WorkflowCard } from '@coze-agent-ide/workflow-as-agent-adapter';
+
+import { useBotWorkFlowListModal } from './use-agent-workflow-modal';
+const addCardStyle = classNames(
+  'w-full h-[120px]',
+  'flex items-center justify-center gap-[8px]',
+  'border border-solid coz-stroke-primary rounded-[10px]',
+  'coz-mg-hglt hover:coz-mg-hglt-hovered active:coz-mg-hglt-pressed',
+);
+
+export const WorkflowConfigArea: FC = () => {
+  const isReadonly = useBotDetailIsReadonly();
+  const { botId } = useBotInfoStore(
+    useShallow(state => ({
+      botId: state.botId,
+    })),
+  );
+  const { workflowId, pluginId } = useBotSkillStore(
+    useShallow(state => ({
+      workflowId: state.layoutInfo.workflow_id,
+      pluginId: state.layoutInfo.plugin_id,
+    })),
+  );
+  const [workflow, setWorkflow] = useSafeState<WorkFlowItemType | undefined>();
+
+  const onChange = (value: WorkFlowItemType | undefined) => {
+    setWorkflow(value);
+    useBotSkillStore.getState().updateSkillLayoutInfo({
+      workflow_id: value?.workflow_id,
+      plugin_id: value?.plugin_id,
+    });
+  };
+
+  const flowMode = WorkflowMode.ChatFlow;
+  const { node, open } = useBotWorkFlowListModal({
+    flowMode,
+    workflow,
+    setWorkflow: onChange,
+  });
+
+  useWorkflowPublishedModel({
+    flowMode,
+    addedWorkflows: workflow ? [workflow] : [],
+    onOk: val => {
+      onChange(val);
+    },
+  });
+
+  useEffect(() => {
+    if (
+      workflow?.workflow_id !== workflowId ||
+      workflow?.plugin_id !== pluginId
+    ) {
+      if (workflowId && pluginId) {
+        PluginDevelopApi.GetPlaygroundPluginList({
+          space_id: useBotInfoStore.getState().space_id ?? '',
+          page: 1,
+          size: 1,
+          plugin_ids: [pluginId],
+          plugin_types: [PluginType.WORKFLOW],
+        }).then(resp => {
+          const pluginInfos = resp.data?.plugin_list ?? [];
+          const target = pluginInfos?.at(0);
+          if (target) {
+            setWorkflow({
+              workflow_id: workflowId || '',
+              plugin_id: pluginId || '',
+              name: target?.name || '',
+              desc: target?.desc_for_human || '',
+              parameters: target?.plugin_apis?.at(0)?.parameters ?? [],
+              plugin_icon: target?.plugin_icon || '',
+              flow_mode:
+                target?.plugin_type === PluginType.IMAGEFLOW
+                  ? WorkflowMode.Imageflow
+                  : flowMode,
+            });
+          } else {
+            throw new CustomError(
+              'normal_error',
+              'workflow_as_agent_workflow_not_found',
+            );
+          }
+        });
+      } else {
+        setWorkflow(undefined);
+      }
+    }
+  }, [workflowId, pluginId]);
+
+  useReportTti({
+    isLive: true,
+    extra: {
+      mode: 'single-agent-workflow',
+    },
+  });
+
+  return (
+    <>
+      {node}
+      <div>
+        <div className="text-[14px] font-[500] leading-[20px] coz-fg-plus">
+          {I18n.t('workflow_agent_configure')}
+        </div>
+        <div className="mt-[16px]">
+          {workflow ? (
+            <WorkflowCard
+              botId={botId ?? ''}
+              workflow={workflow}
+              onRemove={() => {
+                onChange(undefined);
+              }}
+              isReadonly={isReadonly}
+            />
+          ) : (
+            <div
+              className={classNames(
+                addCardStyle,
+                isReadonly
+                  ? 'coz-fg-hglt-dim cursor-not-allowed'
+                  : 'coz-fg-hglt cursor-pointer',
+              )}
+              onClick={() => {
+                if (!isReadonly) {
+                  open();
+                }
+              }}
+            >
+              <IconCozPlus className="text-[18px]" />
+              <div className="text-[16px] leading-[22px] font-[500]">
+                {I18n.t('workflow_agent_add')}
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="mt-[16px] text-[12px] leading-[16px] coz-fg-secondary">
+          {I18n.t('wf_chatflow_132')}
+        </div>
+      </div>
+    </>
+  );
+};

frontend/packages/agent-ide/workflow/src/components/workflow-as-agent/workflow-config-area/use-agent-workflow-modal.tsx

@@ -0,0 +1,221 @@
+/*
+ * 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 @typescript-eslint/no-explicit-any */
+import { type ReactNode, useState, useMemo, useEffect } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import {
+  DataSourceType,
+  WorkflowModalFrom,
+  type WorkflowModalProps,
+  type WorkflowModalState,
+  default as WorkflowModalBase,
+} from '@coze-workflow/components/workflow-modal';
+import { WorkflowMode } from '@coze-workflow/base/api';
+import { useBotPageStore } from '@coze-agent-ide/space-bot/store';
+import { I18n } from '@coze-arch/i18n';
+import { useSpaceStore } from '@coze-arch/bot-studio-store';
+import { useBotInfoStore } from '@coze-studio/bot-detail-store/bot-info';
+import { type WorkFlowItemType } from '@coze-studio/bot-detail-store';
+import { usePageJumpResponse, PageType, SceneType } from '@coze-arch/bot-hooks';
+import { useNavigateWorkflowEditPage } from '@coze-agent-ide/navigate';
+import { Toast, Space, Typography, Button } from '@coze-arch/coze-design';
+const { Text } = Typography;
+
+export interface UseWorkFlowListReturnValue {
+  node: ReactNode;
+  open: () => void;
+  close: () => void;
+}
+
+const getInitialVisible = ({
+  jumpResponse,
+  botID,
+  prevBotID,
+  defaultVisible,
+  flowMode,
+}: Record<string, any>) => {
+  if (botID !== prevBotID) {
+    return false;
+  }
+  if (jumpResponse?.scene === SceneType.WORKFLOW_PUBLISHED__BACK__BOT) {
+    return false;
+  }
+  if (
+    jumpResponse?.scene === SceneType.WORKFLOW__BACK__BOT &&
+    (jumpResponse?.flowMode || WorkflowMode.Workflow) !==
+      (flowMode || WorkflowMode.Workflow)
+  ) {
+    return false;
+  }
+
+  return defaultVisible;
+};
+
+export const useBotWorkFlowListModal = ({
+  flowMode = WorkflowMode.Workflow,
+  workflow,
+  setWorkflow,
+}: {
+  flowMode: WorkflowMode;
+  workflow?: WorkFlowItemType;
+  setWorkflow: (value: WorkFlowItemType) => void;
+}): UseWorkFlowListReturnValue => {
+  const { botID } = useBotInfoStore(
+    useShallow(state => ({
+      botID: state.botId,
+    })),
+  );
+
+  const { id: spaceId } = useSpaceStore(state => state.space);
+
+  const workflows = workflow ? [workflow] : [];
+
+  const onNavigate2Edit = useNavigateWorkflowEditPage({
+    flowMode,
+  });
+
+  const { defaultVisible, prevBotID, setWorkflowState } = useBotPageStore(
+    useShallow(state => ({
+      defaultVisible: state.tools.workflow.showModalDefault,
+      prevBotID: state.bot.previousBotID,
+      setWorkflowState: state.setWorkflowState,
+    })),
+  );
+  const jumpResponse = usePageJumpResponse(PageType.BOT);
+
+  const [visible, setVisible] = useState(
+    getInitialVisible({
+      jumpResponse,
+      botID,
+      prevBotID,
+      defaultVisible,
+      flowMode,
+    }),
+  );
+
+  const modalState = useMemo(() => {
+    // 在默认打开的状态下获取初始值
+    if (!jumpResponse || !defaultVisible) {
+      return;
+    }
+    return safeParse<WorkflowModalState>(
+      (jumpResponse as any).workflowModalState?.statusStr || '',
+    );
+  }, [jumpResponse, defaultVisible]);
+
+  useEffect(() => {
+    if (visible) {
+      setWorkflowState({ showModalDefault: false });
+    }
+  }, [visible]);
+
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  const handleOpen = () => {
+    setVisible(true);
+  };
+
+  const onItemClick: WorkflowModalProps['onItemClick'] = (val, modalStatus) => {
+    if (val.type === DataSourceType.Workflow) {
+      onNavigate2Edit(val.item.workflow_id || '', {
+        statusStr: JSON.stringify(modalStatus),
+      });
+    } else {
+      window.open(
+        `/store/workflow/${val.item.meta_info.entity_id}?workflow_id=true`,
+        '_blank',
+      );
+    }
+  };
+
+  const onCreateSuccess: WorkflowModalProps['onCreateSuccess'] = val => {
+    onNavigate2Edit(val.workflowId);
+  };
+
+  const onAdd: WorkflowModalProps['onAdd'] = (val, config) => {
+    handleClose();
+
+    Toast.success({
+      content: (
+        <Space spacing={6}>
+          <Text>{I18n.t('workflow_add_list_added_success')}</Text>
+          {config.isDup ? (
+            <Button
+              color="primary"
+              onClick={() => {
+                window.open(
+                  `/work_flow?space_id=${spaceId}&workflow_id=${val.workflow_id}`,
+                );
+              }}
+            >
+              {I18n.t('workflowstore_continue_editing')}
+            </Button>
+          ) : null}
+        </Space>
+      ),
+    });
+  };
+
+  const onRemove: WorkflowModalProps['onRemove'] = () => {
+    Toast.success({
+      content: I18n.t('workflow_add_list_removed_success'),
+      showClose: false,
+    });
+  };
+
+  const onClose = () => {
+    setVisible(false);
+  };
+
+  return {
+    node: visible ? (
+      <WorkflowModalBase
+        from={WorkflowModalFrom.WorkflowAgent}
+        flowMode={flowMode}
+        visible={visible}
+        onClose={onClose}
+        initState={{ ...modalState, listFlowMode: flowMode }}
+        hiddenListFlowModeFilter={true}
+        workFlowList={workflows}
+        onWorkFlowListChange={$newList => {
+          setWorkflow($newList[0]);
+        }}
+        onItemClick={onItemClick}
+        onCreateSuccess={onCreateSuccess}
+        onAdd={onAdd}
+        onRemove={onRemove}
+        onDupSuccess={() => null}
+      />
+    ) : null,
+    close: handleClose,
+    open: handleOpen,
+  };
+};
+
+function safeParse<T>(jsonString: string): T | undefined {
+  try {
+    // 尝试解析 JSON 字符串
+    return JSON.parse(jsonString);
+    // eslint-disable-next-line @coze-arch/use-error-in-catch
+  } catch (error) {
+    // 如果解析时出现错误，返回 null
+    return undefined;
+  }
+}

frontend/packages/agent-ide/workflow/src/index.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+ 
+export { WorkflowConfigArea } from './components/workflow-as-agent/workflow-config-area';

frontend/packages/agent-ide/workflow/src/typings.d.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />