@lobehub/ui 1.116.3 → 1.118.0

package/es/ActionIcon/calcSize.d.ts

@@ -0,0 +1,5 @@
+import { ActionIconSize } from "./index";
+export declare const calcSize: (size?: ActionIconSize) => {
+    blockSize: number;
+    borderRadius: number;
+};

package/es/ActionIcon/calcSize.js

@@ -0,0 +1,40 @@
+export var calcSize = function calcSize(size) {
+  var blockSize;
+  var borderRadius;
+  switch (size) {
+    case 'large':
+      {
+        blockSize = 44;
+        borderRadius = 8;
+        break;
+      }
+    case 'normal':
+      {
+        blockSize = 36;
+        borderRadius = 5;
+        break;
+      }
+    case 'small':
+      {
+        blockSize = 24;
+        borderRadius = 5;
+        break;
+      }
+    case 'site':
+      {
+        blockSize = 34;
+        borderRadius = 5;
+        break;
+      }
+    default:
+      {
+        blockSize = (size === null || size === void 0 ? void 0 : size.blockSize) || 36;
+        borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
+        break;
+      }
+  }
+  return {
+    blockSize: blockSize,
+    borderRadius: borderRadius
+  };
+};

package/es/ActionIcon/index.d.ts

@@ -1,14 +1,13 @@
 /// <reference types="react" />
-import { type IconProps } from "../Icon";
-import { type TooltipProps } from "../Tooltip";
-import { DivProps } from "../types";
-export type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
+import { type IconProps, type IconSizeConfig, type IconSizeType } from "../Icon";
+import type { TooltipProps } from "../Tooltip";
+interface ActionIconSizeConfig extends IconSizeConfig {
     blockSize?: number;
     borderRadius?: number;
-    fontSize?: number;
-    strokeWidth?: number;
-};
-export interface ActionIconProps extends DivProps {
+}
+type ActionIconSizeType = 'site' | IconSizeType;
+export type ActionIconSize = ActionIconSizeType | ActionIconSizeConfig;
+export interface ActionIconProps extends Omit<IconProps, 'size' | 'icon'> {
     /**
      * @description Whether the icon is active or not
      * @default false
@@ -19,17 +18,11 @@ export interface ActionIconProps extends DivProps {
      * @default false
      */
     arrow?: boolean;
-    color?: IconProps['color'];
-    fill?: IconProps['fill'];
     /**
      * @description Glass blur style
      * @default 'false'
      */
     glass?: boolean;
-    /**
-     * @description The icon element to be rendered
-     * @type LucideIcon
-     */
     icon?: IconProps['icon'];
     /**
      * @description Set the loading status of ActionIcon

package/es/ActionIcon/index.js

@@ -1,57 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["color", "fill", "className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "tooltipDelay"];
+var _excluded = ["color", "fill", "className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "tooltipDelay", "fillOpacity", "fillRule", "focusable"];
 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; }
 import { Loader2 } from 'lucide-react';
-import { forwardRef, useMemo } from 'react';
+import { Suspense, forwardRef, lazy, useMemo } from 'react';
 import Icon from "../Icon";
-import Spotlight from "../Spotlight";
-import Tooltip from "../Tooltip";
+import { calcSize } from "./calcSize";
 import { useStyles } from "./style";
 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 calcSize = function calcSize(size) {
-  var blockSize;
-  var borderRadius;
-  switch (size) {
-    case 'large':
-      {
-        blockSize = 44;
-        borderRadius = 8;
-        break;
-      }
-    case 'normal':
-      {
-        blockSize = 36;
-        borderRadius = 5;
-        break;
-      }
-    case 'small':
-      {
-        blockSize = 24;
-        borderRadius = 5;
-        break;
-      }
-    case 'site':
-      {
-        blockSize = 34;
-        borderRadius = 5;
-        break;
-      }
-    default:
-      {
-        blockSize = (size === null || size === void 0 ? void 0 : size.blockSize) || 36;
-        borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
-        break;
-      }
-  }
-  return {
-    blockSize: blockSize,
-    borderRadius: borderRadius
-  };
-};
+var Tooltip = /*#__PURE__*/lazy(function () {
+  return import("../Tooltip");
+});
+var Spotlight = /*#__PURE__*/lazy(function () {
+  return import("../Spotlight");
+});
 var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var color = _ref.color,
     fill = _ref.fill,
@@ -72,6 +36,9 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     loading = _ref.loading,
     _ref$tooltipDelay = _ref.tooltipDelay,
     tooltipDelay = _ref$tooltipDelay === void 0 ? 0.5 : _ref$tooltipDelay,
+    fillOpacity = _ref.fillOpacity,
+    fillRule = _ref.fillRule,
+    focusable = _ref.focusable,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       active: Boolean(active),
@@ -84,21 +51,23 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, [size]),
     blockSize = _useMemo.blockSize,
     borderRadius = _useMemo.borderRadius;
-  var content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [icon && /*#__PURE__*/_jsx(Icon, {
-      className: styles.icon,
-      color: color,
-      fill: fill,
-      icon: icon,
-      size: size === 'site' ? 'normal' : size
-    }), children]
-  });
-  var spin = /*#__PURE__*/_jsx(Icon, {
+  var iconProps = {
     color: color,
-    icon: Loader2,
-    size: size === 'site' ? 'normal' : size,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    fillRule: fillRule,
+    focusable: focusable,
+    size: size === 'site' ? 'normal' : size
+  };
+  var content = icon && /*#__PURE__*/_jsx(Icon, _objectSpread({
+    className: styles.icon,
+    icon: icon
+  }, iconProps));
+  var spin = /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({
+    icon: Loader2
+  }, iconProps), {}, {
     spin: true
-  });
+  }));
   var actionIconBlock = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.block, className),
     onClick: loading ? undefined : onClick,
@@ -109,18 +78,24 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
       width: blockSize
     }, style)
   }, rest), {}, {
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), loading ? spin : content]
+    children: [/*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: spotlight && /*#__PURE__*/_jsx(Spotlight, {})
+    }), loading ? spin : content, children]
   }));
   if (!title) return actionIconBlock;
-  return /*#__PURE__*/_jsx(Tooltip, {
-    arrow: arrow,
-    mouseEnterDelay: tooltipDelay,
-    overlayStyle: {
-      pointerEvents: 'none'
-    },
-    placement: placement,
-    title: title,
-    children: actionIconBlock
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: actionIconBlock,
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      arrow: arrow,
+      mouseEnterDelay: tooltipDelay,
+      overlayStyle: {
+        pointerEvents: 'none'
+      },
+      placement: placement,
+      title: title,
+      children: actionIconBlock
+    })
   });
 });
 export default ActionIcon;

package/es/Alert/index.d.ts

@@ -0,0 +1,16 @@
+import { type AlertProps as AntAlertProps } from 'antd';
+import { type ReactNode } from 'react';
+export interface AlertProps extends AntAlertProps {
+    classNames?: {
+        alert?: string;
+        container?: string;
+    };
+    colorfulText?: boolean;
+    extra?: ReactNode;
+    text?: {
+        detail?: string;
+    };
+    variant?: 'default' | 'block' | 'ghost' | 'pure';
+}
+declare const Alert: import("react").NamedExoticComponent<AlertProps>;
+export default Alert;

package/es/Alert/index.js

@@ -0,0 +1,120 @@
+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 = ["closeIcon", "closable", "description", "showIcon", "type", "variant", "icon", "colorfulText", "style", "extra", "classNames", "text"];
+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; }
+import { Alert as AntdAlert, message } from 'antd';
+import { camelCase } from 'lodash-es';
+import { AlertTriangle, CheckCircle, ChevronDown, ChevronRight, Info, X, XCircle } from 'lucide-react';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+import Icon from "../Icon";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var typeIcons = {
+  error: XCircle,
+  info: Info,
+  success: CheckCircle,
+  warning: AlertTriangle
+};
+var colors = function colors(theme) {
+  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'info';
+  for (var _len = arguments.length, keys = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    keys[_key - 2] = arguments[_key];
+  }
+  return theme[camelCase(['color', type].concat(keys).join('-'))];
+};
+var Alert = /*#__PURE__*/memo(function (_ref) {
+  var closeIcon = _ref.closeIcon,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? false : _ref$closable,
+    description = _ref.description,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'info' : _ref$type,
+    variant = _ref.variant,
+    icon = _ref.icon,
+    _ref$colorfulText = _ref.colorfulText,
+    colorfulText = _ref$colorfulText === void 0 ? true : _ref$colorfulText,
+    style = _ref.style,
+    extra = _ref.extra,
+    classNames = _ref.classNames,
+    text = _ref.text,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  var _useStyles = useStyles({
+      closable: !!closable,
+      hasTitle: !!description,
+      showIcon: !!showIcon
+    }),
+    theme = _useStyles.theme,
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var alert = /*#__PURE__*/_jsx(AntdAlert, _objectSpread({
+    className: cx(styles.container, colorfulText && styles.colorfulText, !!extra && styles.hasExtra, variant === 'block' && styles.variantBlock, variant === 'ghost' && styles.variantGhost, variant === 'pure' && styles.variantPure, classNames === null || classNames === void 0 ? void 0 : classNames.alert, !extra && styles.container),
+    closable: closable,
+    closeIcon: closeIcon || /*#__PURE__*/_jsx(ActionIcon, {
+      color: colors(theme, type),
+      icon: X,
+      size: 'small'
+    }),
+    description: description,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: typeIcons[type] || icon,
+      size: {
+        fontSize: description ? 24 : 18
+      }
+    }),
+    showIcon: showIcon,
+    style: _objectSpread({
+      color: colorfulText ? colors(theme, type) : undefined
+    }, style),
+    type: type
+  }, rest));
+  if (!extra) return alert;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.container,
+    children: [alert, /*#__PURE__*/_jsxs(Flexbox, {
+      className: cx(styles.extra, variant === 'block' && styles.variantBlock, variant === 'ghost' && styles.variantGhost, variant === 'pure' && styles.variantPure),
+      style: {
+        background: colors(theme, type, 'bg'),
+        borderColor: colors(theme, type, 'border'),
+        color: colors(theme, type),
+        fontSize: description ? 14 : 12
+      },
+      children: [/*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        className: cx(styles.extraHeader, variant === 'pure' && styles.variantPureExtraHeader),
+        gap: message ? 6 : 10,
+        horizontal: true,
+        style: {
+          borderColor: colors(theme, type, 'border')
+        },
+        children: [/*#__PURE__*/_jsx(ActionIcon, {
+          color: colorfulText ? colors(theme, type) : undefined,
+          icon: expand ? ChevronDown : ChevronRight,
+          onClick: function onClick() {
+            return setExpand(!expand);
+          },
+          size: {
+            blockSize: 24,
+            fontSize: 18
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          children: (text === null || text === void 0 ? void 0 : text.detail) || 'Show Details'
+        })]
+      }), expand && /*#__PURE__*/_jsx("div", {
+        className: cx(styles.extraBody, variant === 'pure' && styles.variantPure),
+        children: extra
+      })]
+    })]
+  });
+});
+export default Alert;

package/es/Alert/style.d.ts

@@ -0,0 +1,16 @@
+export declare const useStyles: (props?: {
+    closable?: boolean | undefined;
+    hasTitle?: boolean | undefined;
+    showIcon?: boolean | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    colorfulText: import("antd-style").SerializedStyles;
+    container: string;
+    extra: import("antd-style").SerializedStyles;
+    extraBody: import("antd-style").SerializedStyles;
+    extraHeader: import("antd-style").SerializedStyles;
+    hasExtra: import("antd-style").SerializedStyles;
+    variantBlock: import("antd-style").SerializedStyles;
+    variantGhost: import("antd-style").SerializedStyles;
+    variantPure: import("antd-style").SerializedStyles;
+    variantPureExtraHeader: import("antd-style").SerializedStyles;
+}>;

package/es/Alert/style.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var cx = _ref.cx,
+    token = _ref.token,
+    css = _ref.css,
+    prefixCls = _ref.prefixCls;
+  var closable = _ref2.closable,
+    hasTitle = _ref2.hasTitle,
+    showIcon = _ref2.showIcon;
+  var baseBlockPadding = hasTitle ? 16 : 8;
+  var baseInlinePadding = hasTitle ? 16 : 12;
+  return {
+    colorfulText: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        .", "-alert-message,.", "-alert-description {\n          color: inherit;\n        }\n      "])), prefixCls, prefixCls),
+    container: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: row;\n          gap: ", "px;\n          align-items: flex-start;\n\n          max-width: 100%;\n          padding-right: ", "px;\n          padding-left: ", "px;\n          padding-block: ", "px;\n\n          .", "-alert-message {\n            font-weight: ", ";\n            line-height: 24px;\n            word-break: break-all;\n          }\n          .", "-alert-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n          .", "-alert-close-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n        "])), hasTitle ? 12 : 8, closable ? baseInlinePadding : baseInlinePadding * 1.5, showIcon ? baseInlinePadding : baseInlinePadding * 1.5, baseBlockPadding, prefixCls, hasTitle ? 600 : 400, prefixCls, prefixCls), hasTitle && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            .", "-alert-description {\n              line-height: 1.5;\n              word-break: break-all;\n              opacity: 0.75;\n            }\n          "])), prefixCls)),
+    extra: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n\n        max-width: 100%;\n\n        border: 1px solid;\n        border-top: none;\n        border-bottom-right-radius: ", "px;\n        border-bottom-left-radius: ", "px;\n      "])), token.borderRadiusLG, token.borderRadiusLG),
+    extraBody: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        overflow-x: auto;\n        width: 100%;\n        padding-block: ", "px;\n        padding-inline: ", "px;\n      "])), baseBlockPadding, baseInlinePadding),
+    extraHeader: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        padding-block: ", "px;\n        padding-inline: ", "px;\n        border-top: 1px dashed;\n      "])), baseBlockPadding * 0.75, baseInlinePadding * 0.75),
+    hasExtra: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n      "]))),
+    variantBlock: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        border: none;\n      "]))),
+    variantGhost: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        background: transparent !important;\n      "]))),
+    variantPure: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        padding: 0 !important;\n        background: transparent !important;\n        border: none;\n      "]))),
+    variantPureExtraHeader: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        margin-top: ", "px;\n        margin-left: ", "px;\n        padding-inline: 0;\n      "])), baseBlockPadding, -baseInlinePadding * 0.25)
+  };
+});

package/es/ChatItem/components/ErrorContent.js

@@ -1,12 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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; }
-import { Alert } from 'antd';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import Alert from "../../Alert";
 import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var ErrorContent = /*#__PURE__*/memo(function (_ref) {
   var message = _ref.message,
     error = _ref.error,
@@ -15,13 +14,14 @@ var ErrorContent = /*#__PURE__*/memo(function (_ref) {
       placement: placement
     }),
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs(Flexbox, {
-    className: styles.errorContent,
-    gap: 8,
-    children: [/*#__PURE__*/_jsx(Alert, _objectSpread({
+  return /*#__PURE__*/_jsx(Flexbox, {
+    className: styles.errorContainer,
+    children: /*#__PURE__*/_jsx(Alert, _objectSpread({
+      closable: false,
+      extra: message,
       showIcon: true,
       type: 'error'
-    }, error)), message]
+    }, error))
   });
 });
 export default ErrorContent;

package/es/ChatItem/style.d.ts

@@ -13,7 +13,7 @@ export declare const useStyles: (props?: {
     container: string;
     editingContainer: string;
     editingInput: import("antd-style").SerializedStyles;
-    errorContent: import("antd-style").SerializedStyles;
+    errorContainer: import("antd-style").SerializedStyles;
     loading: import("antd-style").SerializedStyles;
     message: string;
     messageContainer: string;

package/es/ChatItem/style.js

@@ -20,17 +20,17 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n      "])));
   return {
-    actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          align-self: ", ";\n          justify-content: ", ";\n        "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
+    actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          flex: none;\n          align-self: ", ";\n          justify-content: ", ";\n        "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
     avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     avatarGroupContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='menubar'] {\n            display: flex;\n          }\n\n          time,\n          div[role='menubar'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='menubar'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 8px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: hidden;\n\n          width: 100%;\n          max-width: 100vw;\n          padding: 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='menubar'] {\n            display: flex;\n          }\n\n          time,\n          div[role='menubar'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='menubar'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 8px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
     editingContainer: cx(editingStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          padding: 8px 12px 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
-    errorContent: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        ", " {\n          width: 100%;\n        }\n      "])), responsive.mobile),
+    errorContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n      "]))),
     loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
     message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n\n          ", " {\n            overflow-x: auto;\n            max-width: 100%;\n          }\n        "])), responsive.mobile)),
-    messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow-x: hidden;\n\n          ", " {\n            flex-direction: column !important;\n            width: 100%;\n          }\n        "])), responsive.mobile)),
+    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ", " {\n            overflow-x: auto;\n          }\n        "])), responsive.mobile)),
+    messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow-x: hidden;\n          max-width: 100%;\n\n          ", " {\n            flex-direction: column !important;\n          }\n        "])), responsive.mobile)),
     messageExtra: cx('message-extra'),
     name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
   };

package/es/ChatItem/type.d.ts

@@ -1,5 +1,5 @@
-import { AlertProps } from 'antd';
 import { ReactNode } from 'react';
+import { AlertProps } from "../Alert";
 import { EditableMessageProps } from "../EditableMessage";
 import { DivProps, MetaData } from "../types";
 export interface ChatItemProps {

package/es/Icon/calcSize.d.ts

@@ -0,0 +1,5 @@
+import { IconSize } from "./index";
+export declare const calcSize: (size?: IconSize) => {
+    fontSize: string | number;
+    strokeWidth: string | number;
+};

package/es/Icon/calcSize.js

@@ -0,0 +1,39 @@
+export var calcSize = function calcSize(size) {
+  var fontSize;
+  var strokeWidth;
+  switch (size) {
+    case 'large':
+      {
+        fontSize = 24;
+        strokeWidth = 2;
+        break;
+      }
+    case 'normal':
+      {
+        fontSize = 20;
+        strokeWidth = 2;
+        break;
+      }
+    case 'small':
+      {
+        fontSize = 14;
+        strokeWidth = 1.5;
+        break;
+      }
+    default:
+      {
+        if (size) {
+          fontSize = (size === null || size === void 0 ? void 0 : size.fontSize) || 24;
+          strokeWidth = (size === null || size === void 0 ? void 0 : size.strokeWidth) || 2;
+        } else {
+          fontSize = '1em';
+          strokeWidth = 2;
+        }
+        break;
+      }
+  }
+  return {
+    fontSize: fontSize,
+    strokeWidth: strokeWidth
+  };
+};

package/es/Icon/index.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
-import { LucideIcon } from 'lucide-react';
+import { LucideIcon, LucideProps } from 'lucide-react';
 import { DivProps } from "../types";
-export type IconSize = 'large' | 'normal' | 'small' | {
+export interface IconSizeConfig extends Pick<LucideProps, 'strokeWidth' | 'absoluteStrokeWidth'> {
     fontSize?: number;
-    strokeWidth?: number;
-};
-export interface IconProps extends DivProps {
-    color?: string;
-    fill?: string;
+}
+export type IconSizeType = 'large' | 'normal' | 'small';
+export type IconSize = IconSizeType | IconSizeConfig;
+export interface IconProps extends DivProps, Pick<LucideProps, 'fill' | 'fillRule' | 'fillOpacity' | 'color' | 'focusable'> {
     /**
      * @description The icon element to be rendered
      * @type LucideIcon
@@ -24,5 +23,5 @@ export interface IconProps extends DivProps {
      */
     spin?: boolean;
 }
-declare const Icon: import("react").NamedExoticComponent<IconProps>;
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export default Icon;

package/es/Icon/index.js

@@ -1,57 +1,24 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "size", "color", "fill", "className", "spin"];
+var _excluded = ["icon", "size", "color", "fill", "className", "focusable", "spin", "fillRule", "fillOpacity"],
+  _excluded2 = ["fontSize"];
 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; }
-import { memo, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { calcSize } from "./calcSize";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var calcSize = function calcSize(size) {
-  var fontSize;
-  var strokeWidth;
-  switch (size) {
-    case 'large':
-      {
-        fontSize = 24;
-        strokeWidth = 2;
-        break;
-      }
-    case 'normal':
-      {
-        fontSize = 20;
-        strokeWidth = 2;
-        break;
-      }
-    case 'small':
-      {
-        fontSize = 14;
-        strokeWidth = 1.5;
-        break;
-      }
-    default:
-      {
-        if (size) {
-          fontSize = (size === null || size === void 0 ? void 0 : size.fontSize) || 24;
-          strokeWidth = (size === null || size === void 0 ? void 0 : size.strokeWidth) || 2;
-        } else {
-          fontSize = '1em';
-          strokeWidth = 2;
-        }
-        break;
-      }
-  }
-  return {
-    fontSize: fontSize,
-    strokeWidth: strokeWidth
-  };
-};
-var Icon = /*#__PURE__*/memo(function (_ref) {
+var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
     size = _ref.size,
     color = _ref.color,
-    fill = _ref.fill,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? 'transparent' : _ref$fill,
     className = _ref.className,
+    focusable = _ref.focusable,
     spin = _ref.spin,
+    fillRule = _ref.fillRule,
+    fillOpacity = _ref.fillOpacity,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
@@ -61,20 +28,22 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
       return calcSize(size);
     }, [size]),
     fontSize = _useMemo.fontSize,
-    strokeWidth = _useMemo.strokeWidth;
+    restSize = _objectWithoutProperties(_useMemo, _excluded2);
   return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
     className: cx('anticon', spin && styles.spin, className),
     role: "img"
   }, rest), {}, {
-    children: /*#__PURE__*/_jsx(SvgIcon, {
+    children: /*#__PURE__*/_jsx(SvgIcon, _objectSpread({
       color: color,
-      fill: fill !== null && fill !== void 0 ? fill : 'transparent',
-      focusable: false,
+      fill: fill,
+      fillOpacity: fillOpacity,
+      fillRule: fillRule,
+      focusable: focusable,
       height: fontSize,
+      ref: ref,
       size: fontSize,
-      strokeWidth: strokeWidth,
       width: fontSize
-    })
+    }, restSize))
   }));
 });
 export default Icon;

package/es/List/ListItem/index.js

@@ -3,9 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["active", "avatar", "loading", "description", "date", "title", "onHoverChange", "actions", "className", "style", "showAction", "children", "classNames", "addon", "pin"];
 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; }
-import { LoadingOutlined, MessageOutlined } from '@ant-design/icons';
+import { Loader2, MessageSquare } from 'lucide-react';
 import { forwardRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import Icon from "../../Icon";
 import { useStyles } from "./style";
 import { getChatItemTime } from "./time";
 
@@ -56,7 +57,8 @@ var ListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       children: /*#__PURE__*/_jsx("div", {
         className: styles.triangle
       })
-    }), avatar !== null && avatar !== void 0 ? avatar : /*#__PURE__*/_jsx(MessageOutlined, {
+    }), avatar !== null && avatar !== void 0 ? avatar : /*#__PURE__*/_jsx(Icon, {
+      icon: MessageSquare,
       style: {
         marginTop: 4
       }
@@ -74,7 +76,8 @@ var ListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
         className: styles.desc,
         children: description
       }), addon]
-    }), loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
+    }), loading ? /*#__PURE__*/_jsx(Icon, {
+      icon: Loader2,
       spin: true
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [showAction && /*#__PURE__*/_jsx(Flexbox, {

package/es/ThemeProvider/GlobalStyle/antdOverride.js

@@ -3,5 +3,5 @@ var _templateObject;
 import { css } from 'antd-style';
 import { readableColor } from 'polished';
 export default (function (token) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-btn {\n    box-shadow: none;\n  }\n\n  .", "-btn-primary {\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n\n    &:active {\n      color: ", " !important;\n    }\n  }\n\n  .", "-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n\n  .", "-alert {\n    span[role='img'] {\n      align-self: flex-start;\n      width: 16px;\n      height: 16px;\n      margin-top: 3px;\n    }\n\n    .", "-alert-description {\n      word-break: break-all;\n      word-wrap: break-word;\n    }\n\n    &.", "-alert-with-description {\n      padding-block: 12px;\n      padding-inline: 12px;\n\n      .", "-alert-message {\n        font-size: 14px;\n        font-weight: 600;\n        word-break: break-all;\n        word-wrap: break-word;\n      }\n    }\n  }\n\n  @media (max-width: 575px) {\n    .", "-tooltip {\n      display: none !important;\n    }\n  }\n"])), token.prefixCls, token.prefixCls, readableColor(token.colorPrimary), readableColor(token.colorPrimary), readableColor(token.colorPrimaryActive), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls, token.prefixCls, token.prefixCls, token.prefixCls, token.prefixCls);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-btn {\n    box-shadow: none;\n  }\n\n  .", "-btn-primary {\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n\n    &:active {\n      color: ", " !important;\n    }\n  }\n\n  .", "-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n\n  @media (max-width: 575px) {\n    .", "-tooltip {\n      display: none !important;\n    }\n  }\n"])), token.prefixCls, token.prefixCls, readableColor(token.colorPrimary), readableColor(token.colorPrimary), readableColor(token.colorPrimaryActive), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls);
 });

package/es/index.d.ts

@@ -1,5 +1,6 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as ActionIconGroup, type ActionIconGroupProps } from './ActionIconGroup';
+export { default as Alert, type AlertProps } from './Alert';
 export { default as Avatar, type AvatarProps } from './Avatar';
 export { default as BackBottom, type BackBottomProps } from './BackBottom';
 export { default as Burger, type BurgerProps } from './Burger';

package/es/index.js

@@ -1,5 +1,6 @@
 export { default as ActionIcon } from "./ActionIcon";
 export { default as ActionIconGroup } from "./ActionIconGroup";
+export { default as Alert } from "./Alert";
 export { default as Avatar } from "./Avatar";
 export { default as BackBottom } from "./BackBottom";
 export { default as Burger } from "./Burger";

package/es/styles/theme/customStylish.js

@@ -13,8 +13,8 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     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: 0 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      > *:last-child {\n        margin-bottom: 0 !important;\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      [data-code-type='highlighter'] {\n        border: none;\n        border-radius: ", "px;\n\n        > code {\n          padding: 0 !important;\n          border: none !important;\n        }\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: 1em 1em;\n        margin-inline: 0 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        code {\n          display: inline-flex;\n        }\n      }\n\n      th,\n      td {\n        padding-block: 10px 10px;\n        padding-inline: 16px 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      > ol > li::marker {\n        color: ", " !important;\n      }\n\n      > ul > li {\n        line-height: 1.8;\n        list-style-type: disc;\n\n        &::marker {\n          color: ", " !important;\n        }\n      }\n\n      ol,\n      ul {\n        > li::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    "])), token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, cyanColor, cyanBackground, isDarkMode ? token.cyan1A : token.cyan6A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan9A : token.cyan10A, token.colorTextDescription, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
-    markdownInChat: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      h1 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1.6em;\n      }\n\n      h2 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1.4em;\n      }\n\n      h3 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1.2em;\n      }\n\n      h4 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1.1em;\n      }\n\n      h5 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1em;\n      }\n    "]))),
+    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: 0 0;\n\n        font-size: 14px;\n        line-height: 2;\n        color: ", ";\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 1em;\n        }\n\n        &:not(:last-child) {\n          margin-bottom: 1.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      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      [data-code-type='highlighter'] {\n        border: none;\n        border-radius: ", "px;\n\n        > code {\n          padding: 0 !important;\n          border: none !important;\n        }\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: 1em 1em;\n        margin-inline: 0 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        code {\n          display: inline-flex;\n        }\n      }\n\n      th,\n      td {\n        padding-block: 10px 10px;\n        padding-inline: 16px 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      > ol > li::marker {\n        color: ", " !important;\n      }\n\n      > ul > li {\n        line-height: 1.8;\n        list-style-type: disc;\n\n        &::marker {\n          color: ", " !important;\n        }\n      }\n\n      ol,\n      ul {\n        > li::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    "])), token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, cyanColor, cyanBackground, isDarkMode ? token.cyan1A : token.cyan6A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan9A : token.cyan10A, token.colorTextDescription, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
+    markdownInChat: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      h1 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1.6em;\n      }\n\n      h2 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1.4em;\n      }\n\n      h3 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1.2em;\n      }\n\n      h4 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1.1em;\n      }\n\n      h5 {\n        margin-top: 0;\n        margin-block-start: 0;\n        font-size: 1em;\n      }\n\n      > *:last-child {\n        margin-bottom: 0 !important;\n      }\n\n      p {\n        line-height: 1.8;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n\n        &:not(:last-child) {\n          margin-bottom: 1em;\n        }\n      }\n    "]))),
     noScrollbar: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
     resetLinkColor: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
   };

package/package.json

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