@lobehub/ui 4.1.8 → 4.1.9

package/es/chat/EditableMessage/EditableMessage.mjs

@@ -5,16 +5,16 @@ import MessageInput_default from "../MessageInput/MessageInput.mjs";
 import MessageModal_default from "../MessageModal/MessageModal.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { cx } from "antd-style";
 
 //#region src/chat/EditableMessage/EditableMessage.tsx
 const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChange, editing, openModal, onOpenChange, placeholder, showEditWhenEmpty = false, styles: customStyles, className, style, height, variant, editButtonSize, text, fullFeaturedCodeBlock, model, fontSize, language = "markdown", markdownProps }) => {
-	const [isEdit, setTyping] = useMergeState(false, {
+	const [isEdit, setTyping] = useControlledState(false, {
 		onChange: onEditingChange,
 		value: editing
 	});
-	const [expand, setExpand] = useMergeState(false, {
+	const [expand, setExpand] = useControlledState(false, {
 		onChange: onOpenChange,
 		value: openModal
 	});

package/es/chat/EditableMessage/EditableMessage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableMessage.mjs","names":["useControlledState","MessageInput","text","Markdown","MessageModal"],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Markdown from '@/Markdown';\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\n\nimport type { EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n  ({\n    value,\n    onChange,\n    classNames = {},\n    onEditingChange,\n    editing,\n    openModal,\n    onOpenChange,\n    placeholder,\n    showEditWhenEmpty = false,\n    styles: customStyles,\n    className,\n    style,\n    height,\n    variant,\n    editButtonSize,\n    text,\n    fullFeaturedCodeBlock,\n    model,\n    fontSize,\n    language = 'markdown',\n    markdownProps,\n  }) => {\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [expand, setExpand] = useControlledState<boolean>(false, {\n      onChange: onOpenChange,\n      value: openModal,\n    });\n\n    const isAutoSize = height === 'auto';\n\n    const input = (\n      <MessageInput\n        className={cx(className, classNames?.input)}\n        classNames={classNames}\n        defaultValue={value}\n        editButtonSize={editButtonSize}\n        height={height}\n        language={language}\n        onCancel={() => setTyping(false)}\n        onConfirm={(text) => {\n          onChange?.(text);\n          setTyping(false);\n        }}\n        placeholder={placeholder}\n        shortcut\n        style={{\n          ...style,\n          ...customStyles?.input,\n        }}\n        styles={customStyles}\n        text={text}\n        variant={variant}\n      />\n    );\n\n    if (!value && showEditWhenEmpty) return input;\n\n    return (\n      <>\n        {!expand && isEdit ? (\n          input\n        ) : (\n          <Markdown\n            className={cx(className, classNames?.markdown)}\n            fontSize={fontSize}\n            fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n            style={{\n              height: isAutoSize ? 'unset' : height,\n              ...style,\n              ...customStyles?.markdown,\n            }}\n            variant={'chat'}\n            {...markdownProps}\n          >\n            {value || placeholder || ''}\n          </Markdown>\n        )}\n        {expand && (\n          <MessageModal\n            editing={isEdit}\n            extra={model?.extra}\n            footer={model?.footer}\n            height={height}\n            language={language}\n            onChange={onChange}\n            onEditingChange={setTyping}\n            onOpenChange={(e) => {\n              setExpand(e);\n              setTyping(false);\n            }}\n            open={expand}\n            placeholder={placeholder}\n            text={text}\n            value={value}\n          />\n        )}\n      </>\n    );\n  },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,EAAE,EACf,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,aAAaA,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,QAAQ,aAAaA,cAA4B,OAAO;EAC7D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,aAAa,WAAW;CAE9B,MAAM,QACJ,oBAACC;EACC,WAAW,GAAG,WAAW,YAAY,MAAM;EAC/B;EACZ,cAAc;EACE;EACR;EACE;EACV,gBAAgB,UAAU,MAAM;EAChC,YAAY,WAAS;AACnB,cAAWC,OAAK;AAChB,aAAU,MAAM;;EAEL;EACb;EACA,OAAO;GACL,GAAG;GACH,GAAG,cAAc;GAClB;EACD,QAAQ;EACF;EACG;GACT;AAGJ,KAAI,CAAC,SAAS,kBAAmB,QAAO;AAExC,QACE,8CACG,CAAC,UAAU,SACV,QAEA,oBAACC;EACC,WAAW,GAAG,WAAW,YAAY,SAAS;EACpC;EACa;EACvB,OAAO;GACL,QAAQ,aAAa,UAAU;GAC/B,GAAG;GACH,GAAG,cAAc;GAClB;EACD,SAAS;EACT,GAAI;YAEH,SAAS,eAAe;GAChB,EAEZ,UACC,oBAACC;EACC,SAAS;EACT,OAAO,OAAO;EACd,QAAQ,OAAO;EACP;EACE;EACA;EACV,iBAAiB;EACjB,eAAe,MAAM;AACnB,aAAU,EAAE;AACZ,aAAU,MAAM;;EAElB,MAAM;EACO;EACP;EACC;GACP,IAEH;EAGR;AAED,gBAAgB,cAAc;AAE9B,8BAAe"}
+{"version":3,"file":"EditableMessage.mjs","names":["MessageInput","text","Markdown","MessageModal"],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Markdown from '@/Markdown';\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\n\nimport type { EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n  ({\n    value,\n    onChange,\n    classNames = {},\n    onEditingChange,\n    editing,\n    openModal,\n    onOpenChange,\n    placeholder,\n    showEditWhenEmpty = false,\n    styles: customStyles,\n    className,\n    style,\n    height,\n    variant,\n    editButtonSize,\n    text,\n    fullFeaturedCodeBlock,\n    model,\n    fontSize,\n    language = 'markdown',\n    markdownProps,\n  }) => {\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [expand, setExpand] = useControlledState<boolean>(false, {\n      onChange: onOpenChange,\n      value: openModal,\n    });\n\n    const isAutoSize = height === 'auto';\n\n    const input = (\n      <MessageInput\n        className={cx(className, classNames?.input)}\n        classNames={classNames}\n        defaultValue={value}\n        editButtonSize={editButtonSize}\n        height={height}\n        language={language}\n        onCancel={() => setTyping(false)}\n        onConfirm={(text) => {\n          onChange?.(text);\n          setTyping(false);\n        }}\n        placeholder={placeholder}\n        shortcut\n        style={{\n          ...style,\n          ...customStyles?.input,\n        }}\n        styles={customStyles}\n        text={text}\n        variant={variant}\n      />\n    );\n\n    if (!value && showEditWhenEmpty) return input;\n\n    return (\n      <>\n        {!expand && isEdit ? (\n          input\n        ) : (\n          <Markdown\n            className={cx(className, classNames?.markdown)}\n            fontSize={fontSize}\n            fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n            style={{\n              height: isAutoSize ? 'unset' : height,\n              ...style,\n              ...customStyles?.markdown,\n            }}\n            variant={'chat'}\n            {...markdownProps}\n          >\n            {value || placeholder || ''}\n          </Markdown>\n        )}\n        {expand && (\n          <MessageModal\n            editing={isEdit}\n            extra={model?.extra}\n            footer={model?.footer}\n            height={height}\n            language={language}\n            onChange={onChange}\n            onEditingChange={setTyping}\n            onOpenChange={(e) => {\n              setExpand(e);\n              setTyping(false);\n            }}\n            open={expand}\n            placeholder={placeholder}\n            text={text}\n            value={value}\n          />\n        )}\n      </>\n    );\n  },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,EAAE,EACf,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,QAAQ,aAAa,mBAA4B,OAAO;EAC7D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,aAAa,WAAW;CAE9B,MAAM,QACJ,oBAACA;EACC,WAAW,GAAG,WAAW,YAAY,MAAM;EAC/B;EACZ,cAAc;EACE;EACR;EACE;EACV,gBAAgB,UAAU,MAAM;EAChC,YAAY,WAAS;AACnB,cAAWC,OAAK;AAChB,aAAU,MAAM;;EAEL;EACb;EACA,OAAO;GACL,GAAG;GACH,GAAG,cAAc;GAClB;EACD,QAAQ;EACF;EACG;GACT;AAGJ,KAAI,CAAC,SAAS,kBAAmB,QAAO;AAExC,QACE,8CACG,CAAC,UAAU,SACV,QAEA,oBAACC;EACC,WAAW,GAAG,WAAW,YAAY,SAAS;EACpC;EACa;EACvB,OAAO;GACL,QAAQ,aAAa,UAAU;GAC/B,GAAG;GACH,GAAG,cAAc;GAClB;EACD,SAAS;EACT,GAAI;YAEH,SAAS,eAAe;GAChB,EAEZ,UACC,oBAACC;EACC,SAAS;EACT,OAAO,OAAO;EACd,QAAQ,OAAO;EACP;EACE;EACA;EACV,iBAAiB;EACjB,eAAe,MAAM;AACnB,aAAU,EAAE;AACZ,aAAU,MAAM;;EAElB,MAAM;EACO;EACP;EACC;GACP,IAEH;EAGR;AAED,gBAAgB,cAAc;AAE9B,8BAAe"}

package/es/chat/EditableMessageList/EditableMessageList.d.mts

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

package/es/chat/MessageInput/MessageInput.d.mts

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

package/es/chat/MessageModal/MessageModal.d.mts

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

package/es/chat/MessageModal/MessageModal.mjs

@@ -11,7 +11,7 @@ import { useStyles } from "../MessageInput/style.mjs";
 import messageModal_default from "../../i18n/resources/en/messageModal.mjs";
 import { memo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { useResponsive } from "antd-style";
 
 //#region src/chat/MessageModal/MessageModal.tsx
@@ -19,11 +19,11 @@ const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenCha
 	const { mobile } = useResponsive();
 	const { styles: textStyles } = useStyles();
 	const { t } = useTranslation(messageModal_default);
-	const [isEdit, setTyping] = useMergeState(false, {
+	const [isEdit, setTyping] = useControlledState(false, {
 		onChange: onEditingChange,
 		value: editing
 	});
-	const [showModal, setShowModal] = useMergeState(false, {
+	const [showModal, setShowModal] = useControlledState(false, {
 		onChange: onOpenChange,
 		value: open
 	});

package/es/chat/MessageModal/MessageModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageModal.mjs","names":["useTextStyles","messageModalMessages","useControlledState","Modal","Flexbox","Button","TextArea","value","CodeEditor","Markdown"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\nimport { useStyles as useTextStyles } from '@/chat/MessageInput/style';\nimport messageModalMessages from '@/i18n/resources/en/messageModal';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport type { MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n  ({\n    panelRef,\n    editing,\n    open,\n    height = '75vh',\n    onOpenChange,\n    onEditingChange,\n    placeholder,\n    value,\n    language = 'markdown',\n    onChange,\n    text,\n    footer,\n    extra,\n  }) => {\n    const { mobile } = useResponsive();\n    const { styles: textStyles } = useTextStyles();\n    const { t } = useTranslation(messageModalMessages);\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [showModal, setShowModal] = useControlledState(false, {\n      onChange: onOpenChange,\n      value: open,\n    });\n\n    const [temporaryValue, setMessage] = useState(value);\n\n    const confirmText = text?.confirm ?? t('messageModal.confirm');\n    const cancelText = text?.cancel ?? t('messageModal.cancel');\n    const editText = text?.edit ?? t('messageModal.edit');\n\n    const modalFooter = isEdit ? (\n      <Flexbox direction={'horizontal-reverse'} gap={8}>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            onChange?.(temporaryValue);\n            setMessage(value);\n          }}\n          type=\"primary\"\n        >\n          {confirmText}\n        </Button>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            setMessage(value);\n          }}\n        >\n          {cancelText}\n        </Button>\n      </Flexbox>\n    ) : (\n      footer\n    );\n\n    return (\n      <Modal\n        allowFullscreen\n        cancelText={cancelText}\n        destroyOnHidden\n        footer={modalFooter}\n        height={height}\n        okText={editText}\n        onCancel={() => {\n          setShowModal(false);\n          setTyping(false);\n          setMessage(value);\n        }}\n        onOk={() => setTyping(true)}\n        open={showModal}\n        panelRef={panelRef}\n        title={text?.title}\n      >\n        {isEdit ? (\n          mobile ? (\n            <TextArea\n              autoSize\n              className={textStyles}\n              defaultValue={temporaryValue}\n              onBlur={(e) => setMessage(e.target.value)}\n              onChange={(value) => setMessage(value.target.value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          ) : (\n            <CodeEditor\n              className={textStyles}\n              defaultValue={temporaryValue}\n              language={language}\n              onBlur={(e) => setMessage(e.target.value)}\n              onValueChange={(value) => setMessage(value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          )\n        ) : (\n          <>\n            {extra}\n            <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n          </>\n        )}\n      </Modal>\n    );\n  },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,eAAeA,WAAe;CAC9C,MAAM,EAAE,MAAM,eAAeC,qBAAqB;CAClD,MAAM,CAAC,QAAQ,aAAaC,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgBA,cAAmB,OAAO;EAC1D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,gBAAgB,cAAc,SAAS,MAAM;CAEpD,MAAM,cAAc,MAAM,WAAW,EAAE,uBAAuB;CAC9D,MAAM,aAAa,MAAM,UAAU,EAAE,sBAAsB;CAC3D,MAAM,WAAW,MAAM,QAAQ,EAAE,oBAAoB;AA2BrD,QACE,oBAACC;EACC;EACY;EACZ;EACA,QA9BgB,SAClB,qBAACC;GAAQ,WAAW;GAAsB,KAAK;cAC7C,oBAACC;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,eAAe;AAC1B,gBAAW,MAAM;;IAEnB,MAAK;cAEJ;KACM,EACT,oBAACA;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,MAAM;;cAGlB;KACM;IACD,GAEV;EASU;EACR,QAAQ;EACR,gBAAgB;AACd,gBAAa,MAAM;AACnB,aAAU,MAAM;AAChB,cAAW,MAAM;;EAEnB,YAAY,UAAU,KAAK;EAC3B,MAAM;EACI;EACV,OAAO,MAAM;YAEZ,SACC,SACE,oBAACC;GACC;GACA,WAAW;GACX,cAAc;GACd,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,WAAW,YAAU,WAAWC,QAAM,OAAO,MAAM;GACtC;GACb,OAAO;GACP,SAAS;IACT,GAEF,oBAACC;GACC,WAAW;GACX,cAAc;GACJ;GACV,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,gBAAgB,YAAU,WAAWD,QAAM;GAC9B;GACb,OAAO;GACP,SAAS;IACT,GAGJ,8CACG,OACD,oBAACE;GAAS,SAAS;aAAS,OAAO,SAAS,YAAY;IAAY,IACnE;GAEC;EAGb;AAED,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"MessageModal.mjs","names":["useTextStyles","messageModalMessages","Modal","Flexbox","Button","TextArea","value","CodeEditor","Markdown"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\nimport { useStyles as useTextStyles } from '@/chat/MessageInput/style';\nimport messageModalMessages from '@/i18n/resources/en/messageModal';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport type { MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n  ({\n    panelRef,\n    editing,\n    open,\n    height = '75vh',\n    onOpenChange,\n    onEditingChange,\n    placeholder,\n    value,\n    language = 'markdown',\n    onChange,\n    text,\n    footer,\n    extra,\n  }) => {\n    const { mobile } = useResponsive();\n    const { styles: textStyles } = useTextStyles();\n    const { t } = useTranslation(messageModalMessages);\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [showModal, setShowModal] = useControlledState(false, {\n      onChange: onOpenChange,\n      value: open,\n    });\n\n    const [temporaryValue, setMessage] = useState(value);\n\n    const confirmText = text?.confirm ?? t('messageModal.confirm');\n    const cancelText = text?.cancel ?? t('messageModal.cancel');\n    const editText = text?.edit ?? t('messageModal.edit');\n\n    const modalFooter = isEdit ? (\n      <Flexbox direction={'horizontal-reverse'} gap={8}>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            onChange?.(temporaryValue);\n            setMessage(value);\n          }}\n          type=\"primary\"\n        >\n          {confirmText}\n        </Button>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            setMessage(value);\n          }}\n        >\n          {cancelText}\n        </Button>\n      </Flexbox>\n    ) : (\n      footer\n    );\n\n    return (\n      <Modal\n        allowFullscreen\n        cancelText={cancelText}\n        destroyOnHidden\n        footer={modalFooter}\n        height={height}\n        okText={editText}\n        onCancel={() => {\n          setShowModal(false);\n          setTyping(false);\n          setMessage(value);\n        }}\n        onOk={() => setTyping(true)}\n        open={showModal}\n        panelRef={panelRef}\n        title={text?.title}\n      >\n        {isEdit ? (\n          mobile ? (\n            <TextArea\n              autoSize\n              className={textStyles}\n              defaultValue={temporaryValue}\n              onBlur={(e) => setMessage(e.target.value)}\n              onChange={(value) => setMessage(value.target.value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          ) : (\n            <CodeEditor\n              className={textStyles}\n              defaultValue={temporaryValue}\n              language={language}\n              onBlur={(e) => setMessage(e.target.value)}\n              onValueChange={(value) => setMessage(value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          )\n        ) : (\n          <>\n            {extra}\n            <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n          </>\n        )}\n      </Modal>\n    );\n  },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,eAAeA,WAAe;CAC9C,MAAM,EAAE,MAAM,eAAeC,qBAAqB;CAClD,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgB,mBAAmB,OAAO;EAC1D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,gBAAgB,cAAc,SAAS,MAAM;CAEpD,MAAM,cAAc,MAAM,WAAW,EAAE,uBAAuB;CAC9D,MAAM,aAAa,MAAM,UAAU,EAAE,sBAAsB;CAC3D,MAAM,WAAW,MAAM,QAAQ,EAAE,oBAAoB;AA2BrD,QACE,oBAACC;EACC;EACY;EACZ;EACA,QA9BgB,SAClB,qBAACC;GAAQ,WAAW;GAAsB,KAAK;cAC7C,oBAACC;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,eAAe;AAC1B,gBAAW,MAAM;;IAEnB,MAAK;cAEJ;KACM,EACT,oBAACA;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,MAAM;;cAGlB;KACM;IACD,GAEV;EASU;EACR,QAAQ;EACR,gBAAgB;AACd,gBAAa,MAAM;AACnB,aAAU,MAAM;AAChB,cAAW,MAAM;;EAEnB,YAAY,UAAU,KAAK;EAC3B,MAAM;EACI;EACV,OAAO,MAAM;YAEZ,SACC,SACE,oBAACC;GACC;GACA,WAAW;GACX,cAAc;GACd,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,WAAW,YAAU,WAAWC,QAAM,OAAO,MAAM;GACtC;GACb,OAAO;GACP,SAAS;IACT,GAEF,oBAACC;GACC,WAAW;GACX,cAAc;GACJ;GACV,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,gBAAgB,YAAU,WAAWD,QAAM;GAC9B;GACb,OAAO;GACP,SAAS;IACT,GAGJ,8CACG,OACD,oBAACE;GAAS,SAAS;aAAS,OAAO,SAAS,YAAY;IAAY,IACnE;GAEC;EAGb;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/chat/TokenTag/TokenTag.mjs

@@ -1,64 +1,54 @@
 'use client';
 
-import FluentEmoji_default from "../../FluentEmoji/FluentEmoji.mjs";
-import Button_default from "../../Button/Button.mjs";
+import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
 import { useTranslation } from "../../i18n/useTranslation.mjs";
 import chat_default from "../../i18n/resources/en/chat.mjs";
-import { useStyles } from "./style.mjs";
 import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
-import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Progress } from "antd";
+import { useTheme } from "antd-style";
 import numeral from "numeral";
 
 //#region src/chat/TokenTag/TokenTag.tsx
 const format = (number) => numeral(number).format("0,0");
-const TokenTag = ({ className, shape = "round", mode = "remained", maxValue, value, text, unoptimized, hideText, ref, ...rest }) => {
-	const { mobile } = useResponsive();
+const TokenTag = ({ mode = "remained", maxValue, value, text, showInfo, size = 20, ...rest }) => {
+	const theme = useTheme();
 	const { t } = useTranslation(chat_default);
 	const valueLeft = maxValue - value;
-	const percent = valueLeft / maxValue;
-	const showText = !hideText && !mobile;
+	const percent = value / maxValue;
 	const remainedText = text?.remained ?? t("tokenTag.remained");
 	const usedText = text?.used ?? t("tokenTag.used");
 	const overloadText = text?.overload ?? t("tokenTag.overload");
 	const data = useMemo(() => {
 		let type;
-		let emoji;
-		if (percent > .3) {
+		let color;
+		if (percent < .7) {
 			type = "normal";
-			emoji = "😀";
-		} else if (percent > 0) {
+			color = theme.colorText;
+		} else if (percent < .9) {
 			type = "low";
-			emoji = "😅";
+			color = theme.colorWarning;
 		} else {
 			type = "overload";
-			emoji = "🤯";
+			color = theme.colorError;
 		}
 		return {
-			emoji,
+			color,
 			type
 		};
-	}, [percent]);
-	const { styles, cx: cx$1 } = useStyles();
-	return /* @__PURE__ */ jsxs(Button_default, {
-		className: cx$1(useMemo(() => cva(styles.root, {
-			defaultVariants: { type: "normal" },
-			variants: { type: {
-				normal: styles.normal,
-				low: styles.low,
-				overload: styles.overload
-			} }
-		}), [styles])({ type: data.type }), className),
-		ref,
-		shape,
-		variant: "filled",
-		...rest,
-		children: [/* @__PURE__ */ jsx(FluentEmoji_default, {
-			emoji: data.emoji,
-			size: 18,
-			unoptimized
-		}), valueLeft > 0 ? [showText ? mode === "remained" ? remainedText : usedText : "", mode === "remained" ? format(valueLeft) : format(value)].join(" ") : overloadText]
+	}, [percent, theme]);
+	const title = valueLeft > 0 ? [mode === "remained" ? remainedText : usedText, mode === "remained" ? format(valueLeft) : format(value)].join(" ") : overloadText;
+	return /* @__PURE__ */ jsx(ActionIcon_default, {
+		icon: /* @__PURE__ */ jsx(Progress, {
+			percent: percent * 100,
+			showInfo: false,
+			size: Number(typeof size === "object" ? size?.size || 20 : size) || 20,
+			strokeColor: data.color,
+			type: "circle"
+		}),
+		size,
+		title: showInfo ? title : void 0,
+		...rest
 	});
 };
 TokenTag.displayName = "TokenTag";

package/es/chat/TokenTag/TokenTag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TokenTag.mjs","names":["TokenTag: FC<TokenTagProps>","chatMessages","type: 'normal' | 'low' | 'overload'","Button","cx","FluentEmoji"],"sources":["../../../src/chat/TokenTag/TokenTag.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\nimport numeral from 'numeral';\nimport { type FC, useMemo } from 'react';\n\nimport Button from '@/Button';\nimport FluentEmoji from '@/FluentEmoji';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { useStyles } from './style';\nimport type { TokenTagProps } from './type';\n\nconst format = (number: number) => numeral(number).format('0,0');\n\nconst TokenTag: FC<TokenTagProps> = ({\n  className,\n  shape = 'round',\n  mode = 'remained',\n  maxValue,\n  value,\n  text,\n  unoptimized,\n  hideText,\n  ref,\n  ...rest\n}) => {\n  const { mobile } = useResponsive();\n  const { t } = useTranslation(chatMessages);\n  const valueLeft = maxValue - value;\n  const percent = valueLeft / maxValue;\n  const showText = !hideText && !mobile;\n  const remainedText = text?.remained ?? t('tokenTag.remained');\n  const usedText = text?.used ?? t('tokenTag.used');\n  const overloadText = text?.overload ?? t('tokenTag.overload');\n\n  const data = useMemo(() => {\n    let type: 'normal' | 'low' | 'overload';\n    let emoji;\n\n    if (percent > 0.3) {\n      type = 'normal';\n      emoji = '😀';\n    } else if (percent > 0) {\n      type = 'low';\n      emoji = '😅';\n    } else {\n      type = 'overload';\n      emoji = '🤯';\n    }\n    return {\n      emoji,\n      type,\n    };\n  }, [percent]);\n\n  const { styles, cx } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          type: 'normal',\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          type: {\n            normal: styles.normal,\n            low: styles.low,\n            overload: styles.overload,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <Button\n      className={cx(variants({ type: data.type }), className)}\n      ref={ref}\n      shape={shape}\n      variant={'filled'}\n      {...rest}\n    >\n      <FluentEmoji emoji={data.emoji} size={18} unoptimized={unoptimized} />\n      {valueLeft > 0\n        ? [\n            showText ? (mode === 'remained' ? remainedText : usedText) : '',\n            mode === 'remained' ? format(valueLeft) : format(value),\n          ].join(' ')\n        : overloadText}\n    </Button>\n  );\n};\n\nTokenTag.displayName = 'TokenTag';\n\nexport default TokenTag;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,UAAU,WAAmB,QAAQ,OAAO,CAAC,OAAO,MAAM;AAEhE,MAAMA,YAA+B,EACnC,WACA,QAAQ,SACR,OAAO,YACP,UACA,OACA,MACA,aACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAeC,aAAa;CAC1C,MAAM,YAAY,WAAW;CAC7B,MAAM,UAAU,YAAY;CAC5B,MAAM,WAAW,CAAC,YAAY,CAAC;CAC/B,MAAM,eAAe,MAAM,YAAY,EAAE,oBAAoB;CAC7D,MAAM,WAAW,MAAM,QAAQ,EAAE,gBAAgB;CACjD,MAAM,eAAe,MAAM,YAAY,EAAE,oBAAoB;CAE7D,MAAM,OAAO,cAAc;EACzB,IAAIC;EACJ,IAAI;AAEJ,MAAI,UAAU,IAAK;AACjB,UAAO;AACP,WAAQ;aACC,UAAU,GAAG;AACtB,UAAO;AACP,WAAQ;SACH;AACL,UAAO;AACP,WAAQ;;AAEV,SAAO;GACL;GACA;GACD;IACA,CAAC,QAAQ,CAAC;CAEb,MAAM,EAAE,QAAQ,aAAO,WAAW;AAqBlC,QACE,qBAACC;EACC,WAAWC,KArBE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,MAAM,UACP;GAED,UAAU,EACR,MAAM;IACJ,QAAQ,OAAO;IACf,KAAK,OAAO;IACZ,UAAU,OAAO;IAClB,EACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAI0B,EAAE,MAAM,KAAK,MAAM,CAAC,EAAE,UAAU;EAClD;EACE;EACP,SAAS;EACT,GAAI;aAEJ,oBAACC;GAAY,OAAO,KAAK;GAAO,MAAM;GAAiB;IAAe,EACrE,YAAY,IACT,CACE,WAAY,SAAS,aAAa,eAAe,WAAY,IAC7D,SAAS,aAAa,OAAO,UAAU,GAAG,OAAO,MAAM,CACxD,CAAC,KAAK,IAAI,GACX;GACG;;AAIb,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"TokenTag.mjs","names":["TokenTag: FC<TokenTagProps>","chatMessages","type: 'normal' | 'low' | 'overload'","ActionIcon"],"sources":["../../../src/chat/TokenTag/TokenTag.tsx"],"sourcesContent":["'use client';\n\nimport { Progress } from 'antd';\nimport { useTheme } from 'antd-style';\nimport numeral from 'numeral';\nimport { type FC, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport type { TokenTagProps } from './type';\n\nconst format = (number: number) => numeral(number).format('0,0');\n\nconst TokenTag: FC<TokenTagProps> = ({\n  mode = 'remained',\n  maxValue,\n  value,\n  text,\n  showInfo,\n  size = 20,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const { t } = useTranslation(chatMessages);\n  const valueLeft = maxValue - value;\n  const percent = value / maxValue;\n  const remainedText = text?.remained ?? t('tokenTag.remained');\n  const usedText = text?.used ?? t('tokenTag.used');\n  const overloadText = text?.overload ?? t('tokenTag.overload');\n\n  const data = useMemo(() => {\n    let type: 'normal' | 'low' | 'overload';\n    let color;\n\n    if (percent < 0.7) {\n      type = 'normal';\n      color = theme.colorText;\n    } else if (percent < 0.9) {\n      type = 'low';\n      color = theme.colorWarning;\n    } else {\n      type = 'overload';\n      color = theme.colorError;\n    }\n    return {\n      color,\n      type,\n    };\n  }, [percent, theme]);\n\n  const title =\n    valueLeft > 0\n      ? [\n          mode === 'remained' ? remainedText : usedText,\n          mode === 'remained' ? format(valueLeft) : format(value),\n        ].join(' ')\n      : overloadText;\n\n  return (\n    <ActionIcon\n      icon={\n        <Progress\n          percent={percent * 100}\n          showInfo={false}\n          size={Number(typeof size === 'object' ? size?.size || 20 : size) || 20}\n          strokeColor={data.color}\n          type=\"circle\"\n        />\n      }\n      size={size}\n      title={showInfo ? title : undefined}\n      {...rest}\n    />\n  );\n};\n\nTokenTag.displayName = 'TokenTag';\n\nexport default TokenTag;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,UAAU,WAAmB,QAAQ,OAAO,CAAC,OAAO,MAAM;AAEhE,MAAMA,YAA+B,EACnC,OAAO,YACP,UACA,OACA,MACA,UACA,OAAO,IACP,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,MAAM,eAAeC,aAAa;CAC1C,MAAM,YAAY,WAAW;CAC7B,MAAM,UAAU,QAAQ;CACxB,MAAM,eAAe,MAAM,YAAY,EAAE,oBAAoB;CAC7D,MAAM,WAAW,MAAM,QAAQ,EAAE,gBAAgB;CACjD,MAAM,eAAe,MAAM,YAAY,EAAE,oBAAoB;CAE7D,MAAM,OAAO,cAAc;EACzB,IAAIC;EACJ,IAAI;AAEJ,MAAI,UAAU,IAAK;AACjB,UAAO;AACP,WAAQ,MAAM;aACL,UAAU,IAAK;AACxB,UAAO;AACP,WAAQ,MAAM;SACT;AACL,UAAO;AACP,WAAQ,MAAM;;AAEhB,SAAO;GACL;GACA;GACD;IACA,CAAC,SAAS,MAAM,CAAC;CAEpB,MAAM,QACJ,YAAY,IACR,CACE,SAAS,aAAa,eAAe,UACrC,SAAS,aAAa,OAAO,UAAU,GAAG,OAAO,MAAM,CACxD,CAAC,KAAK,IAAI,GACX;AAEN,QACE,oBAACC;EACC,MACE,oBAAC;GACC,SAAS,UAAU;GACnB,UAAU;GACV,MAAM,OAAO,OAAO,SAAS,WAAW,MAAM,QAAQ,KAAK,KAAK,IAAI;GACpE,aAAa,KAAK;GAClB,MAAK;IACL;EAEE;EACN,OAAO,WAAW,QAAQ;EAC1B,GAAI;GACJ;;AAIN,SAAS,cAAc;AAEvB,uBAAe"}

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

@@ -1,19 +1,16 @@
-import { ButtonProps } from "../../Button/type.mjs";
-import "../../Button/index.mjs";
-import { Ref } from "react";
+import { ActionIconProps } from "../../ActionIcon/type.mjs";
+import "../../ActionIcon/index.mjs";
 
 //#region src/chat/TokenTag/type.d.ts
-interface TokenTagProps extends ButtonProps {
-  hideText?: boolean;
+interface TokenTagProps extends ActionIconProps {
   maxValue: number;
   mode?: 'remained' | 'used';
-  ref?: Ref<HTMLButtonElement>;
+  showInfo?: boolean;
   text?: {
     overload?: string;
     remained?: string;
     used?: string;
   };
-  unoptimized?: boolean;
   value: number;
 }
 //#endregion

package/es/color/ColorScales/index.d.mts

@@ -1,5 +1,5 @@
 import { ColorScaleItem } from "../types.mjs";
-import * as react0 from "react";
+import * as react32 from "react";
 
 //#region src/color/ColorScales/index.d.ts
 interface ColorScalesProps {
@@ -16,7 +16,7 @@ interface ColorScalesProps {
    */
   scale: ColorScaleItem;
 }
-declare const ColorScales: react0.NamedExoticComponent<ColorScalesProps>;
+declare const ColorScales: react32.NamedExoticComponent<ColorScalesProps>;
 //#endregion
 export { ColorScales, ColorScalesProps };
 //# sourceMappingURL=index.d.mts.map

package/es/i18n/context.d.mts

@@ -1,7 +1,7 @@
 import { MotionComponentType } from "../MotionProvider/index.mjs";
 import { I18nContextValue, TranslationKey, TranslationResources, TranslationResourcesInput } from "./types.mjs";
 import "../ConfigProvider/index.mjs";
-import * as react3 from "react";
+import * as react31 from "react";
 import { ReactNode } from "react";
 
 //#region src/i18n/context.d.ts
@@ -11,7 +11,7 @@ interface I18nProviderProps {
   motion: MotionComponentType;
   resources?: TranslationResourcesInput;
 }
-declare const I18nProvider: react3.NamedExoticComponent<I18nProviderProps>;
+declare const I18nProvider: react31.NamedExoticComponent<I18nProviderProps>;
 //#endregion
 export { I18nProvider, I18nProviderProps };
 //# sourceMappingURL=context.d.mts.map

package/es/icons/lucideExtra/BotPromptIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react76 from "react";
+import * as react71 from "react";
 import * as lucide_react0 from "lucide-react";
 
 //#region src/icons/lucideExtra/BotPromptIcon.d.ts
-declare const BotPromptIcon: react76.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react76.RefAttributes<SVGSVGElement>>;
+declare const BotPromptIcon: react71.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react71.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { BotPromptIcon };
 //# sourceMappingURL=BotPromptIcon.d.mts.map

package/es/icons/lucideExtra/CreateBotIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react78 from "react";
+import * as react75 from "react";
 import * as lucide_react1 from "lucide-react";
 
 //#region src/icons/lucideExtra/CreateBotIcon.d.ts
-declare const CreateBotIcon: react78.ForwardRefExoticComponent<Omit<lucide_react1.LucideProps, "ref"> & react78.RefAttributes<SVGSVGElement>>;
+declare const CreateBotIcon: react75.ForwardRefExoticComponent<Omit<lucide_react1.LucideProps, "ref"> & react75.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { CreateBotIcon };
 //# sourceMappingURL=CreateBotIcon.d.mts.map

package/es/icons/lucideExtra/DiscordIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react80 from "react";
+import * as react77 from "react";
 import * as lucide_react2 from "lucide-react";
 
 //#region src/icons/lucideExtra/DiscordIcon.d.ts
-declare const DiscordIcon: react80.ForwardRefExoticComponent<Omit<lucide_react2.LucideProps, "ref"> & react80.RefAttributes<SVGSVGElement>>;
+declare const DiscordIcon: react77.ForwardRefExoticComponent<Omit<lucide_react2.LucideProps, "ref"> & react77.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { DiscordIcon };
 //# sourceMappingURL=DiscordIcon.d.mts.map

package/es/icons/lucideExtra/GlobeOffIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react74 from "react";
+import * as react73 from "react";
 import * as lucide_react0 from "lucide-react";
 
 //#region src/icons/lucideExtra/GlobeOffIcon.d.ts
-declare const GlobeOffIcon: react74.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react74.RefAttributes<SVGSVGElement>>;
+declare const GlobeOffIcon: react73.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react73.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { GlobeOffIcon };
 //# sourceMappingURL=GlobeOffIcon.d.mts.map

package/es/icons/lucideExtra/GroupBotIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react84 from "react";
+import * as react81 from "react";
 import * as lucide_react4 from "lucide-react";
 
 //#region src/icons/lucideExtra/GroupBotIcon.d.ts
-declare const GroupBotIcon: react84.ForwardRefExoticComponent<Omit<lucide_react4.LucideProps, "ref"> & react84.RefAttributes<SVGSVGElement>>;
+declare const GroupBotIcon: react81.ForwardRefExoticComponent<Omit<lucide_react4.LucideProps, "ref"> & react81.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { GroupBotIcon };
 //# sourceMappingURL=GroupBotIcon.d.mts.map

package/es/icons/lucideExtra/GroupBotSquareIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react88 from "react";
-import * as lucide_react6 from "lucide-react";
+import * as react83 from "react";
+import * as lucide_react5 from "lucide-react";
 
 //#region src/icons/lucideExtra/GroupBotSquareIcon.d.ts
-declare const GroupBotSquareIcon: react88.ForwardRefExoticComponent<Omit<lucide_react6.LucideProps, "ref"> & react88.RefAttributes<SVGSVGElement>>;
+declare const GroupBotSquareIcon: react83.ForwardRefExoticComponent<Omit<lucide_react5.LucideProps, "ref"> & react83.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { GroupBotSquareIcon };
 //# sourceMappingURL=GroupBotSquareIcon.d.mts.map

package/es/icons/lucideExtra/LeftClickIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react90 from "react";
-import * as lucide_react7 from "lucide-react";
+import * as react79 from "react";
+import * as lucide_react3 from "lucide-react";
 
 //#region src/icons/lucideExtra/LeftClickIcon.d.ts
-declare const LeftClickIcon: react90.ForwardRefExoticComponent<Omit<lucide_react7.LucideProps, "ref"> & react90.RefAttributes<SVGSVGElement>>;
+declare const LeftClickIcon: react79.ForwardRefExoticComponent<Omit<lucide_react3.LucideProps, "ref"> & react79.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { LeftClickIcon };
 //# sourceMappingURL=LeftClickIcon.d.mts.map

package/es/icons/lucideExtra/LeftDoubleClickIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react94 from "react";
-import * as lucide_react9 from "lucide-react";
+import * as react93 from "react";
+import * as lucide_react10 from "lucide-react";
 
 //#region src/icons/lucideExtra/LeftDoubleClickIcon.d.ts
-declare const LeftDoubleClickIcon: react94.ForwardRefExoticComponent<Omit<lucide_react9.LucideProps, "ref"> & react94.RefAttributes<SVGSVGElement>>;
+declare const LeftDoubleClickIcon: react93.ForwardRefExoticComponent<Omit<lucide_react10.LucideProps, "ref"> & react93.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { LeftDoubleClickIcon };
 //# sourceMappingURL=LeftDoubleClickIcon.d.mts.map

package/es/icons/lucideExtra/McpIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react82 from "react";
-import * as lucide_react3 from "lucide-react";
+import * as react87 from "react";
+import * as lucide_react7 from "lucide-react";
 
 //#region src/icons/lucideExtra/McpIcon.d.ts
-declare const McpIcon: react82.ForwardRefExoticComponent<Omit<lucide_react3.LucideProps, "ref"> & react82.RefAttributes<SVGSVGElement>>;
+declare const McpIcon: react87.ForwardRefExoticComponent<Omit<lucide_react7.LucideProps, "ref"> & react87.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { McpIcon };
 //# sourceMappingURL=McpIcon.d.mts.map

package/es/icons/lucideExtra/ProviderIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react92 from "react";
+import * as react89 from "react";
 import * as lucide_react8 from "lucide-react";
 
 //#region src/icons/lucideExtra/ProviderIcon.d.ts
-declare const ProviderIcon: react92.ForwardRefExoticComponent<Omit<lucide_react8.LucideProps, "ref"> & react92.RefAttributes<SVGSVGElement>>;
+declare const ProviderIcon: react89.ForwardRefExoticComponent<Omit<lucide_react8.LucideProps, "ref"> & react89.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { ProviderIcon };
 //# sourceMappingURL=ProviderIcon.d.mts.map

package/es/icons/lucideExtra/RightClickIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react96 from "react";
-import * as lucide_react10 from "lucide-react";
+import * as react85 from "react";
+import * as lucide_react6 from "lucide-react";
 
 //#region src/icons/lucideExtra/RightClickIcon.d.ts
-declare const RightClickIcon: react96.ForwardRefExoticComponent<Omit<lucide_react10.LucideProps, "ref"> & react96.RefAttributes<SVGSVGElement>>;
+declare const RightClickIcon: react85.ForwardRefExoticComponent<Omit<lucide_react6.LucideProps, "ref"> & react85.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { RightClickIcon };
 //# sourceMappingURL=RightClickIcon.d.mts.map

package/es/icons/lucideExtra/RightDoubleClickIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react98 from "react";
-import * as lucide_react11 from "lucide-react";
+import * as react99 from "react";
+import * as lucide_react13 from "lucide-react";
 
 //#region src/icons/lucideExtra/RightDoubleClickIcon.d.ts
-declare const RightDoubleClickIcon: react98.ForwardRefExoticComponent<Omit<lucide_react11.LucideProps, "ref"> & react98.RefAttributes<SVGSVGElement>>;
+declare const RightDoubleClickIcon: react99.ForwardRefExoticComponent<Omit<lucide_react13.LucideProps, "ref"> & react99.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { RightDoubleClickIcon };
 //# sourceMappingURL=RightDoubleClickIcon.d.mts.map

package/es/icons/lucideExtra/ShapesUploadIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react100 from "react";
-import * as lucide_react12 from "lucide-react";
+import * as react95 from "react";
+import * as lucide_react11 from "lucide-react";
 
 //#region src/icons/lucideExtra/ShapesUploadIcon.d.ts
-declare const ShapesUploadIcon: react100.ForwardRefExoticComponent<Omit<lucide_react12.LucideProps, "ref"> & react100.RefAttributes<SVGSVGElement>>;
+declare const ShapesUploadIcon: react95.ForwardRefExoticComponent<Omit<lucide_react11.LucideProps, "ref"> & react95.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { ShapesUploadIcon };
 //# sourceMappingURL=ShapesUploadIcon.d.mts.map

package/es/icons/lucideExtra/TreeDownRightIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react102 from "react";
-import * as lucide_react13 from "lucide-react";
+import * as react97 from "react";
+import * as lucide_react12 from "lucide-react";
 
 //#region src/icons/lucideExtra/TreeDownRightIcon.d.ts
-declare const TreeDownRightIcon: react102.ForwardRefExoticComponent<Omit<lucide_react13.LucideProps, "ref"> & react102.RefAttributes<SVGSVGElement>>;
+declare const TreeDownRightIcon: react97.ForwardRefExoticComponent<Omit<lucide_react12.LucideProps, "ref"> & react97.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { TreeDownRightIcon };
 //# sourceMappingURL=TreeDownRightIcon.d.mts.map

package/es/icons/lucideExtra/TreeUpDownRightIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react86 from "react";
-import * as lucide_react5 from "lucide-react";
+import * as react91 from "react";
+import * as lucide_react9 from "lucide-react";
 
 //#region src/icons/lucideExtra/TreeUpDownRightIcon.d.ts
-declare const TreeUpDownRightIcon: react86.ForwardRefExoticComponent<Omit<lucide_react5.LucideProps, "ref"> & react86.RefAttributes<SVGSVGElement>>;
+declare const TreeUpDownRightIcon: react91.ForwardRefExoticComponent<Omit<lucide_react9.LucideProps, "ref"> & react91.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { TreeUpDownRightIcon };
 //# sourceMappingURL=TreeUpDownRightIcon.d.mts.map

package/es/mdx/Mdx/index.d.mts

@@ -1,6 +1,6 @@
 import { TypographyProps } from "../../Markdown/type.mjs";
 import "../../Markdown/index.mjs";
-import * as react48 from "react";
+import * as react33 from "react";
 import { ReactNode } from "react";
 import { Pluggable } from "unified";
 
@@ -18,7 +18,7 @@ interface MdxProps extends Omit<TypographyProps, 'children'> {
   remarkPlugins?: Pluggable[];
   variant?: 'normal' | 'chat';
 }
-declare const Mdx: react48.NamedExoticComponent<MdxProps>;
+declare const Mdx: react33.NamedExoticComponent<MdxProps>;
 //#endregion
 export { Mdx, MdxProps };
 //# sourceMappingURL=index.d.mts.map

package/es/mobile/ChatHeader/ChatHeaderTitle.d.mts

@@ -1,8 +1,8 @@
 import { ChatHeaderTitleProps } from "./type.mjs";
-import * as react107 from "react";
+import * as react106 from "react";
 
 //#region src/mobile/ChatHeader/ChatHeaderTitle.d.ts
-declare const ChatHeaderTitle: react107.NamedExoticComponent<ChatHeaderTitleProps>;
+declare const ChatHeaderTitle: react106.NamedExoticComponent<ChatHeaderTitleProps>;
 //#endregion
 export { ChatHeaderTitle };
 //# sourceMappingURL=ChatHeaderTitle.d.mts.map

package/es/mobile/ChatInputArea/components/ChatSendButton.d.mts

@@ -1,8 +1,8 @@
 import { ChatSendButtonProps } from "../type.mjs";
-import * as react106 from "react";
+import * as react107 from "react";
 
 //#region src/mobile/ChatInputArea/components/ChatSendButton.d.ts
-declare const ChatSendButton: react106.NamedExoticComponent<ChatSendButtonProps>;
+declare const ChatSendButton: react107.NamedExoticComponent<ChatSendButtonProps>;
 //#endregion
 export { ChatSendButton };
 //# sourceMappingURL=ChatSendButton.d.mts.map

package/es/mobile/TabBar/TabBar.mjs

@@ -5,11 +5,11 @@ import SafeArea_default from "../SafeArea/SafeArea.mjs";
 import { useStyles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 
 //#region src/mobile/TabBar/TabBar.tsx
 const TabBar = memo(({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {
-	const [currentActive, setCurrentActive] = useMergeState(defaultActiveKey || items[0].key, {
+	const [currentActive, setCurrentActive] = useControlledState(defaultActiveKey || items[0].key, {
 		defaultValue: defaultActiveKey,
 		onChange,
 		value: activeKey

package/es/mobile/TabBar/TabBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.mjs","names":["Flexbox","SafeArea"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { useStyles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n  ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n    const [currentActive, setCurrentActive] = useMergeState<string>(\n      defaultActiveKey || items[0].key,\n      {\n        defaultValue: defaultActiveKey,\n        onChange,\n        value: activeKey,\n      },\n    );\n    const { styles, cx } = useStyles();\n\n    return (\n      <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n        <Flexbox\n          align={'center'}\n          className={cx(styles.inner, className)}\n          horizontal\n          justify={'space-around'}\n        >\n          {items.map((item) => {\n            const active = item.key === currentActive;\n            return (\n              <Flexbox\n                align={'center'}\n                className={cx(styles.tab, active && styles.active)}\n                gap={4}\n                justify={'center'}\n                key={item.key}\n                onClick={() => {\n                  setCurrentActive(item.key);\n                  item?.onClick?.();\n                }}\n              >\n                <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n                  {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n                </Flexbox>\n                <div className={styles.title}>\n                  {typeof item.title === 'function' ? item.title(active) : item.title}\n                </div>\n              </Flexbox>\n            );\n          })}\n        </Flexbox>\n        {safeArea && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,oBAAoB,cACxC,oBAAoB,MAAM,GAAG,KAC7B;EACE,cAAc;EACd;EACA,OAAO;EACR,CACF;CACD,MAAM,EAAE,QAAQ,OAAO,WAAW;AAElC,QACE,qBAACA;EAAQ,IAAI;EAAU,WAAW,GAAG,OAAO,WAAW,UAAU;EAAO;EAAK,GAAI;aAC/E,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,OAAO,UAAU;GACtC;GACA,SAAS;aAER,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;AAC5B,WACE,qBAACA;KACC,OAAO;KACP,WAAW,GAAG,OAAO,KAAK,UAAU,OAAO,OAAO;KAClD,KAAK;KACL,SAAS;KAET,eAAe;AACb,uBAAiB,KAAK,IAAI;AAC1B,YAAM,WAAW;;gBAGnB,oBAACA;MAAQ,OAAO;MAAU,WAAW,OAAO;MAAM,SAAS;gBACxD,OAAO,KAAK,SAAS,aAAa,KAAK,KAAK,OAAO,GAAG,KAAK;OACpD,EACV,oBAAC;MAAI,WAAW,OAAO;gBACpB,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,OAAO,GAAG,KAAK;OAC1D;OAXD,KAAK,IAYF;KAEZ;IACM,EACT,YAAY,oBAACC,oBAAS,UAAU,WAAY;GACrC;EAGf;AAED,OAAO,cAAc;AAErB,qBAAe"}
+{"version":3,"file":"TabBar.mjs","names":["useMergeState","Flexbox","SafeArea"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { useStyles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n  ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n    const [currentActive, setCurrentActive] = useMergeState<string>(\n      defaultActiveKey || items[0].key,\n      {\n        defaultValue: defaultActiveKey,\n        onChange,\n        value: activeKey,\n      },\n    );\n    const { styles, cx } = useStyles();\n\n    return (\n      <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n        <Flexbox\n          align={'center'}\n          className={cx(styles.inner, className)}\n          horizontal\n          justify={'space-around'}\n        >\n          {items.map((item) => {\n            const active = item.key === currentActive;\n            return (\n              <Flexbox\n                align={'center'}\n                className={cx(styles.tab, active && styles.active)}\n                gap={4}\n                justify={'center'}\n                key={item.key}\n                onClick={() => {\n                  setCurrentActive(item.key);\n                  item?.onClick?.();\n                }}\n              >\n                <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n                  {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n                </Flexbox>\n                <div className={styles.title}>\n                  {typeof item.title === 'function' ? item.title(active) : item.title}\n                </div>\n              </Flexbox>\n            );\n          })}\n        </Flexbox>\n        {safeArea && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,oBAAoBA,mBACxC,oBAAoB,MAAM,GAAG,KAC7B;EACE,cAAc;EACd;EACA,OAAO;EACR,CACF;CACD,MAAM,EAAE,QAAQ,OAAO,WAAW;AAElC,QACE,qBAACC;EAAQ,IAAI;EAAU,WAAW,GAAG,OAAO,WAAW,UAAU;EAAO;EAAK,GAAI;aAC/E,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,OAAO,UAAU;GACtC;GACA,SAAS;aAER,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;AAC5B,WACE,qBAACA;KACC,OAAO;KACP,WAAW,GAAG,OAAO,KAAK,UAAU,OAAO,OAAO;KAClD,KAAK;KACL,SAAS;KAET,eAAe;AACb,uBAAiB,KAAK,IAAI;AAC1B,YAAM,WAAW;;gBAGnB,oBAACA;MAAQ,OAAO;MAAU,WAAW,OAAO;MAAM,SAAS;gBACxD,OAAO,KAAK,SAAS,aAAa,KAAK,KAAK,OAAO,GAAG,KAAK;OACpD,EACV,oBAAC;MAAI,WAAW,OAAO;gBACpB,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,OAAO,GAAG,KAAK;OAC1D;OAXD,KAAK,IAYF;KAEZ;IACM,EACT,YAAY,oBAACC,oBAAS,UAAU,WAAY;GACrC;EAGf;AAED,OAAO,cAAc;AAErB,qBAAe"}

package/es/storybook/StoryBook/index.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
-import * as react0 from "react";
+import * as react27 from "react";
 import { Ref } from "react";
 import { useControls, useCreateStore } from "leva";
 
@@ -10,7 +10,7 @@ interface StoryBookProps extends FlexboxProps {
   noPadding?: boolean;
   ref?: Ref<HTMLDivElement>;
 }
-declare const StoryBook: react0.NamedExoticComponent<StoryBookProps>;
+declare const StoryBook: react27.NamedExoticComponent<StoryBookProps>;
 //#endregion
 export { StoryBook, StoryBookProps, useControls, useCreateStore };
 //# sourceMappingURL=index.d.mts.map

package/package.json

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