@cozeloop/prompt-components 0.0.2 → 0.0.3

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

@@ -0,0 +1,145 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var popover_type_exports = {};
+__export(popover_type_exports, {
+  PopoverModelConfigEdiotr: () => PopoverModelConfigEdiotr
+});
+module.exports = __toCommonJS(popover_type_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_coze_design = require("@coze-arch/coze-design");
+var import_model_config = require("../utils/model-config");
+var import_model_select = require("../model-select");
+var import_model_config_form = require("./model-config-form");
+var import_index = __toESM(require("./index.module"));
+function PopoverModelConfigEdiotr({
+  value,
+  disabled,
+  modelSelectProps,
+  popoverProps,
+  onChange,
+  renderDisplayContent
+}) {
+  const formApi = (0, import_react.useRef)();
+  const _a = popoverProps || {}, { wrapClassName, wrapStyle } = _a, restPopoverProps = __objRest(_a, ["wrapClassName", "wrapStyle"]);
+  const [selectModel, setSelectModel] = (0, import_react.useState)();
+  const [isPopoverVisible, setPopoverVisible] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    var _a2, _b;
+    if ((selectModel == null ? void 0 : selectModel.id) !== (value == null ? void 0 : value.id)) {
+      const modelConfig = (0, import_model_config.convertModelToModelConfig)(selectModel);
+      (_b = (_a2 = formApi.current) == null ? void 0 : _a2.setValues) == null ? void 0 : _b.call(_a2, modelConfig, { isOverride: true });
+    }
+  }, [selectModel, value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_coze_design.Popover,
+    __spreadProps(__spreadValues({
+      content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pt-1 px-4 pb-4", style: { width: 496 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_coze_design.Form,
+        {
+          className: import_index.default["model-config-form"],
+          labelWidth: 120,
+          initValues: value,
+          onValueChange: onChange,
+          getFormApi: (api) => formApi.current = api,
+          disabled,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_coze_design.Space, { className: "py-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Typography.Title, { heading: 6, style: { minWidth: 120 }, children: "模型选择" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_model_select.ModelSelect,
+                __spreadProps(__spreadValues({}, modelSelectProps), {
+                  value: selectModel,
+                  disabled,
+                  onChange: setSelectModel
+                })
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_coze_design.Typography.Title,
+              {
+                heading: 6,
+                style: { marginTop: 12, marginBottom: 12 },
+                children: "参数配置"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_model_config_form.ModelConfigForm, { model: selectModel })
+          ]
+        }
+      ) }),
+      keepDOM: true,
+      trigger: "custom",
+      visible: isPopoverVisible,
+      onClickOutSide: () => setPopoverVisible(false)
+    }, restPopoverProps), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: wrapClassName,
+          style: wrapStyle,
+          onClick: () => setPopoverVisible(true),
+          children: renderDisplayContent == null ? void 0 : renderDisplayContent(selectModel, isPopoverVisible)
+        }
+      )
+    })
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PopoverModelConfigEdiotr
+});

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

@@ -0,0 +1,170 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var model_select_exports = {};
+__export(model_select_exports, {
+  ModelSelect: () => ModelSelect
+});
+module.exports = __toCommonJS(model_select_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lodash_es = require("lodash-es");
+var import_classnames = __toESM(require("classnames"));
+var import_icons = require("@coze-arch/coze-design/icons");
+var import_coze_design = require("@coze-arch/coze-design");
+var import_model_config = require("../utils/model-config");
+var import_model_option = require("./model-option");
+var import_index = __toESM(require("./index.module"));
+function ModelSelectItem({ item }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center w-full gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden flex-shrink-0 mr-[8px]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Avatar, { src: item == null ? void 0 : item.modelIcon, shape: "square", size: "extra-extra-small" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_coze_design.Typography.Text,
+      {
+        style: {
+          maxWidth: "400px",
+          fontSize: "13px"
+        },
+        ellipsis: { showTooltip: { opts: { theme: "dark" } } },
+        children: item == null ? void 0 : item.displayName
+      }
+    ),
+    (0, import_model_config.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 = (0, import_react.useRef)();
+  const { modelGroups } = (0, import_react.useMemo)(() => {
+    const modelSeriesGroups = (0, import_lodash_es.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]);
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    import_coze_design.Select,
+    {
+      ref,
+      className: (0, import_classnames.default)("w-full", import_index.default["model-select"], className),
+      style,
+      showArrow: false,
+      suffix: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 flex-shrink-0 text-[13px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.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__ */ (0, import_jsx_runtime.jsx)(ModelSelectItem, { item: item["data-item"] || value }),
+      dropdownClassName: import_index.default["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__ */ (0, import_jsx_runtime.jsx)(
+          import_coze_design.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__ */ (0, import_jsx_runtime.jsx)(
+                import_coze_design.Select.Option,
+                {
+                  value: item == null ? void 0 : item[valueKey],
+                  "data-item": item,
+                  disabled: item.disabled,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_model_option.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]
+              )
+            )
+          }
+        );
+      })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModelSelect
+});

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

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_module_exports = {};
+__export(index_module_exports, {
+  default: () => index_module_default
+});
+module.exports = __toCommonJS(index_module_exports);
+var import_index_module = require("./index_module.css");
+var index_module_default = { "model-select-dropdown": "model-select-dropdown_98ab9", "model-select": "model-select_98ab9" };

package/dist/lib/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/lib/model-select/model-option/index.js

@@ -0,0 +1,188 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var model_option_exports = {};
+__export(model_option_exports, {
+  ModelOption: () => ModelOption
+});
+module.exports = __toCommonJS(model_option_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_classnames = __toESM(require("classnames"));
+var import_ahooks = require("ahooks");
+var import_icons = require("@coze-arch/coze-design/icons");
+var import_coze_design = require("@coze-arch/coze-design");
+var import_model_config = require("../../utils/model-config");
+var import_index = __toESM(require("./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 = (0, import_react.useRef)(null);
+  const isHovering = (0, import_ahooks.useHover)(ref);
+  const modelTags = model.modelTags || [];
+  const renderOverflow = (items) => (items == null ? void 0 : items.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_coze_design.Tooltip,
+    {
+      content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Space, { wrap: true, spacing: 3, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Tag, { children: item })) }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_coze_design.Tag,
+        {
+          style: { flex: "0 0 auto" },
+          size: "mini",
+          color: "primary",
+          className: "!bg-transparent !border border-solid",
+          children: [
+            "+",
+            items.length
+          ]
+        }
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "article",
+    {
+      ref,
+      className: (0, import_classnames.default)(
+        "pl-[16px] pr-[12px] w-full relative",
+        "flex gap-[16px] items-center rounded-[12px]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        import_index.default["model-option"],
+        { [import_index.default["model-option_selected"]]: selected }
+      ),
+      style: { minWidth: 480, maxWidth: 570 },
+      onClick: () => {
+        onClick == null ? void 0 : onClick();
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_coze_design.Avatar,
+          {
+            className: "shrink-0 rounded-[6px] border border-solid coz-stroke-primary",
+            shape: "square",
+            src: model.modelIcon,
+            size: "default"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              "h-[70px] py-[14px] w-full",
+              "flex flex-col overflow-hidden",
+              "border-0 border-b border-solid coz-stroke-primary",
+              import_index.default["model-info-border"]
+            ),
+            style: isHovering ? {
+              mask: calcMaskStyle([
+                props.enableConfig,
+                props.enableJumpDetail
+              ])
+            } : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full flex items-center gap-[6px] overflow-hidden", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Typography.Title, { fontSize: "14px", ellipsis: { showTooltip: true }, children: model.displayName }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "shrink-0 flex gap-[6px]", children: [
+                  disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-[16px] leading-[16px]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.IconCozDiamondFill, { className: "coz-fg-hglt text-[12px]" }) }) : null,
+                  ((_a2 = model.commercialModelStatusDetail) == null ? void 0 : _a2.isNewModel) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Tooltip, { content: "Pro 版用户专享", theme: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Tag, { size: "mini", color: "brand", children: "新模型" }) }) : null,
+                  ((_b2 = model.commercialModelStatusDetail) == null ? void 0 : _b2.isAdvancedModel) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Tooltip, { content: "专业版用户专享", theme: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Tag, { size: "mini", color: "blue", children: "高级" }) }) : null,
+                  (0, import_model_config.renderModelOfflineTag)(model),
+                  (modelTags == null ? void 0 : modelTags.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_coze_design.Space, { spacing: 4, children: [
+                    modelTags.slice(0, 3).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_coze_design.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__ */ (0, import_jsx_runtime.jsx)(
+                import_coze_design.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)`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModelOption
+});

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

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_module_exports = {};
+__export(index_module_exports, {
+  default: () => index_module_default
+});
+module.exports = __toCommonJS(index_module_exports);
+var import_index_module = require("./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" };

package/dist/lib/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;
+}

package/dist/lib/model-select/model-option-group/index.js

@@ -0,0 +1,75 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var model_option_group_exports = {};
+__export(model_option_group_exports, {
+  ModelOptionGroup: () => ModelOptionGroup
+});
+module.exports = __toCommonJS(model_option_group_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_classnames = __toESM(require("classnames"));
+var import_icons = require("@coze-arch/coze-design/icons");
+var import_coze_design = require("@coze-arch/coze-design");
+function ModelOptionGroup(props) {
+  const questionMark = (props == null ? void 0 : props.tooltip) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Tooltip, { content: props == null ? void 0 : props.tooltip, theme: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.IconCozQuestionMarkCircle, { className: "cursor-pointer coz-fg-secondary" }) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pb-[2px]", children: props.type === "new" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-[4px] coz-fg-hglt", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.IconCozStarFill, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[12px] leading-[16px]", children: props.seriesName }),
+    questionMark
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-[6px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_coze_design.Avatar,
+      {
+        shape: "square",
+        className: "w-[14px] h-[14px] rounded-[3px] !cursor-default border border-solid coz-stroke-primary",
+        src: props.icon
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          "flex items-center gap-[4px]",
+          "text-[12px] leading-[16px]"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "coz-fg-secondary", children: props.seriesName }),
+          questionMark,
+          props.desc ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_coze_design.Divider, { layout: "vertical" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "coz-fg-dim", children: props.desc })
+          ] }) : null
+        ]
+      }
+    )
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModelOptionGroup
+});