@lobehub/ui 4.3.2 → 4.3.3

package/es/chat/ChatHeader/style.mjs

@@ -1,7 +1,7 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/chat/ChatHeader/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		center: css$1`
       position: relative;
@@ -19,9 +19,9 @@ const useStyles = createStyles(({ css: css$1, token }) => {
       height: 52px;
       min-height: 52px;
       max-height: 52px;
+      border-block-end: 1px solid ${cssVar$1.colorBorderSecondary};
 
-      background: ${token.colorBgContainerSecondary};
-      border-block-end: 1px solid ${token.colorBorderSecondary};
+      background: ${cssVar$1.colorBgContainer};
     `,
 		left: css$1`
       position: relative;
@@ -36,7 +36,7 @@ const useStyles = createStyles(({ css: css$1, token }) => {
     `
 	};
 });
-const useTitleStyles = createStyles(({ css: css$1, token }) => ({
+const titleStyles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	container: css$1`
     position: relative;
     overflow: hidden;
@@ -50,7 +50,7 @@ const useTitleStyles = createStyles(({ css: css$1, token }) => ({
 
     font-size: 12px;
     line-height: 1;
-    color: ${token.colorTextTertiary};
+    color: ${cssVar$1.colorTextTertiary};
     text-overflow: ellipsis;
     white-space: nowrap;
   `,
@@ -80,5 +80,5 @@ const useTitleStyles = createStyles(({ css: css$1, token }) => ({
 }));
 
 //#endregion
-export { useStyles, useTitleStyles };
+export { styles, titleStyles };
 //# sourceMappingURL=style.mjs.map

package/es/chat/ChatHeader/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/chat/ChatHeader/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    center: css`\n      position: relative;\n      overflow: hidden;\n    `,\n    container: css`\n      position: absolute;\n      z-index: 10;\n\n      overflow: hidden;\n      grid-area: header;\n      align-self: stretch;\n\n      width: 100%;\n      height: 52px;\n      min-height: 52px;\n      max-height: 52px;\n\n      background: ${token.colorBgContainerSecondary};\n      border-block-end: 1px solid ${token.colorBorderSecondary};\n    `,\n    left: css`\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n      padding-inline-start: 8px;\n    `,\n    right: css`\n      position: relative;\n      overflow: hidden;\n      flex: none;\n    `,\n  };\n});\n\nexport const useTitleStyles = createStyles(({ css, token }) => ({\n  container: css`\n    position: relative;\n    overflow: hidden;\n    flex: 1;\n    max-width: 100%;\n  `,\n  desc: css`\n    overflow: hidden;\n\n    width: 100%;\n\n    font-size: 12px;\n    line-height: 1;\n    color: ${token.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  tag: css`\n    flex: none;\n    align-items: baseline;\n  `,\n  title: css`\n    overflow: hidden;\n\n    font-size: 16px;\n    font-weight: bold;\n    line-height: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  titleContainer: css`\n    flex: 1;\n    line-height: 1;\n  `,\n  titleWithDesc: css`\n    overflow: hidden;\n    font-weight: bold;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO;EACL,QAAQ,KAAG;;;;EAIX,WAAW,KAAG;;;;;;;;;;;;;oBAaE,MAAM,0BAA0B;oCAChB,MAAM,qBAAqB;;EAE3D,MAAM,KAAG;;;;;;EAMT,OAAO,KAAG;;;;;EAKX;EACD;AAEF,MAAa,iBAAiB,cAAc,EAAE,YAAK,aAAa;CAC9D,WAAW,KAAG;;;;;;CAMd,MAAM,KAAG;;;;;;;aAOE,MAAM,kBAAkB;;;;CAInC,KAAK,KAAG;;;;CAIR,OAAO,KAAG;;;;;;;;;CASV,gBAAgB,KAAG;;;;CAInB,eAAe,KAAG;;;;;;CAMnB,EAAE"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/chat/ChatHeader/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    center: css`\n      position: relative;\n      overflow: hidden;\n    `,\n    container: css`\n      position: absolute;\n      z-index: 10;\n\n      overflow: hidden;\n      grid-area: header;\n      align-self: stretch;\n\n      width: 100%;\n      height: 52px;\n      min-height: 52px;\n      max-height: 52px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n      background: ${cssVar.colorBgContainer};\n    `,\n    left: css`\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n      padding-inline-start: 8px;\n    `,\n    right: css`\n      position: relative;\n      overflow: hidden;\n      flex: none;\n    `,\n  };\n});\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  container: css`\n    position: relative;\n    overflow: hidden;\n    flex: 1;\n    max-width: 100%;\n  `,\n  desc: css`\n    overflow: hidden;\n\n    width: 100%;\n\n    font-size: 12px;\n    line-height: 1;\n    color: ${cssVar.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  tag: css`\n    flex: none;\n    align-items: baseline;\n  `,\n  title: css`\n    overflow: hidden;\n\n    font-size: 16px;\n    font-weight: bold;\n    line-height: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  titleContainer: css`\n    flex: 1;\n    line-height: 1;\n  `,\n  titleWithDesc: css`\n    overflow: hidden;\n    font-weight: bold;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,QAAQ,KAAG;;;;EAIX,WAAW,KAAG;;;;;;;;;;;;oCAYkBA,SAAO,qBAAqB;;oBAE5CA,SAAO,iBAAiB;;EAExC,MAAM,KAAG;;;;;;EAMT,OAAO,KAAG;;;;;EAKX;EACD;AAEF,MAAa,cAAc,oBAAoB,EAAE,YAAK,wBAAc;CAClE,WAAW,KAAG;;;;;;CAMd,MAAM,KAAG;;;;;;;aAOEA,SAAO,kBAAkB;;;;CAIpC,KAAK,KAAG;;;;CAIR,OAAO,KAAG;;;;;;;;;CASV,gBAAgB,KAAG;;;;CAInB,eAAe,KAAG;;;;;;CAMnB,EAAE"}

package/es/chat/ChatInputArea/ChatInputArea.mjs

@@ -2,13 +2,12 @@
 
 import DraggablePanel_default from "../../DraggablePanel/index.mjs";
 import ChatInputAreaInner_default from "./components/ChatInputAreaInner.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/chat/ChatInputArea/ChatInputArea.tsx
 const ChatInputArea = memo(({ ref, className, style, classNames, expand = true, setExpand, bottomAddons, topAddons, onSizeChange, heights, onSend, ...rest }) => {
-	const { styles } = useStyles();
 	return /* @__PURE__ */ jsx(DraggablePanel_default, {
 		className,
 		classNames,

package/es/chat/ChatInputArea/ChatInputArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputArea.mjs","names":["DraggablePanel","ChatInputAreaInner"],"sources":["../../../src/chat/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\n\nimport ChatInputAreaInner from './components/ChatInputAreaInner';\nimport { useStyles } from './style';\nimport type { ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    classNames,\n    expand = true,\n    setExpand,\n    bottomAddons,\n    topAddons,\n    onSizeChange,\n    heights,\n    onSend,\n    ...rest\n  }) => {\n    const { styles } = useStyles();\n\n    return (\n      <DraggablePanel\n        className={className}\n        classNames={classNames}\n        fullscreen={expand}\n        headerHeight={heights?.headerHeight}\n        maxHeight={heights?.maxHeight}\n        minHeight={heights?.minHeight}\n        onSizeChange={onSizeChange}\n        placement=\"bottom\"\n        size={{ height: heights?.inputHeight, width: '100%' }}\n        style={{ zIndex: 10, ...style }}\n      >\n        <section className={styles.container} style={{ minHeight: heights?.minHeight }}>\n          {topAddons}\n          <div className={styles.textareaContainer}>\n            <ChatInputAreaInner\n              className={styles.textarea}\n              onSend={() => {\n                onSend?.();\n                setExpand?.(false);\n              }}\n              ref={ref}\n              style={{\n                paddingInline: 16,\n              }}\n              {...rest}\n            />\n          </div>\n          {bottomAddons}\n        </section>\n      </DraggablePanel>\n    );\n  },\n);\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;AAUA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,YACA,SAAS,MACT,WACA,cACA,WACA,cACA,SACA,QACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,WAAW;AAE9B,QACE,oBAACA;EACY;EACC;EACZ,YAAY;EACZ,cAAc,SAAS;EACvB,WAAW,SAAS;EACpB,WAAW,SAAS;EACN;EACd,WAAU;EACV,MAAM;GAAE,QAAQ,SAAS;GAAa,OAAO;GAAQ;EACrD,OAAO;GAAE,QAAQ;GAAI,GAAG;GAAO;YAE/B,qBAAC;GAAQ,WAAW,OAAO;GAAW,OAAO,EAAE,WAAW,SAAS,WAAW;;IAC3E;IACD,oBAAC;KAAI,WAAW,OAAO;eACrB,oBAACC;MACC,WAAW,OAAO;MAClB,cAAc;AACZ,iBAAU;AACV,mBAAY,MAAM;;MAEf;MACL,OAAO,EACL,eAAe,IAChB;MACD,GAAI;OACJ;MACE;IACL;;IACO;GACK;EAGtB;AAED,4BAAe"}
+{"version":3,"file":"ChatInputArea.mjs","names":["DraggablePanel","ChatInputAreaInner"],"sources":["../../../src/chat/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\n\nimport ChatInputAreaInner from './components/ChatInputAreaInner';\nimport { styles } from './style';\nimport type { ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    classNames,\n    expand = true,\n    setExpand,\n    bottomAddons,\n    topAddons,\n    onSizeChange,\n    heights,\n    onSend,\n    ...rest\n  }) => {\n    return (\n      <DraggablePanel\n        className={className}\n        classNames={classNames}\n        fullscreen={expand}\n        headerHeight={heights?.headerHeight}\n        maxHeight={heights?.maxHeight}\n        minHeight={heights?.minHeight}\n        onSizeChange={onSizeChange}\n        placement=\"bottom\"\n        size={{ height: heights?.inputHeight, width: '100%' }}\n        style={{ zIndex: 10, ...style }}\n      >\n        <section className={styles.container} style={{ minHeight: heights?.minHeight }}>\n          {topAddons}\n          <div className={styles.textareaContainer}>\n            <ChatInputAreaInner\n              className={styles.textarea}\n              onSend={() => {\n                onSend?.();\n                setExpand?.(false);\n              }}\n              ref={ref}\n              style={{\n                paddingInline: 16,\n              }}\n              {...rest}\n            />\n          </div>\n          {bottomAddons}\n        </section>\n      </DraggablePanel>\n    );\n  },\n);\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;AAUA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,YACA,SAAS,MACT,WACA,cACA,WACA,cACA,SACA,QACA,GAAG,WACC;AACJ,QACE,oBAACA;EACY;EACC;EACZ,YAAY;EACZ,cAAc,SAAS;EACvB,WAAW,SAAS;EACpB,WAAW,SAAS;EACN;EACd,WAAU;EACV,MAAM;GAAE,QAAQ,SAAS;GAAa,OAAO;GAAQ;EACrD,OAAO;GAAE,QAAQ;GAAI,GAAG;GAAO;YAE/B,qBAAC;GAAQ,WAAW,OAAO;GAAW,OAAO,EAAE,WAAW,SAAS,WAAW;;IAC3E;IACD,oBAAC;KAAI,WAAW,OAAO;eACrB,oBAACC;MACC,WAAW,OAAO;MAClB,cAAc;AACZ,iBAAU;AACV,mBAAY,MAAM;;MAEf;MACL,OAAO,EACL,eAAe,IAChB;MACD,GAAI;OACJ;MACE;IACL;;IACO;GACK;EAGtB;AAED,4BAAe"}

package/es/chat/ChatInputArea/components/ChatInputActionBar.mjs

@@ -1,17 +1,16 @@
 'use client';
 
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
-import { useActionBarStyles } from "../style.mjs";
+import { actionBarStyles } from "../style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useResponsive } from "antd-style";
 
 //#region src/chat/ChatInputArea/components/ChatInputActionBar.tsx
 const ChatInputActionBar = ({ ref, padding = "0 16px", leftAddons, rightAddons, ...rest }) => {
 	const { mobile } = useResponsive();
-	const { styles } = useActionBarStyles();
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		align: "center",
-		className: styles.root,
+		className: actionBarStyles.root,
 		flex: "none",
 		horizontal: true,
 		justify: "space-between",
@@ -20,14 +19,14 @@ const ChatInputActionBar = ({ ref, padding = "0 16px", leftAddons, rightAddons,
 		...rest,
 		children: [/* @__PURE__ */ jsx(FlexBasic_default, {
 			align: "center",
-			className: styles.left,
+			className: actionBarStyles.left,
 			flex: 1,
 			gap: mobile ? 0 : 4,
 			horizontal: true,
 			children: leftAddons
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
 			align: "center",
-			className: styles.right,
+			className: actionBarStyles.right,
 			flex: 0,
 			gap: mobile ? 0 : 4,
 			horizontal: true,

package/es/chat/ChatInputArea/components/ChatInputActionBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputActionBar.mjs","names":["ChatInputActionBar: FC<ChatInputActionBarProps>","useStyles","Flexbox"],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputActionBar.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useActionBarStyles as useStyles } from '../style';\nimport { ChatInputActionBarProps } from '../type';\n\nconst ChatInputActionBar: FC<ChatInputActionBarProps> = ({\n  ref,\n  padding = '0 16px',\n  leftAddons,\n  rightAddons,\n  ...rest\n}) => {\n  const { mobile } = useResponsive();\n  const { styles } = useStyles();\n  return (\n    <Flexbox\n      align={'center'}\n      className={styles.root}\n      flex={'none'}\n      horizontal\n      justify={'space-between'}\n      padding={padding}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox align={'center'} className={styles.left} flex={1} gap={mobile ? 0 : 4} horizontal>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox\n        align={'center'}\n        className={styles.right}\n        flex={0}\n        gap={mobile ? 0 : 4}\n        horizontal\n        justify={'flex-end'}\n      >\n        {rightAddons}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatInputActionBar.displayName = 'ChatInputActionBar';\n\nexport default ChatInputActionBar;\n"],"mappings":";;;;;;;;AAUA,MAAMA,sBAAmD,EACvD,KACA,UAAU,UACV,YACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,WAAWC,oBAAW;AAC9B,QACE,qBAACC;EACC,OAAO;EACP,WAAW,OAAO;EAClB,MAAM;EACN;EACA,SAAS;EACA;EACJ;EACL,GAAI;aAEJ,oBAACA;GAAQ,OAAO;GAAU,WAAW,OAAO;GAAM,MAAM;GAAG,KAAK,SAAS,IAAI;GAAG;aAC7E;IACO,EACV,oBAACA;GACC,OAAO;GACP,WAAW,OAAO;GAClB,MAAM;GACN,KAAK,SAAS,IAAI;GAClB;GACA,SAAS;aAER;IACO;GACF;;AAId,mBAAmB,cAAc;AAEjC,iCAAe"}
+{"version":3,"file":"ChatInputActionBar.mjs","names":["ChatInputActionBar: FC<ChatInputActionBarProps>","Flexbox","styles"],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputActionBar.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { actionBarStyles as styles } from '../style';\nimport { ChatInputActionBarProps } from '../type';\n\nconst ChatInputActionBar: FC<ChatInputActionBarProps> = ({\n  ref,\n  padding = '0 16px',\n  leftAddons,\n  rightAddons,\n  ...rest\n}) => {\n  const { mobile } = useResponsive();\n  return (\n    <Flexbox\n      align={'center'}\n      className={styles.root}\n      flex={'none'}\n      horizontal\n      justify={'space-between'}\n      padding={padding}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox align={'center'} className={styles.left} flex={1} gap={mobile ? 0 : 4} horizontal>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox\n        align={'center'}\n        className={styles.right}\n        flex={0}\n        gap={mobile ? 0 : 4}\n        horizontal\n        justify={'flex-end'}\n      >\n        {rightAddons}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatInputActionBar.displayName = 'ChatInputActionBar';\n\nexport default ChatInputActionBar;\n"],"mappings":";;;;;;;;AAUA,MAAMA,sBAAmD,EACvD,KACA,UAAU,UACV,YACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;AAClC,QACE,qBAACC;EACC,OAAO;EACP,WAAWC,gBAAO;EAClB,MAAM;EACN;EACA,SAAS;EACA;EACJ;EACL,GAAI;aAEJ,oBAACD;GAAQ,OAAO;GAAU,WAAWC,gBAAO;GAAM,MAAM;GAAG,KAAK,SAAS,IAAI;GAAG;aAC7E;IACO,EACV,oBAACD;GACC,OAAO;GACP,WAAWC,gBAAO;GAClB,MAAM;GACN,KAAK,SAAS,IAAI;GAClB;GACA,SAAS;aAER;IACO;GACF;;AAId,mBAAmB,cAAc;AAEjC,iCAAe"}

package/es/chat/ChatInputArea/components/ChatInputAreaInner.d.mts

@@ -1,8 +1,8 @@
 import { ChatInputAreaInnerProps } from "../type.mjs";
-import * as react118 from "react";
+import * as react105 from "react";
 
 //#region src/chat/ChatInputArea/components/ChatInputAreaInner.d.ts
-declare const ChatInputAreaInner: react118.NamedExoticComponent<ChatInputAreaInnerProps>;
+declare const ChatInputAreaInner: react105.NamedExoticComponent<ChatInputAreaInnerProps>;
 //#endregion
 export { ChatInputAreaInner };
 //# sourceMappingURL=ChatInputAreaInner.d.mts.map

package/es/chat/ChatInputArea/components/ChatSendButton.mjs

@@ -2,12 +2,11 @@ import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
 import Icon_default from "../../../Icon/Icon.mjs";
 import Button_default from "../../../Button/Button.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useTheme } from "antd-style";
+import { cssVar } from "antd-style";
 import { ArrowBigUp, CornerDownLeft, Loader2 } from "lucide-react";
 
 //#region src/chat/ChatInputArea/components/ChatSendButton.tsx
 const ChatSendButton = ({ ref, leftAddons, rightAddons, texts, onSend, loading, onStop, ...rest }) => {
-	const theme = useTheme();
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		align: "end",
 		distribution: "space-between",
@@ -31,7 +30,7 @@ const ChatSendButton = ({ ref, leftAddons, rightAddons, texts, onSend, loading,
 					gap: 4,
 					horizontal: true,
 					style: {
-						color: theme.colorTextDescription,
+						color: cssVar.colorTextDescription,
 						fontSize: 12,
 						marginRight: 12
 					},

package/es/chat/ChatInputArea/components/ChatSendButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatSendButton.mjs","names":["ChatSendButton: FC<ChatSendButtonProps>","Flexbox","Icon","Button"],"sources":["../../../../src/chat/ChatInputArea/components/ChatSendButton.tsx"],"sourcesContent":["import { useTheme } from 'antd-style';\nimport { ArrowBigUp, CornerDownLeft, Loader2 } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { ChatSendButtonProps } from '../type';\n\nconst ChatSendButton: FC<ChatSendButtonProps> = ({\n  ref,\n  leftAddons,\n  rightAddons,\n  texts,\n  onSend,\n  loading,\n  onStop,\n  ...rest\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Flexbox\n      align={'end'}\n      distribution={'space-between'}\n      flex={'none'}\n      gap={8}\n      horizontal\n      paddingInline={16}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox align={'center'} gap={8} horizontal>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox align={'center'} gap={8} horizontal>\n        <Flexbox\n          gap={4}\n          horizontal\n          style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}\n        >\n          <Icon icon={CornerDownLeft} />\n          <span>{texts?.send || 'Send'}</span>\n          <span>/</span>\n          <Flexbox horizontal>\n            <Icon icon={ArrowBigUp} />\n            <Icon icon={CornerDownLeft} />\n          </Flexbox>\n          <span>{texts?.warp || 'Warp'}</span>\n        </Flexbox>\n        {rightAddons}\n        {loading ? (\n          <Button icon={loading && Loader2} onClick={onStop}>\n            {texts?.stop || 'Stop'}\n          </Button>\n        ) : (\n          <Button onClick={onSend} type={'primary'}>\n            {texts?.send || 'Send'}\n          </Button>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatSendButton.displayName = 'ChatSendButton';\n\nexport default ChatSendButton;\n"],"mappings":";;;;;;;;AAUA,MAAMA,kBAA2C,EAC/C,KACA,YACA,aACA,OACA,QACA,SACA,QACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;AAExB,QACE,qBAACC;EACC,OAAO;EACP,cAAc;EACd,MAAM;EACN,KAAK;EACL;EACA,eAAe;EACV;EACL,GAAI;aAEJ,oBAACA;GAAQ,OAAO;GAAU,KAAK;GAAG;aAC/B;IACO,EACV,qBAACA;GAAQ,OAAO;GAAU,KAAK;GAAG;;IAChC,qBAACA;KACC,KAAK;KACL;KACA,OAAO;MAAE,OAAO,MAAM;MAAsB,UAAU;MAAI,aAAa;MAAI;;MAE3E,oBAACC,gBAAK,MAAM,iBAAkB;MAC9B,oBAAC,oBAAM,OAAO,QAAQ,SAAc;MACpC,oBAAC,oBAAK,MAAQ;MACd,qBAACD;OAAQ;kBACP,oBAACC,gBAAK,MAAM,aAAc,EAC1B,oBAACA,gBAAK,MAAM,iBAAkB;QACtB;MACV,oBAAC,oBAAM,OAAO,QAAQ,SAAc;;MAC5B;IACT;IACA,UACC,oBAACC;KAAO,MAAM,WAAW;KAAS,SAAS;eACxC,OAAO,QAAQ;MACT,GAET,oBAACA;KAAO,SAAS;KAAQ,MAAM;eAC5B,OAAO,QAAQ;MACT;;IAEH;GACF;;AAId,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"ChatSendButton.mjs","names":["ChatSendButton: FC<ChatSendButtonProps>","Flexbox","Icon","Button"],"sources":["../../../../src/chat/ChatInputArea/components/ChatSendButton.tsx"],"sourcesContent":["import { cssVar } from 'antd-style';\nimport { ArrowBigUp, CornerDownLeft, Loader2 } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { ChatSendButtonProps } from '../type';\n\nconst ChatSendButton: FC<ChatSendButtonProps> = ({\n  ref,\n  leftAddons,\n  rightAddons,\n  texts,\n  onSend,\n  loading,\n  onStop,\n  ...rest\n}) => {\n  return (\n    <Flexbox\n      align={'end'}\n      distribution={'space-between'}\n      flex={'none'}\n      gap={8}\n      horizontal\n      paddingInline={16}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox align={'center'} gap={8} horizontal>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox align={'center'} gap={8} horizontal>\n        <Flexbox\n          gap={4}\n          horizontal\n          style={{ color: cssVar.colorTextDescription, fontSize: 12, marginRight: 12 }}\n        >\n          <Icon icon={CornerDownLeft} />\n          <span>{texts?.send || 'Send'}</span>\n          <span>/</span>\n          <Flexbox horizontal>\n            <Icon icon={ArrowBigUp} />\n            <Icon icon={CornerDownLeft} />\n          </Flexbox>\n          <span>{texts?.warp || 'Warp'}</span>\n        </Flexbox>\n        {rightAddons}\n        {loading ? (\n          <Button icon={loading && Loader2} onClick={onStop}>\n            {texts?.stop || 'Stop'}\n          </Button>\n        ) : (\n          <Button onClick={onSend} type={'primary'}>\n            {texts?.send || 'Send'}\n          </Button>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatSendButton.displayName = 'ChatSendButton';\n\nexport default ChatSendButton;\n"],"mappings":";;;;;;;;AAUA,MAAMA,kBAA2C,EAC/C,KACA,YACA,aACA,OACA,QACA,SACA,QACA,GAAG,WACC;AACJ,QACE,qBAACC;EACC,OAAO;EACP,cAAc;EACd,MAAM;EACN,KAAK;EACL;EACA,eAAe;EACV;EACL,GAAI;aAEJ,oBAACA;GAAQ,OAAO;GAAU,KAAK;GAAG;aAC/B;IACO,EACV,qBAACA;GAAQ,OAAO;GAAU,KAAK;GAAG;;IAChC,qBAACA;KACC,KAAK;KACL;KACA,OAAO;MAAE,OAAO,OAAO;MAAsB,UAAU;MAAI,aAAa;MAAI;;MAE5E,oBAACC,gBAAK,MAAM,iBAAkB;MAC9B,oBAAC,oBAAM,OAAO,QAAQ,SAAc;MACpC,oBAAC,oBAAK,MAAQ;MACd,qBAACD;OAAQ;kBACP,oBAACC,gBAAK,MAAM,aAAc,EAC1B,oBAACA,gBAAK,MAAM,iBAAkB;QACtB;MACV,oBAAC,oBAAM,OAAO,QAAQ,SAAc;;MAC5B;IACT;IACA,UACC,oBAACC;KAAO,MAAM,WAAW;KAAS,SAAS;eACxC,OAAO,QAAQ;MACT,GAET,oBAACA;KAAO,SAAS;KAAQ,MAAM;eAC5B,OAAO,QAAQ;MACT;;IAEH;GACF;;AAId,eAAe,cAAc;AAE7B,6BAAe"}

package/es/chat/ChatInputArea/style.mjs

@@ -1,7 +1,8 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
 
 //#region src/chat/ChatInputArea/style.ts
-const useStyles = createStyles(({ css: css$1 }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
 		container: css$1`
       position: relative;
@@ -26,8 +27,8 @@ const useStyles = createStyles(({ css: css$1 }) => {
     `
 	};
 });
-const useActionBarStyles = createStyles(({ css: css$1, cx: cx$1, stylish }) => ({
-	left: cx$1(stylish.noScrollbar, css$1`
+const actionBarStyles = createStaticStyles(({ css: css$1 }) => ({
+	left: cx(staticStylish.noScrollbar, css$1`
       overflow: auto hidden;
     `),
 	right: css$1``,
@@ -39,5 +40,5 @@ const useActionBarStyles = createStyles(({ css: css$1, cx: cx$1, stylish }) => (
 }));
 
 //#endregion
-export { useActionBarStyles, useStyles };
+export { actionBarStyles, styles };
 //# sourceMappingURL=style.mjs.map

package/es/chat/ChatInputArea/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/chat/ChatInputArea/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  return {\n    container: css`\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n\n      height: 100%;\n      padding-block: 8px 12px;\n      padding-inline: 0;\n    `,\n    textarea: css`\n      height: 100% !important;\n      padding-block: 0;\n      padding-inline: 8px;\n      line-height: 1.5;\n    `,\n    textareaContainer: css`\n      position: relative;\n      flex: 1;\n    `,\n  };\n});\n\nexport const useActionBarStyles = createStyles(({ css, cx, stylish }) => ({\n  left: cx(\n    stylish.noScrollbar,\n    css`\n      overflow: auto hidden;\n    `,\n  ),\n  right: css``,\n  root: css`\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AACjD,QAAO;EACL,WAAW,KAAG;;;;;;;;;;;EAWd,UAAU,KAAG;;;;;;EAMb,mBAAmB,KAAG;;;;EAIvB;EACD;AAEF,MAAa,qBAAqB,cAAc,EAAE,YAAK,UAAI,eAAe;CACxE,MAAMA,KACJ,QAAQ,aACR,KAAG;;MAGJ;CACD,OAAO,KAAG;CACV,MAAM,KAAG;;;;;CAKV,EAAE"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/chat/ChatInputArea/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    container: css`\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n\n      height: 100%;\n      padding-block: 8px 12px;\n      padding-inline: 0;\n    `,\n    textarea: css`\n      height: 100% !important;\n      padding-block: 0;\n      padding-inline: 8px;\n      line-height: 1.5;\n    `,\n    textareaContainer: css`\n      position: relative;\n      flex: 1;\n    `,\n  };\n});\n\nexport const actionBarStyles = createStaticStyles(({ css }) => ({\n  left: cx(\n    lobeStaticStylish.noScrollbar,\n    css`\n      overflow: auto hidden;\n    `,\n  ),\n  right: css``,\n  root: css`\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n  `,\n}));\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,WAAW,KAAG;;;;;;;;;;;EAWd,UAAU,KAAG;;;;;;EAMb,mBAAmB,KAAG;;;;EAIvB;EACD;AAEF,MAAa,kBAAkB,oBAAoB,EAAE,kBAAW;CAC9D,MAAM,GACJA,cAAkB,aAClB,KAAG;;MAGJ;CACD,OAAO,KAAG;CACV,MAAM,KAAG;;;;;CAKV,EAAE"}

package/es/chat/ChatItem/ChatItem.d.mts

@@ -1,8 +1,8 @@
 import { ChatItemProps } from "./type.mjs";
-import * as react119 from "react";
+import * as react133 from "react";
 
 //#region src/chat/ChatItem/ChatItem.d.ts
-declare const ChatItem: react119.NamedExoticComponent<ChatItemProps>;
+declare const ChatItem: react133.NamedExoticComponent<ChatItemProps>;
 //#endregion
 export { ChatItem };
 //# sourceMappingURL=ChatItem.d.mts.map

package/es/chat/ChatItem/ChatItem.mjs

@@ -3,31 +3,25 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { useTranslation } from "../../i18n/useTranslation.mjs";
 import chat_default from "../../i18n/resources/en/chat.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import Actions_default from "./components/Actions.mjs";
 import Avatar_default from "./components/Avatar.mjs";
 import BorderSpacing_default from "./components/BorderSpacing.mjs";
 import ErrorContent_default from "./components/ErrorContent.mjs";
 import MessageContent_default from "./components/MessageContent.mjs";
 import Title_default from "./components/Title.mjs";
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
+import { cx, useResponsive } from "antd-style";
 
 //#region src/chat/ChatItem/ChatItem.tsx
 const MOBILE_AVATAR_SIZE = 32;
 const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, className, primary, loading, message, placeholderMessage, placement = "left", variant = "bubble", avatar, error, showTitle, time, editing, onChange, onEditingChange, messageExtra, renderMessage, text, errorMessage, onDoubleClick, fontSize, aboveMessage, belowMessage, markdownProps, actionsWrapWidth = 54, showAvatar = true, titleAddon, ...rest }) => {
 	const { mobile } = useResponsive();
 	const { t } = useTranslation(chat_default);
-	const { cx: cx$1, styles } = useStyles({
-		editing,
-		placement,
-		primary,
-		showTitle,
-		time,
-		title: avatar.title,
-		variant
-	});
+	const avatarSize = mobile ? MOBILE_AVATAR_SIZE : avatarProps?.size || 40;
+	const cssVariables = useMemo(() => ({ "--chat-item-avatar-size": `${avatarSize}px` }), [avatarSize]);
+	const hasTime = Boolean(time);
 	const placeholderText = placeholderMessage ?? t("chat.placeholder");
 	const avatarAlt = avatarProps?.alt || avatar.title || t("chat.avatar");
 	const contentRef = useRef(null);
@@ -49,10 +43,19 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 		observer.observe(containerRef.current);
 		return () => observer.disconnect();
 	}, [variant, actionsWrapWidth]);
+	const containerClassName = cx(variant === "docs" ? styles.containerDocs : styles.container, className);
+	const messageContainerClassName = useMemo(() => {
+		if (editing) return hasTime ? styles.messageContainerEditingWithTime : styles.messageContainerEditing;
+		return hasTime ? styles.messageContainerWithTime : styles.messageContainer;
+	}, [editing, hasTime]);
+	const messageContentClassName = useMemo(() => {
+		return editing ? styles.messageContentEditing : styles.messageContent;
+	}, [editing]);
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx$1(styles.container, className),
+		className: containerClassName,
 		direction: placement === "left" ? "horizontal" : "horizontal-reverse",
 		gap: mobile ? 6 : 12,
+		style: cssVariables,
 		...rest,
 		children: [
 			showAvatar && /* @__PURE__ */ jsx(Avatar_default, {
@@ -63,7 +66,7 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 				loading,
 				onClick: onAvatarClick,
 				placement,
-				size: mobile ? MOBILE_AVATAR_SIZE : void 0,
+				size: avatarSize,
 				style: {
 					marginTop: showTitle ? -12 : 6,
 					...avatarProps?.style
@@ -71,7 +74,7 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 			}),
 			/* @__PURE__ */ jsxs(FlexBasic_default, {
 				align: placement === "left" ? "flex-start" : "flex-end",
-				className: styles.messageContainer,
+				className: messageContainerClassName,
 				ref: containerRef,
 				children: [
 					/* @__PURE__ */ jsx(Title_default, {
@@ -84,7 +87,7 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 					aboveMessage,
 					/* @__PURE__ */ jsxs(FlexBasic_default, {
 						align: placement === "left" ? "flex-start" : "flex-end",
-						className: styles.messageContent,
+						className: messageContentClassName,
 						"data-layout": layoutMode,
 						direction: layoutMode === "horizontal" ? placement === "left" ? "horizontal" : "horizontal-reverse" : "vertical",
 						gap: 8,

package/es/chat/ChatItem/ChatItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatItem.mjs","names":["chatMessages","Flexbox","cx","Avatar","Title","ErrorContent","MessageContent","Actions","BorderSpacing"],"sources":["../../../src/chat/ChatItem/ChatItem.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport Actions from './components/Actions';\nimport Avatar from './components/Avatar';\nimport BorderSpacing from './components/BorderSpacing';\nimport ErrorContent from './components/ErrorContent';\nimport MessageContent from './components/MessageContent';\nimport Title from './components/Title';\nimport { useStyles } from './style';\nimport type { ChatItemProps } from './type';\n\nconst MOBILE_AVATAR_SIZE = 32;\n\nconst ChatItem = memo<ChatItemProps>(\n  ({\n    avatarAddon,\n    onAvatarClick,\n    avatarProps,\n    actions,\n    className,\n    primary,\n    loading,\n    message,\n    placeholderMessage,\n    placement = 'left',\n    variant = 'bubble',\n    avatar,\n    error,\n    showTitle,\n    time,\n    editing,\n    onChange,\n    onEditingChange,\n    messageExtra,\n    renderMessage,\n    text,\n    errorMessage,\n    onDoubleClick,\n    fontSize,\n    aboveMessage,\n    belowMessage,\n    markdownProps,\n    actionsWrapWidth = 54,\n    showAvatar = true,\n    titleAddon,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { t } = useTranslation(chatMessages);\n    const { cx, styles } = useStyles({\n      editing,\n      placement,\n      primary,\n      showTitle,\n      time,\n      title: avatar.title,\n      variant,\n    });\n    const placeholderText = placeholderMessage ?? t('chat.placeholder');\n    const avatarAlt = avatarProps?.alt || avatar.title || t('chat.avatar');\n\n    // 在 ChatItem 组件中添加\n    const contentRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(\n      variant === 'bubble' ? 'horizontal' : 'vertical',\n    );\n\n    // 使用 ResizeObserver 监控内容和容器尺寸\n    useEffect(() => {\n      if (variant === 'docs') {\n        setLayoutMode('vertical');\n        return;\n      }\n\n      if (!contentRef.current || !containerRef.current) return;\n\n      const observer = new ResizeObserver(() => {\n        if (!contentRef.current || !containerRef.current) return;\n\n        const containerWidth = containerRef.current.clientWidth;\n        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度\n\n        // 预留给Actions的最小空间 (根据实际Actions大小调整)\n\n        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局\n        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');\n      });\n\n      observer.observe(contentRef.current);\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [variant, actionsWrapWidth]);\n\n    return (\n      <Flexbox\n        className={cx(styles.container, className)}\n        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n        gap={mobile ? 6 : 12}\n        {...rest}\n      >\n        {showAvatar && (\n          <Avatar\n            {...avatarProps}\n            addon={avatarAddon}\n            alt={avatarAlt}\n            avatar={avatar}\n            loading={loading}\n            onClick={onAvatarClick}\n            placement={placement}\n            size={mobile ? MOBILE_AVATAR_SIZE : undefined}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n          />\n        )}\n        <Flexbox\n          align={placement === 'left' ? 'flex-start' : 'flex-end'}\n          className={styles.messageContainer}\n          ref={containerRef}\n        >\n          <Title\n            avatar={avatar}\n            placement={placement}\n            showTitle={showTitle}\n            time={time}\n            titleAddon={titleAddon}\n          />\n          {aboveMessage}\n          <Flexbox\n            align={placement === 'left' ? 'flex-start' : 'flex-end'}\n            className={styles.messageContent}\n            data-layout={layoutMode} // 添加数据属性以方便样式选择\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\n            gap={8}\n          >\n            <Flexbox ref={contentRef} width={'100%'}>\n              {error && (message === placeholderText || !message) ? (\n                <ErrorContent error={error} message={errorMessage} placement={placement} />\n              ) : (\n                <MessageContent\n                  editing={editing}\n                  fontSize={fontSize}\n                  markdownProps={markdownProps}\n                  message={message}\n                  messageExtra={\n                    <>\n                      {error && (\n                        <ErrorContent error={error} message={errorMessage} placement={placement} />\n                      )}\n                      {messageExtra}\n                    </>\n                  }\n                  onChange={onChange}\n                  onDoubleClick={onDoubleClick}\n                  onEditingChange={onEditingChange}\n                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\n                />\n              )}\n            </Flexbox>\n            {actions && (\n              <Actions\n                actions={actions}\n                editing={editing}\n                placement={placement}\n                variant={variant}\n              />\n            )}\n          </Flexbox>\n          {belowMessage}\n        </Flexbox>\n        {mobile && variant === 'bubble' && showAvatar && (\n          <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nexport default ChatItem;\n\nexport type { ChatItemProps } from './type';\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,qBAAqB;AAE3B,MAAM,WAAW,MACd,EACC,aACA,eACA,aACA,SACA,WACA,SACA,SACA,SACA,oBACA,YAAY,QACZ,UAAU,UACV,QACA,OACA,WACA,MACA,SACA,UACA,iBACA,cACA,eACA,MACA,cACA,eACA,UACA,cACA,cACA,eACA,mBAAmB,IACnB,aAAa,MACb,YACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,EAAE,UAAI,WAAW,UAAU;EAC/B;EACA;EACA;EACA;EACA;EACA,OAAO,OAAO;EACd;EACD,CAAC;CACF,MAAM,kBAAkB,sBAAsB,EAAE,mBAAmB;CACnE,MAAM,YAAY,aAAa,OAAO,OAAO,SAAS,EAAE,cAAc;CAGtE,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,YAAY,iBAAiB,SAClC,YAAY,WAAW,eAAe,WACvC;AAGD,iBAAgB;AACd,MAAI,YAAY,QAAQ;AACtB,iBAAc,WAAW;AACzB;;AAGF,MAAI,CAAC,WAAW,WAAW,CAAC,aAAa,QAAS;EAElD,MAAM,WAAW,IAAI,qBAAqB;AACxC,OAAI,CAAC,WAAW,WAAW,CAAC,aAAa,QAAS;GAElD,MAAM,iBAAiB,aAAa,QAAQ;GAC5C,MAAM,eAAe,WAAW,QAAQ;AAKxC,iBAAc,eAAe,mBAAmB,iBAAiB,aAAa,aAAa;IAC3F;AAEF,WAAS,QAAQ,WAAW,QAAQ;AACpC,WAAS,QAAQ,aAAa,QAAQ;AAEtC,eAAa,SAAS,YAAY;IACjC,CAAC,SAAS,iBAAiB,CAAC;AAE/B,QACE,qBAACC;EACC,WAAWC,KAAG,OAAO,WAAW,UAAU;EAC1C,WAAW,cAAc,SAAS,eAAe;EACjD,KAAK,SAAS,IAAI;EAClB,GAAI;;GAEH,cACC,oBAACC;IACC,GAAI;IACJ,OAAO;IACP,KAAK;IACG;IACC;IACT,SAAS;IACE;IACX,MAAM,SAAS,qBAAqB;IACpC,OAAO;KACL,WAAW,YAAY,MAAM;KAC7B,GAAG,aAAa;KACjB;KACD;GAEJ,qBAACF;IACC,OAAO,cAAc,SAAS,eAAe;IAC7C,WAAW,OAAO;IAClB,KAAK;;KAEL,oBAACG;MACS;MACG;MACA;MACL;MACM;OACZ;KACD;KACD,qBAACH;MACC,OAAO,cAAc,SAAS,eAAe;MAC7C,WAAW,OAAO;MAClB,eAAa;MACb,WACE,eAAe,eACX,cAAc,SACZ,eACA,uBACF;MAEN,KAAK;iBAEL,oBAACA;OAAQ,KAAK;OAAY,OAAO;iBAC9B,UAAU,YAAY,mBAAmB,CAAC,WACzC,oBAACI;QAAoB;QAAO,SAAS;QAAyB;SAAa,GAE3E,oBAACC;QACU;QACC;QACK;QACN;QACT,cACE,8CACG,SACC,oBAACD;SAAoB;SAAO,SAAS;SAAyB;UAAa,EAE5E,gBACA;QAEK;QACK;QACE;QACN;QACF;QACM;QACT;QACG;SACT;QAEI,EACT,WACC,oBAACE;OACU;OACA;OACE;OACF;QACT;OAEI;KACT;;KACO;GACT,UAAU,YAAY,YAAY,cACjC,oBAACC,yBAAc,eAAe,qBAAsB;;GAE9C;EAGf;AAED,uBAAe"}
+{"version":3,"file":"ChatItem.mjs","names":["chatMessages","Flexbox","Avatar","Title","ErrorContent","MessageContent","Actions","BorderSpacing"],"sources":["../../../src/chat/ChatItem/ChatItem.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport Actions from './components/Actions';\nimport Avatar from './components/Avatar';\nimport BorderSpacing from './components/BorderSpacing';\nimport ErrorContent from './components/ErrorContent';\nimport MessageContent from './components/MessageContent';\nimport Title from './components/Title';\nimport { styles } from './style';\nimport type { ChatItemProps } from './type';\n\nconst MOBILE_AVATAR_SIZE = 32;\n\nconst ChatItem = memo<ChatItemProps>(\n  ({\n    avatarAddon,\n    onAvatarClick,\n    avatarProps,\n    actions,\n    className,\n    primary,\n    loading,\n    message,\n    placeholderMessage,\n    placement = 'left',\n    variant = 'bubble',\n    avatar,\n    error,\n    showTitle,\n    time,\n    editing,\n    onChange,\n    onEditingChange,\n    messageExtra,\n    renderMessage,\n    text,\n    errorMessage,\n    onDoubleClick,\n    fontSize,\n    aboveMessage,\n    belowMessage,\n    markdownProps,\n    actionsWrapWidth = 54,\n    showAvatar = true,\n    titleAddon,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { t } = useTranslation(chatMessages);\n\n    const avatarSize = mobile ? MOBILE_AVATAR_SIZE : avatarProps?.size || 40;\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--chat-item-avatar-size': `${avatarSize}px`,\n      }),\n      [avatarSize],\n    );\n\n    const hasTime = Boolean(time);\n    const placeholderText = placeholderMessage ?? t('chat.placeholder');\n    const avatarAlt = avatarProps?.alt || avatar.title || t('chat.avatar');\n\n    // 在 ChatItem 组件中添加\n    const contentRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(\n      variant === 'bubble' ? 'horizontal' : 'vertical',\n    );\n\n    // 使用 ResizeObserver 监控内容和容器尺寸\n    useEffect(() => {\n      if (variant === 'docs') {\n        setLayoutMode('vertical');\n        return;\n      }\n\n      if (!contentRef.current || !containerRef.current) return;\n\n      const observer = new ResizeObserver(() => {\n        if (!contentRef.current || !containerRef.current) return;\n\n        const containerWidth = containerRef.current.clientWidth;\n        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度\n\n        // 预留给Actions的最小空间 (根据实际Actions大小调整)\n\n        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局\n        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');\n      });\n\n      observer.observe(contentRef.current);\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [variant, actionsWrapWidth]);\n\n    const containerClassName = cx(\n      variant === 'docs' ? styles.containerDocs : styles.container,\n      className,\n    );\n\n    const messageContainerClassName = useMemo(() => {\n      if (editing) {\n        return hasTime ? styles.messageContainerEditingWithTime : styles.messageContainerEditing;\n      }\n      return hasTime ? styles.messageContainerWithTime : styles.messageContainer;\n    }, [editing, hasTime]);\n\n    const messageContentClassName = useMemo(() => {\n      return editing ? styles.messageContentEditing : styles.messageContent;\n    }, [editing]);\n\n    return (\n      <Flexbox\n        className={containerClassName}\n        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n        gap={mobile ? 6 : 12}\n        style={cssVariables}\n        {...rest}\n      >\n        {showAvatar && (\n          <Avatar\n            {...avatarProps}\n            addon={avatarAddon}\n            alt={avatarAlt}\n            avatar={avatar}\n            loading={loading}\n            onClick={onAvatarClick}\n            placement={placement}\n            size={avatarSize}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n          />\n        )}\n        <Flexbox\n          align={placement === 'left' ? 'flex-start' : 'flex-end'}\n          className={messageContainerClassName}\n          ref={containerRef}\n        >\n          <Title\n            avatar={avatar}\n            placement={placement}\n            showTitle={showTitle}\n            time={time}\n            titleAddon={titleAddon}\n          />\n          {aboveMessage}\n          <Flexbox\n            align={placement === 'left' ? 'flex-start' : 'flex-end'}\n            className={messageContentClassName}\n            data-layout={layoutMode} // 添加数据属性以方便样式选择\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\n            gap={8}\n          >\n            <Flexbox ref={contentRef} width={'100%'}>\n              {error && (message === placeholderText || !message) ? (\n                <ErrorContent error={error} message={errorMessage} placement={placement} />\n              ) : (\n                <MessageContent\n                  editing={editing}\n                  fontSize={fontSize}\n                  markdownProps={markdownProps}\n                  message={message}\n                  messageExtra={\n                    <>\n                      {error && (\n                        <ErrorContent error={error} message={errorMessage} placement={placement} />\n                      )}\n                      {messageExtra}\n                    </>\n                  }\n                  onChange={onChange}\n                  onDoubleClick={onDoubleClick}\n                  onEditingChange={onEditingChange}\n                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\n                />\n              )}\n            </Flexbox>\n            {actions && (\n              <Actions\n                actions={actions}\n                editing={editing}\n                placement={placement}\n                variant={variant}\n              />\n            )}\n          </Flexbox>\n          {belowMessage}\n        </Flexbox>\n        {mobile && variant === 'bubble' && showAvatar && (\n          <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nexport default ChatItem;\n\nexport type { ChatItemProps } from './type';\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,qBAAqB;AAE3B,MAAM,WAAW,MACd,EACC,aACA,eACA,aACA,SACA,WACA,SACA,SACA,SACA,oBACA,YAAY,QACZ,UAAU,UACV,QACA,OACA,WACA,MACA,SACA,UACA,iBACA,cACA,eACA,MACA,cACA,eACA,UACA,cACA,cACA,eACA,mBAAmB,IACnB,aAAa,MACb,YACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,MAAM,aAAa,SAAS,qBAAqB,aAAa,QAAQ;CACtE,MAAM,eAAe,eACZ,EACL,2BAA2B,GAAG,WAAW,KAC1C,GACD,CAAC,WAAW,CACb;CAED,MAAM,UAAU,QAAQ,KAAK;CAC7B,MAAM,kBAAkB,sBAAsB,EAAE,mBAAmB;CACnE,MAAM,YAAY,aAAa,OAAO,OAAO,SAAS,EAAE,cAAc;CAGtE,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,YAAY,iBAAiB,SAClC,YAAY,WAAW,eAAe,WACvC;AAGD,iBAAgB;AACd,MAAI,YAAY,QAAQ;AACtB,iBAAc,WAAW;AACzB;;AAGF,MAAI,CAAC,WAAW,WAAW,CAAC,aAAa,QAAS;EAElD,MAAM,WAAW,IAAI,qBAAqB;AACxC,OAAI,CAAC,WAAW,WAAW,CAAC,aAAa,QAAS;GAElD,MAAM,iBAAiB,aAAa,QAAQ;GAC5C,MAAM,eAAe,WAAW,QAAQ;AAKxC,iBAAc,eAAe,mBAAmB,iBAAiB,aAAa,aAAa;IAC3F;AAEF,WAAS,QAAQ,WAAW,QAAQ;AACpC,WAAS,QAAQ,aAAa,QAAQ;AAEtC,eAAa,SAAS,YAAY;IACjC,CAAC,SAAS,iBAAiB,CAAC;CAE/B,MAAM,qBAAqB,GACzB,YAAY,SAAS,OAAO,gBAAgB,OAAO,WACnD,UACD;CAED,MAAM,4BAA4B,cAAc;AAC9C,MAAI,QACF,QAAO,UAAU,OAAO,kCAAkC,OAAO;AAEnE,SAAO,UAAU,OAAO,2BAA2B,OAAO;IACzD,CAAC,SAAS,QAAQ,CAAC;CAEtB,MAAM,0BAA0B,cAAc;AAC5C,SAAO,UAAU,OAAO,wBAAwB,OAAO;IACtD,CAAC,QAAQ,CAAC;AAEb,QACE,qBAACC;EACC,WAAW;EACX,WAAW,cAAc,SAAS,eAAe;EACjD,KAAK,SAAS,IAAI;EAClB,OAAO;EACP,GAAI;;GAEH,cACC,oBAACC;IACC,GAAI;IACJ,OAAO;IACP,KAAK;IACG;IACC;IACT,SAAS;IACE;IACX,MAAM;IACN,OAAO;KACL,WAAW,YAAY,MAAM;KAC7B,GAAG,aAAa;KACjB;KACD;GAEJ,qBAACD;IACC,OAAO,cAAc,SAAS,eAAe;IAC7C,WAAW;IACX,KAAK;;KAEL,oBAACE;MACS;MACG;MACA;MACL;MACM;OACZ;KACD;KACD,qBAACF;MACC,OAAO,cAAc,SAAS,eAAe;MAC7C,WAAW;MACX,eAAa;MACb,WACE,eAAe,eACX,cAAc,SACZ,eACA,uBACF;MAEN,KAAK;iBAEL,oBAACA;OAAQ,KAAK;OAAY,OAAO;iBAC9B,UAAU,YAAY,mBAAmB,CAAC,WACzC,oBAACG;QAAoB;QAAO,SAAS;QAAyB;SAAa,GAE3E,oBAACC;QACU;QACC;QACK;QACN;QACT,cACE,8CACG,SACC,oBAACD;SAAoB;SAAO,SAAS;SAAyB;UAAa,EAE5E,gBACA;QAEK;QACK;QACE;QACN;QACF;QACM;QACT;QACG;SACT;QAEI,EACT,WACC,oBAACE;OACU;OACA;OACE;OACF;QACT;OAEI;KACT;;KACO;GACT,UAAU,YAAY,YAAY,cACjC,oBAACC,yBAAc,eAAe,qBAAsB;;GAE9C;EAGf;AAED,uBAAe"}

package/es/chat/ChatItem/components/Actions.mjs

@@ -1,17 +1,17 @@
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/chat/ChatItem/components/Actions.tsx
-const Actions = ({ actions, placement, variant, editing, ref }) => {
-	const { styles } = useStyles({
-		editing,
-		placement,
-		variant
-	});
+const Actions = ({ actions, placement = "left", variant = "bubble", editing, ref }) => {
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		align: "flex-start",
-		className: styles.actions,
+		className: cx(useMemo(() => {
+			if (variant === "bubble") return placement === "left" ? styles.actionsBubbleLeft : styles.actionsBubbleRight;
+			return placement === "left" ? styles.actionsDocsLeft : styles.actionsDocsRight;
+		}, [placement, variant]), editing && styles.actionsEditing),
 		ref,
 		role: "menubar",
 		children: actions

package/es/chat/ChatItem/components/Actions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.mjs","names":["Actions: FC<ActionsProps>","Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Actions.tsx"],"sourcesContent":["import { type FC, type Ref } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { ChatItemProps } from '@/chat/ChatItem';\n\nimport { useStyles } from '../style';\n\nexport interface ActionsProps {\n  actions: ChatItemProps['actions'];\n  editing?: boolean;\n  placement?: ChatItemProps['placement'];\n  ref?: Ref<HTMLDivElement>;\n  variant?: ChatItemProps['variant'];\n}\n\nconst Actions: FC<ActionsProps> = ({ actions, placement, variant, editing, ref }) => {\n  const { styles } = useStyles({ editing, placement, variant });\n\n  return (\n    <Flexbox align={'flex-start'} className={styles.actions} ref={ref} role=\"menubar\">\n      {actions}\n    </Flexbox>\n  );\n};\n\nexport default Actions;\n"],"mappings":";;;;;AAeA,MAAMA,WAA6B,EAAE,SAAS,WAAW,SAAS,SAAS,UAAU;CACnF,MAAM,EAAE,WAAW,UAAU;EAAE;EAAS;EAAW;EAAS,CAAC;AAE7D,QACE,oBAACC;EAAQ,OAAO;EAAc,WAAW,OAAO;EAAc;EAAK,MAAK;YACrE;GACO;;AAId,sBAAe"}
+{"version":3,"file":"Actions.mjs","names":["Actions: FC<ActionsProps>","Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Actions.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { type FC, type Ref, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { ChatItemProps } from '@/chat/ChatItem';\n\nimport { styles } from '../style';\n\nexport interface ActionsProps {\n  actions: ChatItemProps['actions'];\n  editing?: boolean;\n  placement?: ChatItemProps['placement'];\n  ref?: Ref<HTMLDivElement>;\n  variant?: ChatItemProps['variant'];\n}\n\nconst Actions: FC<ActionsProps> = ({\n  actions,\n  placement = 'left',\n  variant = 'bubble',\n  editing,\n  ref,\n}) => {\n  const actionsClassName = useMemo(() => {\n    if (variant === 'bubble') {\n      return placement === 'left' ? styles.actionsBubbleLeft : styles.actionsBubbleRight;\n    }\n    return placement === 'left' ? styles.actionsDocsLeft : styles.actionsDocsRight;\n  }, [placement, variant]);\n\n  return (\n    <Flexbox\n      align={'flex-start'}\n      className={cx(actionsClassName, editing && styles.actionsEditing)}\n      ref={ref}\n      role=\"menubar\"\n    >\n      {actions}\n    </Flexbox>\n  );\n};\n\nexport default Actions;\n"],"mappings":";;;;;;;AAgBA,MAAMA,WAA6B,EACjC,SACA,YAAY,QACZ,UAAU,UACV,SACA,UACI;AAQJ,QACE,oBAACC;EACC,OAAO;EACP,WAAW,GAVU,cAAc;AACrC,OAAI,YAAY,SACd,QAAO,cAAc,SAAS,OAAO,oBAAoB,OAAO;AAElE,UAAO,cAAc,SAAS,OAAO,kBAAkB,OAAO;KAC7D,CAAC,WAAW,QAAQ,CAAC,EAKY,WAAW,OAAO,eAAe;EAC5D;EACL,MAAK;YAEJ;GACO;;AAId,sBAAe"}

package/es/chat/ChatItem/components/Avatar.mjs

@@ -1,15 +1,19 @@
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
 import Avatar_default$1 from "../../../Avatar/index.mjs";
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import Loading_default from "./Loading.mjs";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/chat/ChatItem/components/Avatar.tsx
 const Avatar = ({ loading, avatar, placement, unoptimized, addon, onClick, size = 40, style, alt }) => {
-	const { styles } = useStyles({ avatarSize: size });
+	const cssVariables = useMemo(() => ({ "--chat-item-avatar-size": `${size}px` }), [size]);
 	const avatarContent = /* @__PURE__ */ jsxs("div", {
 		className: styles.avatarContainer,
-		style,
+		style: {
+			...cssVariables,
+			...style
+		},
 		children: [/* @__PURE__ */ jsx(Avatar_default$1, {
 			alt: alt || avatar.title,
 			animation: loading,

package/es/chat/ChatItem/components/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":["Avatar: FC<AvatarProps>","A","Loading","Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Avatar.tsx"],"sourcesContent":["import { type CSSProperties, type FC } from 'react';\n\nimport A from '@/Avatar';\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from '../style';\nimport type { ChatItemProps } from '../type';\nimport Loading from './Loading';\n\nexport interface AvatarProps {\n  addon?: ChatItemProps['avatarAddon'];\n  alt?: string;\n  avatar: ChatItemProps['avatar'];\n  loading?: ChatItemProps['loading'];\n  onClick?: ChatItemProps['onAvatarClick'];\n  placement?: ChatItemProps['placement'];\n  size?: number;\n  style?: CSSProperties;\n  unoptimized?: boolean;\n}\n\nconst Avatar: FC<AvatarProps> = ({\n  loading,\n  avatar,\n  placement,\n  unoptimized,\n  addon,\n  onClick,\n  size = 40,\n  style,\n  alt,\n}) => {\n  const { styles } = useStyles({ avatarSize: size });\n  const avatarContent = (\n    <div className={styles.avatarContainer} style={style}>\n      <A\n        alt={alt || avatar.title}\n        animation={loading}\n        avatar={avatar.avatar}\n        background={avatar.backgroundColor}\n        onClick={onClick}\n        size={size}\n        title={avatar.title}\n        unoptimized={unoptimized}\n      />\n      <Loading loading={loading} placement={placement} />\n    </div>\n  );\n\n  if (!addon) return avatarContent;\n  return (\n    <Flexbox align={'center'} className={styles.avatarGroupContainer} gap={8}>\n      {avatarContent}\n      {addon}\n    </Flexbox>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;AAqBA,MAAMA,UAA2B,EAC/B,SACA,QACA,WACA,aACA,OACA,SACA,OAAO,IACP,OACA,UACI;CACJ,MAAM,EAAE,WAAW,UAAU,EAAE,YAAY,MAAM,CAAC;CAClD,MAAM,gBACJ,qBAAC;EAAI,WAAW,OAAO;EAAwB;aAC7C,oBAACC;GACC,KAAK,OAAO,OAAO;GACnB,WAAW;GACX,QAAQ,OAAO;GACf,YAAY,OAAO;GACV;GACH;GACN,OAAO,OAAO;GACD;IACb,EACF,oBAACC;GAAiB;GAAoB;IAAa;GAC/C;AAGR,KAAI,CAAC,MAAO,QAAO;AACnB,QACE,qBAACC;EAAQ,OAAO;EAAU,WAAW,OAAO;EAAsB,KAAK;aACpE,eACA;GACO;;AAId,qBAAe"}
+{"version":3,"file":"Avatar.mjs","names":["Avatar: FC<AvatarProps>","A","Loading","Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Avatar.tsx"],"sourcesContent":["import { type CSSProperties, type FC, useMemo } from 'react';\n\nimport A from '@/Avatar';\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from '../style';\nimport type { ChatItemProps } from '../type';\nimport Loading from './Loading';\n\nexport interface AvatarProps {\n  addon?: ChatItemProps['avatarAddon'];\n  alt?: string;\n  avatar: ChatItemProps['avatar'];\n  loading?: ChatItemProps['loading'];\n  onClick?: ChatItemProps['onAvatarClick'];\n  placement?: ChatItemProps['placement'];\n  size?: number;\n  style?: CSSProperties;\n  unoptimized?: boolean;\n}\n\nconst Avatar: FC<AvatarProps> = ({\n  loading,\n  avatar,\n  placement,\n  unoptimized,\n  addon,\n  onClick,\n  size = 40,\n  style,\n  alt,\n}) => {\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--chat-item-avatar-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const avatarContent = (\n    <div className={styles.avatarContainer} style={{ ...cssVariables, ...style }}>\n      <A\n        alt={alt || avatar.title}\n        animation={loading}\n        avatar={avatar.avatar}\n        background={avatar.backgroundColor}\n        onClick={onClick}\n        size={size}\n        title={avatar.title}\n        unoptimized={unoptimized}\n      />\n      <Loading loading={loading} placement={placement} />\n    </div>\n  );\n\n  if (!addon) return avatarContent;\n  return (\n    <Flexbox align={'center'} className={styles.avatarGroupContainer} gap={8}>\n      {avatarContent}\n      {addon}\n    </Flexbox>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AAqBA,MAAMA,UAA2B,EAC/B,SACA,QACA,WACA,aACA,OACA,SACA,OAAO,IACP,OACA,UACI;CACJ,MAAM,eAAe,eACZ,EACL,2BAA2B,GAAG,KAAK,KACpC,GACD,CAAC,KAAK,CACP;CAED,MAAM,gBACJ,qBAAC;EAAI,WAAW,OAAO;EAAiB,OAAO;GAAE,GAAG;GAAc,GAAG;GAAO;aAC1E,oBAACC;GACC,KAAK,OAAO,OAAO;GACnB,WAAW;GACX,QAAQ,OAAO;GACf,YAAY,OAAO;GACV;GACH;GACN,OAAO,OAAO;GACD;IACb,EACF,oBAACC;GAAiB;GAAoB;IAAa;GAC/C;AAGR,KAAI,CAAC,MAAO,QAAO;AACnB,QACE,qBAACC;EAAQ,OAAO;EAAU,WAAW,OAAO;EAAsB,KAAK;aACpE,eACA;GACO;;AAId,qBAAe"}

package/es/chat/ChatItem/components/ErrorContent.mjs

@@ -1,11 +1,10 @@
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
 import Alert_default from "../../../Alert/Alert.mjs";
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/chat/ChatItem/components/ErrorContent.tsx
-const ErrorContent = ({ message, error, placement }) => {
-	const { styles } = useStyles({ placement });
+const ErrorContent = ({ message, error }) => {
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		className: styles.errorContainer,
 		children: /* @__PURE__ */ jsx(Alert_default, {

package/es/chat/ChatItem/components/ErrorContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorContent.mjs","names":["ErrorContent: FC<ErrorContentProps>","Flexbox","Alert"],"sources":["../../../../src/chat/ChatItem/components/ErrorContent.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport Alert from '@/Alert';\nimport { Flexbox } from '@/Flex';\nimport { ChatItemProps } from '@/chat/ChatItem';\n\nimport { useStyles } from '../style';\n\nexport interface ErrorContentProps {\n  error?: ChatItemProps['error'];\n  message?: ChatItemProps['errorMessage'];\n  placement?: ChatItemProps['placement'];\n}\n\nconst ErrorContent: FC<ErrorContentProps> = ({ message, error, placement }) => {\n  const { styles } = useStyles({ placement });\n\n  return (\n    <Flexbox className={styles.errorContainer}>\n      <Alert closable={false} extra={message} showIcon type={'error'} {...error} />\n    </Flexbox>\n  );\n};\n\nexport default ErrorContent;\n"],"mappings":";;;;;;AAcA,MAAMA,gBAAuC,EAAE,SAAS,OAAO,gBAAgB;CAC7E,MAAM,EAAE,WAAW,UAAU,EAAE,WAAW,CAAC;AAE3C,QACE,oBAACC;EAAQ,WAAW,OAAO;YACzB,oBAACC;GAAM,UAAU;GAAO,OAAO;GAAS;GAAS,MAAM;GAAS,GAAI;IAAS;GACrE;;AAId,2BAAe"}
+{"version":3,"file":"ErrorContent.mjs","names":["ErrorContent: FC<ErrorContentProps>","Flexbox","Alert"],"sources":["../../../../src/chat/ChatItem/components/ErrorContent.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport Alert from '@/Alert';\nimport { Flexbox } from '@/Flex';\nimport { ChatItemProps } from '@/chat/ChatItem';\n\nimport { styles } from '../style';\n\nexport interface ErrorContentProps {\n  error?: ChatItemProps['error'];\n  message?: ChatItemProps['errorMessage'];\n  placement?: ChatItemProps['placement'];\n}\n\nconst ErrorContent: FC<ErrorContentProps> = ({ message, error }) => {\n  return (\n    <Flexbox className={styles.errorContainer}>\n      <Alert closable={false} extra={message} showIcon type={'error'} {...error} />\n    </Flexbox>\n  );\n};\n\nexport default ErrorContent;\n"],"mappings":";;;;;;AAcA,MAAMA,gBAAuC,EAAE,SAAS,YAAY;AAClE,QACE,oBAACC;EAAQ,WAAW,OAAO;YACzB,oBAACC;GAAM,UAAU;GAAO,OAAO;GAAS;GAAS,MAAM;GAAS,GAAI;IAAS;GACrE;;AAId,2BAAe"}

package/es/chat/ChatItem/components/Loading.mjs

@@ -1,16 +1,15 @@
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
 import Icon_default from "../../../Icon/Icon.mjs";
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
 
 //#region src/chat/ChatItem/components/Loading.tsx
-const Loading = ({ loading, placement }) => {
-	const { styles } = useStyles({ placement });
+const Loading = ({ loading, placement = "left" }) => {
 	if (!loading) return null;
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		align: "center",
-		className: styles.loading,
+		className: placement === "left" ? styles.loadingLeft : styles.loadingRight,
 		justify: "center",
 		children: /* @__PURE__ */ jsx(Icon_default, {
 			icon: Loader2,

package/es/chat/ChatItem/components/Loading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.mjs","names":["Loading: FC<LoadingProps>","Flexbox","Icon"],"sources":["../../../../src/chat/ChatItem/components/Loading.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { ChatItemProps } from '@/chat/ChatItem';\n\nimport { useStyles } from '../style';\n\nexport interface LoadingProps {\n  loading?: ChatItemProps['loading'];\n  placement?: ChatItemProps['placement'];\n}\n\nconst Loading: FC<LoadingProps> = ({ loading, placement }) => {\n  const { styles } = useStyles({ placement });\n\n  if (!loading) return null;\n\n  return (\n    <Flexbox align={'center'} className={styles.loading} justify={'center'}>\n      <Icon icon={Loader2} size={{ size: 12, strokeWidth: 3 }} spin />\n    </Flexbox>\n  );\n};\n\nexport default Loading;\n"],"mappings":";;;;;;;AAcA,MAAMA,WAA6B,EAAE,SAAS,gBAAgB;CAC5D,MAAM,EAAE,WAAW,UAAU,EAAE,WAAW,CAAC;AAE3C,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAACC;EAAQ,OAAO;EAAU,WAAW,OAAO;EAAS,SAAS;YAC5D,oBAACC;GAAK,MAAM;GAAS,MAAM;IAAE,MAAM;IAAI,aAAa;IAAG;GAAE;IAAO;GACxD;;AAId,sBAAe"}
+{"version":3,"file":"Loading.mjs","names":["Loading: FC<LoadingProps>","Flexbox","Icon"],"sources":["../../../../src/chat/ChatItem/components/Loading.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { ChatItemProps } from '@/chat/ChatItem';\n\nimport { styles } from '../style';\n\nexport interface LoadingProps {\n  loading?: ChatItemProps['loading'];\n  placement?: ChatItemProps['placement'];\n}\n\nconst Loading: FC<LoadingProps> = ({ loading, placement = 'left' }) => {\n  if (!loading) return null;\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={placement === 'left' ? styles.loadingLeft : styles.loadingRight}\n      justify={'center'}\n    >\n      <Icon icon={Loader2} size={{ size: 12, strokeWidth: 3 }} spin />\n    </Flexbox>\n  );\n};\n\nexport default Loading;\n"],"mappings":";;;;;;;AAcA,MAAMA,WAA6B,EAAE,SAAS,YAAY,aAAa;AACrE,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAACC;EACC,OAAO;EACP,WAAW,cAAc,SAAS,OAAO,cAAc,OAAO;EAC9D,SAAS;YAET,oBAACC;GAAK,MAAM;GAAS,MAAM;IAAE,MAAM;IAAI,aAAa;IAAG;GAAE;IAAO;GACxD;;AAId,sBAAe"}

package/es/chat/ChatItem/components/MessageContent.mjs

@@ -1,19 +1,20 @@
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import EditableMessage_default from "../../EditableMessage/EditableMessage.mjs";
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
+import { cx, useResponsive } from "antd-style";
 
 //#region src/chat/ChatItem/components/MessageContent.tsx
 const MessageContent = memo(({ editing, onChange, onEditingChange, text, message, placement, messageExtra, renderMessage, variant, primary, onDoubleClick, fontSize, markdownProps }) => {
-	const { cx: cx$1, styles } = useStyles({
-		editing,
-		placement,
-		primary,
-		variant
-	});
 	const { mobile } = useResponsive();
+	const messageClassName = useMemo(() => {
+		if (variant === "bubble") return styles.messageBubble;
+		return styles.messageDocsWithoutTitle;
+	}, [variant]);
+	const editingContainerClassName = useMemo(() => {
+		return variant === "docs" ? styles.editingContainerDocs : styles.editingContainer;
+	}, [variant]);
 	const content = /* @__PURE__ */ jsx(EditableMessage_default, {
 		classNames: { input: styles.editingInput },
 		editButtonSize: "small",
@@ -29,7 +30,7 @@ const MessageContent = memo(({ editing, onChange, onEditingChange, text, message
 	});
 	const messageContent = renderMessage ? renderMessage(content) : content;
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx$1(styles.message, editing && styles.editingContainer),
+		className: cx(messageClassName, editing && editingContainerClassName),
 		onDoubleClick,
 		children: [messageContent, messageExtra && !editing ? /* @__PURE__ */ jsx("div", {
 			className: styles.messageExtra,

package/es/chat/ChatItem/components/MessageContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageContent.mjs","names":["EditableMessage","Flexbox","cx"],"sources":["../../../../src/chat/ChatItem/components/MessageContent.tsx"],"sourcesContent":["import { useResponsive } from 'antd-style';\nimport { type ReactNode, memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport type { MarkdownProps } from '@/Markdown';\nimport { ChatItemProps } from '@/chat/ChatItem';\nimport EditableMessage from '@/chat/EditableMessage';\n\nimport { useStyles } from '../style';\n\nexport interface MessageContentProps {\n  editing?: ChatItemProps['editing'];\n  fontSize?: number;\n  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;\n  message?: ReactNode;\n  messageExtra?: ChatItemProps['messageExtra'];\n  onChange?: ChatItemProps['onChange'];\n  onDoubleClick?: ChatItemProps['onDoubleClick'];\n  onEditingChange?: ChatItemProps['onEditingChange'];\n  placement?: ChatItemProps['placement'];\n  primary?: ChatItemProps['primary'];\n  renderMessage?: ChatItemProps['renderMessage'];\n  text?: ChatItemProps['text'];\n  variant?: ChatItemProps['variant'];\n}\n\nconst MessageContent = memo<MessageContentProps>(\n  ({\n    editing,\n    onChange,\n    onEditingChange,\n    text,\n    message,\n    placement,\n    messageExtra,\n    renderMessage,\n    variant,\n    primary,\n    onDoubleClick,\n    fontSize,\n    markdownProps,\n  }) => {\n    const { cx, styles } = useStyles({ editing, placement, primary, variant });\n    const { mobile } = useResponsive();\n\n    const content = (\n      <EditableMessage\n        classNames={{ input: styles.editingInput }}\n        editButtonSize={'small'}\n        editing={editing}\n        fontSize={fontSize}\n        fullFeaturedCodeBlock\n        markdownProps={markdownProps}\n        onChange={onChange}\n        onEditingChange={onEditingChange}\n        openModal={mobile ? editing : undefined}\n        text={text}\n        value={message ? String(message) : ''}\n      />\n    );\n    const messageContent = renderMessage ? renderMessage(content) : content;\n\n    return (\n      <Flexbox\n        className={cx(styles.message, editing && styles.editingContainer)}\n        onDoubleClick={onDoubleClick}\n      >\n        {messageContent}\n        {messageExtra && !editing ? (\n          <div className={styles.messageExtra}>{messageExtra}</div>\n        ) : null}\n      </Flexbox>\n    );\n  },\n);\n\nexport default MessageContent;\n"],"mappings":";;;;;;;;AA0BA,MAAM,iBAAiB,MACpB,EACC,SACA,UACA,iBACA,MACA,SACA,WACA,cACA,eACA,SACA,SACA,eACA,UACA,oBACI;CACJ,MAAM,EAAE,UAAI,WAAW,UAAU;EAAE;EAAS;EAAW;EAAS;EAAS,CAAC;CAC1E,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,UACJ,oBAACA;EACC,YAAY,EAAE,OAAO,OAAO,cAAc;EAC1C,gBAAgB;EACP;EACC;EACV;EACe;EACL;EACO;EACjB,WAAW,SAAS,UAAU;EACxB;EACN,OAAO,UAAU,OAAO,QAAQ,GAAG;GACnC;CAEJ,MAAM,iBAAiB,gBAAgB,cAAc,QAAQ,GAAG;AAEhE,QACE,qBAACC;EACC,WAAWC,KAAG,OAAO,SAAS,WAAW,OAAO,iBAAiB;EAClD;aAEd,gBACA,gBAAgB,CAAC,UAChB,oBAAC;GAAI,WAAW,OAAO;aAAe;IAAmB,GACvD;GACI;EAGf;AAED,6BAAe"}
+{"version":3,"file":"MessageContent.mjs","names":["EditableMessage","Flexbox"],"sources":["../../../../src/chat/ChatItem/components/MessageContent.tsx"],"sourcesContent":["import { cx, useResponsive } from 'antd-style';\nimport { type ReactNode, memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport type { MarkdownProps } from '@/Markdown';\nimport { ChatItemProps } from '@/chat/ChatItem';\nimport EditableMessage from '@/chat/EditableMessage';\n\nimport { styles } from '../style';\n\nexport interface MessageContentProps {\n  editing?: ChatItemProps['editing'];\n  fontSize?: number;\n  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;\n  message?: ReactNode;\n  messageExtra?: ChatItemProps['messageExtra'];\n  onChange?: ChatItemProps['onChange'];\n  onDoubleClick?: ChatItemProps['onDoubleClick'];\n  onEditingChange?: ChatItemProps['onEditingChange'];\n  placement?: ChatItemProps['placement'];\n  primary?: ChatItemProps['primary'];\n  renderMessage?: ChatItemProps['renderMessage'];\n  text?: ChatItemProps['text'];\n  variant?: ChatItemProps['variant'];\n}\n\nconst MessageContent = memo<MessageContentProps>(\n  ({\n    editing,\n    onChange,\n    onEditingChange,\n    text,\n    message,\n    placement,\n    messageExtra,\n    renderMessage,\n    variant,\n    primary,\n    onDoubleClick,\n    fontSize,\n    markdownProps,\n  }) => {\n    // placement and primary are part of the interface but not used in this component\n    void placement;\n    void primary;\n    const { mobile } = useResponsive();\n\n    const messageClassName = useMemo(() => {\n      if (variant === 'bubble') return styles.messageBubble;\n      // For docs variant, we need title info, but we don't have it here\n      // Use withoutTitle as default\n      return styles.messageDocsWithoutTitle;\n    }, [variant]);\n\n    const editingContainerClassName = useMemo(() => {\n      return variant === 'docs' ? styles.editingContainerDocs : styles.editingContainer;\n    }, [variant]);\n\n    const content = (\n      <EditableMessage\n        classNames={{ input: styles.editingInput }}\n        editButtonSize={'small'}\n        editing={editing}\n        fontSize={fontSize}\n        fullFeaturedCodeBlock\n        markdownProps={markdownProps}\n        onChange={onChange}\n        onEditingChange={onEditingChange}\n        openModal={mobile ? editing : undefined}\n        text={text}\n        value={message ? String(message) : ''}\n      />\n    );\n    const messageContent = renderMessage ? renderMessage(content) : content;\n\n    return (\n      <Flexbox\n        className={cx(messageClassName, editing && editingContainerClassName)}\n        onDoubleClick={onDoubleClick}\n      >\n        {messageContent}\n        {messageExtra && !editing ? (\n          <div className={styles.messageExtra}>{messageExtra}</div>\n        ) : null}\n      </Flexbox>\n    );\n  },\n);\n\nexport default MessageContent;\n"],"mappings":";;;;;;;;AA0BA,MAAM,iBAAiB,MACpB,EACC,SACA,UACA,iBACA,MACA,SACA,WACA,cACA,eACA,SACA,SACA,eACA,UACA,oBACI;CAIJ,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,mBAAmB,cAAc;AACrC,MAAI,YAAY,SAAU,QAAO,OAAO;AAGxC,SAAO,OAAO;IACb,CAAC,QAAQ,CAAC;CAEb,MAAM,4BAA4B,cAAc;AAC9C,SAAO,YAAY,SAAS,OAAO,uBAAuB,OAAO;IAChE,CAAC,QAAQ,CAAC;CAEb,MAAM,UACJ,oBAACA;EACC,YAAY,EAAE,OAAO,OAAO,cAAc;EAC1C,gBAAgB;EACP;EACC;EACV;EACe;EACL;EACO;EACjB,WAAW,SAAS,UAAU;EACxB;EACN,OAAO,UAAU,OAAO,QAAQ,GAAG;GACnC;CAEJ,MAAM,iBAAiB,gBAAgB,cAAc,QAAQ,GAAG;AAEhE,QACE,qBAACC;EACC,WAAW,GAAG,kBAAkB,WAAW,0BAA0B;EACtD;aAEd,gBACA,gBAAgB,CAAC,UAChB,oBAAC;GAAI,WAAW,OAAO;aAAe;IAAmB,GACvD;GACI;EAGf;AAED,6BAAe"}

package/es/chat/ChatItem/components/Title.mjs

@@ -1,18 +1,13 @@
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { formatTime } from "../../../utils/formatTime.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/chat/ChatItem/components/Title.tsx
-const Title = ({ showTitle, placement, time, avatar, titleAddon }) => {
-	const { styles } = useStyles({
-		placement,
-		showTitle,
-		time
-	});
+const Title = ({ showTitle, placement = "left", time, avatar, titleAddon }) => {
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		align: "center",
-		className: styles.name,
+		className: placement === "left" ? styles.nameLeft : styles.nameRight,
 		direction: placement === "left" ? "horizontal" : "horizontal-reverse",
 		gap: 4,
 		children: [