@lobehub/ui 5.64.2 → 6.0.0-beta.10

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInputActionBar.mjs","names":["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 type { 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      horizontal\n      align={'center'}\n      className={styles.root}\n      flex={'none'}\n      justify={'space-between'}\n      padding={padding}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox horizontal align={'center'} className={styles.left} flex={1} gap={mobile ? 0 : 4}>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={styles.right}\n        flex={0}\n        gap={mobile ? 0 : 4}\n        justify={'flex-end'}\n      >\n        {rightAddons}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatInputActionBar.displayName = 'ChatInputActionBar';\n\nexport default ChatInputActionBar;\n"],"mappings":";;;;;;AAUA,MAAM,sBAAmD,EACvD,KACA,UAAU,UACV,YACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAWC,gBAAO;EAClB,MAAM;EACN,SAAS;EACA;EACJ;EACL,GAAI;EARN,UAAA,CAUE,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,WAAWC,gBAAO;GAAM,MAAM;GAAG,KAAK,SAAS,IAAI;GACrF,UAAA;EACM,CAAA,GACT,oBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAWC,gBAAO;GAClB,MAAM;GACN,KAAK,SAAS,IAAI;GAClB,SAAS;GAER,UAAA;EACM,CAAA,CACF;;AAEb;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"ChatInputActionBar.mjs","names":["Flexbox","styles"],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputActionBar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport { actionBarStyles as styles } from '../style';\nimport type { 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      horizontal\n      align={'center'}\n      {...stylex.props(styles.root)}\n      flex={'none'}\n      justify={'space-between'}\n      padding={padding}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox\n        horizontal\n        align={'center'}\n        {...stylex.props(styles.left)}\n        flex={1}\n        gap={mobile ? 0 : 4}\n      >\n        {leftAddons}\n      </Flexbox>\n      <Flexbox horizontal align={'center'} flex={0} gap={mobile ? 0 : 4} justify={'flex-end'}>\n        {rightAddons}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatInputActionBar.displayName = 'ChatInputActionBar';\n\nexport default ChatInputActionBar;\n"],"mappings":";;;;;;;AAQA,MAAM,sBAAmD,EACvD,KACA,UAAU,UACV,YACA,aACA,GAAG,WACC;CACJ,MAAM,EACJ,WACE,cAAc;CAClB,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,GAAI,OAAO,MAAMC,gBAAO,IAAI;EAAG,MAAM;EAAQ,SAAS;EAA0B;EAAc;EAAK,GAAI;EAA5I,UAAA,CACH,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,GAAI,OAAO,MAAMC,gBAAO,IAAI;GAAG,MAAM;GAAG,KAAK,SAAS,IAAI;GAC5F,UAAA;EACM,CAAA,GACT,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,MAAM;GAAG,KAAK,SAAS,IAAI;GAAG,SAAS;GACzE,UAAA;EACM,CAAA,CACF;;AACb;AACA,mBAAmB,cAAc"}

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

@@ -1,5 +1,5 @@
 "use client";
-import TextArea_default from "../../../base-ui/Input/TextArea.mjs";
+import TextArea_default from "../../../Input/TextArea.mjs";
 import { memo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chat/ChatInputArea/components/ChatInputAreaInner.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInputAreaInner.mjs","names":["TextArea"],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputAreaInner.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useRef } from 'react';\n\nimport { TextArea } from '@/base-ui/Input';\n\nimport type { ChatInputAreaInnerProps } from '../type';\n\nconst ChatInputAreaInner = memo<ChatInputAreaInnerProps>(\n  ({\n    ref,\n    resize = false,\n    onCompositionEnd,\n    onPressEnter,\n    onCompositionStart,\n    className,\n    onInput,\n    loading,\n    onSend,\n    onBlur,\n    onChange,\n    ...rest\n  }) => {\n    const isChineseInput = useRef(false);\n\n    return (\n      <TextArea\n        className={className}\n        ref={ref}\n        resize={resize}\n        variant={'borderless'}\n        onBlur={(e) => {\n          onInput?.(e.target.value);\n          onBlur?.(e);\n        }}\n        onChange={(e) => {\n          onInput?.(e.target.value);\n          onChange?.(e);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          onPressEnter?.(e);\n          const isMobile = /mobi|android|iphone/i.test(navigator.userAgent);\n          if (\n            !loading &&\n            !isChineseInput.current &&\n            ((!isMobile && !e.shiftKey) || (isMobile && e.shiftKey))\n          ) {\n            e.preventDefault();\n            onSend?.();\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default ChatInputAreaInner;\n"],"mappings":";;;;;AAQA,MAAM,qBAAqB,MACxB,EACC,KACA,SAAS,OACT,kBACA,cACA,oBACA,WACA,SACA,SACA,QACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,KAAK;CAEnC,OACE,oBAACA,kBAAD;EACa;EACN;EACG;EACR,SAAS;EACT,SAAS,MAAM;GACb,UAAU,EAAE,OAAO,KAAK;GACxB,SAAS,CAAC;EACZ;EACA,WAAW,MAAM;GACf,UAAU,EAAE,OAAO,KAAK;GACxB,WAAW,CAAC;EACd;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,eAAe,CAAC;GAChB,MAAM,WAAW,uBAAuB,KAAK,UAAU,SAAS;GAChE,IACE,CAAC,WACD,CAAC,eAAe,YACd,CAAC,YAAY,CAAC,EAAE,YAAc,YAAY,EAAE,WAC9C;IACA,EAAE,eAAe;IACjB,SAAS;GACX;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}
+{"version":3,"file":"ChatInputAreaInner.mjs","names":["TextArea"],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputAreaInner.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useRef } from 'react';\n\nimport { TextArea } from '@/Input';\n\nimport type { ChatInputAreaInnerProps } from '../type';\n\nconst ChatInputAreaInner = memo<ChatInputAreaInnerProps>(\n  ({\n    ref,\n    resize = false,\n    onCompositionEnd,\n    onPressEnter,\n    onCompositionStart,\n    className,\n    onInput,\n    loading,\n    onSend,\n    onBlur,\n    onChange,\n    ...rest\n  }) => {\n    const isChineseInput = useRef(false);\n\n    return (\n      <TextArea\n        className={className}\n        ref={ref}\n        resize={resize}\n        variant={'borderless'}\n        onBlur={(e) => {\n          onInput?.(e.target.value);\n          onBlur?.(e);\n        }}\n        onChange={(e) => {\n          onInput?.(e.target.value);\n          onChange?.(e);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          onPressEnter?.(e);\n          const isMobile = /mobi|android|iphone/i.test(navigator.userAgent);\n          if (\n            !loading &&\n            !isChineseInput.current &&\n            ((!isMobile && !e.shiftKey) || (isMobile && e.shiftKey))\n          ) {\n            e.preventDefault();\n            onSend?.();\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default ChatInputAreaInner;\n"],"mappings":";;;;;AAQA,MAAM,qBAAqB,MACxB,EACC,KACA,SAAS,OACT,kBACA,cACA,oBACA,WACA,SACA,SACA,QACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,KAAK;CAEnC,OACE,oBAACA,kBAAD;EACa;EACN;EACG;EACR,SAAS;EACT,SAAS,MAAM;GACb,UAAU,EAAE,OAAO,KAAK;GACxB,SAAS,CAAC;EACZ;EACA,WAAW,MAAM;GACf,UAAU,EAAE,OAAO,KAAK;GACxB,WAAW,CAAC;EACd;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,eAAe,CAAC;GAChB,MAAM,WAAW,uBAAuB,KAAK,UAAU,SAAS;GAChE,IACE,CAAC,WACD,CAAC,eAAe,YACd,CAAC,YAAY,CAAC,EAAE,YAAc,YAAY,EAAE,WAC9C;IACA,EAAE,eAAe;IACjB,SAAS;GACX;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}

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

@@ -1,8 +1,8 @@
-import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import { cssVar } from "../../../styles/stylex/cssVar.stylex.mjs";
 import Icon from "../../../Icon/Icon.mjs";
-import Button from "../../../base-ui/Button/Button.mjs";
+import Button from "../../../Button/Button.mjs";
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-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 }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ChatSendButton.mjs","names":["Flexbox"],"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 '@/base-ui/Button';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport type { 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      horizontal\n      align={'end'}\n      distribution={'space-between'}\n      flex={'none'}\n      gap={8}\n      paddingInline={16}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox horizontal align={'center'} gap={8}>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox horizontal align={'center'} gap={8}>\n        <Flexbox\n          horizontal\n          gap={4}\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 type={'primary'} onClick={onSend}>\n            {texts?.send || 'Send'}\n          </Button>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatSendButton.displayName = 'ChatSendButton';\n\nexport default ChatSendButton;\n"],"mappings":";;;;;;;AAUA,MAAM,kBAA2C,EAC/C,KACA,YACA,aACA,OACA,QACA,SACA,QACA,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,cAAc;EACd,MAAM;EACN,KAAK;EACL,eAAe;EACV;EACL,GAAI;EARN,UAAA,CAUE,oBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GACvC,UAAA;EACM,CAAA,GACT,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GAA1C,UAAA;IACE,qBAACA,mBAAD;KACE,YAAA;KACA,KAAK;KACL,OAAO;MAAE,OAAO,OAAO;MAAsB,UAAU;MAAI,aAAa;KAAG;KAH7E,UAAA;MAKE,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA;MAC7B,oBAAC,QAAD,EAAA,UAAO,OAAO,QAAQ,OAAa,CAAA;MACnC,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA;MACb,qBAACA,mBAAD;OAAS,YAAA;OAAT,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,WAAa,CAAA,GACzB,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA,CACtB;;MACT,oBAAC,QAAD,EAAA,UAAO,OAAO,QAAQ,OAAa,CAAA;KAC5B;;IACR;IACA,UACC,oBAAC,QAAD;KAAQ,MAAM,WAAW;KAAS,SAAS;KACxC,UAAA,OAAO,QAAQ;IACV,CAAA,IAER,oBAAC,QAAD;KAAQ,MAAM;KAAW,SAAS;KAC/B,UAAA,OAAO,QAAQ;IACV,CAAA;GAEH;EACF,CAAA,CAAA;;AAEb;AAEA,eAAe,cAAc"}
+{"version":3,"file":"ChatSendButton.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatInputArea/components/ChatSendButton.tsx"],"sourcesContent":["import { ArrowBigUp, CornerDownLeft, Loader2 } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport type { 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      horizontal\n      align={'end'}\n      distribution={'space-between'}\n      flex={'none'}\n      gap={8}\n      paddingInline={16}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox horizontal align={'center'} gap={8}>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox horizontal align={'center'} gap={8}>\n        <Flexbox\n          horizontal\n          gap={4}\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 type={'primary'} onClick={onSend}>\n            {texts?.send || 'Send'}\n          </Button>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatSendButton.displayName = 'ChatSendButton';\n\nexport default ChatSendButton;\n"],"mappings":";;;;;;;AAUA,MAAM,kBAA2C,EAC/C,KACA,YACA,aACA,OACA,QACA,SACA,QACA,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,cAAc;EACd,MAAM;EACN,KAAK;EACL,eAAe;EACV;EACL,GAAI;EARN,UAAA,CAUE,oBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GACvC,UAAA;EACM,CAAA,GACT,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GAA1C,UAAA;IACE,qBAACA,mBAAD;KACE,YAAA;KACA,KAAK;KACL,OAAO;MAAE,OAAO,OAAO;MAAsB,UAAU;MAAI,aAAa;KAAG;KAH7E,UAAA;MAKE,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA;MAC7B,oBAAC,QAAD,EAAA,UAAO,OAAO,QAAQ,OAAa,CAAA;MACnC,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA;MACb,qBAACA,mBAAD;OAAS,YAAA;OAAT,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,WAAa,CAAA,GACzB,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA,CACtB;;MACT,oBAAC,QAAD,EAAA,UAAO,OAAO,QAAQ,OAAa,CAAA;KAC5B;;IACR;IACA,UACC,oBAAC,QAAD;KAAQ,MAAM,WAAW;KAAS,SAAS;KACxC,UAAA,OAAO,QAAQ;IACV,CAAA,IAER,oBAAC,QAAD;KAAQ,MAAM;KAAW,SAAS;KAC/B,UAAA,OAAO,QAAQ;IACV,CAAA;GAEH;EACF,CAAA,CAAA;;AAEb;AAEA,eAAe,cAAc"}

package/es/chat/ChatInputArea/style.mjs

@@ -1,54 +1,49 @@
-import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles, cx } from "antd-style";
 //#region src/chat/ChatInputArea/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		container: css`
-      position: relative;
-
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-
-      height: 100%;
-      padding-block: 8px 12px;
-      padding-inline: 0;
-    `,
-		fullscreen: css`
-      position: absolute;
-      z-index: 10;
-      inset-block-end: 0;
-      inset-inline: 0;
-
-      background: ${cssVar.colorBgContainer};
-    `,
-		textarea: css`
-      align-items: stretch;
-
-      height: 100% !important;
-      padding-block: 0;
-      padding-inline: 8px;
-
-      line-height: 1.5;
-    `,
-		textareaContainer: css`
-      position: relative;
-      flex: 1;
-    `
-	};
-});
-const actionBarStyles = createStaticStyles(({ css }) => ({
-	left: cx(staticStylish.noScrollbar, css`
-      overflow: auto hidden;
-    `),
-	right: css``,
-	root: css`
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-  `
-}));
+const textareaClassName = "lobe-chat-input-area-textarea";
+const styles = {
+	container: {
+		kOIVth: "lb167g77z",
+		kg3NbH: "lbnjsko4",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kGO01o: "lbsag5q8",
+		kLKAdn: "lb1y1aw1k",
+		kVAEAm: "lb1n2onr6",
+		kZKoxP: "lb5yr21d",
+		$$css: true
+	},
+	fullscreen: {
+		kkqhue: "lb17y0mx6",
+		kWkggS: "lb6yijhg",
+		krVfgx: "lb1ey2m1c",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1n327nk",
+		$$css: true
+	},
+	textareaContainer: {
+		kUk6DE: "lb98rzlu",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	}
+};
+const actionBarStyles = {
+	left: {
+		kXHlph: "lbw2csxc",
+		kORKVm: "lb10wlt62",
+		kvPnhw: "lb1uowca5",
+		kOuLrU: "lbfk6m8",
+		kBM8BC: "lb1yqm8si",
+		kBDiHx: "lbjx87ck",
+		$$css: true
+	},
+	root: {
+		kVQacm: "lbb3r6kr",
+		kVAEAm: "lb1n2onr6",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	}
+};
 //#endregion
-export { actionBarStyles, styles };
+export { actionBarStyles, styles, textareaClassName };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"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, cssVar }) => {\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    fullscreen: css`\n      position: absolute;\n      z-index: 10;\n      inset-block-end: 0;\n      inset-inline: 0;\n\n      background: ${cssVar.colorBgContainer};\n    `,\n    textarea: css`\n      align-items: stretch;\n\n      height: 100% !important;\n      padding-block: 0;\n      padding-inline: 8px;\n\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,KAAK,aAAa;CAC5D,OAAO;EACL,WAAW,GAAG;;;;;;;;;;;EAWd,YAAY,GAAG;;;;;;oBAMC,OAAO,iBAAiB;;EAExC,UAAU,GAAG;;;;;;;;;EASb,mBAAmB,GAAG;;;;CAIxB;AACF,CAAC;AAED,MAAa,kBAAkB,oBAAoB,EAAE,WAAW;CAC9D,MAAM,GACJA,cAAkB,aAClB,GAAG;;KAGL;CACA,OAAO,GAAG;CACV,MAAM,GAAG;;;;;AAKX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/chat/ChatInputArea/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const textareaClassName = 'lobe-chat-input-area-textarea';\n\nexport const styles = stylex.create({\n  container: {\n    gap: 8,\n    paddingInline: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    paddingBlockEnd: '12px',\n    paddingBlockStart: '8px',\n    position: 'relative',\n    height: '100%',\n  },\n  fullscreen: {\n    insetInline: 0,\n    backgroundColor: cssVar.colorBgContainer,\n    insetBlockEnd: 0,\n    position: 'absolute',\n    zIndex: 10,\n  },\n  textareaContainer: {\n    flex: '1',\n    position: 'relative',\n  },\n});\n\nexport const actionBarStyles = stylex.create({\n  left: {\n    'overflowX': 'auto',\n    'overflowY': 'hidden',\n    '::-webkit-scrollbar': {\n      backgroundColor: 'transparent',\n      display: 'none',\n      height: 0,\n      width: 0,\n    },\n  },\n  root: {\n    overflow: 'hidden',\n    position: 'relative',\n    width: '100%',\n  },\n});\n"],"mappings":";AAIA,MAAa,oBAAoB;AACjC,MAAa,SAAS;CACpB,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,kBAAkB;CAC7B,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/chat/ChatInputArea/type.d.mts

@@ -1,12 +1,12 @@
 import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
-import { TextAreaProps } from "../../base-ui/Input/type.mjs";
-import "../../base-ui/Input/index.mjs";
-import { DraggablePanelProps } from "../../base-ui/DraggablePanel/type.mjs";
-import "../../base-ui/DraggablePanel/index.mjs";
+import { TextAreaProps } from "../../Input/type.mjs";
+import "../../Input/index.mjs";
+import { DraggablePanelProps } from "../../DraggablePanel/type.mjs";
+import "../../DraggablePanel/index.mjs";
 import { CSSProperties, ReactNode, Ref } from "react";
 //#region src/chat/ChatInputArea/type.d.ts
-interface ChatInputAreaProps extends Omit<ChatInputAreaInnerProps, 'classNames'> {
+export interface ChatInputAreaProps extends Omit<ChatInputAreaInnerProps, 'classNames'> {
   bottomAddons?: ReactNode;
   classNames?: DraggablePanelProps['classNames'];
   expand?: boolean;
@@ -21,14 +21,14 @@ interface ChatInputAreaProps extends Omit<ChatInputAreaInnerProps, 'classNames'>
   setExpand?: (expand: boolean) => void;
   topAddons?: ReactNode;
 }
-interface ChatInputActionBarProps {
+export interface ChatInputActionBarProps {
   leftAddons?: ReactNode;
   mobile?: boolean;
   padding?: number | string;
   ref?: Ref<HTMLDivElement>;
   rightAddons?: ReactNode;
 }
-interface ChatInputAreaInnerProps extends Omit<TextAreaProps, 'onInput'> {
+export interface ChatInputAreaInnerProps extends Omit<TextAreaProps, 'onInput'> {
   className?: string;
   loading?: boolean;
   onInput?: (value: string) => void;
@@ -36,7 +36,7 @@ interface ChatInputAreaInnerProps extends Omit<TextAreaProps, 'onInput'> {
   ref?: Ref<HTMLTextAreaElement>;
   style?: CSSProperties;
 }
-interface ChatSendButtonProps extends FlexboxProps {
+export interface ChatSendButtonProps extends FlexboxProps {
   className?: string;
   leftAddons?: ReactNode;
   loading?: boolean;
@@ -52,5 +52,4 @@ interface ChatSendButtonProps extends FlexboxProps {
   };
 }
 //#endregion
-export { ChatInputActionBarProps, ChatInputAreaInnerProps, ChatInputAreaProps, ChatSendButtonProps };
 //# sourceMappingURL=type.d.mts.map

package/es/chat/ChatItem/ChatItem.mjs

@@ -1,5 +1,7 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useResponsive } from "../../styles/theme/scope.mjs";
 import { useTranslation } from "../../i18n/useTranslation.mjs";
 import chat_default from "../../i18n/resources/en/chat.mjs";
 import { styles } from "./style.mjs";
@@ -11,7 +13,8 @@ import MessageContent from "./components/MessageContent.mjs";
 import Title from "./components/Title.mjs";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cx, useResponsive } from "antd-style";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
 //#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 }) => {
@@ -41,19 +44,14 @@ 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]);
+	const isDocs = variant === "docs";
+	const containerClassName = styleProps([styles.container, isDocs && styles.containerDocs], clsx$1("lobe-chat-item", isDocs ? "lobe-chat-item-docs" : "lobe-chat-item-bubble", className)).className;
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		className: containerClassName,
 		direction: placement === "left" ? "horizontal" : "horizontal-reverse",
 		gap: mobile ? 6 : 12,
 		style: cssVariables,
+		width: "100%",
 		...rest,
 		children: [
 			showAvatar && /* @__PURE__ */ jsx(Avatar, {
@@ -72,8 +70,9 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 			}),
 			/* @__PURE__ */ jsxs(FlexBasic_default, {
 				align: placement === "left" ? "flex-start" : "flex-end",
-				className: messageContainerClassName,
 				ref: containerRef,
+				width: editing ? "100%" : void 0,
+				...stylex.props(styles.messageBox, styles.messageContainer, hasTime && styles.withTime),
 				children: [
 					/* @__PURE__ */ jsx(Title, {
 						avatar,
@@ -85,9 +84,10 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 					aboveMessage,
 					/* @__PURE__ */ jsxs(FlexBasic_default, {
 						align: placement === "left" ? "flex-start" : "flex-end",
-						className: messageContentClassName,
 						"data-layout": layoutMode,
 						gap: 8,
+						width: editing ? "100%" : void 0,
+						...stylex.props(styles.messageBox, styles.messageContent),
 						direction: layoutMode === "horizontal" ? placement === "left" ? "horizontal" : "horizontal-reverse" : "vertical",
 						children: [/* @__PURE__ */ jsx(FlexBasic_default, {
 							ref: contentRef,

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

@@ -1 +1 @@
-{"version":3,"file":"ChatItem.mjs","names":["chatMessages","Flexbox"],"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            placement={placement}\n            size={avatarSize}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n            onClick={onAvatarClick}\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            gap={8}\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\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                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\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                />\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":"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"}
+{"version":3,"file":"ChatItem.mjs","names":["chatMessages","clsx","Flexbox"],"sources":["../../../src/chat/ChatItem/ChatItem.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\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';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\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 isDocs = variant === 'docs';\n    const containerClassName = styleProps(\n      [styles.container, isDocs && styles.containerDocs],\n      clsx('lobe-chat-item', isDocs ? 'lobe-chat-item-docs' : 'lobe-chat-item-bubble', className),\n    ).className;\n\n    return (\n      <Flexbox\n        className={containerClassName}\n        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n        gap={mobile ? 6 : 12}\n        style={cssVariables}\n        width={'100%'}\n        {...rest}\n      >\n        {showAvatar && (\n          <Avatar\n            {...avatarProps}\n            addon={avatarAddon}\n            alt={avatarAlt}\n            avatar={avatar}\n            loading={loading}\n            placement={placement}\n            size={avatarSize}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n            onClick={onAvatarClick}\n          />\n        )}\n        <Flexbox\n          align={placement === 'left' ? 'flex-start' : 'flex-end'}\n          ref={containerRef}\n          width={editing ? '100%' : undefined}\n          {...stylex.props(styles.messageBox, styles.messageContainer, hasTime && styles.withTime)}\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            data-layout={layoutMode}\n            gap={8}\n            width={editing ? '100%' : undefined}\n            {...stylex.props(styles.messageBox, styles.messageContent)}\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\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                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\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                />\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":"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"}

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

@@ -1,19 +1,16 @@
+import { styleProps } from "../../../styles/stylex/props.mjs";
 import FlexBasic_default from "../../../Flex/FlexBasic.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 = "left", variant = "bubble", editing, ref }) => {
-	const actionsClassName = useMemo(() => {
-		if (variant === "bubble") return placement === "left" ? styles.actionsBubbleLeft : styles.actionsBubbleRight;
-		return placement === "left" ? styles.actionsDocsLeft : styles.actionsDocsRight;
-	}, [placement, variant]);
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		align: "flex-start",
-		className: cx(actionsClassName, editing && styles.actionsEditing),
+		flex: "none",
+		justify: placement === "left" ? "flex-end" : "flex-start",
 		ref,
 		role: "menubar",
+		className: styleProps(variant !== "bubble" && placement === "left" ? styles.actionsTop : styles.actionsBottom, editing ? "lobe-chat-item-actions-editing" : void 0).className,
 		children: actions
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Actions.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { type FC, type Ref, useMemo } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\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,MAAM,WAA6B,EACjC,SACA,YAAY,QACZ,UAAU,UACV,SACA,UACI;CACJ,MAAM,mBAAmB,cAAc;EACrC,IAAI,YAAY,UACd,OAAO,cAAc,SAAS,OAAO,oBAAoB,OAAO;EAElE,OAAO,cAAc,SAAS,OAAO,kBAAkB,OAAO;CAChE,GAAG,CAAC,WAAW,OAAO,CAAC;CAEvB,OACE,oBAACA,mBAAD;EACE,OAAO;EACP,WAAW,GAAG,kBAAkB,WAAW,OAAO,cAAc;EAC3D;EACL,MAAK;EAEJ,UAAA;CACM,CAAA;AAEb"}
+{"version":3,"file":"Actions.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Actions.tsx"],"sourcesContent":["import { type FC, type Ref } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\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  return (\n    <Flexbox\n      align={'flex-start'}\n      flex={'none'}\n      justify={placement === 'left' ? 'flex-end' : 'flex-start'}\n      ref={ref}\n      role=\"menubar\"\n      className={\n        styleProps(\n          variant !== 'bubble' && placement === 'left' ? styles.actionsTop : styles.actionsBottom,\n          editing ? 'lobe-chat-item-actions-editing' : undefined,\n        ).className\n      }\n    >\n      {actions}\n    </Flexbox>\n  );\n};\n\nexport default Actions;\n"],"mappings":";;;;;AAgBA,MAAM,WAA6B,EACjC,SACA,YAAY,QACZ,UAAU,UACV,SACA,UACI;CACJ,OACE,oBAACA,mBAAD;EACE,OAAO;EACP,MAAM;EACN,SAAS,cAAc,SAAS,aAAa;EACxC;EACL,MAAK;EACL,WACE,WACE,YAAY,YAAY,cAAc,SAAS,OAAO,aAAa,OAAO,eAC1E,UAAU,mCAAmC,KAAA,CAC/C,CAAC,CAAC;EAGH,UAAA;CACM,CAAA;AAEb"}

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

@@ -1,14 +1,15 @@
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
-import Avatar$1 from "../../../base-ui/Avatar/index.mjs";
+import Avatar$1 from "../../../Avatar/index.mjs";
 import { styles } from "../style.mjs";
 import Loading from "./Loading.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 //#region src/chat/ChatItem/components/Avatar.tsx
 const Avatar = ({ loading, avatar, placement, unoptimized, addon, onClick, size = 40, style, alt }) => {
 	const cssVariables = useMemo(() => ({ "--chat-item-avatar-size": `${size}px` }), [size]);
 	const avatarContent = /* @__PURE__ */ jsxs("div", {
-		className: styles.avatarContainer,
+		...stylex.props(styles.avatarContainer),
 		style: {
 			...cssVariables,
 			...style
@@ -30,8 +31,8 @@ const Avatar = ({ loading, avatar, placement, unoptimized, addon, onClick, size
 	if (!addon) return avatarContent;
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		align: "center",
-		className: styles.avatarGroupContainer,
 		gap: 8,
+		width: "var(--chat-item-avatar-size, 40px)",
 		children: [avatarContent, addon]
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":["A","Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Avatar.tsx"],"sourcesContent":["import { type CSSProperties, type FC, useMemo } from 'react';\n\nimport A from '@/base-ui/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        size={size}\n        title={avatar.title}\n        unoptimized={unoptimized}\n        onClick={onClick}\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,MAAM,UAA2B,EAC/B,SACA,QACA,WACA,aACA,OACA,SACA,OAAO,IACP,OACA,UACI;CACJ,MAAM,eAAe,eACZ,EACL,2BAA2B,GAAG,KAAK,IACrC,IACA,CAAC,IAAI,CACP;CAEA,MAAM,gBACJ,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAiB,OAAO;GAAE,GAAG;GAAc,GAAG;EAAM;EAA3E,UAAA,CACE,oBAACA,UAAD;GACE,KAAK,OAAO,OAAO;GACnB,WAAW;GACX,QAAQ,OAAO;GACf,YAAY,OAAO;GACb;GACN,OAAO,OAAO;GACD;GACJ;EACV,CAAA,GACD,oBAAC,SAAD;GAAkB;GAAoB;EAAY,CAAA,CAC/C;;CAGP,IAAI,CAAC,OAAO,OAAO;CACnB,OACE,qBAACC,mBAAD;EAAS,OAAO;EAAU,WAAW,OAAO;EAAsB,KAAK;EAAvE,UAAA,CACG,eACA,KACM;;AAEb"}
+{"version":3,"file":"Avatar.mjs","names":["A","Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Avatar.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { 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 {...stylex.props(styles.avatarContainer)} style={{ ...cssVariables, ...style }}>\n      <A\n        alt={alt || avatar.title}\n        animation={loading}\n        avatar={avatar.avatar}\n        background={avatar.backgroundColor}\n        size={size}\n        title={avatar.title}\n        unoptimized={unoptimized}\n        onClick={onClick}\n      />\n      <Loading loading={loading} placement={placement} />\n    </div>\n  );\n\n  if (!addon) return avatarContent;\n  return (\n    <Flexbox align={'center'} gap={8} width={'var(--chat-item-avatar-size, 40px)'}>\n      {avatarContent}\n      {addon}\n    </Flexbox>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AAkBA,MAAM,UAA2B,EAC/B,SACA,QACA,WACA,aACA,OACA,SACA,OAAO,IACP,OACA,UACI;CACJ,MAAM,eAAe,eAAuC,EAC1D,2BAA2B,GAAG,KAAK,IACrC,IAAI,CAAC,IAAI,CAAC;CACV,MAAM,gBAAgB,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,eAAe;EAAG,OAAO;GAC1E,GAAG;GACH,GAAG;EACL;EAHsB,UAAA,CAIlB,oBAACA,UAAD;GAAG,KAAK,OAAO,OAAO;GAAO,WAAW;GAAS,QAAQ,OAAO;GAAQ,YAAY,OAAO;GAAuB;GAAM,OAAO,OAAO;GAAoB;GAAsB;EAAU,CAAA,GAC1L,oBAAC,SAAD;GAAkB;GAAoB;EAAY,CAAA,CAC/C;;CACP,IAAI,CAAC,OAAO,OAAO;CACnB,OAAO,qBAACC,mBAAD;EAAS,OAAO;EAAU,KAAK;EAAG,OAAO;EAAzC,UAAA,CACF,eACA,KACM;;AACb"}

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

@@ -1,11 +1,13 @@
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
-import Alert from "../../../base-ui/Alert/Alert.mjs";
+import Alert from "../../../Alert/Alert.mjs";
 import { styles } from "../style.mjs";
 import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 //#region src/chat/ChatItem/components/ErrorContent.tsx
 const ErrorContent = ({ message, error }) => {
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
-		className: styles.errorContainer,
+		width: "100%",
+		...stylex.props(styles.errorContainer),
 		children: /* @__PURE__ */ jsx(Alert, {
 			showIcon: true,
 			closable: false,

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorContent.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/ErrorContent.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport Alert from '@/base-ui/Alert';\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\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 showIcon closable={false} extra={message} type={'error'} {...error} />\n    </Flexbox>\n  );\n};\n\nexport default ErrorContent;\n"],"mappings":";;;;;AAcA,MAAM,gBAAuC,EAAE,SAAS,YAAY;CAClE,OACE,oBAACA,mBAAD;EAAS,WAAW,OAAO;EACzB,UAAA,oBAAC,OAAD;GAAO,UAAA;GAAS,UAAU;GAAO,OAAO;GAAS,MAAM;GAAS,GAAI;EAAQ,CAAA;CACrE,CAAA;AAEb"}
+{"version":3,"file":"ErrorContent.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/ErrorContent.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { FC } from 'react';\n\nimport Alert from '@/Alert';\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\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 width={'100%'} {...stylex.props(styles.errorContainer)}>\n      <Alert showIcon closable={false} extra={message} type={'error'} {...error} />\n    </Flexbox>\n  );\n};\n\nexport default ErrorContent;\n"],"mappings":";;;;;;AAWA,MAAM,gBAAuC,EAC3C,SACA,YACI;CACJ,OAAO,oBAACA,mBAAD;EAAS,OAAO;EAAQ,GAAI,OAAO,MAAM,OAAO,cAAc;EACjE,UAAA,oBAAC,OAAD;GAAO,UAAA;GAAS,UAAU;GAAO,OAAO;GAAS,MAAM;GAAS,GAAI;EAAQ,CAAA;CACrE,CAAA;AACb"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Loading.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Loading.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\nimport type { FC } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\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 spin icon={Loader2} size={{ size: 12, strokeWidth: 3 }} />\n    </Flexbox>\n  );\n};\n\nexport default Loading;\n"],"mappings":";;;;;;AAcA,MAAM,WAA6B,EAAE,SAAS,YAAY,aAAa;CACrE,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAACA,mBAAD;EACE,OAAO;EACP,WAAW,cAAc,SAAS,OAAO,cAAc,OAAO;EAC9D,SAAS;EAET,UAAA,oBAAC,MAAD;GAAM,MAAA;GAAK,MAAM;GAAS,MAAM;IAAE,MAAM;IAAI,aAAa;GAAE;EAAI,CAAA;CACxD,CAAA;AAEb"}
+{"version":3,"file":"Loading.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Loading.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { Loader2 } from 'lucide-react';\nimport type { FC } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\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      height={16}\n      justify={'center'}\n      width={16}\n      {...stylex.props(\n        styles.loading,\n        placement === 'left' ? styles.loadingLeft : styles.loadingRight,\n      )}\n    >\n      <Icon spin icon={Loader2} size={{ size: 12, strokeWidth: 3 }} />\n    </Flexbox>\n  );\n};\n\nexport default Loading;\n"],"mappings":";;;;;;;AAWA,MAAM,WAA6B,EACjC,SACA,YAAY,aACR;CACJ,IAAI,CAAC,SAAS,OAAO;CACrB,OAAO,oBAACA,mBAAD;EAAS,OAAO;EAAU,QAAQ;EAAI,SAAS;EAAU,OAAO;EAAI,GAAI,OAAO,MAAM,OAAO,SAAS,cAAc,SAAS,OAAO,cAAc,OAAO,YAAY;EACvK,UAAA,oBAAC,MAAD;GAAM,MAAA;GAAK,MAAM;GAAS,MAAM;IAChC,MAAM;IACN,aAAa;GACf;EAAI,CAAA;CACK,CAAA;AACb"}

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

@@ -1,22 +1,17 @@
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import { useResponsive } from "../../../styles/theme/scope.mjs";
 import { styles } from "../style.mjs";
 import EditableMessage from "../../EditableMessage/EditableMessage.mjs";
-import { memo, useMemo } from "react";
+import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx, useResponsive } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/chat/ChatItem/components/MessageContent.tsx
 const MessageContent = memo(({ editing, onChange, onEditingChange, text, message, placement, messageExtra, renderMessage, variant, primary, onDoubleClick, fontSize, markdownProps }) => {
 	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 isBubble = variant === "bubble";
 	const content = /* @__PURE__ */ jsx(EditableMessage, {
 		fullFeaturedCodeBlock: true,
-		classNames: { input: styles.editingInput },
+		classNames: { input: stylex.props(styles.editingInput).className },
 		editButtonSize: "small",
 		editing,
 		fontSize,
@@ -29,12 +24,12 @@ const MessageContent = memo(({ editing, onChange, onEditingChange, text, message
 	});
 	const messageContent = renderMessage ? renderMessage(content) : content;
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(messageClassName, editing && editingContainerClassName),
+		paddingBlock: editing ? "8px 12px" : isBubble ? 8 : "6px 0",
+		paddingInline: editing || isBubble ? 12 : 0,
+		width: editing ? "100%" : void 0,
 		onDoubleClick,
-		children: [messageContent, messageExtra && !editing ? /* @__PURE__ */ jsx("div", {
-			className: styles.messageExtra,
-			children: messageExtra
-		}) : null]
+		...stylex.props(isBubble && styles.messageBubble, styles.messageBox, styles.narrowFullWidth, editing && [styles.editingContainer, !isBubble && styles.editingContainerDocs]),
+		children: [messageContent, messageExtra && !editing ? /* @__PURE__ */ jsx("div", { children: messageExtra }) : null]
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"MessageContent.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/MessageContent.tsx"],"sourcesContent":["import { cx, useResponsive } from 'antd-style';\nimport { memo, type ReactNode, useMemo } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport EditableMessage from '@/chat/EditableMessage';\nimport { Flexbox } from '@/Flex';\nimport { type MarkdownProps } from '@/Markdown';\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        fullFeaturedCodeBlock\n        classNames={{ input: styles.editingInput }}\n        editButtonSize={'small'}\n        editing={editing}\n        fontSize={fontSize}\n        markdownProps={markdownProps}\n        openModal={mobile ? editing : undefined}\n        text={text}\n        value={message ? String(message) : ''}\n        onChange={onChange}\n        onEditingChange={onEditingChange}\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,cAAc;CAEjC,MAAM,mBAAmB,cAAc;EACrC,IAAI,YAAY,UAAU,OAAO,OAAO;EAGxC,OAAO,OAAO;CAChB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,4BAA4B,cAAc;EAC9C,OAAO,YAAY,SAAS,OAAO,uBAAuB,OAAO;CACnE,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,UACJ,oBAAC,iBAAD;EACE,uBAAA;EACA,YAAY,EAAE,OAAO,OAAO,aAAa;EACzC,gBAAgB;EACP;EACC;EACK;EACf,WAAW,SAAS,UAAU,KAAA;EACxB;EACN,OAAO,UAAU,OAAO,OAAO,IAAI;EACzB;EACO;CAClB,CAAA;CAEH,MAAM,iBAAiB,gBAAgB,cAAc,OAAO,IAAI;CAEhE,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,kBAAkB,WAAW,yBAAyB;EACrD;EAFjB,UAAA,CAIG,gBACA,gBAAgB,CAAC,UAChB,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAe,UAAA;EAAkB,CAAA,IACtD,IACG;;AAEb,CACF"}
+{"version":3,"file":"MessageContent.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/MessageContent.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { memo, type ReactNode } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport EditableMessage from '@/chat/EditableMessage';\nimport { Flexbox } from '@/Flex';\nimport { type MarkdownProps } from '@/Markdown';\nimport { useResponsive } from '@/styles/theme/scope';\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    const isBubble = variant === 'bubble';\n\n    const content = (\n      <EditableMessage\n        fullFeaturedCodeBlock\n        classNames={{ input: stylex.props(styles.editingInput).className }}\n        editButtonSize={'small'}\n        editing={editing}\n        fontSize={fontSize}\n        markdownProps={markdownProps}\n        openModal={mobile ? editing : undefined}\n        text={text}\n        value={message ? String(message) : ''}\n        onChange={onChange}\n        onEditingChange={onEditingChange}\n      />\n    );\n    const messageContent = renderMessage ? renderMessage(content) : content;\n\n    return (\n      <Flexbox\n        paddingBlock={editing ? '8px 12px' : isBubble ? 8 : '6px 0'}\n        paddingInline={editing || isBubble ? 12 : 0}\n        width={editing ? '100%' : undefined}\n        onDoubleClick={onDoubleClick}\n        {...stylex.props(\n          isBubble && styles.messageBubble,\n          styles.messageBox,\n          styles.narrowFullWidth,\n          editing && [styles.editingContainer, !isBubble && styles.editingContainerDocs],\n        )}\n      >\n        {messageContent}\n        {messageExtra && !editing ? <div>{messageExtra}</div> : null}\n      </Flexbox>\n    );\n  },\n);\n\nexport default MessageContent;\n"],"mappings":";;;;;;;;AAuBA,MAAM,iBAAiB,MAA2B,EAChD,SACA,UACA,iBACA,MACA,SACA,WACA,cACA,eACA,SACA,SACA,eACA,UACA,oBACI;CAIJ,MAAM,EACJ,WACE,cAAc;CAClB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,oBAAC,iBAAD;EAAiB,uBAAA;EAAsB,YAAY,EACjE,OAAO,OAAO,MAAM,OAAO,YAAY,CAAC,CAAC,UAC3C;EAAG,gBAAgB;EAAkB;EAAmB;EAAyB;EAAe,WAAW,SAAS,UAAU,KAAA;EAAiB;EAAM,OAAO,UAAU,OAAO,OAAO,IAAI;EAAc;EAA2B;CAAkB,CAAA;CACnP,MAAM,iBAAiB,gBAAgB,cAAc,OAAO,IAAI;CAChE,OAAO,qBAACA,mBAAD;EAAS,cAAc,UAAU,aAAa,WAAW,IAAI;EAAS,eAAe,WAAW,WAAW,KAAK;EAAG,OAAO,UAAU,SAAS,KAAA;EAA0B;EAAe,GAAI,OAAO,MAAM,YAAY,OAAO,eAAe,OAAO,YAAY,OAAO,iBAAiB,WAAW,CAAC,OAAO,kBAAkB,CAAC,YAAY,OAAO,oBAAoB,CAAC;EAAlW,UAAA,CACA,gBACA,gBAAgB,CAAC,UAAU,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA,IAAI,IACjD;;AACf,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Title.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Title.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\nimport { formatTime } from '@/utils/formatTime';\n\nimport { styles } from '../style';\n\nexport interface TitleProps {\n  avatar: ChatItemProps['avatar'];\n  placement?: ChatItemProps['placement'];\n  showTitle?: ChatItemProps['showTitle'];\n  time?: ChatItemProps['time'];\n  titleAddon?: ChatItemProps['titleAddon'];\n}\n\nconst Title: FC<TitleProps> = ({ showTitle, placement = 'left', time, avatar, titleAddon }) => {\n  return (\n    <Flexbox\n      align={'center'}\n      className={placement === 'left' ? styles.nameLeft : styles.nameRight}\n      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n      gap={4}\n    >\n      {showTitle ? avatar.title || 'untitled' : undefined}\n      {showTitle ? titleAddon : undefined}\n      {time && <time>{formatTime(time)}</time>}\n    </Flexbox>\n  );\n};\n\nexport default Title;\n"],"mappings":";;;;;AAgBA,MAAM,SAAyB,EAAE,WAAW,YAAY,QAAQ,MAAM,QAAQ,iBAAiB;CAC7F,OACE,qBAACA,mBAAD;EACE,OAAO;EACP,WAAW,cAAc,SAAS,OAAO,WAAW,OAAO;EAC3D,WAAW,cAAc,SAAS,eAAe;EACjD,KAAK;EAJP,UAAA;GAMG,YAAY,OAAO,SAAS,aAAa,KAAA;GACzC,YAAY,aAAa,KAAA;GACzB,QAAQ,oBAAC,QAAD,EAAA,UAAO,WAAW,IAAI,EAAQ,CAAA;EAChC;;AAEb"}
+{"version":3,"file":"Title.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Title.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { FC } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\nimport { formatTime } from '@/utils/formatTime';\n\nimport { styles } from '../style';\n\nexport interface TitleProps {\n  avatar: ChatItemProps['avatar'];\n  placement?: ChatItemProps['placement'];\n  showTitle?: ChatItemProps['showTitle'];\n  time?: ChatItemProps['time'];\n  titleAddon?: ChatItemProps['titleAddon'];\n}\n\nconst Title: FC<TitleProps> = ({ showTitle, placement = 'left', time, avatar, titleAddon }) => {\n  return (\n    <Flexbox\n      align={'center'}\n      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n      gap={4}\n      {...stylex.props(styles.name, placement === 'left' ? styles.nameLeft : styles.nameRight)}\n    >\n      {showTitle ? avatar.title || 'untitled' : undefined}\n      {showTitle ? titleAddon : undefined}\n      {time && <time>{formatTime(time)}</time>}\n    </Flexbox>\n  );\n};\n\nexport default Title;\n"],"mappings":";;;;;;AAaA,MAAM,SAAyB,EAC7B,WACA,YAAY,QACZ,MACA,QACA,iBACI;CACJ,OAAO,qBAACA,mBAAD;EAAS,OAAO;EAAU,WAAW,cAAc,SAAS,eAAe;EAAsB,KAAK;EAAG,GAAI,OAAO,MAAM,OAAO,MAAM,cAAc,SAAS,OAAO,WAAW,OAAO,SAAS;EAAhM,UAAA;GACF,YAAY,OAAO,SAAS,aAAa,KAAA;GACzC,YAAY,aAAa,KAAA;GACzB,QAAQ,oBAAC,QAAD,EAAA,UAAO,WAAW,IAAI,EAAQ,CAAA;EAChC;;AACb"}