@lobehub/ui 1.68.0 → 1.70.0

package/es/ChatItem/components/Actions.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ChatItemProps } from "..";
+export interface ActionsProps {
+    actions: ChatItemProps['actions'];
+    placement?: ChatItemProps['placement'];
+    type?: ChatItemProps['type'];
+}
+declare const Actions: import("react").NamedExoticComponent<ActionsProps>;
+export default Actions;

package/es/ChatItem/components/Actions.js

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { useStyles } from "../style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Actions = /*#__PURE__*/memo(function (_ref) {
+  var actions = _ref.actions,
+    placement = _ref.placement,
+    type = _ref.type;
+  var _useStyles = useStyles({
+      placement: placement,
+      type: type
+    }),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.actions,
+    role: "chat-item-actions",
+    children: actions
+  });
+});
+export default Actions;

package/es/ChatItem/components/Avatar.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ChatItemProps } from '../type';
+export interface AvatarProps {
+    addon?: ChatItemProps['avatarAddon'];
+    avatar: ChatItemProps['avatar'];
+    loading?: ChatItemProps['loading'];
+    onClick?: ChatItemProps['onAvatarClick'];
+    placement?: ChatItemProps['placement'];
+    size?: number;
+}
+declare const Avatar: import("react").NamedExoticComponent<AvatarProps>;
+export default Avatar;

package/es/ChatItem/components/Avatar.js

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import A from "../../Avatar";
+import { useStyles } from "../style";
+import Loading from "./Loading";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Avatar = /*#__PURE__*/memo(function (_ref) {
+  var loading = _ref.loading,
+    avatar = _ref.avatar,
+    placement = _ref.placement,
+    addon = _ref.addon,
+    onClick = _ref.onClick,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 40 : _ref$size;
+  var _useStyles = useStyles({
+      avatarSize: size
+    }),
+    styles = _useStyles.styles;
+  var avatarContent = /*#__PURE__*/_jsxs("div", {
+    className: styles.avatarContainer,
+    children: [/*#__PURE__*/_jsx(A, {
+      animation: loading,
+      avatar: avatar.avatar,
+      background: avatar.backgroundColor,
+      onClick: onClick,
+      size: size,
+      title: avatar.title
+    }), /*#__PURE__*/_jsx(Loading, {
+      loading: loading,
+      placement: placement
+    })]
+  });
+  if (!addon) return avatarContent;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    className: styles.avatarGroupContainer,
+    gap: 8,
+    children: [avatarContent, addon]
+  });
+});
+export default Avatar;

package/es/ChatItem/components/BorderSpacing.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ChatItemProps } from "..";
+export interface BorderSpacingProps {
+    borderSpacing?: ChatItemProps['borderSpacing'];
+}
+declare const BorderSpacing: import("react").NamedExoticComponent<BorderSpacingProps>;
+export default BorderSpacing;

package/es/ChatItem/components/BorderSpacing.js

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var BorderSpacing = /*#__PURE__*/memo(function (_ref) {
+  var borderSpacing = _ref.borderSpacing;
+  if (!borderSpacing) return null;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      flex: 'none',
+      width: borderSpacing
+    }
+  });
+});
+export default BorderSpacing;

package/es/ChatItem/components/ErrorContent.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ChatItemProps } from "..";
+export interface ErrorContentProps {
+    ErrorMessage?: ChatItemProps['ErrorMessage'];
+    error?: ChatItemProps['error'];
+    placement?: ChatItemProps['placement'];
+}
+declare const ErrorContent: import("react").NamedExoticComponent<ErrorContentProps>;
+export default ErrorContent;

package/es/ChatItem/components/ErrorContent.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+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 ErrorMessage = _ref.ErrorMessage,
+    error = _ref.error,
+    placement = _ref.placement;
+  var _useStyles = useStyles({
+      placement: placement
+    }),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    gap: 8,
+    children: [/*#__PURE__*/_jsx(Alert, _objectSpread({
+      className: styles.alert,
+      showIcon: true,
+      type: 'error'
+    }, error)), ErrorMessage]
+  });
+});
+export default ErrorContent;

package/es/ChatItem/components/Loading.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ChatItemProps } from "..";
+export interface LoadingProps {
+    loading?: ChatItemProps['loading'];
+    placement?: ChatItemProps['placement'];
+}
+declare const Loading: import("react").NamedExoticComponent<LoadingProps>;
+export default Loading;

package/es/ChatItem/components/Loading.js

@@ -0,0 +1,26 @@
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import Icon from "../../Icon";
+import { useStyles } from "../style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Loading = /*#__PURE__*/memo(function (_ref) {
+  var loading = _ref.loading,
+    placement = _ref.placement;
+  var _useStyles = useStyles({
+      placement: placement
+    }),
+    styles = _useStyles.styles;
+  if (!loading) return null;
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.loading,
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: Loader2,
+      size: {
+        fontSize: 12,
+        strokeWidth: 3
+      },
+      spin: true
+    })
+  });
+});
+export default Loading;

package/es/ChatItem/components/MessageContent.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import { ChatItemProps } from "..";
+export interface LoadingProps {
+    editing?: ChatItemProps['editing'];
+    message?: ReactNode;
+    messageExtra?: ChatItemProps['messageExtra'];
+    onChange?: ChatItemProps['onChange'];
+    onEditingChange?: ChatItemProps['onEditingChange'];
+    placement?: ChatItemProps['placement'];
+    primary?: ChatItemProps['primary'];
+    renderMessage?: ChatItemProps['renderMessage'];
+    text?: ChatItemProps['text'];
+    type?: ChatItemProps['type'];
+}
+declare const Loading: import("react").NamedExoticComponent<LoadingProps>;
+export default Loading;

package/es/ChatItem/components/MessageContent.js

@@ -0,0 +1,45 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import EditableMessage from "../../EditableMessage";
+import { useStyles } from "../style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Loading = /*#__PURE__*/memo(function (_ref) {
+  var editing = _ref.editing,
+    onChange = _ref.onChange,
+    onEditingChange = _ref.onEditingChange,
+    text = _ref.text,
+    message = _ref.message,
+    placement = _ref.placement,
+    messageExtra = _ref.messageExtra,
+    renderMessage = _ref.renderMessage,
+    type = _ref.type,
+    primary = _ref.primary;
+  var _useStyles = useStyles({
+      placement: placement,
+      primary: primary,
+      type: type
+    }),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var content = /*#__PURE__*/_jsx(EditableMessage, {
+    classNames: {
+      input: styles.editingInput
+    },
+    editButtonSize: 'small',
+    editing: editing,
+    onChange: onChange,
+    onEditingChange: onEditingChange,
+    text: text,
+    value: String(message || '...')
+  });
+  var messageContent = renderMessage ? renderMessage(content) : content;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    className: cx(styles.message, editing && styles.editingContainer),
+    children: [messageContent, messageExtra && !editing ? /*#__PURE__*/_jsx("div", {
+      className: styles.messageExtra,
+      children: messageExtra
+    }) : null]
+  });
+});
+export default Loading;

package/es/ChatItem/components/Title.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ChatItemProps } from "..";
+export interface TitleProps {
+    avatar: ChatItemProps['avatar'];
+    placement?: ChatItemProps['placement'];
+    showTitle?: ChatItemProps['showTitle'];
+    time?: ChatItemProps['time'];
+}
+declare const Title: import("react").NamedExoticComponent<TitleProps>;
+export default Title;

package/es/ChatItem/components/Title.js

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+import { formatTime } from "../../utils/formatTime";
+import { useStyles } from "../style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Title = /*#__PURE__*/memo(function (_ref) {
+  var showTitle = _ref.showTitle,
+    placement = _ref.placement,
+    time = _ref.time,
+    avatar = _ref.avatar;
+  var _useStyles = useStyles({
+      placement: placement,
+      showTitle: showTitle
+    }),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs("title", {
+    className: styles.name,
+    children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("time", {
+      children: formatTime(time)
+    })]
+  });
+});
+export default Title;

package/es/ChatItem/index.d.ts

@@ -1,76 +1,5 @@
-import { type AlertProps } from 'antd';
-import { ReactNode } from 'react';
-import { type EditableMessageProps } from "../EditableMessage";
-import { MetaData } from "../types/meta";
-export interface ChatItemProps {
-    ErrorMessage?: ReactNode;
-    /**
-     * @description Actions to be displayed in the chat item
-     */
-    actions?: ReactNode;
-    /**
-     * @description Metadata for the avatar
-     */
-    avatar: MetaData;
-    /**
-     * @description Whether to add border spacing
-     */
-    borderSpacing?: number | string;
-    /**
-     * @description Custom CSS class name for the chat item
-     */
-    className?: string;
-    /**
-     * @description Whether the chat item is in editing mode
-     */
-    editing?: boolean;
-    /**
-     * @description Props for Error render
-     */
-    error?: AlertProps;
-    /**
-     * @description Whether the chat item is in loading state
-     */
-    loading?: boolean;
-    /**
-     * @description The message content of the chat item
-     */
-    message?: ReactNode;
-    messageExtra?: ReactNode;
-    /**
-     * @description Callback when the message content changes
-     * @param value - The new message content
-     */
-    onChange?: (value: string) => void;
-    /**
-     * @description Callback when the editing mode changes
-     * @param editing - The new editing mode
-     */
-    onEditingChange?: (editing: boolean) => void;
-    /**
-     * @description The placement of the chat item
-     * @default 'left'
-     */
-    placement?: 'left' | 'right';
-    /**
-     * @description Whether the chat item is primary
-     */
-    primary?: boolean;
-    renderMessage?: (content: ReactNode) => ReactNode;
-    /**
-     * @description Whether to show the title of the chat item
-     */
-    showTitle?: boolean;
-    text?: EditableMessageProps['text'];
-    /**
-     * @description The timestamp of the chat item
-     */
-    time?: number;
-    /**
-     * @description The type of the chat item
-     * @default 'block'
-     */
-    type?: 'block' | 'pure';
-}
+/// <reference types="react" />
+import type { ChatItemProps } from './type';
 declare const ChatItem: import("react").NamedExoticComponent<ChatItemProps>;
 export default ChatItem;
+export type { ChatItemProps } from './type';

package/es/ChatItem/index.js

@@ -1,22 +1,22 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "ErrorMessage"];
+var _excluded = ["avatarAddon", "onAvatarClick", "actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "ErrorMessage"];
 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 { Flexbox } from 'react-layout-kit';
-import Avatar from "../Avatar";
-import EditableMessage from "../EditableMessage";
-import Icon from "../Icon";
-import { formatTime } from "../utils/formatTime";
+import Actions from "./components/Actions";
+import Avatar from "./components/Avatar";
+import BorderSpacing from "./components/BorderSpacing";
+import ErrorContent from "./components/ErrorContent";
+import MessageContent from "./components/MessageContent";
+import Title from "./components/Title";
 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 actions = _ref.actions,
+  var avatarAddon = _ref.avatarAddon,
+    onAvatarClick = _ref.onAvatarClick,
+    actions = _ref.actions,
     className = _ref.className,
     primary = _ref.primary,
     borderSpacing = _ref.borderSpacing,
@@ -37,9 +37,8 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     renderMessage = _ref.renderMessage,
     text = _ref.text,
     ErrorMessage = _ref.ErrorMessage,
-    properties = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
-      avatarSize: AVATAR_SIZE,
       placement: placement,
       primary: primary,
       showTitle: showTitle,
@@ -48,73 +47,47 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  var content = /*#__PURE__*/_jsx(EditableMessage, {
-    classNames: {
-      input: styles.editingInput
-    },
-    editButtonSize: 'small',
-    editing: editing,
-    onChange: onChange,
-    onEditingChange: onEditingChange,
-    text: text,
-    value: String(message || '...')
-  });
-  var messageContent = renderMessage ? renderMessage(content) : content;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className)
-  }, properties), {}, {
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: styles.avatarContainer,
-      children: [/*#__PURE__*/_jsx(Avatar, {
-        animation: loading,
-        avatar: avatar.avatar,
-        background: avatar.backgroundColor,
-        size: AVATAR_SIZE,
-        title: avatar.title
-      }), loading && /*#__PURE__*/_jsx("div", {
-        className: styles.loading,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: Loader2,
-          size: {
-            fontSize: 12,
-            strokeWidth: 3
-          },
-          spin: true
-        })
-      })]
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      addon: avatarAddon,
+      avatar: avatar,
+      loading: loading,
+      onClick: onAvatarClick,
+      placement: placement
     }), /*#__PURE__*/_jsxs("div", {
       className: styles.messageContainer,
-      children: [/*#__PURE__*/_jsxs("title", {
-        className: styles.name,
-        children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("time", {
-          children: formatTime(time)
-        })]
+      children: [/*#__PURE__*/_jsx(Title, {
+        avatar: avatar,
+        placement: placement,
+        showTitle: showTitle,
+        time: time
       }), /*#__PURE__*/_jsxs("div", {
         className: styles.messageContent,
-        children: [error ? /*#__PURE__*/_jsxs(Flexbox, {
-          gap: 8,
-          children: [/*#__PURE__*/_jsx(Alert, _objectSpread({
-            className: styles.alert,
-            showIcon: true,
-            type: 'error'
-          }, error)), ErrorMessage]
-        }) : /*#__PURE__*/_jsxs(Flexbox, {
-          className: cx(styles.message, editing && styles.editingContainer),
-          children: [messageContent, messageExtra && !editing ? /*#__PURE__*/_jsx("div", {
-            className: styles.messageExtra,
-            children: messageExtra
-          }) : null]
-        }), !editing && /*#__PURE__*/_jsx("div", {
-          className: styles.actions,
-          role: "chat-item-actions",
-          children: actions
+        children: [error ? /*#__PURE__*/_jsx(ErrorContent, {
+          ErrorMessage: ErrorMessage,
+          error: error,
+          placement: placement
+        }) : /*#__PURE__*/_jsx(MessageContent, {
+          editing: editing,
+          message: message,
+          messageExtra: messageExtra,
+          onChange: onChange,
+          onEditingChange: onEditingChange,
+          placement: placement,
+          primary: primary,
+          renderMessage: renderMessage,
+          text: text,
+          type: type
+        }), !editing && /*#__PURE__*/_jsx(Actions, {
+          actions: actions,
+          placement: placement,
+          type: type
         })]
       })]
-    }), borderSpacing && /*#__PURE__*/_jsx("div", {
-      style: {
-        flex: 'none',
-        width: borderSpacing
-      }
+    }), /*#__PURE__*/_jsx(BorderSpacing, {
+      borderSpacing: borderSpacing
     })]
   }));
 });

package/es/ChatItem/style.d.ts

@@ -1,5 +1,5 @@
 export declare const useStyles: (props?: {
-    avatarSize: number;
+    avatarSize?: number | undefined;
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
     showTitle?: boolean | undefined;
@@ -9,6 +9,7 @@ export declare const useStyles: (props?: {
     actions: import("antd-style").SerializedStyles;
     alert: import("antd-style").SerializedStyles;
     avatarContainer: import("antd-style").SerializedStyles;
+    avatarGroupContainer: import("antd-style").SerializedStyles;
     container: string;
     editingContainer: string;
     editingInput: import("antd-style").SerializedStyles;

package/es/ChatItem/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, _ref2) {
@@ -21,14 +21,15 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     actions: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: flex-start;\n        align-self: ", ";\n        justify-content: ", ";\n      "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'),
     alert: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
     avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject7 || (_templateObject7 = _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\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
-    editingContainer: cx(css(_templateObject8 || (_templateObject8 = _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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
-    editingInput: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        min-height: 32px;\n      "]))),
-    loading: css(_templateObject11 || (_templateObject11 = _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),
-    message: cx(typeStylish, css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
-    messageContent: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: revert;\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 8px;\n        align-items: ", ";\n      "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end'),
+    avatarGroupContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject8 || (_templateObject8 = _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\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
+    editingContainer: cx(css(_templateObject9 || (_templateObject9 = _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(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
+    editingInput: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        min-height: 32px;\n      "]))),
+    loading: css(_templateObject12 || (_templateObject12 = _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),
+    message: cx(typeStylish, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    messageContainer: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
+    messageContent: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        position: revert;\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 8px;\n        align-items: ", ";\n      "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end'),
     messageExtra: cx('message-extra'),
-    name: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\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', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
+    name: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\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', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
   };
 });