@cozeloop/prompt-components 0.0.1

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

@@ -0,0 +1,44 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import cls from "classnames";
+import {
+  IconCozQuestionMarkCircle,
+  IconCozStarFill
+} from "@coze-arch/coze-design/icons";
+import { Avatar, Divider, Tooltip } from "@coze-arch/coze-design";
+function ModelOptionGroup(props) {
+  const questionMark = (props == null ? void 0 : props.tooltip) ? /* @__PURE__ */ jsx(Tooltip, { content: props == null ? void 0 : props.tooltip, theme: "dark", children: /* @__PURE__ */ jsx(IconCozQuestionMarkCircle, { className: "cursor-pointer coz-fg-secondary" }) }) : null;
+  return /* @__PURE__ */ jsx("div", { className: "pb-[2px]", children: props.type === "new" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[4px] coz-fg-hglt", children: [
+    /* @__PURE__ */ jsx(IconCozStarFill, {}),
+    /* @__PURE__ */ jsx("span", { className: "text-[12px] leading-[16px]", children: props.seriesName }),
+    questionMark
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[6px]", children: [
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        shape: "square",
+        className: "w-[14px] h-[14px] rounded-[3px] !cursor-default border border-solid coz-stroke-primary",
+        src: props.icon
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cls(
+          "flex items-center gap-[4px]",
+          "text-[12px] leading-[16px]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "coz-fg-secondary", children: props.seriesName }),
+          questionMark,
+          props.desc ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, { layout: "vertical" }),
+            /* @__PURE__ */ jsx("span", { className: "coz-fg-dim", children: props.desc })
+          ] }) : null
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  ModelOptionGroup
+};

package/dist/es/prompt-editor/index.js

@@ -0,0 +1,188 @@
+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 { forwardRef, useState } from "react";
+import cn from "classnames";
+import { flow_devops_prompt_common } from "@flow-infra/idl/prompt_api";
+import { IconCozHandle } from "@coze-arch/coze-design/icons";
+import { IconButton, Input, Space } from "@coze-arch/coze-design";
+import { VARIABLE_MAX_LEN } from "../consts";
+import {
+  PromptBasicEditor
+} from "../basic-editor";
+import { MessageTypeSelect } from "./message-type-select";
+import styles from "./index.module";
+const PromptEditor = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      message,
+      dragBtnHidden,
+      messageTypeDisabled,
+      variables,
+      disabled,
+      isDrag,
+      onMessageChange,
+      onMessageTypeChange,
+      placeholder,
+      messageTypeList,
+      leftActionBtns,
+      rightActionBtns,
+      children,
+      hideActionWrap,
+      isFullscreen
+    } = _b, rest = __objRest(_b, [
+      "className",
+      "message",
+      "dragBtnHidden",
+      "messageTypeDisabled",
+      "variables",
+      "disabled",
+      "isDrag",
+      "onMessageChange",
+      "onMessageTypeChange",
+      "placeholder",
+      "messageTypeList",
+      "leftActionBtns",
+      "rightActionBtns",
+      "children",
+      "hideActionWrap",
+      "isFullscreen"
+    ]);
+    const [editorActive, setEditorActive] = useState(false);
+    const handleMessageContentChange = (v) => {
+      onMessageChange == null ? void 0 : onMessageChange(__spreadProps(__spreadValues({}, message), { content: v }));
+    };
+    const readonly = disabled || isDrag;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          styles["prompt-editor-container"],
+          {
+            [styles["prompt-editor-container-active"]]: editorActive,
+            [styles["prompt-editor-container-disabled"]]: disabled,
+            [styles["full-screen"]]: isFullscreen
+          },
+          className
+        ),
+        children: [
+          hideActionWrap ? null : /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+            /* @__PURE__ */ jsxs(Space, { spacing: 2, children: [
+              dragBtnHidden ? null : /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  color: "secondary",
+                  size: "mini",
+                  icon: /* @__PURE__ */ jsx(IconCozHandle, { fontSize: 14 }),
+                  className: cn("drag !w-[14px]", styles["drag-btn"])
+                }
+              ),
+              (message == null ? void 0 : message.message_type) ? /* @__PURE__ */ jsx(
+                MessageTypeSelect,
+                {
+                  value: message.message_type,
+                  onChange: onMessageTypeChange,
+                  disabled: messageTypeDisabled || readonly,
+                  messageTypeList
+                }
+              ) : null,
+              leftActionBtns
+            ] }),
+            rightActionBtns
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("w-full overflow-y-auto styled-scrollbar", {
+                "py-1": (message == null ? void 0 : message.message_type) !== flow_devops_prompt_common.MessageType.Placeholder
+              }),
+              children: (message == null ? void 0 : message.message_type) === flow_devops_prompt_common.MessageType.Placeholder ? /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: message.content,
+                  onChange: handleMessageContentChange,
+                  borderless: true,
+                  disabled: readonly,
+                  style: { border: 0, borderRadius: 0 },
+                  onInput: (event) => {
+                    const target = event.target;
+                    if (target) {
+                      let { value } = target;
+                      if (value === "") {
+                        return;
+                      }
+                      if (!/^[A-Za-z]/.test(value)) {
+                        value = value.slice(1);
+                      }
+                      value = value.replace(/[^A-Za-z0-9_]/g, "");
+                      target.value = value;
+                    }
+                  },
+                  maxLength: VARIABLE_MAX_LEN,
+                  max: 50,
+                  className: "!pl-3 font-sm",
+                  inputStyle: {
+                    fontSize: 13,
+                    color: "var(--Green-COZColorGreen7, #00A136)",
+                    fontFamily: "JetBrainsMonoRegular"
+                  },
+                  onFocus: () => setEditorActive(true),
+                  onBlur: () => setEditorActive(false),
+                  placeholder: "支持输入英文字母和下划线，且首字母必须是字母"
+                },
+                message.key || message.id
+              ) : /* @__PURE__ */ jsx(
+                PromptBasicEditor,
+                __spreadProps(__spreadValues({}, rest), {
+                  defaultValue: message == null ? void 0 : message.content,
+                  onChange: handleMessageContentChange,
+                  variables,
+                  readOnly: readonly,
+                  linePlaceholder: placeholder,
+                  onFocus: () => setEditorActive(true),
+                  onBlur: () => setEditorActive(false),
+                  ref,
+                  children
+                }),
+                (message == null ? void 0 : message.key) || (message == null ? void 0 : message.id)
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  PromptEditor
+};

package/dist/es/prompt-editor/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "prompt-editor-container": "prompt-editor-container_8d7ff", "header": "header_8d7ff", "drag-btn": "drag-btn_8d7ff", "prompt-editor-container-error": "prompt-editor-container-error_8d7ff", "prompt-editor-btn-group": "prompt-editor-btn-group_8d7ff", "prompt-editor-container-active": "prompt-editor-container-active_8d7ff", "prompt-editor-container-disabled": "prompt-editor-container-disabled_8d7ff", "role-display": "role-display_8d7ff", "full-screen": "full-screen_8d7ff" };
+export {
+  index_module_default as default
+};

package/dist/es/prompt-editor/index_module.css

@@ -0,0 +1,71 @@
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
+/* stylelint-disable declaration-no-important */
+.prompt-editor-container_8d7ff {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  background: var(--Bg-COZ-bg-max, #FFF);
+  border: 1px solid var(--Stroke-COZ-stroke-plus, rgba(68, 83, 130, 0.25));
+  border-radius: var(--Radius-Default, 6px);
+}
+.prompt-editor-container_8d7ff .header_8d7ff {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  height: 36px;
+  padding: 12px 8px;
+  border-bottom: 1px solid var(--Stroke-COZ-stroke-primary, rgba(82, 100, 154, 0.13));
+}
+.prompt-editor-container_8d7ff .header_8d7ff .drag-btn_8d7ff {
+  color: var(--coz-fg-dim);
+}
+.prompt-editor-container_8d7ff .header_8d7ff .drag-btn_8d7ff:hover {
+  color: var(--coz-fg-secondary);
+}
+.prompt-editor-container-error_8d7ff {
+  border: 1px solid var(--Red-COZ-red-500, #F54A45);
+}
+.prompt-editor-container_8d7ff .prompt-editor-btn-group_8d7ff {
+  display: none;
+  transition: all 0.2s ease-in-out;
+}
+.prompt-editor-container_8d7ff input::placeholder {
+  font-family: JetBrainsMonoBold !important;
+  font-size: 13px !important;
+}
+.prompt-editor-container_8d7ff .cm-scroller {
+  scrollbar-gutter: stable;
+}
+.prompt-editor-container_8d7ff .cm-scroller::-webkit-scrollbar-thumb {
+  visibility: hidden;
+}
+.prompt-editor-container-active_8d7ff {
+  border: 1px solid rgba(var(--coze-up-brand-9), 1);
+}
+.prompt-editor-container-active_8d7ff .cm-scroller::-webkit-scrollbar-thumb {
+  visibility: visible;
+}
+.prompt-editor-container-disabled_8d7ff {
+  background: var(--coz-bg-primary, #F7F7FC);
+}
+.prompt-editor-container_8d7ff:hover .prompt-editor-btn-group_8d7ff {
+  display: flex;
+}
+.prompt-editor-container_8d7ff:hover .cm-scroller::-webkit-scrollbar-thumb {
+  visibility: visible;
+}
+.role-display_8d7ff {
+  color: var(--Fg-COZ-fg-dim, rgba(55, 67, 106, 0.38)) !important;
+}
+.full-screen_8d7ff {
+  position: fixed !important;
+  z-index: 1000;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  background-color: var(--semi-color-bg-0);
+}

package/dist/es/prompt-editor/message-type-select.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import cn from "classnames";
+import { IconCozNodeExpand } from "@coze-arch/coze-design/icons";
+import { Button, Menu, Typography } from "@coze-arch/coze-design";
+import styles from "./index.module";
+function MessageTypeSelect({
+  value,
+  onChange,
+  disabled,
+  messageTypeList = []
+}) {
+  var _a, _b, _c, _d;
+  const [visible, setVisible] = useState(false);
+  if (disabled) {
+    return /* @__PURE__ */ jsx(
+      Typography.Text,
+      {
+        size: "small",
+        type: "tertiary",
+        className: cn("px-2", styles["role-display"], "variable-text"),
+        children: (_b = ((_a = messageTypeList.find((it) => it.value === value)) == null ? void 0 : _a.label) || value) != null ? _b : "-"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      visible,
+      trigger: "custom",
+      position: "bottomLeft",
+      showTick: false,
+      render: /* @__PURE__ */ jsx(
+        Menu.SubMenu,
+        {
+          mode: "selection",
+          selectedKeys: [`${value}`],
+          onSelectionChange: (v) => {
+            onChange == null ? void 0 : onChange(Number(v));
+            setVisible(false);
+          },
+          children: messageTypeList == null ? void 0 : messageTypeList.map((it) => /* @__PURE__ */ jsx(
+            Menu.Item,
+            {
+              itemKey: `${it.value}`,
+              className: cn("!px-2", {
+                "coz-mg-primary": `${it}` === `${value}`
+              }),
+              children: /* @__PURE__ */ jsx(Typography.Text, { className: "variable-text", children: it.label })
+            },
+            it.value
+          ))
+        }
+      ),
+      onClickOutSide: () => setVisible(false),
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "mini",
+          color: "secondary",
+          onClick: () => setVisible(true),
+          className: cn(styles["role-display"], "variable-text"),
+          children: [
+            (_d = ((_c = messageTypeList.find((it) => it.value === value)) == null ? void 0 : _c.label) || value) != null ? _d : "-",
+            /* @__PURE__ */ jsx(IconCozNodeExpand, { className: "ml-0.5" })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  MessageTypeSelect
+};

package/dist/es/schema-editor/index.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { BaseJsonEditor, BaseRawTextEditor } from "../code-editor";
+const SchemaEditor = ({
+  value,
+  onChange,
+  placeholder,
+  readOnly,
+  language,
+  className
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: classNames(
+      "w-full h-[500px] border border-solid coz-stroke-primary rounded-[4px] overflow-hidden relative bg-white",
+      { "opacity-70": readOnly },
+      className
+    ),
+    children: language === "json" ? /* @__PURE__ */ jsx(
+      BaseJsonEditor,
+      {
+        className: "w-full h-full overflow-y-auto",
+        onChange,
+        value: value || "",
+        placeholder,
+        readonly: readOnly,
+        borderRadius: 4
+      }
+    ) : /* @__PURE__ */ jsx(
+      BaseRawTextEditor,
+      {
+        className: "w-full h-full overflow-y-auto",
+        onChange,
+        value: value || "",
+        placeholder,
+        readonly: readOnly
+      }
+    )
+  }
+);
+export {
+  SchemaEditor
+};

package/dist/es/utils/base.js

@@ -0,0 +1,53 @@
+import { uniqueId } from "lodash-es";
+const safeParseJson = (jsonString, fallback) => {
+  try {
+    if (jsonString) {
+      return JSON.parse(jsonString);
+    }
+  } catch (e) {
+    return fallback;
+  }
+};
+const HEIGHT_BUFFER = 20;
+const handleScrollToBottom = (e, callback) => {
+  const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
+  if (scrollTop + clientHeight + HEIGHT_BUFFER >= scrollHeight) {
+    callback();
+  }
+};
+function sleep(timer = 600) {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(), timer);
+  });
+}
+const messageId = () => {
+  const date = /* @__PURE__ */ new Date();
+  return date.getTime() + uniqueId();
+};
+const thousand = 1e3;
+const convertNumberToThousands = (num) => {
+  if (!num) {
+    return 0;
+  }
+  const number = Number(num);
+  if (number < thousand) {
+    return number;
+  } else {
+    return `${(number / thousand).toFixed(1)} K`;
+  }
+};
+function recordToArray(record) {
+  return Object.entries(record).map(([key, value]) => ({
+    label: key,
+    value
+    // 将值转换为字符串，如果值为 undefined 则不设置
+  }));
+}
+export {
+  convertNumberToThousands,
+  handleScrollToBottom,
+  messageId,
+  recordToArray,
+  safeParseJson,
+  sleep
+};

package/dist/es/utils/model-config.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { ModelStatus } from "@flow-infra/idl/fornax_ml_flow";
+import { Tag } from "@coze-arch/coze-design";
+import { convertInt64ToNumber } from "../model-config-editor/model-config-form";
+import { DEFAULT_MAX_TOKENS } from "../consts";
+const convertModelToModelConfig = (model) => {
+  var _a, _b, _c, _d;
+  return {
+    id: model == null ? void 0 : model.id,
+    name: model == null ? void 0 : model.displayName,
+    provider: model == null ? void 0 : model.provider,
+    provider_model_id: model == null ? void 0 : model.identification,
+    temperature: convertInt64ToNumber((_a = model == null ? void 0 : model.defaultRuntimeParam) == null ? void 0 : _a.temperature),
+    max_tokens: convertInt64ToNumber(
+      ((_b = model == null ? void 0 : model.defaultRuntimeParam) == null ? void 0 : _b.maxTokens) || DEFAULT_MAX_TOKENS
+    ),
+    top_p: convertInt64ToNumber((_c = model == null ? void 0 : model.defaultRuntimeParam) == null ? void 0 : _c.topP),
+    function_call_mode: (_d = model == null ? void 0 : model.ability) == null ? void 0 : _d.functionCallEnabled
+  };
+};
+const renderModelOfflineTag = (model) => {
+  if ((model == null ? void 0 : model.modelStatus) === ModelStatus.Offlining) {
+    return /* @__PURE__ */ jsx(Tag, { color: "yellow", className: "flex-shrink-0", size: "mini", children: "下线中" });
+  } else if ((model == null ? void 0 : model.modelStatus) === ModelStatus.Unavailable) {
+    return /* @__PURE__ */ jsx(Tag, { color: "red", className: "flex-shrink-0", size: "mini", children: "已下线" });
+  }
+  return null;
+};
+export {
+  convertModelToModelConfig,
+  renderModelOfflineTag
+};

package/dist/lib/basic-editor/custom-facet.js

@@ -0,0 +1,33 @@
+"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 custom_facet_exports = {};
+__export(custom_facet_exports, {
+  cunstomFacet: () => cunstomFacet
+});
+module.exports = __toCommonJS(custom_facet_exports);
+var import_state = require("@codemirror/state");
+const cunstomFacet = import_state.Facet.define({
+  combine(values) {
+    return values[values.length - 1];
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  cunstomFacet
+});