@lobehub/ui 1.43.0 → 1.45.0

package/es/ChatHeader/style.d.ts

@@ -1,3 +1,3 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    container: import("antd-style").SerializedStyles;
+    container: string;
 }>;

package/es/ChatHeader/style.js

@@ -1,10 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    stylish = _ref.stylish,
+    cx = _ref.cx;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      grid-area: header;\n      height: 64px;\n      border-bottom: 1px solid ", ";\n    "])), token.colorSplit)
+    container: cx(stylish.blurStrong, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n\n        grid-area: header;\n        align-self: stretch;\n\n        width: 100%;\n        height: 64px;\n\n        background: linear-gradient(\n          to bottom,\n          ", ",\n          ", "\n        );\n        border-bottom: 1px solid ", ";\n      "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4), token.colorSplit))
   };
 });

package/es/ChatInputArea/InputHighlight.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface InputHighlightProps {
+    target: string;
+    value: string;
+}
+declare const InputHighlight: import("react").NamedExoticComponent<InputHighlightProps>;
+export default InputHighlight;

package/es/ChatInputArea/InputHighlight.js

@@ -0,0 +1,32 @@
+import { useScroll, useSize } from 'ahooks';
+import { memo, useEffect, useRef } from 'react';
+import { SyntaxHighlighter } from "../Highlighter";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var InputHighlight = /*#__PURE__*/memo(function (_ref) {
+  var value = _ref.value,
+    target = _ref.target;
+  var ref = useRef(null);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var nativeTextarea = document.querySelector("#".concat(target));
+  var size = useSize(nativeTextarea);
+  var scroll = useScroll(nativeTextarea);
+  useEffect(function () {
+    ref.current.scroll(0, (scroll === null || scroll === void 0 ? void 0 : scroll.top) || 0);
+  }, [scroll === null || scroll === void 0 ? void 0 : scroll.top]);
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.highlight,
+    "data-code-type": "highlighter",
+    ref: ref,
+    style: {
+      height: size === null || size === void 0 ? void 0 : size.height,
+      width: size === null || size === void 0 ? void 0 : size.width
+    },
+    children: /*#__PURE__*/_jsx(SyntaxHighlighter, {
+      language: "markdown",
+      children: value.trim()
+    })
+  });
+});
+export default InputHighlight;

package/es/ChatInputArea/index.d.ts

@@ -62,6 +62,9 @@ export interface ChatInputAreaProps extends TextAreaProps {
      * @description CSS styles for the component
      */
     style?: CSSProperties;
+    text?: {
+        send?: string;
+    };
     /**
      * @description Additional class name for the textarea element
      */

package/es/ChatInputArea/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange"];
+var _excluded = ["text", "textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Button } from 'antd';
@@ -9,11 +9,13 @@ import { Maximize2, Minimize2 } from 'lucide-react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import { TextArea } from "../Input";
+import InputHighlight from "./InputHighlight";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var textareaClassName = _ref.textareaClassName,
+  var text = _ref.text,
+    textareaClassName = _ref.textareaClassName,
     style = _ref.style,
     textareaStyle = _ref.textareaStyle,
     _ref$minHeight = _ref.minHeight,
@@ -73,47 +75,54 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
           onClick: handleExpandClick
         })
       })]
-    }), /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({
-      className: cx(styles.textarea, textareaClassName),
-      defaultValue: defaultValue,
-      ref: ref,
-      style: textareaStyle
-    }, props), {}, {
-      onBlur: function onBlur(e) {
-        if (_onBlur) _onBlur(e);
-        setValue(e.target.value);
-      },
-      onChange: function onChange(e) {
-        if (_onChange) _onChange(e);
-        setValue(e.target.value);
-      },
-      onCompositionEnd: function onCompositionEnd(e) {
-        if (_onCompositionEnd) _onCompositionEnd(e);
-        isChineseInput.current = false;
-      },
-      onCompositionStart: function onCompositionStart(e) {
-        if (_onCompositionStart) _onCompositionStart(e);
-        isChineseInput.current = true;
-      },
-      onPressEnter: function onPressEnter(e) {
-        if (_onPressEnter) _onPressEnter(e);
-        if (!loading && !e.shiftKey && !isChineseInput.current) {
-          e.preventDefault();
-          handleSend();
-        }
-      },
-      placeholder: placeholder,
-      resize: false,
-      type: "pure",
-      value: value
-    })), /*#__PURE__*/_jsxs("div", {
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.textareaContainer,
+      children: [/*#__PURE__*/_jsx(InputHighlight, {
+        target: 'lobe-chat-input-area',
+        value: value
+      }), /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({
+        className: cx(styles.textarea, textareaClassName),
+        defaultValue: defaultValue,
+        id: 'lobe-chat-input-area',
+        ref: ref,
+        style: textareaStyle
+      }, props), {}, {
+        onBlur: function onBlur(e) {
+          if (_onBlur) _onBlur(e);
+          setValue(e.target.value);
+        },
+        onChange: function onChange(e) {
+          if (_onChange) _onChange(e);
+          setValue(e.target.value);
+        },
+        onCompositionEnd: function onCompositionEnd(e) {
+          if (_onCompositionEnd) _onCompositionEnd(e);
+          isChineseInput.current = false;
+        },
+        onCompositionStart: function onCompositionStart(e) {
+          if (_onCompositionStart) _onCompositionStart(e);
+          isChineseInput.current = true;
+        },
+        onPressEnter: function onPressEnter(e) {
+          if (_onPressEnter) _onPressEnter(e);
+          if (!loading && !e.shiftKey && !isChineseInput.current) {
+            e.preventDefault();
+            handleSend();
+          }
+        },
+        placeholder: placeholder,
+        resize: false,
+        type: "pure",
+        value: value
+      }))]
+    }), /*#__PURE__*/_jsxs("div", {
       className: styles.footerBar,
       children: [footer, /*#__PURE__*/_jsx(Button, {
         disabled: disabled,
         loading: loading,
         onClick: handleSend,
         type: "primary",
-        children: "Send"
+        children: (text === null || text === void 0 ? void 0 : text.send) || 'Send'
       })]
     })]
   });

package/es/ChatInputArea/style.d.ts

@@ -4,5 +4,7 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     actionsRight: import("antd-style").SerializedStyles;
     container: import("antd-style").SerializedStyles;
     footerBar: import("antd-style").SerializedStyles;
+    highlight: import("antd-style").SerializedStyles;
     textarea: import("antd-style").SerializedStyles;
+    textareaContainer: import("antd-style").SerializedStyles;
 }>;

package/es/ChatInputArea/style.js

@@ -1,14 +1,17 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css;
+  var css = _ref.css,
+    token = _ref.token;
   return {
     actionLeft: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      flex: 1;\n      gap: 4px;\n      align-items: center;\n      justify-content: flex-start;\n    "]))),
     actionsBar: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: space-between;\n\n      padding: 0 16px;\n    "]))),
     actionsRight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: 0;\n      gap: 4px;\n      align-items: center;\n      justify-content: flex-end;\n    "]))),
     container: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n\n      height: 100%;\n      padding: 12px 0 16px;\n    "]))),
     footerBar: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: none;\n      gap: 8px;\n      align-items: center;\n      justify-content: flex-end;\n\n      padding: 0 24px;\n    "]))),
-    textarea: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      flex: 1;\n      padding: 0 24px;\n    "])))
+    highlight: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      inset: 0;\n\n      overflow-x: hidden;\n      overflow-y: auto;\n\n      padding: 0 24px;\n\n      .shiki {\n        margin: 0;\n      }\n\n      pre {\n        font-family: ", " !important;\n        line-height: 1.5;\n        color: ", ";\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n    "])), token.fontFamilyCode, token.colorSuccess),
+    textarea: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      height: 100% !important;\n      padding: 0 24px;\n\n      font-family: ", " !important;\n      line-height: 1.5;\n      color: transparent;\n\n      caret-color: ", ";\n    "])), token.fontFamilyCode, token.colorText),
+    textareaContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: 1;\n    "])))
   };
 });

package/es/ChatItem/style.js

@@ -1,17 +1,19 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
   var placement = _ref2.placement,
     type = _ref2.type,
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
     showTitle = _ref2.showTitle;
-  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut);
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFillSecondary : rgba(token.colorPrimary, 0.08) : isDarkMode ? token.colorFillTertiary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;

package/es/CodeEditor/index.d.ts

@@ -27,7 +27,6 @@ export interface CodeEditorProps {
     tabSize?: number;
     textareaClassName?: string;
     textareaId?: string;
-    theme?: SyntaxHighlighterProps['theme'];
     type?: 'ghost' | 'block' | 'pure';
     value: string;
 }

package/es/CodeEditor/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "language", "theme", "value", "onValueChange", "resize", "className", "textareaClassName", "type"];
+var _excluded = ["style", "language", "value", "onValueChange", "resize", "className", "textareaClassName", "type"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { forwardRef } from 'react';
@@ -11,7 +11,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var CodeEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var style = _ref.style,
     language = _ref.language,
-    theme = _ref.theme,
     value = _ref.value,
     onValueChange = _ref.onValueChange,
     _ref$resize = _ref.resize,
@@ -35,7 +34,6 @@ var CodeEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       highlight: function highlight(code) {
         return /*#__PURE__*/_jsx(SyntaxHighlighter, {
           language: language,
-          theme: theme,
           children: code
         });
       },

package/es/CodeEditor/style.js

@@ -4,14 +4,13 @@ import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
-    token = _ref.token,
-    isDarkMode = _ref.isDarkMode;
+    token = _ref.token;
   var type = _ref2.type,
     resize = _ref2.resize;
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n\n      transition:\n        background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorderSecondary, token.borderRadius, token.motionEaseOut, token.motionEaseOut, type === 'block' ? token.colorFillSecondary : token.colorFillQuaternary, token.colorBorder);
   return {
-    container: cx(type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          overflow-x: hidden;\n          overflow-y: auto;\n          height: fit-content;\n        "])))),
-    editor: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        resize: ", ";\n        height: fit-content;\n        font-family: ", " !important;\n\n        pre {\n          word-wrap: break-word;\n          white-space: pre-wrap;\n\n          &.shiki {\n            margin: 0;\n          }\n        }\n      "])), resize ? 'vertical' : 'none', token.fontFamilyCode),
-    textarea: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow-x: hidden;\n        overflow-y: auto;\n        height: 100% !important;\n\n        &::placeholder {\n          color: ", ";\n        }\n\n        &::selection {\n          color: #000;\n          background: ", ";\n        }\n\n        &:focus {\n          border: none !important;\n          outline: none !important;\n          box-shadow: none !important;\n        }\n      "])), token.colorTextQuaternary, isDarkMode ? token.yellow3A : token.yellow6A)
+    container: cx(type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          overflow-x: hidden;\n          overflow-y: auto;\n          width: 100%;\n          height: fit-content;\n        "])))),
+    editor: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        resize: ", ";\n        height: fit-content;\n        min-height: 100%;\n        font-family: ", " !important;\n\n        textarea {\n          min-height: 36px !important;\n        }\n\n        pre {\n          min-height: 36px !important;\n          word-wrap: break-word;\n          white-space: pre-wrap;\n\n          &.shiki {\n            margin: 0;\n          }\n        }\n      "])), resize ? 'vertical' : 'none', token.fontFamilyCode),
+    textarea: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow-x: hidden;\n        overflow-y: auto;\n\n        height: 100% !important;\n\n        color: transparent !important;\n\n        caret-color: ", ";\n\n        -webkit-text-fill-color: unset !important;\n\n        &::placeholder {\n          color: ", ";\n        }\n\n        &:focus {\n          border: none !important;\n          outline: none !important;\n          box-shadow: none !important;\n        }\n      "])), token.colorText, token.colorTextQuaternary)
   };
 });

package/es/DraggablePanel/index.d.ts

@@ -40,6 +40,7 @@ export interface DraggablePanelProps extends DivProps {
      * @type CSSProperties
      */
     hanlderStyle?: CSSProperties;
+    headerHeight?: number;
     maxHeight?: number;
     maxWidth?: number;
     /**

package/es/DraggablePanel/index.js

@@ -15,7 +15,9 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_HEIGHT = 180;
 var DEFAULT_WIDTH = 280;
 var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
-  var fullscreen = _ref.fullscreen,
+  var _ref$headerHeight = _ref.headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 0 : _ref$headerHeight,
+    fullscreen = _ref.fullscreen,
     maxHeight = _ref.maxHeight,
     _ref$pin = _ref.pin,
     pin = _ref$pin === void 0 ? 'true' : _ref$pin,
@@ -48,7 +50,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   var reference = useRef();
   var isHovering = useHover(reference);
   var isVertical = placement === 'top' || placement === 'bottom';
-  var _useStyles = useStyles(),
+  var _useStyles = useStyles(headerHeight),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var _useControlledState = useControlledState(defaultExpand, {

package/es/DraggablePanel/style.d.ts

@@ -1,4 +1,4 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
     bottomFloat: string;
     bottomHandle: string;
     container: string;

package/es/DraggablePanel/style.js

@@ -5,7 +5,7 @@ var offset = 16;
 var toggleLength = 40;
 var toggleShort = 16;
 var prefix = 'draggable-panel';
-export var useStyles = createStyles(function (_ref) {
+export var useStyles = createStyles(function (_ref, headerHeight) {
   var token = _ref.token;
   var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      z-index: 50;\n      transition: all 0.2s ", ";\n    }\n\n    &:hover,\n    &:active {\n      &::before {\n        background: ", " !important;\n      }\n    }\n  "])), token.motionEaseOut, token.colorPrimary);
   var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 101;\n    opacity: 0;\n    transition: all 0.2s ", ";\n\n    &:hover {\n      opacity: 1 !important;\n    }\n\n    &:active {\n      opacity: 1 !important;\n    }\n\n    > div {\n      cursor: pointer;\n\n      position: absolute;\n\n      color: ", ";\n\n      background: ", ";\n      border-color: ", ";\n      border-style: solid;\n      border-width: 1px;\n      border-radius: 4px;\n\n      transition: all 0.2s ", ";\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n    }\n  "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
@@ -15,18 +15,18 @@ export var useStyles = createStyles(function (_ref) {
     bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          bottom: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      "])), commonHandle)),
     container: cx(prefix, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        flex-shrink: 0;\n        border: 0 solid ", ";\n\n        &:hover {\n          .", "-toggle {\n            opacity: 1;\n          }\n        }\n      "])), token.colorBorderSecondary, prefix)),
     fixed: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: relative;\n    "]))),
-    fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n    "]))),
+    fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: absolute;\n      inset: ", "px 0 0 0;\n\n      width: 100%;\n      height: calc(100% - ", "px);\n\n      background: ", ";\n    "])), headerHeight, headerHeight, token.colorBgLayout),
     handlerIcon: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ", ";\n    "])), token.motionEaseOut),
-    leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        top: 0;\n        bottom: 0;\n        left: 0;\n        height: 100%;\n      "])))),
+    leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        top: ", "px;\n        bottom: 0;\n        left: 0;\n        height: calc(100% - ", "px);\n      "])), headerHeight, headerHeight)),
     leftHandle: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          left: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-left-handle")),
     panel: cx("".concat(prefix, "-fixed"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        transition: all 0.2s ", ";\n      "])), token.motionEaseOut)),
-    rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        top: 0;\n        right: 0;\n        bottom: 0;\n        height: 100%;\n      "])))),
+    rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        top: ", "px;\n        right: 0;\n        bottom: 0;\n        height: calc(100% - ", "px);\n      "])), headerHeight, headerHeight)),
     rightHandle: cx(css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        ", ";\n        &::before {\n          right: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-right-handle")),
     toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        bottom: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: 16px;\n          margin-left: -20px;\n\n          border-radius: 0 0 4px 4px;\n        }\n      "])), offset, toggleShort, toggleLength)),
     toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        left: -", "px;\n        width: ", "px;\n        height: 100%;\n\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 4px 0 0 4px;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
     toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        right: -", "px;\n        width: ", "px;\n        height: 100%;\n\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 0 4px 4px 0;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
     toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        top: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-left: -20px;\n\n          border-radius: 4px 4px 0 0;\n        }\n      "])), offset, toggleShort, toggleLength, toggleShort)),
-    topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n        top: 0;\n        right: 0;\n        left: 0;\n        width: 100%;\n      "])))),
+    topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n        top: ", "px;\n        right: 0;\n        left: 0;\n        width: 100%;\n      "])), headerHeight)),
     topHandle: cx("".concat(prefix, "-top-handle"), css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          top: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      "])), commonHandle))
   };
 });

package/es/EditableMessage/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 export interface EditableMessageProps {
     /**
      * @title The class name for the Markdown and MessageInput component
@@ -38,11 +38,22 @@ export interface EditableMessageProps {
      * @default false
      */
     openModal?: boolean;
+    placeholder?: string;
     /**
      * @title Whether to show the edit button when the text value is empty
      * @default false
      */
     showEditWhenEmpty?: boolean;
+    style?: {
+        /**
+         * @title The style for the MessageInput component
+         */
+        input?: CSSProperties;
+        /**
+         * @title The style for the Markdown component
+         */
+        markdown?: CSSProperties;
+    };
     /**
      * @title The current text value
      */

package/es/EditableMessage/index.js

@@ -16,8 +16,11 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     editing = _ref.editing,
     openModal = _ref.openModal,
     onOpenChange = _ref.onOpenChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Type something...' : _ref$placeholder,
     _ref$showEditWhenEmpt = _ref.showEditWhenEmpty,
-    showEditWhenEmpty = _ref$showEditWhenEmpt === void 0 ? false : _ref$showEditWhenEmpt;
+    showEditWhenEmpty = _ref$showEditWhenEmpt === void 0 ? false : _ref$showEditWhenEmpt,
+    style = _ref.style;
   var _useControlledState = useControlledState(false, {
       onChange: onEditingChange,
       value: editing
@@ -33,11 +36,17 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     expand = _useControlledState4[0],
     setExpand = _useControlledState4[1];
   return !value && showEditWhenEmpty ? /*#__PURE__*/_jsx(MessageInput, {
-    className: classNames.input,
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
+    defaultValue: value,
+    onCancel: function onCancel() {
+      return setTyping(false);
+    },
     onConfirm: function onConfirm(text) {
       _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
       setTyping(false);
-    }
+    },
+    placeholder: placeholder,
+    style: style === null || style === void 0 ? void 0 : style.input
   }) : /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(MessageModal, {
       editing: isEdit,
@@ -49,7 +58,7 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
       open: expand,
       value: value
     }), !expand && isEdit ? /*#__PURE__*/_jsx(MessageInput, {
-      className: classNames.input,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
       defaultValue: value,
       onCancel: function onCancel() {
         return setTyping(false);
@@ -57,9 +66,12 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
       onConfirm: function onConfirm(text) {
         _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
         setTyping(false);
-      }
+      },
+      placeholder: placeholder,
+      style: style === null || style === void 0 ? void 0 : style.input
     }) : /*#__PURE__*/_jsx(Markdown, {
-      className: classNames.markdown,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
+      style: style === null || style === void 0 ? void 0 : style.markdown,
       children: value
     })]
   });

package/es/GradientButton/index.d.ts

@@ -1,11 +1,5 @@
 /// <reference types="react" />
-import { ButtonProps } from 'antd';
-export interface GradientButtonProps extends ButtonProps {
-    /**
-     * @description Whether the button should spin or not
-     * @default false
-     */
-    spin?: boolean;
-}
-declare const GradientButton: import("react").NamedExoticComponent<GradientButtonProps>;
+import { type ButtonProps } from 'antd';
+export declare type GradientButtonProps = ButtonProps;
+declare const GradientButton: import("react").NamedExoticComponent<ButtonProps>;
 export default GradientButton;

package/es/Highlighter/SyntaxHighlighter/index.d.ts

@@ -4,7 +4,6 @@ export interface SyntaxHighlighterProps {
     children: string;
     language: string;
     options?: HighlighterOptions;
-    theme?: 'dark' | 'light';
 }
 declare const SyntaxHighlighter: import("react").NamedExoticComponent<SyntaxHighlighterProps>;
 export default SyntaxHighlighter;

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -28,13 +28,8 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
     useHighlight.getState().initHighlighter(options);
   }, [options]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [isLoading ? /*#__PURE__*/_jsx("div", {
-      className: styles.shiki,
-      children: /*#__PURE__*/_jsx("pre", {
-        children: /*#__PURE__*/_jsx("code", {
-          children: children
-        })
-      })
+    children: [isLoading ? /*#__PURE__*/_jsx("code", {
+      children: children
     }) : /*#__PURE__*/_jsx("div", {
       className: styles.shiki,
       dangerouslySetInnerHTML: {

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -11,6 +11,6 @@ export var useStyles = createStyles(function (_ref) {
   return {
     loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n        top: 0;\n        right: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        height: 34px;\n        padding: 0 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius)),
     prism: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        overflow: auto;\n        font-family: ", " !important;\n      }\n    "])), token.fontFamilyCode),
-    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .shiki {\n          overflow-x: auto;\n          background: none !important;\n        }\n      "]))))
+    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin: 0;\n        padding: 0;\n\n        .shiki {\n          overflow-x: auto;\n          margin: 0;\n          padding: 0;\n          background: none !important;\n        }\n      "]))))
   };
 });

package/es/Highlighter/index.d.ts

@@ -24,11 +24,6 @@ export interface HighlighterProps extends DivProps {
      * @default false
      */
     spotlight?: boolean;
-    /**
-     * @description The theme of the code block
-     * @default 'light'
-     */
-    theme?: 'dark' | 'light';
     /**
      * @description The type of the code block
      * @default 'block'

package/es/Highlighter/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "language", "className", "style", "theme", "copyable", "showLanguage", "type", "spotlight"];
+var _excluded = ["children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { memo } from 'react';
@@ -15,7 +15,6 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     language = _ref.language,
     className = _ref.className,
     style = _ref.style,
-    theme = _ref.theme,
     _ref$copyable = _ref.copyable,
     copyable = _ref$copyable === void 0 ? true : _ref$copyable,
     _ref$showLanguage = _ref.showLanguage,
@@ -44,7 +43,6 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
       children: language.toLowerCase()
     }), /*#__PURE__*/_jsx(SyntaxHighlighter, {
       language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
-      theme: theme,
       children: children.trim()
     })]
   }));

package/es/Highlighter/theme.js

@@ -2,7 +2,7 @@ import { colorScales } from "../styles/colors";
 export var themeConfig = function themeConfig(isDarkMode) {
   var type = isDarkMode ? 'dark' : 'light';
   var colorText = colorScales.gray[type][11];
-  var colorTextSecondary = colorScales.gray[type][10];
+  // const colorTextSecondary = colorScales.gray[type][10];
   var colorTextTertiary = colorScales.gray[type][7];
   var colorRed = isDarkMode ? colorScales.red[type][9] : colorScales.volcano[type][9];
   var colorOrange = isDarkMode ? colorScales.gold[type][9] : colorScales.orange[type][9];
@@ -10,7 +10,7 @@ export var themeConfig = function themeConfig(isDarkMode) {
   var colorBlue = isDarkMode ? colorScales.blue[type][9] : colorScales.geekblue[type][9];
   return {
     colors: {
-      'editor.foreground': colorTextSecondary
+      'editor.foreground': colorText
     },
     name: type,
     semanticHighlighting: true,
@@ -724,7 +724,13 @@ export var themeConfig = function themeConfig(isDarkMode) {
       name: 'Headings',
       scope: 'markup.heading',
       settings: {
-        foreground: colorText
+        fontStyle: 'bold'
+      }
+    }, {
+      name: 'FencedCode',
+      scope: 'punctuation.definition.markdown, fenced_code.block.language.markdown',
+      settings: {
+        foreground: colorRed
       }
     }, {
       name: 'Headings',

package/es/Markdown/CodeBlock.js

@@ -10,8 +10,7 @@ var useStyles = createStyles(function (_ref) {
 });
 var Code = /*#__PURE__*/memo(function (properties) {
   var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
+    styles = _useStyles.styles;
   if (!properties.children[0]) return;
   var _properties$children$ = properties.children[0].props,
     children = _properties$children$.children,
@@ -20,7 +19,6 @@ var Code = /*#__PURE__*/memo(function (properties) {
   return /*#__PURE__*/_jsx(Highlighter, {
     className: styles,
     language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
-    theme: theme.appearance,
     type: "block",
     children: Array.isArray(children) ? children[0] : children
   });

package/es/Markdown/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 export interface MarkdownProps {
     /**
      * @description The markdown content to be rendered
@@ -8,6 +8,7 @@ export interface MarkdownProps {
      * @description The class name for the Markdown component
      */
     className?: string;
+    style?: CSSProperties;
 }
 declare const Markdown: import("react").NamedExoticComponent<MarkdownProps>;
 export default Markdown;

package/es/Markdown/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className"];
+var _excluded = ["children", "className", "style"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Collapse, Divider, Typography } from 'antd';
@@ -15,10 +15,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var Markdown = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     className = _ref.className,
+    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
+    styles = _useStyles.styles;
   var components = {
     a: Typography.Link,
     code: Code,
@@ -27,8 +27,10 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     pre: CodeBlock
   };
   return /*#__PURE__*/_jsx(Typography, {
+    className: className,
+    style: style,
     children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
-      className: cx(styles.markdown, className),
+      className: styles.markdown,
       components: components,
       remarkPlugins: [remarkGfm]
     }, props), {}, {

package/es/MessageInput/index.d.ts

@@ -26,6 +26,10 @@ export interface MessageInputProps extends DivProps {
      * @param text - The text input by the user.
      */
     renderButtons?: (text: string) => ButtonProps[];
+    text?: {
+        cancel?: string;
+        confirm?: string;
+    };
     textareaClassname?: string;
     textareaStyle?: CSSProperties;
     /**

package/es/MessageInput/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height"];
+var _excluded = ["text", "type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Button } from 'antd';
@@ -12,7 +12,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MessageInput = /*#__PURE__*/memo(function (_ref) {
-  var _ref$type = _ref.type,
+  var text = _ref.text,
+    _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'pure' : _ref$type,
     onCancel = _ref.onCancel,
     defaultValue = _ref.defaultValue,
@@ -30,7 +31,11 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
     temporarySystemRole = _useState2[0],
     setRole = _useState2[1];
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
-    gap: 8
+    gap: 8,
+    style: {
+      flex: 1,
+      width: '100%'
+    }
   }, props), {}, {
     children: [/*#__PURE__*/_jsx(CodeEditor, {
       className: textareaClassname,
@@ -41,7 +46,8 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
       placeholder: placeholder,
       resize: false,
       style: _objectSpread({
-        height: height
+        height: height,
+        minHeight: '100%'
       }, textareaStyle),
       type: type,
       value: temporarySystemRole
@@ -59,11 +65,11 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
           },
           size: "small",
           type: "primary",
-          children: "Confirm"
+          children: (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onCancel,
           size: "small",
-          children: "Cancel"
+          children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
         })]
       })
     })]

package/es/styles/algorithms/generateCustomStylish.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { keyframes } from 'antd-style';
 export var generateCustomStylish = function generateCustomStylish(_ref) {
   var css = _ref.css,
@@ -8,10 +8,11 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
   var gradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  "])));
   return {
     blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
-    bottomScrollbar: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
-    gradientAnimation: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
-    markdown: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
-    noScrollbar: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
-    resetLinkColor: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
+    blurStrong: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      backdrop-filter: blur(36px);\n    "]))),
+    bottomScrollbar: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
+    gradientAnimation: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
+    markdown: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
+    noScrollbar: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
+    resetLinkColor: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
   };
 };

package/es/types/customStylish.d.ts

@@ -1,5 +1,6 @@
 export interface LobeCustomStylish {
     blur: string;
+    blurStrong: string;
     bottomScrollbar: string;
     gradientAnimation: string;
     markdown: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.43.0",
+  "version": "1.45.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",