@agentscope-ai/design 1.0.7 → 1.0.8

package/lib/antd/themes/_readme.txt

@@ -0,0 +1 @@
+这个文件夹里是spark design预置的主题

package/lib/antd/themes/generateThemeByToken.d.ts

@@ -6,5 +6,5 @@ export default function generateThemeByToken(
  * @returns ConfigProviderProps
  */
 token: {
-    [key: string]: string | number;
+    [key: string]: string | number | boolean;
 }, darkMode?: boolean): Partial<ConfigProviderProps>;

package/lib/components/commonComponents/Breadcrumb/index.js

@@ -35,7 +35,7 @@ var SparkBreadcrumb = function SparkBreadcrumb(_ref) {
         contentParts.push( /*#__PURE__*/_jsxs("span", {
           className: "".concat(sparkPrefix, "-breadcrumb-dropdown-title"),
           children: [item.title, /*#__PURE__*/_jsx(SparkDownLine, {
-            size: "small"
+            size: 16
           })]
         }, "title"));
       } else {

package/lib/components/commonComponents/Breadcrumb/index.style.d.ts

@@ -1,17 +1,26 @@
 export declare function getIndexStyleData(params: any): {
     [x: string]: {
-        [x: string]: {
+        [x: string]: string | {
+            cursor: string;
+            color?: undefined;
+            height?: undefined;
+            '&:hover'?: undefined;
+            display?: undefined;
+            alignItems?: undefined;
+            gap?: undefined;
+            justifyContent?: undefined;
+        } | {
             [x: string]: {
                 color: string;
                 display: string;
                 alignItems: string;
             };
+            cursor?: undefined;
             color?: undefined;
             height?: undefined;
             '&:hover'?: undefined;
             display?: undefined;
             alignItems?: undefined;
-            cursor?: undefined;
             gap?: undefined;
             justifyContent?: undefined;
         } | {
@@ -20,27 +29,27 @@ export declare function getIndexStyleData(params: any): {
             '&:hover': {
                 backgroundColor: string;
             };
+            cursor?: undefined;
             display?: undefined;
             alignItems?: undefined;
-            cursor?: undefined;
             gap?: undefined;
             justifyContent?: undefined;
         } | {
             color: string;
+            cursor?: undefined;
             height?: undefined;
             '&:hover'?: undefined;
             display?: undefined;
             alignItems?: undefined;
-            cursor?: undefined;
             gap?: undefined;
             justifyContent?: undefined;
         } | {
             display: string;
             alignItems: string;
+            cursor?: undefined;
             color?: undefined;
             height?: undefined;
             '&:hover'?: undefined;
-            cursor?: undefined;
             gap?: undefined;
             justifyContent?: undefined;
         } | {
@@ -60,10 +69,10 @@ export declare function getIndexStyleData(params: any): {
             display: string;
             alignItems: string;
             gap: number;
+            cursor?: undefined;
             color?: undefined;
             height?: undefined;
             '&:hover'?: undefined;
-            cursor?: undefined;
             justifyContent?: undefined;
         } | {
             [x: string]: string | number | {
@@ -73,20 +82,21 @@ export declare function getIndexStyleData(params: any): {
             alignItems: string;
             gap: number;
             height: string;
+            cursor?: undefined;
             color?: undefined;
             '&:hover'?: undefined;
-            cursor?: undefined;
             justifyContent?: undefined;
         } | {
             display: string;
             justifyContent: string;
+            cursor?: undefined;
             color?: undefined;
             height?: undefined;
             '&:hover'?: undefined;
             alignItems?: undefined;
-            cursor?: undefined;
             gap?: undefined;
         };
+        cursor: string;
         'li:last-child': {
             [x: string]: {
                 color: string;

package/lib/components/commonComponents/Breadcrumb/index.style.js

@@ -9,20 +9,21 @@ import createStyle from "../../../libs/createStyle";
 export function getIndexStyleData(params) {
   var antPrefix = params.antPrefix,
     sparkPrefix = params.sparkPrefix;
-  return _defineProperty({}, ".".concat(sparkPrefix, "-breadcrumb"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    'li:last-child': _defineProperty({}, ".".concat(antPrefix, "-breadcrumb-link"), {
-      color: "var(--".concat(antPrefix, "-color-text)"),
-      display: 'flex',
-      alignItems: 'center'
-    }),
-    a: {
-      color: "var(--".concat(antPrefix, "-color-text-secondary)"),
-      height: 'auto',
-      '&:hover': {
-        backgroundColor: 'transparent'
-      }
+  return _defineProperty({}, ".".concat(sparkPrefix, "-breadcrumb"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    cursor: 'default'
+  }, ".".concat(antPrefix, "-breadcrumb-link"), {
+    cursor: 'pointer'
+  }), 'li:last-child', _defineProperty({}, ".".concat(antPrefix, "-breadcrumb-link"), {
+    color: "var(--".concat(antPrefix, "-color-text)"),
+    display: 'flex',
+    alignItems: 'center'
+  })), "a", {
+    color: "var(--".concat(antPrefix, "-color-text-secondary)"),
+    height: 'auto',
+    '&:hover': {
+      backgroundColor: 'transparent'
     }
-  }, ".".concat(antPrefix, "-breadcrumb-separator"), {
+  }), ".".concat(antPrefix, "-breadcrumb-separator"), {
     color: "var(--".concat(antPrefix, "-color-text)")
   }), ".".concat(antPrefix, "-breadcrumb-overlay-link"), {
     display: 'flex',

package/lib/components/commonComponents/Button/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["iconSize"];
+var _excluded = ["iconSize", "loading"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -7,9 +7,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { SparkLoadingLine } from '@agentscope-ai/icons';
 import { Button as AntdButton, ConfigProvider, theme } from 'antd';
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import IconFont from "../IconFont";
 import Popover from "../Popover";
 
@@ -18,6 +19,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var token = theme.useToken();
   var iconSize = props.iconSize,
+    loading = props.loading,
     restProps = _objectWithoutProperties(props, _excluded);
   var buttonType = React.useMemo(function () {
     // @ts-ignore
@@ -26,10 +28,29 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     if (restProps.type === 'textCompact') return 'link';
     return restProps.type;
   }, [restProps.type]);
+  var mergedLoading = useMemo(function () {
+    // 更改默认 loading icon 为 SparkLoadingLine
+    if (loading) {
+      if (typeof loading === 'boolean') {
+        return {
+          icon: /*#__PURE__*/_jsx(SparkLoadingLine, {
+            spin: true
+          })
+        };
+      }
+      if (_typeof(loading) === 'object') {
+        return _objectSpread({
+          icon: /*#__PURE__*/_jsx(SparkLoadingLine, {
+            spin: true
+          })
+        }, loading);
+      }
+    }
+    return loading;
+  }, [loading]);
   var icon = React.useMemo(function () {
-    if (restProps.loading && _typeof(restProps.loading) === 'object' && restProps.loading.icon) {
-      var _restProps$loading;
-      return (_restProps$loading = restProps.loading) === null || _restProps$loading === void 0 ? void 0 : _restProps$loading.icon;
+    if (loading && _typeof(loading) === 'object' && loading.icon) {
+      return loading === null || loading === void 0 ? void 0 : loading.icon;
     }
     if (restProps.iconType) return /*#__PURE__*/_jsx(IconFont, {
       type: restProps.iconType,
@@ -41,6 +62,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   }, [restProps.iconType, restProps.icon]);
   var button = /*#__PURE__*/_jsx(AntdButton, _objectSpread(_objectSpread({}, restProps), {}, {
+    loading: mergedLoading,
     ref: ref,
     type: buttonType,
     icon: icon,

package/lib/components/commonComponents/CodeBlock/index.js

@@ -18,6 +18,7 @@ import { html } from '@codemirror/lang-html';
 import { java } from '@codemirror/lang-java';
 import { javascript } from '@codemirror/lang-javascript';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { markdown } from '@codemirror/lang-markdown';
 import { php } from '@codemirror/lang-php';
 import { python } from '@codemirror/lang-python';
 import { yaml } from '@codemirror/lang-yaml';
@@ -42,7 +43,8 @@ export var langExtensionsMap = {
   csharp: [cpp()],
   css: [css()],
   html: [html()],
-  curl: []
+  curl: [],
+  markdown: [markdown()]
 };
 var lintExtensionsMap = {
   javascript: [lintGutter()],

package/lib/components/commonComponents/Empty/svg/Illustrate.js

@@ -37,13 +37,13 @@ export default function Illustrate(props) {
     }
   }, []);
   useEffect(function () {
-    if (svgContainer && cssVar.key) {
+    if (svgContainer && cssVar !== null && cssVar !== void 0 && cssVar.key) {
       svgContainer.classList.forEach(function (key) {
         return svgContainer.classList.remove(key);
       });
       svgContainer.classList.add(cssVar.key);
     }
-  }, [cssVar.key]);
+  }, [cssVar === null || cssVar === void 0 ? void 0 : cssVar.key]);
   useEffect(function () {
     if (!isSvg) {
       return;

package/lib/components/commonComponents/PromptsEditor/VarRender.d.ts

@@ -0,0 +1,6 @@
+import { DecorationSet, ViewPlugin, ViewUpdate } from '@codemirror/view';
+declare const _default: ViewPlugin<{
+    placeholders: DecorationSet;
+    update(update: ViewUpdate): void;
+}>[];
+export default _default;

package/lib/components/commonComponents/PromptsEditor/VarRender.js

@@ -0,0 +1,84 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+import { Decoration, EditorView, MatchDecorator, ViewPlugin, WidgetType } from '@codemirror/view';
+
+// Placeholder Widget 类
+var PlaceholderWidget = /*#__PURE__*/function (_WidgetType) {
+  _inherits(PlaceholderWidget, _WidgetType);
+  var _super = _createSuper(PlaceholderWidget);
+  function PlaceholderWidget(name) {
+    var _this;
+    _classCallCheck(this, PlaceholderWidget);
+    _this = _super.call(this);
+    _this.name = name;
+    return _this;
+  }
+  _createClass(PlaceholderWidget, [{
+    key: "eq",
+    value: function eq(other) {
+      return other.name == this.name;
+    }
+  }, {
+    key: "toDOM",
+    value: function toDOM() {
+      var wrap = document.createElement('span');
+      wrap.setAttribute('aria-hidden', 'true');
+      wrap.className = 'cm-prompt-var';
+      wrap.textContent = "${".concat(this.name, "}");
+      return wrap;
+    }
+  }, {
+    key: "ignoreEvent",
+    value: function ignoreEvent() {
+      return false;
+    }
+  }]);
+  return PlaceholderWidget;
+}(WidgetType); // Placeholder 匹配器
+var placeholderMatcher = new MatchDecorator({
+  regexp: /\$\{(\w+)\}/g,
+  decoration: function decoration(match) {
+    return Decoration.replace({
+      widget: new PlaceholderWidget(match[1])
+    });
+  }
+});
+
+// Placeholder 插件
+var placeholders = ViewPlugin.fromClass( /*#__PURE__*/function () {
+  function _class2(view) {
+    _classCallCheck(this, _class2);
+    _defineProperty(this, "placeholders", void 0);
+    this.placeholders = placeholderMatcher.createDeco(view);
+  }
+  _createClass(_class2, [{
+    key: "update",
+    value: function update(_update) {
+      this.placeholders = placeholderMatcher.updateDeco(_update, this.placeholders);
+    }
+  }]);
+  return _class2;
+}(), {
+  decorations: function decorations(instance) {
+    return instance.placeholders;
+  },
+  provide: function provide(plugin) {
+    return EditorView.atomicRanges.of(function (view) {
+      var _view$plugin;
+      return ((_view$plugin = view.plugin(plugin)) === null || _view$plugin === void 0 ? void 0 : _view$plugin.placeholders) || Decoration.none;
+    });
+  }
+});
+export default [placeholders];

package/lib/components/commonComponents/PromptsEditor/VarSelectInput.d.ts

@@ -0,0 +1,6 @@
+import { Completion } from '@codemirror/autocomplete';
+import { Extension } from '@codemirror/state';
+export default function (data: Completion[], config: {
+    onCreate?: () => void;
+    createBtnText?: string;
+}): Extension;

package/lib/components/commonComponents/PromptsEditor/VarSelectInput.js

@@ -0,0 +1,60 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { autocompletion } from '@codemirror/autocomplete';
+export default function () {
+  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var config = arguments.length > 1 ? arguments[1] : undefined;
+  var onCreate = config.onCreate,
+    createBtnText = config.createBtnText;
+  return autocompletion({
+    override: [function (context) {
+      var word = context.matchBefore(/\/(\w+)?/);
+      if (!word) return null;
+      if (word && word.from == word.to && !context.explicit) {
+        return null;
+      }
+      return {
+        from: word === null || word === void 0 ? void 0 : word.from,
+        options: (onCreate ? [].concat(_toConsumableArray(data), [{
+          label: '/NEW_VAR',
+          boost: -99
+        }]) : data).map(function (item) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            displayLabel: item.label === '/NEW_VAR' ? createBtnText : item.label.slice(1),
+            apply: function apply(view, completion, from, to) {
+              if (completion.label === '/NEW_VAR') {
+                view.dispatch({
+                  changes: {
+                    from: from,
+                    to: to,
+                    insert: ''
+                  }
+                });
+                return onCreate === null || onCreate === void 0 ? void 0 : onCreate();
+              }
+              var variableName = completion.label.slice(1);
+              var variableText = "${".concat(variableName, "}");
+              view.dispatch({
+                changes: {
+                  from: from,
+                  to: to,
+                  insert: variableText
+                }
+              });
+            }
+          });
+        })
+      };
+    }]
+  });
+}

package/lib/components/commonComponents/PromptsEditor/demo/basic.d.ts

@@ -0,0 +1 @@
+export default function Basic(): import("react/jsx-runtime").JSX.Element;

package/lib/components/commonComponents/PromptsEditor/demo/basic.js

@@ -0,0 +1,30 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { PromptsEditor } from "../../../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Basic() {
+  var _useState = useState("# \u89D2\u8272\n\u4F60\u662F\u4E00\u4E2A\u4E13\u4E1A\u7684Prompt\u7F16\u5199\u5DE5\u7A0B\u5E08\uFF0C\u64C5\u957F\u7F16\u5199\u5404\u79CD\u7C7B\u578B\u7684Prompt\u3002\n\n# \u6280\u80FD\n1. \u4F60\u64C5\u957F\u7F16\u5199\u5404\u79CD\u7C7B\u578B\u7684Prompt\u3002\n2. \u4F60\u64C5\u957F\u7F16\u5199\u5404\u79CD\u7C7B\u578B\u7684Prompt\u3002\n3. \u4F60\u64C5\u957F\u7F16\u5199\u5404\u79CD\u7C7B\u578B\u7684Prompt\u3002\n\n\n# \u4EFB\u52A1\n\u6839\u636E\u8F93\u5165\u7684Prompt\u6A21\u677F\uFF0C\u751F\u6210\u7B26\u5408\u8981\u6C42\u7684Prompt\u3002\n\n# \u8F93\u5165\n- Prompt\u6A21\u677F\uFF1A\u4F60\u662F\u4E00\u4E2A\u4E13\u4E1A\u7684Prompt\u7F16\u5199\u5DE5\u7A0B\u5E08\uFF0C\u64C5\u957F\u7F16\u5199\u5404\u79CD\u7C7B\u578B\u7684Prompt\u3002\n\n# \u8F93\u51FA\n- Prompt\uFF1A\u7B26\u5408\u8981\u6C42\u7684Prompt\u3002"),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(PromptsEditor, {
+    onCreate: function onCreate() {
+      return alert(1);
+    },
+    value: value,
+    onChange: setValue,
+    maxLength: 5000,
+    variables: [{
+      code: 'city'
+    }, {
+      code: 'foo'
+    }, {
+      code: 'user'
+    }]
+  });
+}

package/lib/components/commonComponents/PromptsEditor/index.d.ts

@@ -0,0 +1,42 @@
+export interface PromptsEditorProps {
+    /**
+     * @description 可以输入内容的最大长度
+     * @descriptionEn Maximum length of input content
+     */
+    maxLength?: number;
+    /**
+     * @description 输入的内容
+     * @descriptionEn Input content value
+     */
+    value: string;
+    /**
+     * @description 输入内容的类名
+     * @descriptionEn CSS class name for the input content
+     */
+    className?: string;
+    /**
+     * @description 输入内容的回调
+     * @descriptionEn Callback function when input value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * @description 可以插入的变量列表
+     * @descriptionEn Available variables for insertion
+     */
+    variables?: Array<{
+        code: string;
+    }>;
+    /**
+     * @description 新增变量的触发回调
+     * @descriptionEn Callback function to create new variable
+     */
+    onCreate?: () => void;
+    /**
+     * @description 新增变量的按钮文本
+     * @descriptionEn Text of the create variable button
+     */
+    createBtnText?: string;
+}
+export declare const langExtensionsMap: Record<string, any[]>;
+declare const CodeMirrorWrapper: (props: PromptsEditorProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeMirrorWrapper;

package/lib/components/commonComponents/PromptsEditor/index.js

@@ -0,0 +1,134 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2;
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+// @ts-nocheck
+import { SparkEnterLine } from '@agentscope-ai/icons';
+import { markdown } from '@codemirror/lang-markdown';
+import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
+import CodeMirror from '@uiw/react-codemirror';
+import { ConfigProvider, theme } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import React, { useEffect, useMemo, useState } from 'react';
+import VarRender from "./VarRender";
+import VarSelectInput from "./VarSelectInput";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    onCreate: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .\u037C2 .cm-tooltip li:last-of-type,\n    .\u037C3 .cm-tooltip li:last-of-type {\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      height: 40px;\n      border-top: 1px solid ", ";\n      border-radius: 0 !important;\n      background-color: ", " !important;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0 !important;\n    }\n\n    .\u037C2 .cm-tooltip ul,\n    .\u037C3 .cm-tooltip ul {\n      margin-bottom: 40px !important;\n    }\n\n    .\u037C2 .cm-tooltip li:first-of-type,\n    .\u037C3 .cm-tooltip li:first-of-type {\n      border-top: none !important;\n    }\n  "])), token.colorBorderSecondary, token.colorBgContainer),
+    cm: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .\u037Cs \u037Cy,\n    .\u037Cs,\n    .\u037Cy {\n      color: ", " !important;\n    }\n\n    .\u037Co {\n      color: ", " !important;\n    }\n\n    .\u037C16 {\n      background-color: transparent !important;\n    }\n\n    .cm-editor {\n      position: absolute !important;\n      top: 0;\n      left: 8px;\n      right: 0;\n      bottom: 30px;\n    }\n    .cm-focused {\n      outline: none;\n    }\n\n    .\u037C1 .cm-content {\n      width: 100%;\n      padding: 8px 0;\n      white-space: break-spaces;\n    }\n\n    .cm-line {\n      line-height: 24px;\n    }\n\n    .cm-prompt-var {\n      font-size: inherit;\n      color: ", ";\n      background-color: ", ";\n      line-height: 1.7;\n      font-weight: 500;\n      margin: 0 2px;\n      height: 24px;\n      display: inline-flex;\n      padding: 0 4px;\n      border-radius: 4px;\n    }\n\n    .\u037C2 .cm-tooltip,\n    .\u037C3 .cm-tooltip {\n      position: relative;\n      background-color: ", ";\n      border: 0;\n      border-radius: 4px;\n      overflow: hidden;\n      box-shadow: 0px 3px 12px 0px rgba(47, 49, 51, 0.12);\n    }\n\n    .\u037C2 .cm-tooltip ul,\n    .\u037C3 .cm-tooltip ul {\n      max-height: 17em !important;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .\u037C2 .cm-tooltip li,\n    .\u037C3 .cm-tooltip li {\n      margin: 4px 8px;\n      height: 32px;\n      padding: 0 12px !important;\n      flex: 0 0 32px;\n      display: flex;\n      align-items: center;\n    }\n\n    .\u037C2 .cm-tooltip-autocomplete ul li[aria-selected],\n    .\u037C3 .cm-tooltip-autocomplete ul li[aria-selected] {\n      border-radius: 6px;\n      font-weight: 600;\n      color: ", ";\n      background-color: ", ";\n    }\n\n    .cm-completionInfo-right {\n      display: none;\n    }\n\n    .\u037C1 .cm-completionIcon {\n      display: none;\n    }\n  "])), token.colorBlue, token.colorTextSecondary, token.colorPurple, token.colorPurpleBg, token.colorBgContainer, token.colorText, token.colorFillSecondary),
+    root: {
+      position: 'relative',
+      minHeight: 300,
+      backgroundColor: token.colorBgBase,
+      border: "1px solid ".concat(token.colorBorderSecondary),
+      borderRadius: 6,
+      overflow: 'hidden',
+      padding: '4px 12px',
+      resize: 'vertical'
+    },
+    footer: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      padding: '0 12px',
+      height: 30,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      fontSize: 12,
+      color: token.colorTextTertiary,
+      backgroundColor: token.colorBgBase
+    },
+    tips: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 4
+    }
+  };
+});
+export var langExtensionsMap = {
+  markdown: [markdown()]
+};
+var empty = [];
+var CodeMirrorWrapper = function CodeMirrorWrapper(props) {
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var variables = props.variables || empty;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    ready = _useState2[0],
+    setReady = _useState2[1];
+  var onCreate = props.onCreate;
+  var context = React.useContext(ConfigProvider.ConfigContext);
+  var isDarkMode = context.theme.algorithm === theme.darkAlgorithm;
+  var createBtnText = props.createBtnText || '+ 新增变量';
+  var getTheme = useMemo(function () {
+    if (isDarkMode) {
+      return vscodeDark;
+    }
+    return vscodeLight;
+  }, [isDarkMode]);
+  var extensions = useMemo(function () {
+    return [].concat(_toConsumableArray(langExtensionsMap['markdown']), _toConsumableArray(VarRender), [VarSelectInput(_toConsumableArray(variables).map(function (item) {
+      return {
+        label: "/".concat(item.code),
+        info: item.label
+      };
+    }) || [], {
+      onCreate: onCreate,
+      createBtnText: createBtnText
+    })]);
+  }, [variables]);
+  useEffect(function () {
+    setReady(true);
+    return function () {
+      setReady(false);
+    };
+  }, []);
+  if (!ready) return null;
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.root,
+    children: [/*#__PURE__*/_jsx(CodeMirror, {
+      className: classNames(styles.cm, _defineProperty({}, styles.onCreate, onCreate)),
+      extensions: extensions,
+      value: props.value,
+      theme: getTheme,
+      lang: "markdown",
+      onChange: props.onChange,
+      basicSetup: {
+        lineNumbers: false,
+        foldGutter: false,
+        highlightActiveLine: false
+      }
+    }, getTheme), /*#__PURE__*/_jsxs("div", {
+      className: styles.footer,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.tips,
+        children: ["\u8F93\u5165\"/\"\u5F15\u7528\u53D8\u91CF\uFF0C\u652F\u6301 ", /*#__PURE__*/_jsx(SparkEnterLine, {
+          size: 16
+        }), " \u56DE\u8F66\u65B0\u589E"]
+      }), props.maxLength ? /*#__PURE__*/_jsxs("div", {
+        children: [props.value.length, "/", props.maxLength]
+      }) : null]
+    })]
+  });
+};
+export default CodeMirrorWrapper;

package/lib/components/commonComponents/Tag/demo/demo2.js

@@ -3,7 +3,6 @@ import { SparkEffciencyLine } from '@agentscope-ai/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default (function () {
   return /*#__PURE__*/_jsx(Tag, {
-    color: "mauve",
     icon: /*#__PURE__*/_jsx(SparkEffciencyLine, {
       style: {
         fontSize: '20px'

package/lib/components/commonComponents/Tag/demo/demo3.js

@@ -9,7 +9,6 @@ export default (function () {
     align: "center",
     gap: 16,
     children: [/*#__PURE__*/_jsx(Tag, {
-      color: "mauve",
       closeIcon: /*#__PURE__*/_jsx(SparkFalseLine, {
         style: {
           fontSize: '20px'
@@ -17,7 +16,6 @@ export default (function () {
       }),
       children: "Tag MD"
     }), /*#__PURE__*/_jsx(Tag, {
-      color: "mauve",
       icon: /*#__PURE__*/_jsx(SparkEffciencyLine, {
         style: {
           fontSize: '20px'

package/lib/components/commonComponents/Tag/index.js

@@ -19,7 +19,7 @@ var SparkTag = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$bordered = props.bordered,
     bordered = _props$bordered === void 0 ? false : _props$bordered,
     _props$color = props.color,
-    color = _props$color === void 0 ? 'purple' : _props$color,
+    color = _props$color === void 0 ? 'mauve' : _props$color,
     _props$size = props.size,
     size = _props$size === void 0 ? 'middle' : _props$size,
     restProps = _objectWithoutProperties(props, _excluded);

package/lib/components/commonComponents/Tooltip/index.js

@@ -32,9 +32,6 @@ var SparkTooltip = /*#__PURE__*/forwardRef(function (props, ref) {
     getPopupContainer: getPopupContainer || function (triggerNode) {
       return findClosestBySelector(triggerNode, ".".concat(antPrefix, "-app")); // 默认放到App组件下，获取自定义css变量
     },
-    align: align || {
-      offset: [0, -12]
-    },
     ref: ref
   }));
 });

package/lib/index.d.ts

@@ -30,6 +30,7 @@ export { default as notification } from './components/commonComponents/Notificat
 export { default as Pagination, type SparkPaginationProps as PaginationProps, } from './components/commonComponents/Pagination';
 export { default as Popconfirm, type SparkPopconfirmProps as PopconfirmProps, } from './components/commonComponents/Popconfirm';
 export { default as Popover } from './components/commonComponents/Popover';
+export { default as PromptsEditor, type PromptsEditorProps, } from './components/commonComponents/PromptsEditor';
 export { default as RadioButton, type SparkRadioButtonProps as RadioButtonProps, } from './components/commonComponents/RadioButton';
 export { default as Result, type SparkResultProps, } from './components/commonComponents/Result';
 export { default as Steps } from './components/commonComponents/Steps';

package/lib/index.js

@@ -1,3 +1,7 @@
+import bailianDarkThemeJson from "./antd/themes/bailianDarkTheme.json";
+import bailianThemeJson from "./antd/themes/bailianTheme.json";
+import carbonDarkThemeJson from "./antd/themes/carbonDarkTheme.json";
+import carbonThemeJson from "./antd/themes/carbonTheme.json";
 import generateThemeByToken from "./antd/themes/generateThemeByToken";
 
 /**
@@ -31,6 +35,7 @@ export { default as notification } from "./components/commonComponents/Notificat
 export { default as Pagination } from "./components/commonComponents/Pagination";
 export { default as Popconfirm } from "./components/commonComponents/Popconfirm";
 export { default as Popover } from "./components/commonComponents/Popover";
+export { default as PromptsEditor } from "./components/commonComponents/PromptsEditor";
 export { default as RadioButton } from "./components/commonComponents/RadioButton";
 export { default as Result } from "./components/commonComponents/Result";
 export { default as Steps } from "./components/commonComponents/Steps";
@@ -75,9 +80,9 @@ export { base64Decoder, base64Encoder, parseJsonSafely } from "./libs/string";
 /**
  * 主题
  */
-var bailianTheme = generateThemeByToken(require("./antd/themes/bailianTheme.json"));
-var bailianDarkTheme = generateThemeByToken(require("./antd/themes/bailianDarkTheme.json"), true);
-var carbonTheme = generateThemeByToken(require("./antd/themes/carbonTheme.json"));
-var carbonDarkTheme = generateThemeByToken(require("./antd/themes/carbonDarkTheme.json"), true);
+var bailianTheme = generateThemeByToken(bailianThemeJson);
+var bailianDarkTheme = generateThemeByToken(bailianDarkThemeJson, true);
+var carbonTheme = generateThemeByToken(carbonThemeJson);
+var carbonDarkTheme = generateThemeByToken(carbonDarkThemeJson, true);
 export { FileCard, default as FileIcon } from "./components/commonComponents/FileIcon";
 export { bailianDarkTheme, bailianTheme, carbonDarkTheme, carbonTheme, generateThemeByToken, bailianDarkTheme as purpleDarkTheme, bailianTheme as purpleTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/design",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Basic components for the best experience of LLM",
   "license": "MIT",
   "sideEffects": [
@@ -33,7 +33,7 @@
     "lint:css": "stylelint --fix \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint --fix \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
     "prepare": "husky install && dumi setup",
-    "prepublishOnly": "father doctor && npm run build",
+    "prepublishOnly": "npm run build",
     "prettier": "prettier --write src/",
     "start": "npm run dev",
     "test": "vitest"
@@ -61,7 +61,8 @@
     ]
   },
   "dependencies": {
-    "@agentscope-ai/icons": "^1.0.17",
+    "@agentscope-ai/icons": "^1.0.19",
+    "@codemirror/autocomplete": "^6.18.7",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-go": "^6.0.1",
@@ -69,15 +70,18 @@
     "@codemirror/lang-java": "^6.0.1",
     "@codemirror/lang-javascript": "^6.2.3",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.3.4",
     "@codemirror/lang-php": "^6.0.1",
     "@codemirror/lang-python": "^6.1.7",
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/lint": "^6.8.4",
     "@emotion/react": "^11.14.0",
     "@agentscope-ai/icons-override-antd": "6.0.0",
+    "@uiw/codemirror-extensions-mentions": "^4.25.1",
     "@uiw/codemirror-theme-vscode": "^4.23.7",
     "@uiw/react-codemirror": "4.20.2",
     "ahooks": "^3.7.8",
+    "antd-style": "^3.7.1",
     "dayjs": "^1.11.7",
     "dompurify": "^2.3.8",
     "js-cookie": "^3.0.5",
@@ -92,11 +96,9 @@
     "@ali/alimefe-yuque": "^0.2.4",
     "@ali/dumi-plugin-api-parser": "^1.0.3",
     "@ali/dumi-plugin-llms": "1.0.3",
-    "@ali/dumi-theme-spark": "^0.0.82",
-    "@modelcontextprotocol/sdk": "1.17.3",
-    "zod": "^3.24.2",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
+    "@modelcontextprotocol/sdk": "1.17.3",
     "@rc-component/util": "1.2.1",
     "@react-spring/web": "^9.7.5",
     "@tailwindcss/postcss": "^4.0.6",
@@ -145,7 +147,8 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3",
     "vitest": "^2.1.4",
-    "yargs-parser": "^21.1.1"
+    "yargs-parser": "^21.1.1",
+    "zod": "^3.24.2"
   },
   "peerDependencies": {
     "@rc-component/util": "1.2.1",