@lobehub/ui 1.20.0 → 1.21.0

package/es/ActionIcon/index.js

@@ -4,35 +4,13 @@ var _excluded = ["className", "active", "icon", "size", "style", "glass", "title
 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 { Loader2 } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { Icon, Spotlight, Tooltip } from "./..";
 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 ActionIcon = /*#__PURE__*/memo(function (_ref) {
-  var className = _ref.className,
-    active = _ref.active,
-    icon = _ref.icon,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'normal' : _ref$size,
-    style = _ref.style,
-    glass = _ref.glass,
-    title = _ref.title,
-    placement = _ref.placement,
-    _ref$arrow = _ref.arrow,
-    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
-    spotlight = _ref.spotlight,
-    onClick = _ref.onClick,
-    children = _ref.children,
-    loading = _ref.loading,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles({
-      active: Boolean(active),
-      glass: Boolean(glass)
-    }),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
+var calcSize = function calcSize(size) {
   var blockSize;
   var borderRadius;
   switch (size) {
@@ -57,6 +35,39 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
       borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
       break;
   }
+  return {
+    blockSize: blockSize,
+    borderRadius: borderRadius
+  };
+};
+var ActionIcon = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    active = _ref.active,
+    icon = _ref.icon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'normal' : _ref$size,
+    style = _ref.style,
+    glass = _ref.glass,
+    title = _ref.title,
+    placement = _ref.placement,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
+    spotlight = _ref.spotlight,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    loading = _ref.loading,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      active: Boolean(active),
+      glass: Boolean(glass)
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var _useMemo = useMemo(function () {
+      return calcSize(size);
+    }, [size]),
+    blockSize = _useMemo.blockSize,
+    borderRadius = _useMemo.borderRadius;
   var content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [icon && /*#__PURE__*/_jsx(Icon, {
       icon: icon,

package/es/Avatar/index.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-export interface AvatarProps {
+/// <reference types="react" />
+import { type AvatarProps as AntAvatarProps } from 'antd';
+export interface AvatarProps extends AntAvatarProps {
     /**
      * @description The URL or base64 data of the avatar image
      */
@@ -23,5 +24,5 @@ export interface AvatarProps {
      */
     title?: string;
 }
-declare const Avatar: FC<AvatarProps>;
+declare const Avatar: import("react").NamedExoticComponent<AvatarProps>;
 export default Avatar;

package/es/Avatar/index.js

@@ -1,51 +1,43 @@
-import { Avatar as A } from 'antd';
-import { Center } from 'react-layout-kit';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "avatar", "title", "size", "shape", "background"];
+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 { Avatar as AntAvatar } from 'antd';
+import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Avatar = function Avatar(_ref) {
-  var avatar = _ref.avatar,
+var Avatar = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    avatar = _ref.avatar,
     title = _ref.title,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 40 : _ref$size,
     _ref$shape = _ref.shape,
     shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
-    background = _ref.background;
-  var _useStyles = useStyles(),
+    background = _ref.background,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      background: background,
+      size: size
+    }),
     styles = _useStyles.styles,
-    theme = _useStyles.theme;
-  var backgroundColor = background !== null && background !== void 0 ? background : theme.colorBgContainer;
+    cx = _useStyles.cx;
   var isImage = avatar && ['/', 'http', 'data:'].some(function (i) {
     return avatar.startsWith(i);
   });
-  return /*#__PURE__*/_jsx(Center, {
-    className: styles.container,
-    style: {
-      width: size,
-      height: size,
-      borderRadius: shape === 'circle' ? '50%' : 6,
-      backgroundColor: backgroundColor,
-      borderWidth: isImage ? 1 : 0
-    },
-    children: !avatar ? /*#__PURE__*/_jsx(A, {
-      shape: shape,
-      size: size,
-      children: title === null || title === void 0 ? void 0 : title.slice(0, 2)
-    }) : isImage ? /*#__PURE__*/_jsx(A, {
-      className: styles.border,
-      shape: shape,
-      size: size,
-      src: avatar
-    }) : /*#__PURE__*/_jsx(Center, {
-      className: styles.border,
-      style: {
-        width: size,
-        height: size,
-        fontSize: size / 2,
-        borderRadius: shape === 'circle' ? '50%' : 6,
-        backgroundColor: backgroundColor
-      },
-      children: avatar
-    })
-  });
-};
+  var text = isImage ? title : avatar;
+  return !isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({
+    className: cx(styles.avatar, className),
+    shape: shape,
+    size: size
+  }, props), {}, {
+    children: text === null || text === void 0 ? void 0 : text.toUpperCase().slice(0, 2)
+  })) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
+    className: cx(styles.avatar, className),
+    shape: shape,
+    size: size,
+    src: avatar
+  }, props));
+});
 export default Avatar;

package/es/Avatar/style.d.ts

@@ -1,4 +1,6 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    container: import("antd-style").SerializedStyles;
-    border: import("antd-style").SerializedStyles;
+export declare const useStyles: (props?: {
+    background?: string | undefined;
+    size: number;
+} | undefined) => import("antd-style").ReturnStyles<{
+    avatar: import("antd-style").SerializedStyles;
 }>;

package/es/Avatar/style.js

@@ -1,11 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { readableColor } from 'polished';
+export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     token = _ref.token;
+  var background = _ref2.background,
+    size = _ref2.size;
+  var backgroundColor = background !== null && background !== void 0 ? background : token.colorBgContainer;
+  var color = readableColor(backgroundColor);
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    > * {\n      cursor: pointer;\n    }\n  "]))),
-    border: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), token.colorSplit)
+    avatar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        background: ", ";\n        border: 1px solid ", ";\n\n        > .ant-avatar-string {\n          font-size: ", "px;\n          font-weight: 700;\n          line-height: 1 !important;\n          color: ", ";\n        }\n\n        > * {\n          cursor: pointer;\n        }\n      "])), backgroundColor, background ? 'transparent' : token.colorSplit, size * 0.5, color)
   };
 });

package/es/ChatItem/index.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { type AlertProps } from 'antd';
+import type { DivProps } from "../types";
+export interface ChatItemProps extends DivProps {
+    /**
+     * @description Weather to show alert and alert config
+     */
+    alert?: AlertProps;
+    /**
+     * @description URL of the avatar image
+     */
+    avatar?: string;
+    /**
+     * @description Whether to add spacing between chat items
+     * @default true
+     */
+    borderSpacing?: boolean;
+    /**
+     * @description Whether to show a loading spinner
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * @description The message to be displayed
+     */
+    message?: string;
+    /**
+     * @description The name of the chat item
+     */
+    name?: string;
+    /**
+     * @description The placement of the chat item
+     * @default 'left'
+     */
+    placement?: 'left' | 'right';
+    /**
+     * @description Whether the chat item is primary
+     * @default false
+     */
+    primary?: boolean;
+    /**
+     * @description The type of chat item
+     * @default 'block'
+     */
+    type?: 'block' | 'pure';
+}
+declare const ChatItem: import("react").NamedExoticComponent<ChatItemProps>;
+export default ChatItem;

package/es/ChatItem/index.js

@@ -0,0 +1,78 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "name", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert"];
+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 { Alert } from 'antd';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { Avatar, Icon, Markdown } from "./..";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var AVATAR_SIZE = 40;
+var ChatItem = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    name = _ref.name,
+    primary = _ref.primary,
+    _ref$borderSpacing = _ref.borderSpacing,
+    borderSpacing = _ref$borderSpacing === void 0 ? true : _ref$borderSpacing,
+    loading = _ref.loading,
+    message = _ref.message,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'left' : _ref$placement,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'block' : _ref$type,
+    avatar = _ref.avatar,
+    alert = _ref.alert,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      placement: placement,
+      type: type,
+      name: name,
+      primary: primary,
+      avatarSize: AVATAR_SIZE
+    }),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.avatarContainer,
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        avatar: avatar,
+        size: AVATAR_SIZE
+      }), loading && /*#__PURE__*/_jsx("div", {
+        className: styles.loading,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: Loader2,
+          size: {
+            fontSize: 12,
+            strokeWidth: 3
+          },
+          spin: true
+        })
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.messageContainer,
+      children: [name && /*#__PURE__*/_jsx("div", {
+        className: styles.name,
+        children: name
+      }), alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
+        showIcon: true
+      }, alert)) : /*#__PURE__*/_jsx("div", {
+        className: styles.message,
+        children: /*#__PURE__*/_jsx(Markdown, {
+          children: String(message || '...')
+        })
+      })]
+    }), borderSpacing && /*#__PURE__*/_jsx("div", {
+      style: {
+        width: AVATAR_SIZE,
+        flex: 'none'
+      }
+    })]
+  }));
+});
+export default ChatItem;

package/es/ChatItem/style.d.ts

@@ -0,0 +1,14 @@
+export declare const useStyles: (props?: {
+    avatarSize: number;
+    name?: string | undefined;
+    placement?: "left" | "right" | undefined;
+    primary?: boolean | undefined;
+    type?: "block" | "pure" | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    container: string;
+    loading: import("antd-style").SerializedStyles;
+    avatarContainer: import("antd-style").SerializedStyles;
+    messageContainer: import("antd-style").SerializedStyles;
+    name: import("antd-style").SerializedStyles;
+    message: string;
+}>;

package/es/ChatItem/style.js

@@ -0,0 +1,25 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var cx = _ref.cx,
+    css = _ref.css,
+    token = _ref.token;
+  var placement = _ref2.placement,
+    type = _ref2.type,
+    name = _ref2.name,
+    primary = _ref2.primary,
+    avatarSize = _ref2.avatarSize;
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut, primary ? token.colorFill : token.colorFillSecondary);
+  var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), name ? 0 : '6px');
+  var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), token.borderRadiusLG, token.motionEaseOut, token.colorFillTertiary, token.colorFillSecondary);
+  var typeStylish = type === 'block' ? blockStylish : pureStylish;
+  return {
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
+    loading: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\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),
+    avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
+    messageContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n\n        .ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n        }\n      "]))),
+    name: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), token.colorTextDescription, placement === 'left' ? 'left' : 'right'),
+    message: cx(typeStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n        "]))))
+  };
+});

package/es/ChatList/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ChatMessage } from "../Chat";
+import type { DivProps } from "../types";
+export interface ChatListProps extends DivProps {
+    /**
+     * @description Data of chat messages to be displayed
+     */
+    data: ChatMessage[];
+    /**
+     * @description Type of chat list
+     * @default 'chat'
+     */
+    type?: 'docs' | 'chat';
+}
+declare const ChatList: import("react").NamedExoticComponent<ChatListProps>;
+export default ChatList;

package/es/ChatList/index.js

@@ -0,0 +1,33 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "data", "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 { memo } from 'react';
+import { ChatItem } from "./..";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChatList = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    data = _ref.data,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'chat' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className)
+  }, props), {}, {
+    children: data.map(function (item, index) {
+      return /*#__PURE__*/_jsx(ChatItem, {
+        borderSpacing: type === 'chat',
+        message: item.content,
+        placement: type === 'chat' ? item.role === 'user' ? 'right' : 'left' : 'left',
+        primary: item.role === 'user',
+        type: type === 'chat' ? 'block' : 'pure'
+      }, index);
+    })
+  }));
+});
+export default ChatList;

package/es/ChatList/style.d.ts

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

package/es/ChatList/style.js

@@ -0,0 +1,9 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n    "])))
+  };
+});

package/es/Highlighter/index.d.ts

@@ -30,7 +30,7 @@ export interface HighlighterProps extends DivProps {
      * @description The type of the code block
      * @default 'block'
      */
-    type?: 'ghost' | 'block' | 'prue';
+    type?: 'ghost' | 'block' | 'pure';
 }
 export declare const Highlighter: import("react").NamedExoticComponent<HighlighterProps>;
 export default Highlighter;

package/es/Highlighter/style.d.ts

@@ -1,4 +1,4 @@
-export declare const useStyles: (props?: "block" | "ghost" | "prue" | undefined) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: "block" | "pure" | "ghost" | undefined) => import("antd-style").ReturnStyles<{
     container: string;
     button: string;
     lang: string;

package/es/Highlighter/style.js

@@ -9,9 +9,9 @@ export var useStyles = createStyles(function (_ref, type) {
   var prefix = "".concat(prefixCls, "-highlighter");
   var buttonHoverCls = "".concat(prefix, "-hover-btn");
   var langHoverCls = "".concat(prefix, "-hover-lang");
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'prue' ? 'transparent' : token.colorFillTertiary);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'pure' ? 'transparent' : token.colorFillTertiary);
   return {
-    container: cx(prefix, typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: auto;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'prue' ? 0 : "16px 24px")),
+    container: cx(prefix, typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: auto;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px 24px")),
     button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: 8px;\n          right: 8px;\n\n          opacity: 0;\n        "])))),
     lang: cx(langHoverCls, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 50;\n          right: 8px;\n          bottom: 8px;\n\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.colorTextPlaceholder))
   };

package/es/Icon/index.js

@@ -3,20 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["icon", "size", "style", "className", "spin"];
 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';
+import { memo, useMemo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Icon = /*#__PURE__*/memo(function (_ref) {
-  var icon = _ref.icon,
-    size = _ref.size,
-    style = _ref.style,
-    className = _ref.className,
-    spin = _ref.spin,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
-  var SvgIcon = icon;
+var calcSize = function calcSize(size) {
   var fontSize;
   var strokeWidth;
   switch (size) {
@@ -42,8 +32,29 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
       }
       break;
   }
+  return {
+    fontSize: fontSize,
+    strokeWidth: strokeWidth
+  };
+};
+var Icon = /*#__PURE__*/memo(function (_ref) {
+  var icon = _ref.icon,
+    size = _ref.size,
+    style = _ref.style,
+    className = _ref.className,
+    spin = _ref.spin,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var SvgIcon = icon;
+  var _useMemo = useMemo(function () {
+      return calcSize(size);
+    }, [size]),
+    fontSize = _useMemo.fontSize,
+    strokeWidth = _useMemo.strokeWidth;
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: cx(spin && styles.spin, className),
+    className: cx(styles.icon, spin && styles.spin, className),
     style: _objectSpread({
       width: fontSize,
       height: fontSize

package/es/Icon/style.d.ts

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

package/es/Icon/style.js

@@ -1,10 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 import { createStyles, keyframes } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n  "])));
   return {
-    spin: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: ", " 1s linear infinite;\n    "])), spin)
+    icon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))),
+    spin: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " 1s linear infinite;\n    "])), spin)
   };
 });

package/es/Input/style.js

@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var type = _ref2.type;
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
   return {
-    input: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          max-width: 100%;\n          height: 36px;\n          padding: 0 12px;\n\n          transition: background-color 100ms ", ";\n\n          input {\n            background: transparent;\n          }\n\n          &:hover {\n            background-color: ", ";\n            border-color: ", ";\n          }\n\n          &:focus {\n            border-color: ", ";\n          }\n        "])), token.motionEaseOut, token.colorFillTertiary, token.colorBorder, token.colorTextQuaternary)),
+    input: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          max-width: 100%;\n          height: 36px;\n          padding: 0 12px;\n\n          transition: background-color 100ms ", ",\n            border-color 200ms ", ";\n\n          input {\n            background: transparent;\n          }\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus {\n            border-color: ", ";\n          }\n\n          &.ant-input-affix-wrapper-focused {\n            border-color: ", ";\n          }\n        "])), token.motionEaseOut, token.motionEaseOut, token.colorFillTertiary, token.colorTextQuaternary, token.colorTextQuaternary)),
     textarea: cx(typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          max-width: 100%;\n          padding: 8px 12px;\n          transition: background-color 100ms ", ";\n\n          textarea {\n            background: transparent;\n          }\n\n          &:hover {\n            background-color: ", ";\n            border-color: ", ";\n          }\n\n          &:focus {\n            border-color: ", ";\n          }\n        "])), token.motionEaseOut, token.colorFillTertiary, token.colorBorder, token.colorTextQuaternary))
   };
 });

package/es/SearchBar/style.js

@@ -5,7 +5,7 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n\n    .ant-input-affix-wrapper {\n      &:hover {\n        border-color: ", ";\n      }\n    }\n\n    .ant-input-affix-wrapper-focused {\n      border-color: ", ";\n\n      &:hover {\n        border-color: ", ";\n      }\n    }\n  "])), token.colorBorder, token.colorTextQuaternary, token.colorTextQuaternary),
+    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
     input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
     tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
     icon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)

package/es/index.d.ts

@@ -1,6 +1,8 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as Avatar, type AvatarProps } from './Avatar';
 export type { ChatMessage, MessageRoleType } from './Chat';
+export { default as ChatItem, type ChatItemProps } from './ChatItem';
+export { default as ChatList, type ChatListProps } from './ChatList';
 export { default as ColorScales, type ColorScalesProps } from './ColorScales';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as Conversation, type ConversationProps } from './Conversation';

package/es/index.js

@@ -1,5 +1,7 @@
 export { default as ActionIcon } from "./ActionIcon";
 export { default as Avatar } from "./Avatar";
+export { default as ChatItem } from "./ChatItem";
+export { default as ChatList } from "./ChatList";
 export { default as ColorScales } from "./ColorScales";
 export { default as ContextMenu } from "./ContextMenu";
 export { default as Conversation } from "./Conversation";

package/es/styles/algorithms/generateCustomStylish.js

@@ -6,6 +6,6 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     isDarkMode = _ref.isDarkMode;
   return {
     blur: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
-    markdown: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\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-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      ul li {\n        line-height: 1.8;\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)
+    markdown: css(_templateObject2 || (_templateObject2 = _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-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-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      ul li {\n        line-height: 1.8;\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)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -114,7 +114,6 @@
     "antd": "^5",
     "antd-style": "^3",
     "commitlint": "^17",
-    "commitlint-config-gitmoji": "^2",
     "concurrently": "^8",
     "cross-env": "^7",
     "dumi": "^2",