@cozeloop/prompt-components 0.0.2 → 0.0.3

package/dist/es/mermaid-diagram/utils.js

@@ -0,0 +1,74 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { toBase64 } from "js-base64";
+const getFileName = (extension) => `mermaid-diagram-${(/* @__PURE__ */ new Date()).getTime()}.${extension}`;
+const simulateDownload = (download, href) => {
+  const a = document.createElement("a");
+  a.download = download;
+  a.href = href;
+  a.click();
+  a.remove();
+};
+const downloadImage = (context, image) => () => {
+  const { canvas } = context;
+  context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  simulateDownload(
+    getFileName("png"),
+    canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
+  );
+};
+const getBase64SVG = (svg, width, height) => {
+  if (svg) {
+    svg = svg.cloneNode(true);
+  }
+  height && (svg == null ? void 0 : svg.setAttribute("height", `${height}px`));
+  width && (svg == null ? void 0 : svg.setAttribute("width", `${width}px`));
+  const svgString = svg.outerHTML.replaceAll("<br>", "<br/>").replaceAll(/<img([^>]*)>/g, (m, g) => `<img ${g} />`);
+  return toBase64(`<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" type="text/css"?>
+${svgString}`);
+};
+const exportImage = (svgSelector) => __async(void 0, null, function* () {
+  yield new Promise((resolve) => setTimeout(resolve, 1e3));
+  const canvas = document.createElement("canvas");
+  const svg = document.querySelector(svgSelector);
+  if (!svg) {
+    return;
+  }
+  const box = svg.getBoundingClientRect();
+  const multiplier = 2;
+  canvas.width = box.width * multiplier;
+  canvas.height = box.height * multiplier;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("context not found");
+  }
+  context.fillStyle = "white";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  const image = new Image();
+  image.addEventListener("load", () => {
+    downloadImage(context, image)();
+  });
+  image.src = `data:image/svg+xml;base64,${getBase64SVG(svg, canvas.width, canvas.height)}`;
+});
+export {
+  exportImage
+};

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;
+}