@droppii-org/chat-sdk 0.1.51 → 0.1.53

package/dist/components/biz-inbox/BizInboxHeader.js

@@ -3,6 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 const BizInboxHeader = () => {
     const { t } = useTranslation("biz-inbox");
-    return (_jsx("div", { "data-testid": "biz-inbox-header", className: "flex w-full flex-col border-b border-gray-100 bg-white", children: _jsx("div", { className: "flex h-12 items-end px-3", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-end px-3", children: [_jsx("span", { className: "pb-1.5 text-center text-[16px] font-bold leading-[160%] tracking-[0.16px] text-[#1B3FE4]", children: t("tabs.messages") }), _jsx("span", { className: "h-[3px] w-full rounded-t bg-[#1B3FE4]" })] }) }) }));
+    return (_jsx("div", { "data-testid": "biz-inbox-header", className: "flex w-full flex-col border-b border-gray-100 bg-white", children: _jsx("div", { className: "flex h-12 items-end px-3", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-end px-3", children: [_jsx("span", { className: "pb-1.5 text-center text-[16px] font-bold leading-[160%] tracking-[0.16px] text-primary-400", children: t("tabs.messages") }), _jsx("span", { className: "h-[3px] w-full rounded-t bg-primary-400" })] }) }) }));
 };
 export default BizInboxHeader;

package/dist/components/biz-inbox/BizThreadAvatar.js

@@ -5,8 +5,8 @@ import { Icon } from "../../components/icon";
 import { BizChatCategory, BizPeerType } from "../../types/biz";
 import { resolveBizBadgeColor } from "../../utils/bizConversation";
 const BizThreadAvatar = ({ peerType, chatCategory, displayName, avatarUrl, badgeLabel, }) => {
-    const badge = badgeLabel ? (_jsx("span", { className: clsx("absolute -bottom-px -right-px flex h-[17px] items-center justify-center gap-2 rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-[inset_2px_6px_8px_0_rgba(0,0,0,0.40)]", resolveBizBadgeColor(peerType)), children: badgeLabel })) : null;
-    return (_jsxs("div", { className: "relative h-12 w-12 shrink-0", children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: displayName, className: "h-12 w-12 rounded-full object-cover" })) : (_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[#0C5CFF] text-white", children: chatCategory === BizChatCategory.GROUP ||
+    const badge = badgeLabel ? (_jsx("span", { className: clsx("absolute -bottom-px -right-px flex h-[17px] items-center justify-center gap-2 rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-badge-inset", resolveBizBadgeColor(peerType)), children: badgeLabel })) : null;
+    return (_jsxs("div", { className: "relative h-12 w-12 shrink-0", children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: displayName, className: "h-12 w-12 rounded-full object-cover" })) : (_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-chat-avatar text-white", children: chatCategory === BizChatCategory.GROUP ||
                     peerType === BizPeerType.GROUP ? (_jsx(Icon, { icon: "user-two-b", size: 20 })) : peerType === BizPeerType.BOT ? (_jsx(Icon, { icon: "droppii-o-1", size: 20 })) : (_jsx(Icon, { icon: "user-o", size: 20 })) })), badge] }));
 };
 export default BizThreadAvatar;

package/dist/components/biz-inbox/BizThreadTitle.js

@@ -5,6 +5,6 @@ import { Icon } from "../../components/icon";
 import { BizChatCategory, BizPeerType } from "../../types/biz";
 const BizThreadTitle = ({ peerType, chatCategory, displayName, hasUnread = false, }) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [(chatCategory === BizChatCategory.GROUP ||
             peerType === BizPeerType.GROUP) && (_jsx(Icon, { icon: "user-two-b", size: 12, className: "shrink-0 text-black" })), peerType === BizPeerType.BOT &&
-            chatCategory === BizChatCategory.BIZ_BOT_PDP && (_jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center gap-0.5 rounded-full border border-white bg-[linear-gradient(93deg,#607CFB_0%,#1B3FE4_100%)] px-1 py-0.5 text-white", children: _jsx(Icon, { icon: "shield-done-b", size: 8 }) })), peerType === BizPeerType.BOT &&
+            chatCategory === BizChatCategory.BIZ_BOT_PDP && (_jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center gap-0.5 rounded-full border border-white bg-gradient-pr-light px-1 py-0.5 text-white", children: _jsx(Icon, { icon: "shield-done-b", size: 8 }) })), peerType === BizPeerType.BOT &&
             chatCategory === BizChatCategory.BIZ_BOT_CRM && (_jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-black text-white", children: _jsx(Icon, { icon: "droppii-o-1", size: 8 }) })), _jsx("span", { className: clsx("min-w-0 truncate text-[16px] leading-[160%] text-black [font-feature-settings:'liga'_off,'clig'_off]", hasUnread ? "font-bold tracking-[0.16px]" : "font-[510]"), children: displayName })] }));
 export default BizThreadTitle;

package/dist/components/biz-thread-detail/BizMessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BizMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizMessageList.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,cAAc,+CAwEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BizMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizMessageList.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,cAAc,+CAuFnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/biz-thread-detail/BizMessageList.js

@@ -11,11 +11,15 @@ import useBizConversationStore from "../../store/bizConversation";
 import useConversationStore from "../../store/conversation";
 import useAuthStore from "../../store/auth";
 import { isBizGroupChat } from "../../utils/bizConversation";
+import { buildBotButtonsMessage } from "../../constants/botFlow";
 import emitter from "../../utils/events";
 import MessageItem from "../../components/message/item";
+import { useBotFlowContext } from "./bot";
 const BizMessageList = () => {
+    var _a, _b;
     const { t } = useTranslation("biz-inbox");
     const { user } = useChatContext();
+    const { buttons, disabled } = useBotFlowContext();
     const authUserID = useAuthStore((state) => state.userID);
     const conversation = useBizConversationStore((state) => state.conversationData);
     const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
@@ -25,12 +29,23 @@ const BizMessageList = () => {
     const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottomIfAtBottom, } = useMessageListScroll(Object.assign({ conversationId, userId: (user === null || user === void 0 ? void 0 : user.userID) || authUserID }, messageController));
     const { loadState, moreOldLoading } = messageController;
     const isMessageLoading = !conversationId || loadState.initLoading;
+    const botSenderId = ((_a = loadState.messageList.find((message) => message.sendID !== authUserID)) === null || _a === void 0 ? void 0 : _a.sendID) ||
+        ((_b = conversation === null || conversation === void 0 ? void 0 : conversation.peer) === null || _b === void 0 ? void 0 : _b.id) ||
+        "";
+    const botButtonsMessage = buttons.length > 0 && !disabled
+        ? buildBotButtonsMessage({
+            sendID: botSenderId,
+        })
+        : null;
+    const renderedMessages = botButtonsMessage
+        ? [botButtonsMessage, ...loadState.messageList]
+        : loadState.messageList;
     useEffect(() => {
         emitter.on("BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
         return () => {
             emitter.off("BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
         };
     }, [scrollToBottomIfAtBottom]);
-    return (_jsx("div", { "data-testid": "biz-message-list", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableBizMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat }, message.clientMsgID))) })) }));
+    return (_jsx("div", { "data-testid": "biz-message-list", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableBizMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: renderedMessages.map((message, _index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat }, message.clientMsgID))) })) }));
 };
 export default BizMessageList;

package/dist/components/biz-thread-detail/BizMoreOptionItem.js

@@ -13,7 +13,7 @@ const BizMoreOptionItem = ({ option, onSelect }) => {
         onSelect(option);
     };
     return (_jsxs("button", { type: "button", onClick: handleClick, disabled: !option.enabled, "aria-label": label, "data-testid": `biz-more-option-${option.labelKey}`, className: clsx("flex flex-col items-center gap-1 rounded-xl px-1 transition-colors", option.enabled
-            ? "active:bg-[rgba(131,137,157,0.08)]"
-            : "cursor-not-allowed opacity-40"), children: [_jsx("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[rgba(168,173,175,0.10)]", children: _jsx(Icon, { icon: option.icon, size: ICON_SIZE, className: "text-[#393E40]" }) }), _jsx("span", { className: "line-clamp-2 text-center text-[12px] leading-[1.4] text-[#393E40]", children: label })] }));
+            ? "active:bg-chat-bubble-neutral/[0.08]"
+            : "cursor-not-allowed opacity-40"), children: [_jsx("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-200/10", children: _jsx(Icon, { icon: option.icon, size: ICON_SIZE, className: "text-gray-900" }) }), _jsx("span", { className: "line-clamp-2 text-center text-[12px] leading-[1.4] text-gray-900", children: label })] }));
 };
 export default BizMoreOptionItem;

package/dist/components/biz-thread-detail/BizThreadDetailHeader.js

@@ -5,13 +5,13 @@ import { Icon } from "../../components/icon";
 import BizThreadAvatar from "../../components/biz-inbox/BizThreadAvatar";
 import BizThreadTitle from "../../components/biz-inbox/BizThreadTitle";
 import { resolveBizAvatarUrl, resolveBizBadgeLabel, resolveBizDisplayName, } from "../../utils/bizConversation";
-const HeaderIconButton = ({ icon, onClick, testId, }) => (_jsx("button", { type: "button", onClick: onClick, "data-testid": testId, className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-[#1B3FE4]", children: _jsx(Icon, { icon: icon, size: 24 }) }));
+const HeaderIconButton = ({ icon, onClick, testId, }) => (_jsx("button", { type: "button", onClick: onClick, "data-testid": testId, className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-primary-400", children: _jsx(Icon, { icon: icon, size: 24 }) }));
 const BizThreadDetailHeader = ({ conversation, onBack, }) => {
     const { t } = useTranslation("biz-inbox");
     const displayName = resolveBizDisplayName(conversation, t);
     const avatarUrl = resolveBizAvatarUrl(conversation);
     const badgeLabel = resolveBizBadgeLabel(conversation.peer.type, t);
     const subtitle = t("thread_detail.profile_hint");
-    return (_jsxs("div", { "data-testid": "biz-thread-detail-header", className: "flex w-full cursor-default items-center border-b border-[#EFEFEF] bg-white p-2 shadow-[inset_0px_-1px_0px_0px_rgba(61,63,64,0.1)]", children: [_jsx(HeaderIconButton, { icon: "arrow-left-o", onClick: onBack, testId: "biz-thread-detail-back" }), _jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 px-1", "data-testid": "biz-thread-detail-profile", children: [_jsx(BizThreadAvatar, { peerType: conversation.peer.type, chatCategory: conversation.chatCategory, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(BizThreadTitle, { peerType: conversation.peer.type, chatCategory: conversation.chatCategory, displayName: displayName }), _jsx("p", { className: "truncate text-[10px] font-normal leading-[160%] tracking-[0.1px] text-[#5C6366] [font-feature-settings:'liga'_off,'clig'_off]", children: subtitle })] })] })] }));
+    return (_jsxs("div", { "data-testid": "biz-thread-detail-header", className: "flex w-full cursor-default items-center border-b border-gray-25 bg-white p-2 shadow-inset-gray-divider", children: [_jsx(HeaderIconButton, { icon: "arrow-left-o", onClick: onBack, testId: "biz-thread-detail-back" }), _jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 px-1", "data-testid": "biz-thread-detail-profile", children: [_jsx(BizThreadAvatar, { peerType: conversation.peer.type, chatCategory: conversation.chatCategory, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(BizThreadTitle, { peerType: conversation.peer.type, chatCategory: conversation.chatCategory, displayName: displayName }), _jsx("p", { className: "truncate text-[10px] font-normal leading-[160%] tracking-[0.1px] text-gray-600 [font-feature-settings:'liga'_off,'clig'_off]", children: subtitle })] })] })] }));
 };
 export default BizThreadDetailHeader;

package/dist/components/biz-thread-detail/BizThreadDetailInput.js

@@ -249,8 +249,8 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
         event.preventDefault();
         void handleSend();
     };
-    return (_jsxs("div", { ref: containerRef, "data-testid": "biz-thread-detail-input", className: "flex w-full shrink-0 flex-col bg-[rgba(131,137,157,0.05)]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), listUploadFiles.length > 0 && (_jsx(FilePreviewList, { files: listUploadFiles, onRemove: (file) => handleRemoveFile(file.uid), onVideoReady: () => setIsVideoLoading(false) })), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "biz-thread-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-o", size: 24, className: "text-[#1B3FE4]" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-[#393E40]" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
-                            ? "border-[#607CFB] shadow-[0px_0px_2px_rgba(27,63,228,0.5)]"
-                            : "border-[#DDDEDF]"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsx("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => handleChange(event.target.value), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("thread_detail.input_placeholder"), "data-testid": "biz-thread-detail-message-input", className: "biz-message-input-scrollbar min-h-0 min-w-0 flex-1 resize-none appearance-none border-0 bg-transparent p-0 text-[16px] leading-[1.6] tracking-[0.16px] text-black outline-none ring-0 placeholder:text-[#747B7E] focus:border-0 focus:outline-none focus:ring-0" }) }) }), _jsx("div", { className: "flex shrink-0 items-center pb-1", children: _jsx("button", { type: "button", onClick: () => void handleSend(), disabled: !canSend, "data-testid": "biz-thread-detail-send", className: clsx("flex h-10 w-10 items-center justify-center rounded-full", canSend ? "bg-[#002BEB]" : "bg-[#002BEB] opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }), isMoreOptionOpen && (_jsx(BizMoreOptionPanel, { disabled: !isConversationReady, onTriggerMediaInput: () => { var _a; return (_a = mediaInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onTriggerDocumentInput: () => { var _a; return (_a = documentInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))] }));
+    return (_jsxs("div", { ref: containerRef, "data-testid": "biz-thread-detail-input", className: "flex w-full shrink-0 flex-col bg-chat-bubble-neutral/[0.05]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), listUploadFiles.length > 0 && (_jsx(FilePreviewList, { files: listUploadFiles, onRemove: (file) => handleRemoveFile(file.uid), onVideoReady: () => setIsVideoLoading(false) })), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "biz-thread-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-o", size: 24, className: "text-primary-400" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-gray-900" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
+                            ? "border-primary-200 shadow-primary-focus"
+                            : "border-gray-50"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsx("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => handleChange(event.target.value), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("thread_detail.input_placeholder"), "data-testid": "biz-thread-detail-message-input", className: "biz-message-input-scrollbar min-h-0 min-w-0 flex-1 resize-none appearance-none border-0 bg-transparent p-0 text-[16px] leading-[1.6] tracking-[0.16px] text-black outline-none ring-0 placeholder:text-gray-400 focus:border-0 focus:outline-none focus:ring-0" }) }) }), _jsx("div", { className: "flex shrink-0 items-center pb-1", children: _jsx("button", { type: "button", onClick: () => void handleSend(), disabled: !canSend, "data-testid": "biz-thread-detail-send", className: clsx("flex h-10 w-10 items-center justify-center rounded-full", canSend ? "bg-chat-send" : "bg-chat-send opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }), isMoreOptionOpen && (_jsx(BizMoreOptionPanel, { disabled: !isConversationReady, onTriggerMediaInput: () => { var _a; return (_a = mediaInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onTriggerDocumentInput: () => { var _a; return (_a = documentInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))] }));
 };
 export default BizThreadDetailInput;

package/dist/components/biz-thread-detail/bot/BotButtonMessage.d.ts

@@ -0,0 +1,3 @@
+declare const BotButtonMessage: () => import("react/jsx-runtime").JSX.Element;
+export default BotButtonMessage;
+//# sourceMappingURL=BotButtonMessage.d.ts.map

package/dist/components/biz-thread-detail/bot/BotButtonMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotButtonMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/biz-thread-detail/bot/BotButtonMessage.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,gBAAgB,+CAmErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/biz-thread-detail/bot/BotButtonMessage.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+import { BOT_BUTTON_MENU_THRESHOLD, BOT_DEFAULT_BUTTON_ID, } from "../../../constants/botFlow";
+import { useBotFlowContext } from "./BotFlowContext";
+const CHEVRON_SIZE = 20;
+const BotButtonMessage = () => {
+    const { t } = useTranslation("biz-inbox");
+    const { buttons, disabled, onSelect, onRestart } = useBotFlowContext();
+    const isMenuStyle = buttons.length > BOT_BUTTON_MENU_THRESHOLD;
+    const handleSelect = (actionId) => {
+        if (disabled)
+            return;
+        if (actionId === BOT_DEFAULT_BUTTON_ID) {
+            onRestart();
+            return;
+        }
+        onSelect(actionId);
+    };
+    const optionsNode = isMenuStyle ? (_jsx("div", { className: "flex flex-col overflow-hidden rounded-xl bg-white", children: buttons.map((option, index) => (_jsxs("button", { type: "button", disabled: disabled, onClick: () => handleSelect(option.id), className: clsx("flex items-center gap-4 px-3 py-2 text-left transition-colors", index !== buttons.length - 1 && "border-b border-gray-25", disabled && "cursor-not-allowed opacity-60"), children: [_jsx("span", { className: "flex-1 text-[16px] font-medium leading-[1.6] text-gray-900", children: option.id === BOT_DEFAULT_BUTTON_ID
+                        ? t("thread_detail.bot.restart")
+                        : option.label }), _jsx(Icon, { icon: "angle-right-o", size: CHEVRON_SIZE, className: "text-gray-900" })] }, option.id))) })) : (_jsx("div", { className: "flex flex-col gap-2", children: buttons.map((option) => (_jsx("button", { type: "button", disabled: disabled, onClick: () => handleSelect(option.id), className: clsx("flex flex-1 items-center justify-center gap-2 rounded-lg border border-primary-400 bg-primary-25 px-3 py-2", "text-center text-[14px] font-[510] leading-[160%] text-primary-400 transition-colors", disabled && "cursor-not-allowed opacity-60"), children: _jsx("span", { children: option.id === BOT_DEFAULT_BUTTON_ID
+                    ? t("thread_detail.bot.restart")
+                    : option.label }) }, option.id))) }));
+    return optionsNode;
+};
+export default BotButtonMessage;

package/dist/components/biz-thread-detail/bot/BotFlowContext.d.ts

@@ -0,0 +1,10 @@
+import type { BotButtonOption } from "../../../types/biz";
+export interface BotFlowContextValue {
+    buttons: BotButtonOption[];
+    disabled: boolean;
+    onSelect: (actionId: string) => void;
+    onRestart: () => void;
+}
+export declare const BotFlowProvider: import("react").Provider<BotFlowContextValue>;
+export declare const useBotFlowContext: () => BotFlowContextValue;
+//# sourceMappingURL=BotFlowContext.d.ts.map

package/dist/components/biz-thread-detail/bot/BotFlowContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotFlowContext.d.ts","sourceRoot":"","sources":["../../../../src/components/biz-thread-detail/bot/BotFlowContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAWD,eAAO,MAAM,eAAe,+CAA0B,CAAC;AAEvD,eAAO,MAAM,iBAAiB,2BAAmC,CAAC"}

package/dist/components/biz-thread-detail/bot/BotFlowContext.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, useContext } from "react";
+const noop = () => { };
+const BotFlowContext = createContext({
+    buttons: [],
+    disabled: false,
+    onSelect: noop,
+    onRestart: noop,
+});
+export const BotFlowProvider = BotFlowContext.Provider;
+export const useBotFlowContext = () => useContext(BotFlowContext);

package/dist/components/biz-thread-detail/bot/BotStartButton.d.ts

@@ -0,0 +1,8 @@
+export interface BotStartButtonProps {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+declare const BotStartButton: ({ label, onClick, disabled }: BotStartButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default BotStartButton;
+//# sourceMappingURL=BotStartButton.d.ts.map

package/dist/components/biz-thread-detail/bot/BotStartButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotStartButton.d.ts","sourceRoot":"","sources":["../../../../src/components/biz-thread-detail/bot/BotStartButton.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,8BAA8B,mBAAmB,4CAkBxE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/biz-thread-detail/bot/BotStartButton.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "../../../components/icon";
+const ICON_SIZE = 20;
+const BotStartButton = ({ label, onClick, disabled }) => {
+    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, className: clsx("flex h-12 w-full items-center justify-center gap-2 rounded-lg", "text-[16px] font-medium leading-[1.6] text-white transition-colors", disabled
+            ? "cursor-not-allowed bg-primary-400/60"
+            : "bg-primary-400 active:bg-primary-400/90"), children: [_jsx(Icon, { icon: "chat-square-o", size: ICON_SIZE, className: "text-white" }), _jsx("span", { children: label })] }));
+};
+export default BotStartButton;

package/dist/components/biz-thread-detail/bot/index.d.ts

@@ -0,0 +1,6 @@
+export { default as BotStartButton } from "./BotStartButton";
+export type { BotStartButtonProps } from "./BotStartButton";
+export { default as BotButtonMessage } from "./BotButtonMessage";
+export { BotFlowProvider, useBotFlowContext } from "./BotFlowContext";
+export type { BotFlowContextValue } from "./BotFlowContext";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/biz-thread-detail/bot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/biz-thread-detail/bot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACtE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/biz-thread-detail/bot/index.js

@@ -0,0 +1,3 @@
+export { default as BotStartButton } from "./BotStartButton";
+export { default as BotButtonMessage } from "./BotButtonMessage";
+export { BotFlowProvider, useBotFlowContext } from "./BotFlowContext";

package/dist/components/conversation/ThreadCard.js

@@ -5,12 +5,12 @@ const formatUnreadCount = (count) => (count > 99 ? "99+" : count);
 const UnreadBadge = ({ count }) => {
     const label = String(formatUnreadCount(count));
     const isWide = label.length > 1;
-    return (_jsx("span", { className: clsx("inline-flex h-5 shrink-0 items-center justify-center rounded-[32px] border-2 border-white bg-[linear-gradient(93deg,#FF7D74_0%,#F04438_100%)] px-[3px] text-center text-[12px] font-semibold leading-[160%] text-white", isWide ? "min-w-8" : "min-w-5"), children: label }));
+    return (_jsx("span", { className: clsx("inline-flex h-5 shrink-0 items-center justify-center rounded-[32px] border-2 border-white bg-gradient-danger-light px-[3px] text-center text-[12px] font-semibold leading-[160%] text-white", isWide ? "min-w-8" : "min-w-5"), children: label }));
 };
 const ThreadCard = ({ avatar, title, preview, time, unreadCount = 0, isSelected = false, onClick, testId, }) => {
     const hasUnread = unreadCount > 0;
-    return (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, className: clsx("relative flex w-full shrink-0 items-start gap-2 border-b border-[#EFEFEF] p-3 text-left transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff]", isSelected ? "bg-blue-50" : "bg-white"), children: [isSelected && (_jsx("span", { className: "absolute bottom-0 left-0 top-0 w-1 bg-blue-500" })), avatar, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-h-[25.6px] items-center justify-between gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: title }), time && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-[#747B7E] [font-feature-settings:'liga'_off,'clig'_off]", children: time }))] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: clsx("min-w-0 flex-1 truncate text-[14px] leading-[160%] [font-feature-settings:'liga'_off,'clig'_off]", hasUnread
+    return (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, className: clsx("relative flex w-full shrink-0 items-start gap-2 border-b border-gray-25 p-3 text-left transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-chat-ring", isSelected ? "bg-blue-50" : "bg-white"), children: [isSelected && (_jsx("span", { className: "absolute bottom-0 left-0 top-0 w-1 bg-blue-500" })), avatar, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-h-[25.6px] items-center justify-between gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: title }), time && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-gray-400 [font-feature-settings:'liga'_off,'clig'_off]", children: time }))] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: clsx("min-w-0 flex-1 truncate text-[14px] leading-[160%] [font-feature-settings:'liga'_off,'clig'_off]", hasUnread
                                     ? "font-[510] text-black"
-                                    : "font-normal tracking-[0.14px] text-[#5C6366]"), children: preview }), hasUnread && _jsx(UnreadBadge, { count: unreadCount })] })] })] }));
+                                    : "font-normal tracking-[0.14px] text-gray-600"), children: preview }), hasUnread && _jsx(UnreadBadge, { count: unreadCount })] })] })] }));
 };
 export default ThreadCard;

package/dist/components/message/footer/FilePreview.js

@@ -41,7 +41,7 @@ const getFileType = (file) => {
         return "video";
     return "image";
 };
-const RemoveButton = ({ file, onRemove }) => (_jsx("button", { type: "button", onClick: () => onRemove(file), className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-[#393E40]", "aria-label": "X\u00F3a", children: _jsx(Icon, { icon: "close-o", size: 12, className: "text-white" }) }));
+const RemoveButton = ({ file, onRemove }) => (_jsx("button", { type: "button", onClick: () => onRemove(file), className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-gray-900", "aria-label": "X\u00F3a", children: _jsx(Icon, { icon: "close-o", size: 12, className: "text-white" }) }));
 const MediaThumb = ({ file, onRemove, onVideoReady }) => {
     var _a;
     const [src, setSrc] = useState("");
@@ -70,7 +70,7 @@ const DocumentCard = ({ file, onRemove }) => {
     var _a, _b;
     const isLoading = file.status === "uploading";
     const percent = Math.round((_a = file.percent) !== null && _a !== void 0 ? _a : 0);
-    return (_jsxs("div", { className: "relative flex h-12 w-40 shrink-0 items-center gap-[7px] rounded-lg bg-[rgba(131,137,157,0.08)] py-[4px] pl-2 pr-5", children: [_jsx("div", { className: "flex h-full w-8 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-8 [&>svg]:w-8", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-[11px] font-normal leading-[160%] text-[#393E40]", children: shortenFileName(file.name) }), isLoading ? (_jsxs("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-[#747B7E]", children: [percent, "%"] })) : (_jsx("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-[#747B7E]", children: formatFileSize((_b = file.size) !== null && _b !== void 0 ? _b : 0) }))] }), _jsx(RemoveButton, { file: file, onRemove: onRemove })] }));
+    return (_jsxs("div", { className: "relative flex h-12 w-40 shrink-0 items-center gap-[7px] rounded-lg bg-chat-bubble-neutral/10 py-[4px] pl-2 pr-5", children: [_jsx("div", { className: "flex h-full w-8 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-8 [&>svg]:w-8", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-[11px] font-normal leading-[160%] text-gray-900", children: shortenFileName(file.name) }), isLoading ? (_jsxs("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-gray-400", children: [percent, "%"] })) : (_jsx("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-gray-400", children: formatFileSize((_b = file.size) !== null && _b !== void 0 ? _b : 0) }))] }), _jsx(RemoveButton, { file: file, onRemove: onRemove })] }));
 };
 export function FilePreviewList({ files, onRemove, onVideoReady, }) {
     if (files.length === 0)

package/dist/components/message/footer/LinkInputPreview.js

@@ -11,6 +11,6 @@ const LinkInputPreview = ({ url, onRemove }) => {
     const handleOpen = () => {
         openLink(url, t);
     };
-    return (_jsxs("div", { "data-testid": "link-input-preview", className: "flex w-full shrink-0 items-center gap-2 overflow-hidden bg-[#EAF5FF] pr-2", children: [_jsxs("button", { type: "button", onClick: handleOpen, className: "flex min-w-0 flex-1 items-center gap-2 py-0 pl-0 text-left", children: [_jsx("div", { className: "flex h-[51px] w-[51px] shrink-0 items-center justify-center overflow-hidden bg-[#EAF5FF]", children: isLoading ? (_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-[#1B3FE4] border-t-transparent" })) : (data === null || data === void 0 ? void 0 : data.image) ? (_jsx("img", { src: data.image, alt: "", className: "h-full w-full object-cover" })) : (_jsx(Icon, { icon: "link-alt-b", size: 24, className: "text-[#1B3FE4]" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [isLoading ? (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-[#393E40]", children: t("link_preview.loading") })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-[#393E40]", children: (data === null || data === void 0 ? void 0 : data.title) || getHostLabel(url) }), ((data === null || data === void 0 ? void 0 : data.description) || !(data === null || data === void 0 ? void 0 : data.title)) && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-[#747B7E]", children: (data === null || data === void 0 ? void 0 : data.description) || getHostLabel(url) }))] })), isError && !isLoading && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-[#747B7E]", children: getHostLabel(url) }))] })] }), _jsx("button", { type: "button", onClick: onRemove, "data-testid": "link-input-preview-remove", className: "flex h-4 w-4 shrink-0 items-center justify-center", "aria-label": t("link_preview.remove"), children: _jsx(Icon, { icon: "close-b", size: 16, className: "text-[#393E40]" }) })] }));
+    return (_jsxs("div", { "data-testid": "link-input-preview", className: "flex w-full shrink-0 items-center gap-2 overflow-hidden bg-blue-25 pr-2", children: [_jsxs("button", { type: "button", onClick: handleOpen, className: "flex min-w-0 flex-1 items-center gap-2 py-0 pl-0 text-left", children: [_jsx("div", { className: "flex h-[51px] w-[51px] shrink-0 items-center justify-center overflow-hidden bg-blue-25", children: isLoading ? (_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-primary-400 border-t-transparent" })) : (data === null || data === void 0 ? void 0 : data.image) ? (_jsx("img", { src: data.image, alt: "", className: "h-full w-full object-cover" })) : (_jsx(Icon, { icon: "link-alt-b", size: 24, className: "text-primary-400" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [isLoading ? (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-gray-900", children: t("link_preview.loading") })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-gray-900", children: (data === null || data === void 0 ? void 0 : data.title) || getHostLabel(url) }), ((data === null || data === void 0 ? void 0 : data.description) || !(data === null || data === void 0 ? void 0 : data.title)) && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-gray-400", children: (data === null || data === void 0 ? void 0 : data.description) || getHostLabel(url) }))] })), isError && !isLoading && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-gray-400", children: getHostLabel(url) }))] })] }), _jsx("button", { type: "button", onClick: onRemove, "data-testid": "link-input-preview-remove", className: "flex h-4 w-4 shrink-0 items-center justify-center", "aria-label": t("link_preview.remove"), children: _jsx(Icon, { icon: "close-b", size: 16, className: "text-gray-900" }) })] }));
 };
 export default LinkInputPreview;

package/dist/components/message/item/FileMessage.js

@@ -31,6 +31,6 @@ const FileMessageItem = (props) => {
         link.click();
         link.remove();
     };
-    return (_jsx(Spin, { spinning: isSending, children: _jsxs("div", { className: "flex h-[51px] w-[292px] items-center gap-3 rounded-xl border border-[rgba(168,173,175,0.2)] bg-white px-3 py-1", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-6 [&>svg]:w-6", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 w-[168px] flex-col justify-center", children: [_jsx("span", { className: "truncate text-[14px] font-medium leading-[160%] text-[#393E40]", children: shortenFileName(fileName) }), _jsx("span", { className: "truncate text-[13px] leading-[160%] text-[#5C6366]", children: renderFileSize(fileSize) })] }), _jsxs("div", { className: "flex w-[52px] shrink-0 items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: handleView, disabled: !hasUrl, "aria-label": "Xem file", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "eye-o", size: 20, className: "text-[#393E40]" }) }), _jsx("button", { type: "button", onClick: handleDownload, disabled: !hasUrl, "aria-label": "T\u1EA3i xu\u1ED1ng", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "download-o", size: 20, className: "text-[#393E40]" }) })] })] }) }));
+    return (_jsx(Spin, { spinning: isSending, children: _jsxs("div", { className: "flex h-[51px] w-[292px] items-center gap-3 rounded-xl border border-gray-200/20 bg-white px-3 py-1", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-6 [&>svg]:w-6", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 w-[168px] flex-col justify-center", children: [_jsx("span", { className: "truncate text-[14px] font-medium leading-[160%] text-gray-900", children: shortenFileName(fileName) }), _jsx("span", { className: "truncate text-[13px] leading-[160%] text-gray-600", children: renderFileSize(fileSize) })] }), _jsxs("div", { className: "flex w-[52px] shrink-0 items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: handleView, disabled: !hasUrl, "aria-label": "Xem file", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "eye-o", size: 20, className: "text-gray-900" }) }), _jsx("button", { type: "button", onClick: handleDownload, disabled: !hasUrl, "aria-label": "T\u1EA3i xu\u1ED1ng", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "download-o", size: 20, className: "text-gray-900" }) })] })] }) }));
 };
 export default FileMessageItem;

package/dist/components/message/item/ImageMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/ImageMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAKrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CA+BrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ImageMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/ImageMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAMrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAyCrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/message/item/ImageMessage.js

@@ -3,17 +3,23 @@ import { MessageStatus } from "@openim/wasm-client-sdk";
 import { Image, Spin } from "antd";
 import { useTranslation } from "react-i18next";
 import { renderImagePreviewToolbar } from "./imagePreviewToolbar";
+import { getImageMessageMinStyle } from "./mediaSize";
 const ImageMessageItem = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { message } = props;
     const { t } = useTranslation();
     const pictureElem = message.pictureElem;
     const sourceUrl = ((_a = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.sourcePicture) === null || _a === void 0 ? void 0 : _a.url) || ((_b = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.snapshotPicture) === null || _b === void 0 ? void 0 : _b.url) || "";
     const bigUrl = ((_c = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.bigPicture) === null || _c === void 0 ? void 0 : _c.url) || sourceUrl;
+    const minStyle = getImageMessageMinStyle({
+        imageWidth: (_e = (_d = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.sourcePicture) === null || _d === void 0 ? void 0 : _d.width) !== null && _e !== void 0 ? _e : (_f = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.snapshotPicture) === null || _f === void 0 ? void 0 : _f.width,
+        imageHeight: (_h = (_g = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.sourcePicture) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : (_j = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.snapshotPicture) === null || _j === void 0 ? void 0 : _j.height,
+        snapshotHeight: (_k = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.snapshotPicture) === null || _k === void 0 ? void 0 : _k.height,
+    });
     const isSending = message.status === MessageStatus.Sending;
-    return (_jsx("div", { className: "-mx-1", children: _jsx(Spin, { spinning: isSending, children: _jsx(Image, { src: sourceUrl, width: 205, height: 205, className: "cursor-pointer rounded-xl object-cover", preview: {
+    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx(Image, { src: sourceUrl, width: minStyle.width, className: "cursor-pointer rounded-xl object-contain", preview: {
                     src: bigUrl,
                     toolbarRender: (originalNode, info) => { var _a; return renderImagePreviewToolbar(originalNode, (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url, t); },
-                }, placeholder: _jsx("div", { className: "flex h-[205px] w-[205px] items-center justify-center rounded-xl bg-black/10", children: _jsx(Spin, {}) }) }) }) }));
+                }, placeholder: _jsx("div", { className: "flex items-center justify-center rounded-xl bg-black/10", style: minStyle, children: _jsx(Spin, {}) }) }) }) }));
 };
 export default ImageMessageItem;

package/dist/components/message/item/LinkCard.js

@@ -12,6 +12,6 @@ const LinkCard = ({ metadata }) => {
     const handleOpen = () => {
         openLink(url, t);
     };
-    return (_jsxs("button", { type: "button", onClick: handleOpen, "data-testid": "link-message-card", className: "flex w-full max-w-[292px] flex-col overflow-hidden rounded-[12px] border border-[rgba(57,62,64,0.1)] bg-white text-left", children: [image && (_jsx("div", { className: "aspect-[16/9] w-full overflow-hidden", children: _jsx("img", { src: image, alt: "", className: "h-full w-full object-cover" }) })), _jsxs("div", { className: "flex flex-col px-3 py-2", children: [title && (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-[#393E40]", children: title })), _jsx("p", { className: "truncate text-[12px] font-medium leading-[1.6] tracking-[0.12px] text-[#1B3FE4]", children: getHostLabel(url) }), description && (_jsx("p", { className: "line-clamp-2 text-[12px] leading-[1.6] text-[#5C6366]", children: description }))] })] }));
+    return (_jsxs("button", { type: "button", onClick: handleOpen, "data-testid": "link-message-card", className: "flex w-full max-w-[292px] flex-col overflow-hidden rounded-[12px] border border-gray-900/10 bg-white text-left", children: [image && (_jsx("div", { className: "aspect-[16/9] w-full overflow-hidden", children: _jsx("img", { src: image, alt: "", className: "h-full w-full object-cover" }) })), _jsxs("div", { className: "flex flex-col px-3 py-2", children: [title && (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-gray-900", children: title })), _jsx("p", { className: "truncate text-[12px] font-medium leading-[1.6] tracking-[0.12px] text-primary-400", children: getHostLabel(url) }), description && (_jsx("p", { className: "line-clamp-2 text-[12px] leading-[1.6] text-gray-600", children: description }))] })] }));
 };
 export default LinkCard;

package/dist/components/message/item/LinkText.js

@@ -8,6 +8,6 @@ import { MESSAGE_TEXT_CLASS } from "./textStyle";
 const LinkText = ({ text }) => {
     const { t } = useTranslation("biz-inbox");
     const segments = parseTextWithLinks(text);
-    return (_jsx("span", { className: clsx("min-w-0 whitespace-pre-wrap text-left [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), children: segments.map((segment, index) => segment.type === "link" ? (_jsx("button", { type: "button", onClick: () => openLink(segment.url, t), className: "inline text-left font-medium text-[#1B3FE4] underline-offset-2 hover:underline", children: segment.value }, `${segment.url}-${index}`)) : (_jsx("span", { children: segment.value }, `text-${index}`))) }));
+    return (_jsx("span", { className: clsx("min-w-0 whitespace-pre-wrap text-left [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), children: segments.map((segment, index) => segment.type === "link" ? (_jsx("button", { type: "button", onClick: () => openLink(segment.url, t), className: "inline text-left font-medium text-primary-400 underline-offset-2 hover:underline", children: segment.value }, `${segment.url}-${index}`)) : (_jsx("span", { children: segment.value }, `text-${index}`))) }));
 };
 export default LinkText;

package/dist/components/message/item/MessageBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageBubble.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAmCD,QAAA,MAAM,aAAa,GAAI,2EAQpB,kBAAkB,4CAsCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageBubble.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AA4CD,QAAA,MAAM,aAAa,GAAI,2EAQpB,kBAAkB,4CAsCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/item/MessageBubble.js

@@ -3,17 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 const INCOMING_TAIL_PATH = "M1.3798 18H4V0C3.51762 4.5 3.34269 10.5 0.966518 14C-0.568384 16.2608 -0.159364 18 1.3798 18Z";
 const OUTGOING_TAIL_PATH = "M2.6202 18H0V0C0.482375 4.5 0.657308 10.5 3.03348 14C4.56838 16.2608 4.15936 18 2.6202 18Z";
-const MessageBubbleTail = ({ isMine, isInternal, }) => (_jsx("div", { className: "flex shrink-0 items-center justify-center", children: _jsx("div", { className: "flex-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "18", viewBox: "0 0 4 18", fill: "none", "aria-hidden": true, children: _jsx("path", { d: isMine ? OUTGOING_TAIL_PATH : INCOMING_TAIL_PATH, fill: isInternal ? "#FF9500" : isMine ? "#0051FF" : "#83899D", fillOpacity: "0.1" }) }) }) }));
+const MessageBubbleTail = ({ isMine, isInternal, }) => (_jsx("div", { className: clsx("flex shrink-0 items-center justify-center", isInternal
+        ? "text-chat-internal"
+        : isMine
+            ? "text-chat-bubble-mine"
+            : "text-chat-bubble-neutral"), children: _jsx("div", { className: "flex-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "18", viewBox: "0 0 4 18", fill: "none", "aria-hidden": true, children: _jsx("path", { d: isMine ? OUTGOING_TAIL_PATH : INCOMING_TAIL_PATH, fill: "currentColor", fillOpacity: "0.1" }) }) }) }));
 const MessageBubble = ({ isMine, content, senderName, showSenderName, showTip = true, isInternal = false, id, }) => {
     const bubbleClass = clsx("relative max-w-full p-2", showTip
         ? isMine
             ? "rounded-[20px] rounded-br-none"
             : "rounded-[20px] rounded-bl-none"
         : "rounded-[20px]", isInternal
-        ? "bg-[rgba(255,149,0,0.1)]"
+        ? "bg-chat-internal/10"
         : isMine
-            ? "bg-[rgba(0,81,255,0.1)]"
-            : "bg-[rgba(131,137,157,0.1)]");
-    return (_jsxs("div", { className: "relative flex items-end", "data-testid": "message-bubble", children: [!isMine && showTip && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal })), _jsx("div", { className: bubbleClass, id: id, children: _jsxs("div", { className: "flex flex-col gap-1 px-1", children: [showSenderName && senderName && (_jsx("span", { className: "text-[12px] font-medium leading-[160%] tracking-[0.12px] text-[#747B7E]", children: senderName })), _jsx("div", { className: "flex flex-col gap-2", children: content })] }) }), isMine && showTip && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal }))] }));
+            ? "bg-chat-bubble-mine/10"
+            : "bg-chat-bubble-neutral/10");
+    return (_jsxs("div", { className: "relative flex items-end", "data-testid": "message-bubble", children: [!isMine && showTip && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal })), _jsx("div", { className: bubbleClass, id: id, children: _jsxs("div", { className: "flex flex-col gap-1 px-1", children: [showSenderName && senderName && (_jsx("span", { className: "text-[12px] font-medium leading-[160%] tracking-[0.12px] text-gray-400", children: senderName })), _jsx("div", { className: "flex flex-col gap-2", children: content })] }) }), isMine && showTip && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal }))] }));
 };
 export default MessageBubble;

package/dist/components/message/item/VideoMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/VideoMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAGrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAmBrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VideoMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/VideoMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAIrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAyBrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/message/item/VideoMessage.js

@@ -1,12 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MessageStatus } from "@openim/wasm-client-sdk";
 import { Spin } from "antd";
+import { getVideoMessageMinStyle } from "./mediaSize";
 const VideoMessageItem = (props) => {
     const { message } = props;
     const videoElem = message.videoElem;
     const videoUrl = (videoElem === null || videoElem === void 0 ? void 0 : videoElem.videoUrl) || "";
     const posterUrl = (videoElem === null || videoElem === void 0 ? void 0 : videoElem.snapshotUrl) || "";
+    const minStyle = getVideoMessageMinStyle({
+        imageWidth: videoElem === null || videoElem === void 0 ? void 0 : videoElem.snapshotWidth,
+        imageHeight: videoElem === null || videoElem === void 0 ? void 0 : videoElem.snapshotHeight,
+        snapshotHeight: videoElem === null || videoElem === void 0 ? void 0 : videoElem.snapshotHeight,
+    });
     const isSending = message.status === MessageStatus.Sending;
-    return (_jsx("div", { className: "-mx-1", children: _jsx(Spin, { spinning: isSending, children: _jsx("video", { src: videoUrl, poster: posterUrl, controls: true, className: "h-[150px] w-[215px] rounded-xl object-cover" }) }) }));
+    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx("video", { src: videoUrl, poster: posterUrl, controls: true, className: "rounded-xl object-cover", style: { width: minStyle.width } }) }) }));
 };
 export default VideoMessageItem;

package/dist/components/message/item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AA+BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAeD,QAAA,MAAM,WAAW,GAAI,wIASlB,gBAAgB,mDAqQlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AA+BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAeD,QAAA,MAAM,WAAW,GAAI,wIASlB,gBAAgB,mDAkRlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/item/index.js

@@ -25,8 +25,9 @@ import RevokeMessageItem from "./RevokeMessage";
 import QuoteMessageItem from "./QuoteMessage";
 import SystemLogMessageItem from "./SystemLogMessage";
 import { isSystemLogMessageType } from "../../../utils/messageLog";
-const ICON_COLOR = "#3278f7";
-const MessageAvatar = ({ avatarUrl }) => avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-6 w-6 shrink-0 self-end rounded-full object-cover" })) : (_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center self-end rounded-full bg-[#0C5CFF]", children: _jsx(Icon, { icon: "droppii-o-1", size: 14, className: "text-white" }) }));
+import { BOT_BUTTONS_MESSAGE_TYPE } from "../../../constants/botFlow";
+import BotButtonMessage from "../../../components/biz-thread-detail/bot/BotButtonMessage";
+const MessageAvatar = ({ avatarUrl }) => avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-6 w-6 shrink-0 self-end rounded-full object-cover" })) : (_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center self-end rounded-full bg-chat-avatar", children: _jsx(Icon, { icon: "droppii-o-1", size: 14, className: "text-white" }) }));
 const MessageItem = ({ message, allMessages, isGroupChat = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }) => {
     var _a;
     const { t } = useTranslation();
@@ -53,6 +54,8 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, contextMenuOpe
                 return _jsx(SystemLogMessageItem, { message: item });
             case MessageType.RevokeMessage:
                 return _jsx(RevokeMessageItem, {});
+            case BOT_BUTTONS_MESSAGE_TYPE:
+                return _jsx(BotButtonMessage, {});
             default:
                 return _jsx(TextMessageItem, { message: item });
         }
@@ -70,6 +73,7 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, contextMenuOpe
     }, [userID, message]);
     const contextMenuItems = useMemo(() => {
         if ((message === null || message === void 0 ? void 0 : message.contentType) === MessageType.RevokeMessage ||
+            (message === null || message === void 0 ? void 0 : message.contentType) === BOT_BUTTONS_MESSAGE_TYPE ||
             isSystemLogMessageType(message === null || message === void 0 ? void 0 : message.contentType)) {
             return [];
         }
@@ -79,7 +83,7 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, contextMenuOpe
                     {
                         key: "TB01",
                         label: t("context_menu_reply"),
-                        icon: (_jsx(Icon, { icon: "arrow-reply-alt-o", size: 18, color: ICON_COLOR })),
+                        icon: (_jsx(Icon, { icon: "arrow-reply-alt-o", size: 18, className: "text-chat-focus" })),
                         onClick: () => onQuoteMessage === null || onQuoteMessage === void 0 ? void 0 : onQuoteMessage(message),
                     },
                 ]
@@ -89,7 +93,7 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, contextMenuOpe
                     {
                         key: "TB05",
                         label: t("context_menu_revoke"),
-                        icon: _jsx(Icon, { icon: "arrow-reload-o", size: 18, color: ICON_COLOR }),
+                        icon: (_jsx(Icon, { icon: "arrow-reload-o", size: 18, className: "text-chat-focus" })),
                         onClick: () => onRevokeMessage === null || onRevokeMessage === void 0 ? void 0 : onRevokeMessage((message === null || message === void 0 ? void 0 : message.clientMsgID) || ""),
                     },
                 ]

package/dist/components/message/item/mediaSize.d.ts

@@ -0,0 +1,16 @@
+export interface ImageMessageMinStyleOptions {
+    imageWidth?: number;
+    imageHeight?: number;
+    snapshotHeight?: number;
+}
+export declare const getImageMessageMinStyle: ({ imageWidth, imageHeight, snapshotHeight, }: ImageMessageMinStyleOptions) => {
+    minHeight: string;
+    minWidth: string;
+    width: number;
+};
+export declare const getVideoMessageMinStyle: ({ imageWidth, imageHeight, snapshotHeight, }: ImageMessageMinStyleOptions) => {
+    minHeight: string;
+    minWidth: string;
+    width: number;
+};
+//# sourceMappingURL=mediaSize.d.ts.map

package/dist/components/message/item/mediaSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaSize.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/mediaSize.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,2BAA2B;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,uBAAuB,GAAI,8CAIrC,2BAA2B;;;;CAoB7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,iDAtBjC,2BAA2B;;;;CAsBgC,CAAC"}

package/dist/components/message/item/mediaSize.js

@@ -0,0 +1,20 @@
+const IMAGE_MAX_WIDTH = 200;
+export const getImageMessageMinStyle = ({ imageWidth, imageHeight, snapshotHeight, }) => {
+    if (!imageWidth || !imageHeight || imageWidth <= 0 || imageHeight <= 0) {
+        return {
+            minHeight: "210px",
+            minWidth: "210px",
+            width: IMAGE_MAX_WIDTH,
+        };
+    }
+    const snapshotMaxHeight = snapshotHeight !== null && snapshotHeight !== void 0 ? snapshotHeight : imageHeight;
+    const minHeight = Math.min(IMAGE_MAX_WIDTH, imageWidth) * (imageHeight / imageWidth) + 2;
+    const adaptedHeight = Math.min(minHeight, snapshotMaxHeight) + 10;
+    const adaptedWidth = Math.min(imageWidth, IMAGE_MAX_WIDTH) + 10;
+    return {
+        minHeight: `${adaptedHeight}px`,
+        minWidth: `${adaptedWidth}px`,
+        width: Math.min(imageWidth, IMAGE_MAX_WIDTH),
+    };
+};
+export const getVideoMessageMinStyle = getImageMessageMinStyle;

package/dist/components/message/item/textStyle.d.ts

@@ -1,2 +1,2 @@
-export declare const MESSAGE_TEXT_CLASS = "text-[16px] leading-[160%] tracking-[0.16px] text-[#393E40]";
+export declare const MESSAGE_TEXT_CLASS = "text-[16px] leading-[160%] tracking-[0.16px] text-gray-900";
 //# sourceMappingURL=textStyle.d.ts.map

package/dist/components/message/item/textStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textStyle.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/textStyle.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,gEACgC,CAAC"}
+{"version":3,"file":"textStyle.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/textStyle.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,+DAC+B,CAAC"}

package/dist/components/message/item/textStyle.js

@@ -1 +1 @@
-export const MESSAGE_TEXT_CLASS = "text-[16px] leading-[160%] tracking-[0.16px] text-[#393E40]";
+export const MESSAGE_TEXT_CLASS = "text-[16px] leading-[160%] tracking-[0.16px] text-gray-900";