@cozeloop/prompt-components 0.0.1

package/dist/es/model-config-editor/basic-type.js

@@ -0,0 +1,73 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { Form } from "@coze-arch/coze-design";
+import { convertModelToModelConfig } from "../utils/model-config";
+import { ModelSelect } from "../model-select";
+import { ModelConfigForm } from "./model-config-form";
+import styles from "./index.module";
+function BasicModelConfigEditor({
+  className,
+  style,
+  value,
+  onChange,
+  disabled,
+  modelSelectProps
+}) {
+  const formApi = useRef();
+  const [selectModel, setSelectModel] = useState(
+    modelSelectProps == null ? void 0 : modelSelectProps.value
+  );
+  useEffect(() => {
+    var _a, _b;
+    if ((selectModel == null ? void 0 : selectModel.id) !== (value == null ? void 0 : value.id)) {
+      const modelConfig = convertModelToModelConfig(selectModel);
+      (_b = (_a = formApi.current) == null ? void 0 : _a.setValues) == null ? void 0 : _b.call(_a, modelConfig, { isOverride: true });
+    }
+  }, [selectModel, value]);
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      className: classNames(styles["model-config-form"], className),
+      style,
+      labelWidth: 120,
+      initValues: value,
+      onValueChange: onChange,
+      getFormApi: (api) => formApi.current = api,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(
+          ModelSelect,
+          __spreadProps(__spreadValues({}, modelSelectProps), {
+            value: selectModel,
+            disabled,
+            onChange: setSelectModel
+          })
+        ),
+        /* @__PURE__ */ jsx(ModelConfigForm, { model: selectModel })
+      ]
+    }
+  );
+}
+export {
+  BasicModelConfigEditor
+};

package/dist/es/model-config-editor/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "model-config-form": "model-config-form_d28fd" };
+export {
+  index_module_default as default
+};

package/dist/es/model-config-editor/index_module.css

@@ -0,0 +1,8 @@
+/* stylelint-disable declaration-no-important */
+.model-config-form_d28fd {
+  display: flex;
+  flex-direction: column;
+}
+.model-config-form_d28fd .semi-form-field {
+  padding: 4px 0 !important;
+}

package/dist/es/model-config-editor/model-config-form.js

@@ -0,0 +1,130 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isUndefined } from "lodash-es";
+import { MdBoxLazy } from "@flow-web/md-box/lazy";
+import { InputSlider } from "@cozeloop/components";
+import { IconCozQuestionMarkCircle } from "@coze-arch/coze-design/icons";
+import {
+  Form,
+  Tooltip,
+  Typography,
+  withField
+} from "@coze-arch/coze-design";
+import { DEFAULT_MAX_TOKENS, modelConfigLabelMap } from "../consts";
+const convertInt64ToNumber = (v) => {
+  if (v !== void 0) {
+    return Number(v);
+  } else {
+    return void 0;
+  }
+};
+const getInputSliderConfig = (key, modelParams) => {
+  const param = modelParams.find((item) => item.name === key);
+  const max = key === "max_tokens" ? DEFAULT_MAX_TOKENS : 0;
+  return {
+    min: Number((param == null ? void 0 : param.min) || 0),
+    max: Math.max(Number((param == null ? void 0 : param.max) || 1), max),
+    defaultValue: Number((param == null ? void 0 : param.defaultVal) || max),
+    label: {
+      text: /* @__PURE__ */ jsx(Typography.Text, { children: (param == null ? void 0 : param.name) ? modelConfigLabelMap[param.name] || "" : "" }),
+      extra: /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: /* @__PURE__ */ jsx(MdBoxLazy, { className: "!text-white", markDown: (param == null ? void 0 : param.desc) || "" }),
+          theme: "dark",
+          children: /* @__PURE__ */ jsx(IconCozQuestionMarkCircle, {})
+        }
+      )
+    }
+  };
+};
+const FormInputSlider = withField(InputSlider);
+function ModelConfigForm({ model }) {
+  if (!model) {
+    return null;
+  }
+  const modelAbility = model == null ? void 0 : model.ability;
+  const modelParams = (modelAbility == null ? void 0 : modelAbility.modelParams) || [];
+  const defaultRuntimeParam = model == null ? void 0 : model.defaultRuntimeParam;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FormInputSlider,
+      __spreadProps(__spreadValues({
+        field: "max_tokens",
+        labelPosition: "left"
+      }, getInputSliderConfig("max_tokens", modelParams)), {
+        label: {
+          text: /* @__PURE__ */ jsx(Typography.Text, { children: "最大回复长度" }),
+          extra: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: /* @__PURE__ */ jsx(
+                MdBoxLazy,
+                {
+                  className: "!text-white",
+                  markDown: "- **max_tokens**: 控制模型输出的 Tokens 长度上限。通常 100 Tokens 约等于 150 个中文汉字。"
+                }
+              ),
+              theme: "dark",
+              children: /* @__PURE__ */ jsx(IconCozQuestionMarkCircle, {})
+            }
+          )
+        }
+      })
+    ),
+    isUndefined(defaultRuntimeParam == null ? void 0 : defaultRuntimeParam.temperature) ? null : /* @__PURE__ */ jsx(
+      FormInputSlider,
+      __spreadProps(__spreadValues({
+        field: "temperature",
+        labelPosition: "left"
+      }, getInputSliderConfig("temperature", modelParams)), {
+        step: 0.01
+      })
+    ),
+    isUndefined(defaultRuntimeParam == null ? void 0 : defaultRuntimeParam.topP) ? null : /* @__PURE__ */ jsx(
+      FormInputSlider,
+      __spreadProps(__spreadValues({
+        field: "top_p",
+        labelPosition: "left",
+        label: {
+          text: /* @__PURE__ */ jsx(Typography.Text, { children: "Top P" })
+        }
+      }, getInputSliderConfig("top_p", modelParams)), {
+        step: 0.01
+      })
+    ),
+    (modelAbility == null ? void 0 : modelAbility.jsonModeEnabled) ? /* @__PURE__ */ jsx(
+      Form.Switch,
+      {
+        labelPosition: "left",
+        label: {
+          text: /* @__PURE__ */ jsx(Typography.Text, { children: "JSON Mode" })
+        },
+        field: "json_mode"
+      }
+    ) : null
+  ] });
+}
+export {
+  ModelConfigForm,
+  convertInt64ToNumber,
+  getInputSliderConfig
+};

package/dist/es/model-config-editor/popover-type.js

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import {
+  Form,
+  Popover,
+  Space,
+  Typography
+} from "@coze-arch/coze-design";
+import { convertModelToModelConfig } from "../utils/model-config";
+import { ModelSelect } from "../model-select";
+import { ModelConfigForm } from "./model-config-form";
+import styles from "./index.module";
+function PopoverModelConfigEdiotr({
+  value,
+  disabled,
+  modelSelectProps,
+  popoverProps,
+  onChange,
+  renderDisplayContent
+}) {
+  const formApi = useRef();
+  const _a = popoverProps || {}, { wrapClassName, wrapStyle } = _a, restPopoverProps = __objRest(_a, ["wrapClassName", "wrapStyle"]);
+  const [selectModel, setSelectModel] = useState();
+  const [isPopoverVisible, setPopoverVisible] = useState(false);
+  useEffect(() => {
+    var _a2, _b;
+    if ((selectModel == null ? void 0 : selectModel.id) !== (value == null ? void 0 : value.id)) {
+      const modelConfig = convertModelToModelConfig(selectModel);
+      (_b = (_a2 = formApi.current) == null ? void 0 : _a2.setValues) == null ? void 0 : _b.call(_a2, modelConfig, { isOverride: true });
+    }
+  }, [selectModel, value]);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    __spreadProps(__spreadValues({
+      content: /* @__PURE__ */ jsx("div", { className: "pt-1 px-4 pb-4", style: { width: 496 }, children: /* @__PURE__ */ jsxs(
+        Form,
+        {
+          className: styles["model-config-form"],
+          labelWidth: 120,
+          initValues: value,
+          onValueChange: onChange,
+          getFormApi: (api) => formApi.current = api,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsxs(Space, { className: "py-0", children: [
+              /* @__PURE__ */ jsx(Typography.Title, { heading: 6, style: { minWidth: 120 }, children: "模型选择" }),
+              /* @__PURE__ */ jsx(
+                ModelSelect,
+                __spreadProps(__spreadValues({}, modelSelectProps), {
+                  value: selectModel,
+                  disabled,
+                  onChange: setSelectModel
+                })
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Typography.Title,
+              {
+                heading: 6,
+                style: { marginTop: 12, marginBottom: 12 },
+                children: "参数配置"
+              }
+            ),
+            /* @__PURE__ */ jsx(ModelConfigForm, { model: selectModel })
+          ]
+        }
+      ) }),
+      keepDOM: true,
+      trigger: "custom",
+      visible: isPopoverVisible,
+      onClickOutSide: () => setPopoverVisible(false)
+    }, restPopoverProps), {
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: wrapClassName,
+          style: wrapStyle,
+          onClick: () => setPopoverVisible(true),
+          children: renderDisplayContent == null ? void 0 : renderDisplayContent(selectModel, isPopoverVisible)
+        }
+      )
+    })
+  );
+}
+export {
+  PopoverModelConfigEdiotr
+};

package/dist/es/model-select/index.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { groupBy } from "lodash-es";
+import classNames from "classnames";
+import { IconCozUpdate } from "@coze-arch/coze-design/icons";
+import { Avatar, Select, Typography } from "@coze-arch/coze-design";
+import { renderModelOfflineTag } from "../utils/model-config";
+import { ModelOption } from "./model-option";
+import styles from "./index.module";
+function ModelSelectItem({ item }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full gap-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden flex-shrink-0 mr-[8px]", children: /* @__PURE__ */ jsx(Avatar, { src: item == null ? void 0 : item.modelIcon, shape: "square", size: "extra-extra-small" }) }),
+    /* @__PURE__ */ jsx(
+      Typography.Text,
+      {
+        style: {
+          maxWidth: "400px",
+          fontSize: "13px"
+        },
+        ellipsis: { showTooltip: { opts: { theme: "dark" } } },
+        children: item == null ? void 0 : item.displayName
+      }
+    ),
+    renderModelOfflineTag(item)
+  ] });
+}
+function ModelSelect({
+  className,
+  style,
+  value,
+  disabled,
+  defaultSelectFirstModel,
+  loading,
+  modelListData,
+  onChange,
+  loadMore,
+  optionCustomRender,
+  valueKey = "identification"
+}) {
+  const handleModelChange = (v) => {
+    var _a;
+    const model = (_a = modelListData == null ? void 0 : modelListData.list) == null ? void 0 : _a.find((item) => (item == null ? void 0 : item[valueKey]) === v);
+    onChange == null ? void 0 : onChange(model);
+  };
+  const ref = useRef();
+  const { modelGroups } = useMemo(() => {
+    const modelSeriesGroups = groupBy(
+      modelListData == null ? void 0 : modelListData.list,
+      (model) => {
+        var _a;
+        return (_a = model.commercialModelSeries) == null ? void 0 : _a.seriesName;
+      }
+    );
+    const groupedModels = Object.values(modelSeriesGroups).filter(
+      (group) => !!(group == null ? void 0 : group.length)
+    );
+    return {
+      modelGroups: groupedModels
+    };
+  }, [modelListData == null ? void 0 : modelListData.list]);
+  useEffect(() => {
+    var _a, _b;
+    if (!value && defaultSelectFirstModel && ((_a = modelListData == null ? void 0 : modelListData.list) == null ? void 0 : _a.length)) {
+      onChange == null ? void 0 : onChange((_b = modelListData == null ? void 0 : modelListData.list) == null ? void 0 : _b[0]);
+    }
+  }, [modelListData == null ? void 0 : modelListData.list, defaultSelectFirstModel, value]);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ref,
+      className: classNames("w-full", styles["model-select"], className),
+      style,
+      showArrow: false,
+      suffix: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0 text-[13px]", children: [
+        /* @__PURE__ */ jsx(IconCozUpdate, {}),
+        "选择模型"
+      ] }),
+      loading,
+      disabled,
+      value: value == null ? void 0 : value[valueKey],
+      onChange: (v) => handleModelChange == null ? void 0 : handleModelChange(v),
+      onListScroll: (e) => {
+        const target = e.currentTarget;
+        const isAtBottom = target.scrollHeight - target.scrollTop === target.clientHeight;
+        if (!(modelListData == null ? void 0 : modelListData.hasMore) || !isAtBottom) {
+          return;
+        }
+        loadMore == null ? void 0 : loadMore();
+      },
+      placeholder: "请选择模型",
+      renderSelectedItem: (item) => /* @__PURE__ */ jsx(ModelSelectItem, { item: item["data-item"] || value }),
+      dropdownClassName: styles["model-select-dropdown"],
+      showTick: false,
+      filter: (input, option) => {
+        var _a;
+        if (input && (option == null ? void 0 : option["data-item"])) {
+          const item = option["data-item"];
+          return (_a = item == null ? void 0 : item.displayName) == null ? void 0 : _a.includes(input);
+        }
+        return true;
+      },
+      children: modelGroups.map((group) => {
+        var _a, _b, _c, _d, _e, _f;
+        return /* @__PURE__ */ jsx(
+          Select.OptGroup,
+          {
+            label: `${(_b = (_a = group[0]) == null ? void 0 : _a.commercialModelSeries) == null ? void 0 : _b.seriesName} | ${((_d = (_c = group[0]) == null ? void 0 : _c.commercialModelSeries) == null ? void 0 : _d.modelVendor) ? `由${(_f = (_e = group[0]) == null ? void 0 : _e.commercialModelSeries) == null ? void 0 : _f.modelVendor}提供` : ""}`,
+            children: group.map(
+              (item) => optionCustomRender ? optionCustomRender(item) : /* @__PURE__ */ jsx(
+                Select.Option,
+                {
+                  value: item == null ? void 0 : item[valueKey],
+                  "data-item": item,
+                  disabled: item.disabled,
+                  children: /* @__PURE__ */ jsx(
+                    ModelOption,
+                    {
+                      model: item,
+                      selected: (value == null ? void 0 : value[valueKey]) === (item == null ? void 0 : item[valueKey]),
+                      disabled: item.disabled
+                    },
+                    item == null ? void 0 : item[valueKey]
+                  )
+                },
+                item == null ? void 0 : item[valueKey]
+              )
+            )
+          }
+        );
+      })
+    }
+  );
+}
+export {
+  ModelSelect
+};

package/dist/es/model-select/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "model-select-dropdown": "model-select-dropdown_98ab9", "model-select": "model-select_98ab9" };
+export {
+  index_module_default as default
+};

package/dist/es/model-select/index_module.css

@@ -0,0 +1,14 @@
+/* stylelint-disable declaration-no-important */
+.model-select-dropdown_98ab9 .semi-select-option-list {
+  max-height: 390px !important;
+}
+.model-select-dropdown_98ab9 .semi-select-group {
+  padding-left: 16px !important;
+}
+.model-select-dropdown_98ab9 .coz-select-option-item {
+  background: transparent !important;
+}
+.model-select_98ab9 .semi-select-suffix {
+  flex-shrink: 0;
+  padding-left: 4px;
+}

package/dist/es/model-select/model-option/index.js

@@ -0,0 +1,161 @@
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import cls from "classnames";
+import { useHover } from "ahooks";
+import { IconCozDiamondFill } from "@coze-arch/coze-design/icons";
+import {
+  Avatar,
+  Space,
+  Tag,
+  Tooltip,
+  Typography
+} from "@coze-arch/coze-design";
+import { renderModelOfflineTag } from "../../utils/model-config";
+import styles from "./index.module";
+function ModelOption(_a) {
+  var _b = _a, {
+    model,
+    selected,
+    disabled,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "model",
+    "selected",
+    "disabled",
+    "onClick"
+  ]);
+  var _a2, _b2;
+  const ref = useRef(null);
+  const isHovering = useHover(ref);
+  const modelTags = model.modelTags || [];
+  const renderOverflow = (items) => (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      content: /* @__PURE__ */ jsx(Space, { wrap: true, spacing: 3, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx(Tag, { children: item })) }),
+      children: /* @__PURE__ */ jsxs(
+        Tag,
+        {
+          style: { flex: "0 0 auto" },
+          size: "mini",
+          color: "primary",
+          className: "!bg-transparent !border border-solid",
+          children: [
+            "+",
+            items.length
+          ]
+        }
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      ref,
+      className: cls(
+        "pl-[16px] pr-[12px] w-full relative",
+        "flex gap-[16px] items-center rounded-[12px]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        styles["model-option"],
+        { [styles["model-option_selected"]]: selected }
+      ),
+      style: { minWidth: 480, maxWidth: 570 },
+      onClick: () => {
+        onClick == null ? void 0 : onClick();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            className: "shrink-0 rounded-[6px] border border-solid coz-stroke-primary",
+            shape: "square",
+            src: model.modelIcon,
+            size: "default"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cls(
+              "h-[70px] py-[14px] w-full",
+              "flex flex-col overflow-hidden",
+              "border-0 border-b border-solid coz-stroke-primary",
+              styles["model-info-border"]
+            ),
+            style: isHovering ? {
+              mask: calcMaskStyle([
+                props.enableConfig,
+                props.enableJumpDetail
+              ])
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center gap-[6px] overflow-hidden", children: [
+                /* @__PURE__ */ jsx(Typography.Title, { fontSize: "14px", ellipsis: { showTooltip: true }, children: model.displayName }),
+                /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex gap-[6px]", children: [
+                  disabled ? /* @__PURE__ */ jsx("div", { className: "h-[16px] leading-[16px]", children: /* @__PURE__ */ jsx(IconCozDiamondFill, { className: "coz-fg-hglt text-[12px]" }) }) : null,
+                  ((_a2 = model.commercialModelStatusDetail) == null ? void 0 : _a2.isNewModel) ? /* @__PURE__ */ jsx(Tooltip, { content: "Pro 版用户专享", theme: "dark", children: /* @__PURE__ */ jsx(Tag, { size: "mini", color: "brand", children: "新模型" }) }) : null,
+                  ((_b2 = model.commercialModelStatusDetail) == null ? void 0 : _b2.isAdvancedModel) ? /* @__PURE__ */ jsx(Tooltip, { content: "专业版用户专享", theme: "dark", children: /* @__PURE__ */ jsx(Tag, { size: "mini", color: "blue", children: "高级" }) }) : null,
+                  renderModelOfflineTag(model),
+                  (modelTags == null ? void 0 : modelTags.length) ? /* @__PURE__ */ jsxs(Space, { spacing: 4, children: [
+                    modelTags.slice(0, 3).map((item) => /* @__PURE__ */ jsx(
+                      Tag,
+                      {
+                        size: "mini",
+                        color: "primary",
+                        className: "!bg-transparent !border border-solid coz-stroke-plus !rounded-[4px]",
+                        children: item
+                      },
+                      item
+                    )),
+                    renderOverflow(modelTags.slice(3))
+                  ] }) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Typography.Text,
+                {
+                  className: "mt-[4px] text-[12px] leading-[16px] coz-fg-secondary",
+                  ellipsis: { showTooltip: { opts: { theme: "dark" } } },
+                  children: model.description
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function calcMaskStyle(buttonVisible) {
+  const btnNum = buttonVisible.reduce(
+    (prevNum, showBtn) => prevNum + (showBtn ? 1 : 0),
+    0
+  );
+  if (btnNum === 0) {
+    return "none";
+  }
+  const BTN_WIDTH = 32;
+  const BTN_GAP = 3;
+  const PRESET_PADDING = 16;
+  const MASK_WIDTH = 24;
+  const gradientStart = btnNum * BTN_WIDTH + (btnNum - 1) * BTN_GAP + PRESET_PADDING;
+  const gradientEnd = gradientStart + MASK_WIDTH;
+  return `linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0) ${gradientStart}px, #fff ${gradientEnd}px)`;
+}
+export {
+  ModelOption
+};

package/dist/es/model-select/model-option/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "model-option": "model-option_88e78", "model-info-border": "model-info-border_88e78", "model-option_selected": "model-option_selected_88e78" };
+export {
+  index_module_default as default
+};

package/dist/es/model-select/model-option/index_module.css

@@ -0,0 +1,23 @@
+/* stylelint-disable declaration-no-important */
+.model-option_88e78:hover {
+  background-color: rgba(var(--coze-bg-5), var(--coze-bg-5-alpha));
+}
+.model-option_88e78:last-of-type .model-info-border_88e78,
+.model-option_88e78.model-option_selected_88e78 .model-info-border_88e78,
+.model-option_88e78:hover .model-info-border_88e78,
+.model-option_88e78:has( + .model-option_88e78.model-option_selected_88e78) .model-info-border_88e78,
+.model-option_88e78:has( + .model-option_88e78:hover) .model-info-border_88e78 {
+  border-color: transparent;
+}
+.model-option_88e78 .coz-tag.coz-tag-mini {
+  padding-right: 3px;
+  padding-left: 3px;
+  font-weight: 500;
+}
+.model-option_selected_88e78 {
+  background-color: rgba(var(--coze-brand-1), var(--coze-brand-1-alpha));
+  border: 0;
+}
+.model-option_selected_88e78:hover {
+  background-color: rgba(var(--coze-brand-2), var(--coze-brand-2-alpha)) !important;
+}