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

package/vendor/coze/source/agent-models/model-option-avatar/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 { type ReactNode } from 'react';
+
+import cls from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import {
+  IconCozRoleFill,
+  IconCozLightbulbFill,
+  IconCozChatFill,
+  IconCozCodeFill,
+  IconCozDocumentFill,
+  IconCozImageFill,
+  IconCozLightningFill,
+  IconCozMusic,
+  IconCozStarFill,
+  IconCozVideoFill,
+  IconCozWrenchFill,
+} from '@coze-arch/coze-design/icons';
+import { Avatar, Tooltip } from '@coze-arch/coze-design';
+import { type Model, ModelTagValue } from '@coze-arch/bot-api/developer_api';
+
+export function ModelOptionAvatar({ model }: { model: Model }) {
+  return (
+    <Tooltip
+      trigger={
+        model.model_status_details?.is_upcoming_deprecated ? 'hover' : 'custom'
+      }
+      content={I18n.t('model_list_model_deprecation_date', {
+        date: model.model_status_details?.deprecated_date,
+      })}
+    >
+      <span>
+        <InnerImg
+          model={model}
+          bottomBanner={
+            model.model_status_details?.is_upcoming_deprecated ? (
+              <div
+                className={cls(
+                  'absolute bottom-0 left-0',
+                  'w-full py-[1px] px-[3px] rounded-b-[6px]',
+                  'flex items-center justify-center text-center',
+                  'text-[10px] font-medium leading-[14px] break-all',
+                  'coz-mg-mask coz-fg-hglt-plus',
+                )}
+              >
+                {I18n.t('model_list_willDeprecated')}
+              </div>
+            ) : undefined
+          }
+        />
+      </span>
+    </Tooltip>
+  );
+}
+
+function InnerImg({
+  model: { model_status_details, model_icon },
+  bottomBanner,
+}: {
+  model: Model;
+  bottomBanner?: ReactNode;
+}) {
+  if (
+    model_status_details?.is_new_model ||
+    !model_status_details?.model_feature
+  ) {
+    return (
+      <Avatar
+        className="shrink-0 rounded-[6px] border border-solid coz-stroke-primary"
+        shape="square"
+        // @ts-expect-error -- there is a problem with the semi type definition
+        bottomSlot={
+          bottomBanner
+            ? {
+                render: () => bottomBanner,
+              }
+            : undefined
+        }
+        src={model_icon}
+      />
+    );
+  }
+
+  const featureIcon = FEATURE_ICON_MAP[model_status_details.model_feature];
+
+  return (
+    <div
+      className={cls(
+        'w-[48px] h-[48px] p-[13px] relative',
+        'shrink-0 rounded-[6px] text-[22px]',
+        featureIcon.color,
+        featureIcon.bg,
+      )}
+    >
+      {featureIcon.icon}
+      {bottomBanner}
+    </div>
+  );
+}
+
+const FEATURE_ICON_MAP: Record<
+  ModelTagValue,
+  { color: string; bg: string; icon: ReactNode }
+> = {
+  [ModelTagValue.Flagship]: {
+    icon: <IconCozStarFill />, //flagship
+    color: 'coz-fg-color-brand',
+    bg: 'coz-mg-hglt',
+  },
+  [ModelTagValue.HighSpeed]: {
+    icon: <IconCozLightningFill />, //high speed
+    color: 'coz-fg-color-blue',
+    bg: 'coz-mg-color-blue',
+  },
+  [ModelTagValue.CostPerformance]: {
+    icon: <IconCozChatFill />, //price/performance ratio
+    color: 'coz-fg-color-blue',
+    bg: 'coz-mg-color-blue',
+  },
+  [ModelTagValue.LongText]: {
+    icon: <IconCozDocumentFill />, //long text
+    color: 'coz-fg-color-blue',
+    bg: 'coz-mg-color-blue',
+  },
+  [ModelTagValue.RolePlaying]: {
+    icon: <IconCozRoleFill />, //Role Playing
+    color: 'coz-fg-color-blue',
+    bg: 'coz-mg-color-blue',
+  },
+  [ModelTagValue.ImageUnderstanding]: {
+    icon: <IconCozImageFill />, //image
+    color: 'coz-fg-color-purple',
+    bg: 'coz-mg-color-purple',
+  },
+  [ModelTagValue.VideoUnderstanding]: {
+    icon: <IconCozVideoFill />, //video
+    color: 'coz-fg-color-purple',
+    bg: 'coz-mg-color-purple',
+  },
+  [ModelTagValue.AudioUnderstanding]: {
+    icon: <IconCozMusic />, //Audio
+    color: 'coz-fg-color-purple',
+    bg: 'coz-mg-color-purple',
+  },
+  [ModelTagValue.CodeSpecialization]: {
+    icon: <IconCozCodeFill />, //Code Specialization
+    color: 'coz-fg-color-cyan',
+    bg: 'coz-mg-color-cyan',
+  },
+  [ModelTagValue.ToolInvocation]: {
+    icon: <IconCozWrenchFill />, //tool call
+    color: 'coz-fg-color-cyan',
+    bg: 'coz-mg-color-cyan',
+  },
+  [ModelTagValue.Reasoning]: {
+    icon: <IconCozLightbulbFill />, //inference
+    color: 'coz-fg-color-cyan',
+    bg: 'coz-mg-color-cyan',
+  },
+};

package/vendor/coze/source/agent-models/model-option-group/index.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 PropsWithChildren } from 'react';
+
+import cls from 'classnames';
+import {
+  IconCozStarFill,
+  IconCozQuestionMarkCircle,
+} from '@coze-arch/coze-design/icons';
+import { Avatar, Divider, Tooltip } from '@coze-arch/coze-design';
+
+export type ModelOptionGroupProps =
+  | {
+      /** New Model Zone */
+      type: 'new';
+      name: string;
+      tips?: string;
+    }
+  | {
+      /** Ordinary series model */
+      type?: 'normal';
+      icon: string;
+      name: string;
+      desc: string;
+      tips?: string;
+    };
+
+export function ModelOptionGroup({
+  children,
+  ...props
+}: PropsWithChildren<ModelOptionGroupProps>) {
+  return (
+    <section>
+      <div className="pt-[12px] pl-[16px] pb-[2px]">
+        {props.type === 'new' ? (
+          <div className="flex items-center gap-[4px] coz-fg-hglt">
+            <IconCozStarFill />
+            <span className="text-[12px] leading-[16px]">{props.name}</span>
+            {props.tips ? (
+              <Tooltip content={props.tips}>
+                <IconCozQuestionMarkCircle className="cursor-pointer coz-fg-secondary" />
+              </Tooltip>
+            ) : null}
+          </div>
+        ) : (
+          <div className="flex items-center gap-[6px]">
+            <Avatar
+              shape="square"
+              className="w-[14px] h-[14px] rounded-[3px] !cursor-default border border-solid coz-stroke-primary"
+              src={props.icon}
+            />
+            <div
+              className={cls(
+                'flex items-center gap-[4px]',
+                'text-[12px] leading-[16px]',
+              )}
+            >
+              <span className="coz-fg-secondary">{props.name}</span>
+              {props.tips ? (
+                <Tooltip content={props.tips}>
+                  <IconCozQuestionMarkCircle className="cursor-pointer coz-fg-secondary" />
+                </Tooltip>
+              ) : null}
+              <Divider layout="vertical" />
+              <span className="coz-fg-dim">{props.desc}</span>
+            </div>
+          </div>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}

package/vendor/coze/source/agent-models/model-option-thumb/index.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { I18n } from '@coze-arch/i18n';
+import { Avatar, Tag } from '@coze-arch/coze-design';
+import { type Model } from '@coze-arch/bot-api/developer_api';
+
+/** Minimalist ModelOption for Button Display or Select Selected Bar */
+export function ModelOptionThumb({ model }: { model: Model }) {
+  return (
+    <div className="px-[4px] flex items-center gap-[4px]">
+      <Avatar
+        shape="square"
+        size="extra-extra-small"
+        src={model.model_icon}
+        className="rounded-[4px] border border-solid coz-stroke-primary"
+      />
+      <span className="text-[14px] leading-[20px] coz-fg-primary">
+        {model.name}
+      </span>
+      {model.model_status_details?.is_upcoming_deprecated ? (
+        <Tag size="mini" color="yellow">
+          {I18n.t('model_list_willDeprecated')}
+        </Tag>
+      ) : null}
+    </div>
+  );
+}

package/vendor/coze/source/agent-models/model-select-ui/index.tsx

@@ -0,0 +1,238 @@
+/*
+ * 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 ReactNode, useRef, useState } from 'react';
+
+import { isBoolean } from 'lodash-es';
+import cls from 'classnames';
+import { Popover, type PopoverProps } from '@coze-arch/coze-design';
+import { IconCozArrowDown } from '@coze-arch/bot-icons';
+import { type Model } from '@coze-arch/bot-api/developer_api';
+
+import { PopoverModelListView } from '../popover-model-list-view';
+import {
+  type ModelConfigProps,
+  PopoverModelConfigView,
+} from '../popover-model-config-view';
+import { ModelOptionThumb } from '../model-option-thumb';
+
+export interface ModelSelectUIProps {
+  /**
+   * Whether to ban popovers
+   *
+   * The current internal implementation supports both disabled and directly does not allow popovers (consistent with historical logic).
+   * Also supports allowing popovers and viewing detailed configuration but prohibiting editing
+   * Flexible modification when requirements change
+   */
+  disabled?: boolean;
+  /** The currently selected model */
+  selectedModelId: string;
+  /**
+   * Whether to display the jump to model details page (/space/: space_id/model/: model_id) button
+   * @default false
+   */
+  enableJumpDetail?:
+    | {
+        spaceId: string;
+      }
+    | false;
+  /**
+   * Model-selected change events
+   *
+   * The return value indicates whether the switch was successful, which will affect some subsequent events, such as automatically closing the popover.
+   * No explicit return is considered true
+   */
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type -- there is no other way to implement [either do not return, or must return boolean]
+  onModelChange: (model: Model) => boolean | void;
+  modelList: Model[];
+  /**
+   * Allows business side custom trigger display, named alignment semi selected components
+   *
+   * @Param model - when selectedModelId cannot find the corresponding model, this will pass undefined
+   */
+  triggerRender?: (model?: Model, popoverVisible?: boolean) => ReactNode;
+  /**
+   * Businesses such as workflow that do not allow detailed configuration will have clickToHide demands.
+   * @default false
+   */
+  clickToHide?: boolean;
+  /** @default bottomLeft */
+  popoverPosition?: PopoverProps['position'];
+  /** @default true */
+  popoverAutoAdjustOverflow?: boolean;
+  /** The className of the trigger. If you pass in triggerRender, triggerRender takes over the rendering completely. This parameter no longer has any effect */
+  className?: string;
+  popoverClassName?: string;
+  /**
+   * If the business side inserts a Modal outside the component by itself, clicking Modal will also trigger onClickOutSide and cause the popover to close.
+   * If you don't want the popover to close unexpectedly, you need to pass Modal through modalSlot
+   *
+   * (You don't even need to set getPopupContainer, the mount layer of Modal and the mount layer of ModelSelect's Popover are still different, but mysteriously no longer trigger onClickOutSide, semi awesome)
+   */
+  modalSlot?: ReactNode;
+
+  /** The detailed configuration information of the model will be hidden if the button entrance of the detailed configuration is not passed. */
+  modelConfigProps?: ModelConfigProps;
+
+  /** The pop-up window has a variety of rendering scenarios, providing options to customize the rendering hierarchy to avoid overwriting */
+  zIndex?: number;
+
+  /** Model List Extra Head Slots */
+  modelListExtraHeaderSlot?: ReactNode;
+
+  /** Whether to expand the model list by default */
+  defaultOpen?: boolean;
+}
+
+export function ModelSelectUI({
+  className,
+  disabled,
+  enableJumpDetail,
+  popoverClassName,
+  selectedModelId,
+  modelList,
+  onModelChange,
+  triggerRender,
+  modelListExtraHeaderSlot,
+  clickToHide = false,
+  popoverPosition = 'bottomLeft',
+  popoverAutoAdjustOverflow = true,
+  modalSlot,
+  modelConfigProps,
+  zIndex = 999,
+  defaultOpen = false,
+}: ModelSelectUIProps) {
+  /** In order to achieve the same width as Select for Popover, get the Select width through this ref (if you pass in triggerRender, you no longer need to keep it consistent) */
+  const selectRef = useRef<HTMLDivElement>(null);
+  const [popoverVisible, setPopoverVisible] = useState(defaultOpen);
+  const [detailConfigVisible, setDetailConfigVisible] = useState(false);
+
+  const selectedModel = modelList.find(
+    ({ model_type }) => selectedModelId === String(model_type),
+  );
+
+  // Need to implement group + custom option effect, Select component compatibility is not good, have to implement Popover
+  return (
+    <Popover
+      zIndex={zIndex}
+      stopPropagation
+      autoAdjustOverflow={popoverAutoAdjustOverflow}
+      visible={popoverVisible}
+      trigger="click"
+      position={popoverPosition}
+      onClickOutSide={() => {
+        setPopoverVisible(false);
+        setDetailConfigVisible(false);
+      }}
+      className={cls('!p-0')}
+      content={
+        <div
+          className={cls(
+            'w-[480px] max-h-[50vh] !p-0 overflow-hidden',
+            popoverClassName,
+          )}
+          style={
+            selectRef.current
+              ? { width: selectRef.current.clientWidth }
+              : undefined
+          }
+        >
+          {modelConfigProps ? (
+            <PopoverModelConfigView
+              disabled={disabled}
+              visible={detailConfigVisible}
+              selectedModel={selectedModel}
+              onClose={() => setDetailConfigVisible(false)}
+              modelConfigProps={modelConfigProps}
+            />
+          ) : null}
+
+          <PopoverModelListView
+            // Use hidden instead of direct conditional mount to preserve scrollTop, designer's care
+            hidden={detailConfigVisible}
+            disabled={disabled}
+            selectedModelId={selectedModelId}
+            selectedModel={selectedModel}
+            modelList={modelList}
+            extraHeaderSlot={modelListExtraHeaderSlot}
+            onModelClick={(m: Model) => {
+              const res = onModelChange(m);
+              const success = isBoolean(res) ? res : true;
+              if (success && clickToHide) {
+                setPopoverVisible(false);
+                setDetailConfigVisible(false);
+              }
+              return success;
+            }}
+            enableJumpDetail={!!enableJumpDetail}
+            onDetailClick={modelId => {
+              if (!enableJumpDetail) {
+                return;
+              }
+              window.open(
+                `/space/${enableJumpDetail.spaceId}/model/${modelId}`,
+                '_blank',
+              );
+            }}
+            enableConfig={!!modelConfigProps}
+            onConfigClick={() => {
+              if (!modelConfigProps) {
+                return;
+              }
+              setDetailConfigVisible(true);
+            }}
+          />
+
+          {modalSlot}
+        </div>
+      }
+    >
+      {triggerRender ? (
+        <span
+          className={disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+          onClick={() => {
+            if (!disabled) {
+              setPopoverVisible(true);
+            }
+          }}
+        >
+          {triggerRender(selectedModel, popoverVisible)}
+        </span>
+      ) : (
+        <div
+          ref={selectRef}
+          className={cls(
+            'w-full p-[4px] flex items-center justify-between rounded-[8px]',
+            'overflow-hidden cursor-pointer border border-solid',
+            'hover:coz-mg-secondary-hovered active:coz-mg-secondary-pressed',
+            popoverVisible ? 'coz-stroke-hglt' : 'coz-stroke-primary',
+            className,
+          )}
+          onClick={() => {
+            if (!disabled) {
+              setPopoverVisible(true);
+            }
+          }}
+        >
+          <ModelOptionThumb
+            model={selectedModel || { name: selectedModelId }}
+          />
+          <IconCozArrowDown className="coz-fg-secondary" />
+        </div>
+      )}
+    </Popover>
+  );
+}

package/vendor/coze/source/agent-models/popover-model-list-view/index.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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 ReactNode, useMemo } from 'react';
+
+import { groupBy } from 'lodash-es';
+import cls from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import { type Model } from '@coze-arch/bot-api/developer_api';
+
+import { ModelOptionGroup } from '../model-option-group';
+import { ModelOption } from '../model-option';
+
+/** Popover's model list state corresponds to the detailed configuration state. Splitting purely to avoid oversized components */
+export function PopoverModelListView({
+  hidden,
+  disabled,
+  selectedModelId,
+  selectedModel,
+  modelList,
+  extraHeaderSlot,
+  onModelClick,
+  onDetailClick,
+  onConfigClick,
+  enableConfig,
+  enableJumpDetail,
+}: {
+  /** Whether to set the list to display: none (to preserve scrollTop information) */
+  hidden: boolean;
+  disabled?: boolean;
+  selectedModelId: string;
+  selectedModel: Model | undefined;
+  modelList: Model[];
+  /** Extra head slot */
+  extraHeaderSlot?: ReactNode;
+  /** Return whether the switch was successful */
+  onModelClick: (model: Model) => boolean;
+  onDetailClick: (modelId: string) => void;
+  onConfigClick: (model: Model) => void;
+  enableConfig?: boolean;
+  enableJumpDetail?: boolean;
+}) {
+  const { modelGroups } = useMemo(() => {
+    /** The open-source version is not classified, but tiled */
+    if (IS_OPEN_SOURCE) {
+      return { modelGroups: [modelList] };
+    }
+    const modelSeriesGroups = groupBy(
+      modelList,
+      model => model.model_series?.series_name,
+    );
+    return {
+      modelGroups: Object.values(modelSeriesGroups).filter(
+        (group): group is Model[] => !!group?.length,
+      ),
+    };
+  }, [modelList]);
+
+  const renderModelOption = (model: Model) => (
+    <ModelOption
+      key={model.model_type}
+      model={model}
+      disabled={disabled}
+      selected={String(model.model_type) === selectedModelId}
+      onClick={() => onModelClick(model)}
+      enableJumpDetail={enableJumpDetail}
+      onDetailClick={onDetailClick}
+      enableConfig={
+        enableConfig &&
+        // In the disabled state, you can only view the detailed configuration of the selected model
+        (!disabled || String(model.model_type) === selectedModelId)
+      }
+      onConfigClick={() => {
+        onConfigClick(model);
+      }}
+    />
+  );
+
+  return (
+    <div
+      className={cls(
+        'max-h-[inherit]', // https://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent
+        'p-[8px] flex flex-col gap-[8px] overflow-auto',
+        {
+          hidden,
+        },
+      )}
+    >
+      <div className="flex items-center justify-between pl-4 pr-2 box-content h-[32px] pb-2 pt-1">
+        <div className="text-xxl font-medium coz-fg-plus">
+          {I18n.t('model_selection')}
+        </div>
+        {extraHeaderSlot}
+      </div>
+      {selectedModel?.model_status_details?.is_upcoming_deprecated ? (
+        <section className="p-[12px] pl-[16px] rounded-[8px] coz-mg-hglt-yellow">
+          <div className="text-[14px] leading-[20px] font-medium coz-fg-plus">
+            {I18n.t('model_list_model_deprecation_notice')}
+          </div>
+          <div className="text-[12px] leading-[16px] coz-fg-primary">
+            {I18n.t('model_list_model_switch_announcement', {
+              model_deprecated: selectedModel.name,
+              date: selectedModel.model_status_details.deprecated_date,
+              model_up: selectedModel.model_status_details.replace_model_name,
+            })}
+          </div>
+        </section>
+      ) : null}
+
+      {modelGroups.map((group, idx) => {
+        if (IS_OPEN_SOURCE) {
+          return group.map(renderModelOption);
+        }
+        return (
+          <ModelOptionGroup
+            key={group[0]?.model_series?.series_name ?? idx}
+            type={
+              group[0]?.model_status_details?.is_new_model ? 'new' : 'normal'
+            }
+            icon={group[0]?.model_series?.icon_url || ''}
+            name={group[0]?.model_series?.series_name || ''}
+            desc={I18n.t('model_list_model_company', {
+              company: group[0]?.model_series?.model_vendor || '',
+            })}
+            tips={group[0]?.model_series?.model_tips || ''}
+          >
+            {group.map(renderModelOption)}
+          </ModelOptionGroup>
+        );
+      })}
+    </div>
+  );
+}