@droppii-org/chat-sdk 0.1.57 → 0.1.59

package/dist/components/conversation-detail/ConversationDetailHeader.js

@@ -4,12 +4,13 @@ import { useTranslation } from "react-i18next";
 import { Icon } from "../../components/icon";
 import ConversationPeerAvatar from "../../components/conversation-inbox/ConversationPeerAvatar";
 import ConversationInboxTitle from "../../components/conversation-inbox/ConversationInboxTitle";
-import { resolveConversationAvatarUrl, resolveConversationDisplayName, resolvePeerBadgeLabel, } from "../../utils/conversation";
+import { resolveConversationDisplayName, resolvePeerBadgeLabel, } from "../../utils/conversation";
+import { useConversationAvatarUrl } from "../../hooks/conversation/useConversationAvatarUrl";
 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 ConversationDetailHeader = ({ conversation, onBack, }) => {
     const { t } = useTranslation("conversation-inbox");
     const displayName = resolveConversationDisplayName(conversation, t);
-    const avatarUrl = resolveConversationAvatarUrl(conversation);
+    const avatarUrl = useConversationAvatarUrl(conversation);
     const peerType = conversation.peerType;
     const badgeLabel = resolvePeerBadgeLabel(peerType, t);
     const subtitle = t("thread_detail.profile_hint");

package/dist/components/conversation-detail/ConversationDetailInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,QAAA,MAAM,uBAAuB,GAAI,gDAI9B,4BAA4B,4CA2Y9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,QAAA,MAAM,uBAAuB,GAAI,gDAI9B,4BAA4B,4CA6Y9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-detail/ConversationDetailInput.js

@@ -16,6 +16,7 @@ import { useFetchUrlMetadata } from "../../hooks/common/useFetchUrlMetadata";
 import { processAndValidateDocuments, processAndValidateFiles, } from "../../utils/fileValidation";
 import { FilePreviewList } from "../../components/message/footer/FilePreview";
 import LinkInputPreview from "../../components/message/footer/LinkInputPreview";
+import { ReplyPreviewBar } from "../../components/message/reply/ReplyPreviewBar";
 import ConversationMoreOptionPanel from "./ConversationMoreOptionPanel";
 const MAX_LINES = 5;
 const CONTAINER_MIN_HEIGHT = 48;
@@ -251,7 +252,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, })
         event.preventDefault();
         void handleSend();
     };
-    return (_jsxs("div", { ref: containerRef, "data-testid": "conversation-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": "conversation-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
+    return (_jsxs("div", { ref: containerRef, "data-testid": "conversation-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 }), _jsx(ReplyPreviewBar, {}), 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": "conversation-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": "conversation-detail-message-input", className: "conversation-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": "conversation-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(ConversationMoreOptionPanel, { 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(); } }))] }));
 };

package/dist/components/conversation-detail/ConversationMessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAczE,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,uBAAuB,GAAI,gBAAgB,4BAA4B,4CA2F5E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAczE,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,uBAAuB,GAAI,gBAAgB,4BAA4B,4CAsH5E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-detail/ConversationMessageList.js

@@ -19,24 +19,38 @@ const ConversationMessageList = ({ bottomSlot }) => {
     const authUserID = useAuthStore((state) => state.userID);
     const conversation = useConversationStore((state) => state.conversationData);
     const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
+    const searchClientMsgID = useConversationStore((state) => state.searchClientMsgID);
+    const setSearchClientMsgID = useConversationStore((state) => state.setSearchClientMsgID);
     const conversationId = selectedConversationId || (conversation === null || conversation === void 0 ? void 0 : conversation.conversationID) || "";
     const isGroupChat = conversation ? resolveIsGroupChat(conversation) : false;
-    const messageController = useMessage(conversationId);
-    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottomIfAtBottom, } = useMessageListScroll(Object.assign({ conversationId, userId: (user === null || user === void 0 ? void 0 : user.userID) || authUserID }, messageController));
+    const messageController = useMessage(conversationId, searchClientMsgID);
+    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottomIfAtBottom, scrollToMessage, } = 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 [openToolboxMessageId, setOpenToolboxMessageId] = useState(null);
     const closeToolbox = useCallback(() => setOpenToolboxMessageId(null), []);
+    const onPressQuoteMessage = useCallback((clientMsgID) => {
+        const hasMessage = loadState.messageList.some((msg) => msg.clientMsgID === clientMsgID);
+        if (hasMessage) {
+            scrollToMessage(clientMsgID);
+        }
+        else {
+            setSearchClientMsgID(clientMsgID);
+        }
+    }, [scrollToMessage, loadState.messageList, setSearchClientMsgID]);
     useEffect(() => {
         emitter.on("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
+        emitter.on("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
         return () => {
             emitter.off("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
+            emitter.off("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
         };
-    }, [scrollToBottomIfAtBottom]);
+    }, [scrollToBottomIfAtBottom, scrollToMessage]);
     useEventListener("scroll", closeToolbox, {
         target: scrollRef,
         enable: !!openToolboxMessageId,
     });
-    return (_jsx("div", { "data-testid": "conversation-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, {}) })) : (_jsxs(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableConversationMessagesDiv", 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: [bottomSlot, loadState.messageList.map((message, index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, forceHideTip: index === 0 && !!bottomSlot, contextMenuOpen: openToolboxMessageId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenToolboxMessageId(open ? message.clientMsgID : null), onQuoteMessage: closeToolbox, onRevokeMessage: closeToolbox, enableLongPress: true }, message.clientMsgID)))] })) }));
+    return (_jsx("div", { "data-testid": "conversation-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, {}) })) : (_jsxs(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableConversationMessagesDiv", 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: [bottomSlot, loadState.messageList.map((message, index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, forceHideTip: index === 0 && !!bottomSlot, contextMenuOpen: openToolboxMessageId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenToolboxMessageId(open ? message.clientMsgID : null), onQuoteMessage: setQuotedMessage, onRevokeMessage: closeToolbox, onPressQuoteMessage: onPressQuoteMessage, enableLongPress: true }, message.clientMsgID)))] })) }));
 };
 export default ConversationMessageList;

package/dist/components/conversation-detail/ConversationMoreOptionItem.js

@@ -12,7 +12,7 @@ const ConversationMoreOptionItem = ({ option, onSelect }) => {
             return;
         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
+    return (_jsxs("button", { type: "button", onClick: handleClick, disabled: !option.enabled, "aria-label": label, "data-testid": `more-option-${option.labelKey}`, className: clsx("flex flex-col items-center gap-1 rounded-xl px-1 transition-colors", option.enabled
             ? "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 })] }));
 };

package/dist/components/conversation-detail/bot/BotInactiveNotice.d.ts

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

package/dist/components/conversation-detail/bot/BotInactiveNotice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotInactiveNotice.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/bot/BotInactiveNotice.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,iBAAiB,+CActB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/conversation-detail/bot/BotInactiveNotice.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+const ICON_SIZE = 16;
+const BotInactiveNotice = () => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsxs("div", { "data-testid": "conversation-bot-inactive-notice", className: "flex w-full items-center justify-center gap-1 bg-white px-4 py-1", children: [_jsx(Icon, { icon: "info-circle-o", size: ICON_SIZE, className: "shrink-0 text-gray-900" }), _jsx("span", { className: "text-[12px] font-normal leading-[1.6] text-gray-900", children: t("thread_detail.bot.inactive_notice") })] }));
+};
+export default BotInactiveNotice;

package/dist/components/conversation-detail/bot/index.d.ts

@@ -4,4 +4,5 @@ export { default as BotButtonMessage } from "./BotButtonMessage";
 export type { BotButtonMessageProps } from "./BotButtonMessage";
 export { default as BotSuggest } from "./BotSuggest";
 export type { BotSuggestProps } from "./BotSuggest";
+export { default as BotInactiveNotice } from "./BotInactiveNotice";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-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;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-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;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/conversation-detail/bot/index.js

@@ -1,3 +1,4 @@
 export { default as BotStartButton } from "./BotStartButton";
 export { default as BotButtonMessage } from "./BotButtonMessage";
 export { default as BotSuggest } from "./BotSuggest";
+export { default as BotInactiveNotice } from "./BotInactiveNotice";

package/dist/components/conversation-inbox/ConversationInboxItem.js

@@ -4,7 +4,8 @@ import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 import useAuthStore from "../../store/auth";
 import { formatTimestamp, parseLatestMessage } from "../../utils/common";
-import { isBotPeer, resolveConversationAvatarUrl, resolvePeerBadgeLabel, resolveConversationDisplayName, } from "../../utils/conversation";
+import { isBotPeer, resolvePeerBadgeLabel, resolveConversationDisplayName, } from "../../utils/conversation";
+import { useConversationAvatarUrl } from "../../hooks/conversation/useConversationAvatarUrl";
 import ThreadCard from "../../components/conversation/ThreadCard";
 import ConversationPeerAvatar from "./ConversationPeerAvatar";
 import ConversationInboxTitle from "./ConversationInboxTitle";
@@ -20,7 +21,7 @@ const ConversationInboxItem = ({ item, onClick }) => {
     const { t: tCommon } = useTranslation("common");
     const currentUserId = useAuthStore((state) => state.userID);
     const displayName = resolveConversationDisplayName(item, t);
-    const avatarUrl = resolveConversationAvatarUrl(item);
+    const avatarUrl = useConversationAvatarUrl(item);
     const badgeLabel = resolvePeerBadgeLabel(item.peerType, t);
     const latestMessagePreview = parseLatestMessage(item.latestMsg, currentUserId, tCommon, isBotPeer(item));
     const latestMessageTime = formatLatestMessageTime(item.latestMsgSendTime || null);

package/dist/components/message/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AA0BA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAgQ3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAyBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAgO3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -15,7 +15,6 @@ import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { useBoolean } from "ahooks";
 import { useMessageListScroll } from "../../hooks/message/useMessageListScroll";
-import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../constants";
 import { useChatContext } from "../../context/ChatContext";
 import { useRevokeMessage } from "../../hooks/message/useRevokeMessage";
 import { useConversationSessionState } from "../../hooks/session/useConversationSessionState";
@@ -49,7 +48,7 @@ const MessageList = (props) => {
         customerUserID,
     });
     const { loadState, moreOldLoading, moreNewLoading } = messageController;
-    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottom } = useMessageListScroll(Object.assign({ conversationId, userId: user === null || user === void 0 ? void 0 : user.userID }, messageController));
+    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottom, scrollToMessage, } = useMessageListScroll(Object.assign({ conversationId, userId: user === null || user === void 0 ? void 0 : user.userID }, messageController));
     const handleOpenRevoke = useCallback((clientMsgID) => {
         setSelectedItem(clientMsgID);
         openConfirmRevoke();
@@ -67,27 +66,6 @@ const MessageList = (props) => {
         revokeMessage,
         handleCloseRevoke,
     ]);
-    const scrollToMessage = (clientMsgID) => {
-        setTimeout(() => {
-            const targetElement = document.getElementById(`${MSG_ITEM_PREFIX}${clientMsgID}`);
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.scrollIntoView({
-                behavior: "auto",
-                block: "center",
-            });
-            setTimeout(() => {
-                const targetContentElement = document.getElementById(`${MSG_ITEM_CONTENT_PREFIX}${clientMsgID}`);
-                targetContentElement === null || targetContentElement === void 0 ? void 0 : targetContentElement.classList.add("zoom-in-out-element", "border-blue-500", "border");
-                // Khi animation kết thúc thì remove element
-                const onEnd = () => {
-                    targetContentElement === null || targetContentElement === void 0 ? void 0 : targetContentElement.classList.remove("zoom-in-out-element", "border-blue-500", "border");
-                    targetContentElement === null || targetContentElement === void 0 ? void 0 : targetContentElement.removeEventListener("animationend", onEnd);
-                };
-                targetContentElement === null || targetContentElement === void 0 ? void 0 : targetContentElement.addEventListener("animationend", onEnd, {
-                    once: true,
-                });
-            }, 500);
-        }, 200);
-    };
     const onPressQuoteMessage = useCallback((clientMsgID) => {
         const hasMessage = loadState.messageList.some((msg) => msg.clientMsgID === clientMsgID);
         if (hasMessage) {

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

@@ -18,7 +18,7 @@ import { extractLinkUrls } from "../../../utils/link";
 import { useFetchUrlMetadata } from "../../../hooks/common/useFetchUrlMetadata";
 import { useTranslation } from "react-i18next";
 import PasteAndDropPlugin from "./PasteAndDropPlugin";
-import { QuotedMessageFooter } from "./QuotedMessage";
+import { ReplyPreviewBar } from "../../../components/message/reply/ReplyPreviewBar";
 import CannedResponse from "../../../components/canned-response";
 import { CannedResponseTriggerPlugin } from "./CannedResponsePlugin";
 import { useBoolean } from "ahooks";
@@ -214,6 +214,6 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
             setMaxActiveCannedIndex,
         }, children: [_jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Popover, { open: isOpenCanned, content: _jsx(CannedResponse, { onClose: closeCanned, openCreateCannedModal: onOpenCreateCannedModal, cannedQuery: cannedQuery }), placement: "topLeft", trigger: "click", arrow: false, classNames: {
                             body: "mx-1 !p-0",
-                        }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(QuotedMessageFooter, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setIsLinkPreviewDismissed(true) })), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(ComposerTextSyncPlugin, { onChange: setComposerText }), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }), _jsx(SessionClosedModal, { open: isSessionClosedModalOpen, loading: isSessionActionLoading, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession, onClose: handleCloseSessionModal })] }));
+                        }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setIsLinkPreviewDismissed(true) })), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(ComposerTextSyncPlugin, { onChange: setComposerText }), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }), _jsx(SessionClosedModal, { open: isSessionClosedModalOpen, loading: isSessionActionLoading, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession, onClose: handleCloseSessionModal })] }));
 };
 export default MessageFooterProvider;

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

@@ -1,9 +1,8 @@
 import { MessageItem } from "@openim/wasm-client-sdk";
 interface QuoteMessageItemProps {
     message: MessageItem;
-    isMine: boolean;
     onPressQuoteMessage?: (clientMsgID: string) => void;
 }
-declare const QuoteMessageItem: ({ message, isMine, onPressQuoteMessage, }: QuoteMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const QuoteMessageItem: ({ message, onPressQuoteMessage, }: QuoteMessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default QuoteMessageItem;
 //# sourceMappingURL=QuoteMessage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuoteMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/QuoteMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAUnE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAKD,QAAA,MAAM,gBAAgB,GAAI,2CAIvB,qBAAqB,4CA0GvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"QuoteMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/QuoteMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAOtD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAGvB,qBAAqB,mDAkDvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -1,15 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { generateContentBasedOnMessageType } from "../../../utils/common";
-import { Icon } from "../../../components/icon";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-import MediaPreviewIcon from "../../../components/message/MediaPreviewIcon";
-import useAuthStore from "../../../store/auth";
 import { useCallback, useMemo } from "react";
+import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
-const capitalize = (text) => text ? text.charAt(0).toUpperCase() + text.slice(1) : "";
-const QuoteMessageItem = ({ message, isMine, onPressQuoteMessage, }) => {
-    var _a, _b, _c, _d, _e, _f;
+import ReplyQuoteContent from "../../../components/message/reply/ReplyQuoteContent";
+const QuoteMessageItem = ({ message, onPressQuoteMessage, }) => {
+    var _a;
     const userID = useAuthStore((state) => state.userID);
     const isCrm = useAuthStore((state) => state.isCrm);
     const conversationData = useConversationStore((state) => state.conversationData);
@@ -33,45 +29,13 @@ const QuoteMessageItem = ({ message, isMine, onPressQuoteMessage, }) => {
             return t("you");
         return name;
     }, [isCrm, isChatSupport, conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName, userID, t]);
-    const parseReplyText = useCallback(() => {
-        var _a;
-        const quoteMsg = (_a = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _a === void 0 ? void 0 : _a.quoteMessage;
-        if (!quoteMsg)
-            return "";
-        const senderID = message === null || message === void 0 ? void 0 : message.sendID;
-        const targetID = quoteMsg === null || quoteMsg === void 0 ? void 0 : quoteMsg.sendID;
-        const senderName = message === null || message === void 0 ? void 0 : message.senderNickname;
-        const targetName = quoteMsg === null || quoteMsg === void 0 ? void 0 : quoteMsg.senderNickname;
-        const isSelfReply = senderID === targetID;
-        const isFromMe = senderID === userID;
-        const isReplyToMe = targetID === userID;
-        const senderDisplay = getDisplayName({ name: senderName, id: senderID });
-        const targetDisplay = getDisplayName({ name: targetName, id: targetID });
-        if (isSelfReply) {
-            return isFromMe
-                ? capitalize(t("replied_yourself"))
-                : `${senderDisplay} ${t("replied_yourself")}`;
-        }
-        if (isFromMe) {
-            return `${capitalize(t("replied"))} ${targetDisplay}`;
-        }
-        if (isReplyToMe) {
-            return `${senderDisplay} ${t("replied_you")}`;
-        }
-        return `${senderDisplay} ${t("replied")} ${targetDisplay}`;
-    }, [
-        message,
-        userID,
-        isCrm,
-        isChatSupport,
-        conversationData,
-        t,
-        getDisplayName,
-    ]);
-    const replyText = useMemo(() => parseReplyText(), [parseReplyText]);
-    return (_jsxs("div", { className: clsx("mb-[-4px] flex flex-col gap-1 flex-1 w-full", isMine ? "items-end" : "items-start"), children: [_jsxs("div", { className: "flex flex-row flex-1 items-center gap-2", children: [_jsx(Icon, { icon: "arrow-reply-b", size: 16, className: "text-blue-500" }), _jsx("span", { className: "text-xs text-gray-500", children: replyText })] }), _jsxs("div", { className: "flex flex-row flex-1 max-w-full items-center gap-2 border border-gray-200 rounded-2xl min-w-0 px-3 py-2 bg-gray-100 cursor-pointer", onClick: () => {
-                    var _a, _b;
-                    return onPressQuoteMessage === null || onPressQuoteMessage === void 0 ? void 0 : onPressQuoteMessage(((_b = (_a = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _a === void 0 ? void 0 : _a.quoteMessage) === null || _b === void 0 ? void 0 : _b.clientMsgID) || "");
-                }, children: [_jsx(MediaPreviewIcon, { message: (_a = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _a === void 0 ? void 0 : _a.quoteMessage }), _jsx("span", { className: "text-sm text-gray-500 truncate", children: generateContentBasedOnMessageType((_c = (_b = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _b === void 0 ? void 0 : _b.quoteMessage) === null || _c === void 0 ? void 0 : _c.contentType, ((_f = (_e = (_d = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _d === void 0 ? void 0 : _d.quoteMessage) === null || _e === void 0 ? void 0 : _e.textElem) === null || _f === void 0 ? void 0 : _f.content) || "") })] })] }));
+    const quoteMessage = (_a = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _a === void 0 ? void 0 : _a.quoteMessage;
+    if (!quoteMessage)
+        return null;
+    const title = getDisplayName({
+        name: quoteMessage.senderNickname,
+        id: quoteMessage.sendID,
+    });
+    return (_jsx("div", { className: "flex cursor-pointer items-center overflow-hidden rounded-r-xl bg-white/70", onClick: () => onPressQuoteMessage === null || onPressQuoteMessage === void 0 ? void 0 : onPressQuoteMessage(quoteMessage.clientMsgID || ""), children: _jsx(ReplyQuoteContent, { message: quoteMessage, title: title }) }));
 };
 export default QuoteMessageItem;

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

@@ -1 +1 @@
-{"version":3,"file":"TextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/TextMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAQnE,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,mDAiDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/TextMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAQnE,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,mDAqDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -25,7 +25,7 @@ const TextMessageItem = (props) => {
     const richHtmlContent = ((_b = (_a = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.content) || "";
     if (richHtmlContent && htmlHasFormatting(richHtmlContent)) {
         const sanitizedContent = sanitizeHtml(richHtmlContent);
-        return (_jsx("div", { className: clsx("break-normal whitespace-pre-line flex-1", MESSAGE_TEXT_CLASS), style: { overflowWrap: "anywhere" }, dangerouslySetInnerHTML: { __html: sanitizedContent } }));
+        return (_jsx("div", { className: clsx("min-w-0 flex-1 whitespace-pre-line [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), dangerouslySetInnerHTML: { __html: sanitizedContent } }));
     }
     const text = ((_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) ||
         ((_d = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _d === void 0 ? void 0 : _d.text) ||
@@ -36,6 +36,6 @@ const TextMessageItem = (props) => {
     if (extractLinkUrls(text).length > 0) {
         return _jsx(LinkText, { text: text });
     }
-    return (_jsx("p", { className: clsx("whitespace-pre-wrap break-words", MESSAGE_TEXT_CLASS), children: text }));
+    return (_jsx("p", { className: clsx("min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), children: text }));
 };
 export default TextMessageItem;

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;AAuCjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,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;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAeD,QAAA,MAAM,WAAW,GAAI,uKAWlB,gBAAgB,mDA4RlB,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;AAuCjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,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;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAeD,QAAA,MAAM,WAAW,GAAI,uKAWlB,gBAAgB,mDAoSlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,5 +1,5 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import dayjs from "dayjs";
 import clsx from "clsx";
 import { Dropdown, message as toastMessage } from "antd";
@@ -160,13 +160,22 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
             timeBreakNode,
             _jsx(SystemLogMessageItem, { message: message })));
     }
-    const bubbleNode = (_jsx(MessageBubble, { isMine: isMine, isInternal: isInternalMessage, senderName: message === null || message === void 0 ? void 0 : message.senderNickname, showSenderName: showSenderName, showTip: showTip, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, content: (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs(_Fragment, { children: [_jsx(MergeImageMessageItem, { message: message }), (message === null || message === void 0 ? void 0 : message.textElem) && _jsx(TextMessageItem, { message: message })] })) : (renderMessageByType(message)) }));
+    const renderBubbleContent = () => {
+        if (message === null || message === void 0 ? void 0 : message.quoteElem) {
+            return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(QuoteMessageItem, { message: message, onPressQuoteMessage: onPressQuoteMessage }), renderMessageByType(message)] }));
+        }
+        if ((message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage) {
+            return (_jsxs(_Fragment, { children: [_jsx(MergeImageMessageItem, { message: message }), (message === null || message === void 0 ? void 0 : message.textElem) && _jsx(TextMessageItem, { message: message })] }));
+        }
+        return renderMessageByType(message);
+    };
+    const bubbleNode = (_jsx(MessageBubble, { isMine: isMine, isInternal: isInternalMessage, senderName: message === null || message === void 0 ? void 0 : message.senderNickname, showSenderName: showSenderName, showTip: showTip, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, content: renderBubbleContent() }));
     const wrappedBubble = hasContextMenu ? (_jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, overlayClassName: MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, children: _jsx("div", { ref: bubbleWrapperRef, className: "min-w-0", children: bubbleNode }) })) : (bubbleNode);
     return (_createElement("div", Object.assign({}, messageContainerProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID }),
         timeBreakNode,
         _jsxs("div", { className: clsx("flex min-w-0 items-end gap-1", isMine ? "justify-end pl-12 pr-3" : "justify-start pl-3 pr-12"), children: [!isMine &&
                     showPeerInfo &&
-                    (showAvatar ? (_jsx(MessageAvatar, { avatarUrl: message === null || message === void 0 ? void 0 : message.senderFaceUrl })) : (_jsx("div", { className: "h-6 w-6 shrink-0 self-end" }))), _jsxs("div", { className: clsx("flex min-w-0 max-w-[75%] flex-col gap-1", isMine ? "items-end" : "items-start"), children: [(message === null || message === void 0 ? void 0 : message.quoteElem) && (_jsx(QuoteMessageItem, { message: message, isMine: isMine, onPressQuoteMessage: onPressQuoteMessage })), _jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), wrappedBubble] }), isMine && message.status === MessageStatus.Failed && (_jsx("span", { className: "mt-1 text-xs text-red-500", children: isMediaResendable(message) ? (_jsx(Trans, { i18nKey: "message_send_failed", components: {
+                    (showAvatar ? (_jsx(MessageAvatar, { avatarUrl: message === null || message === void 0 ? void 0 : message.senderFaceUrl })) : (_jsx("div", { className: "h-6 w-6 shrink-0 self-end" }))), _jsxs("div", { className: clsx("flex min-w-0 max-w-[75%] flex-col gap-1", isMine ? "items-end" : "items-start"), children: [_jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), wrappedBubble] }), isMine && message.status === MessageStatus.Failed && (_jsx("span", { className: "mt-1 text-xs text-red-500", children: isMediaResendable(message) ? (_jsx(Trans, { i18nKey: "message_send_failed", components: {
                                     bold: (_jsx("strong", { className: "cursor-pointer", onClick: () => resendMessage(message) })),
                                 } })) : (t("message_send_failed_no_retry")) }))] })] })));
 };

package/dist/components/message/reply/ReplyPreviewBar.d.ts

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

package/dist/components/message/reply/ReplyPreviewBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplyPreviewBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyPreviewBar.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,sDAuC3B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/message/reply/ReplyPreviewBar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+import useAuthStore from "../../../store/auth";
+import useConversationStore from "../../../store/conversation";
+import { ReplyQuoteContent } from "./ReplyQuoteContent";
+export const ReplyPreviewBar = () => {
+    const { t } = useTranslation();
+    const quotedMessage = useConversationStore((state) => state.quotedMessage);
+    const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
+    const userID = useAuthStore((state) => state.userID);
+    const handleClearQuotedMessage = () => {
+        setQuotedMessage(null);
+    };
+    if (!quotedMessage)
+        return null;
+    const isMe = quotedMessage.sendID === userID;
+    const senderName = isMe
+        ? t("your_self")
+        : quotedMessage.senderNickname || "";
+    return (_jsxs("div", { "data-testid": "reply-preview-bar", className: "flex h-[59px] w-full shrink-0 items-center bg-gray-200/10 px-2 py-1", children: [_jsx(ReplyQuoteContent, { message: quotedMessage, title: t("reply_to", { name: senderName }) }), _jsx("button", { type: "button", onClick: handleClearQuotedMessage, "aria-label": t("cancel"), "data-testid": "reply-preview-bar-close", className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(Icon, { icon: "close-o", size: 16, className: "text-gray-600" }) })] }));
+};
+export default ReplyPreviewBar;

package/dist/components/message/reply/ReplyPreviewMedia.d.ts

@@ -0,0 +1,7 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface ReplyPreviewMediaProps {
+    message: MessageItem;
+}
+declare const ReplyPreviewMedia: ({ message }: ReplyPreviewMediaProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ReplyPreviewMedia;
+//# sourceMappingURL=ReplyPreviewMedia.d.ts.map

package/dist/components/message/reply/ReplyPreviewMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplyPreviewMedia.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyPreviewMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKnE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,WAAW,CAAC;CACtB;AAYD,QAAA,MAAM,iBAAiB,GAAI,aAAa,sBAAsB,mDAoD7D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/message/reply/ReplyPreviewMedia.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { documentIcon } from "../../../assets/svg";
+import { Icon } from "../../../components/icon";
+const parseUrlMetadataImage = (ex) => {
+    var _a;
+    if (!ex)
+        return undefined;
+    try {
+        const extendMessageInfo = JSON.parse(ex);
+        return (_a = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.urlMetadata) === null || _a === void 0 ? void 0 : _a.image;
+    }
+    catch (_b) {
+        return undefined;
+    }
+};
+const ReplyPreviewMedia = ({ message }) => {
+    var _a, _b, _c, _d, _e;
+    if (message.contentType === MessageType.FileMessage) {
+        return (_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-6 [&>svg]:w-6", children: documentIcon }));
+    }
+    if (message.contentType === MessageType.PictureMessage) {
+        const imageUrl = ((_b = (_a = message.pictureElem) === null || _a === void 0 ? void 0 : _a.sourcePicture) === null || _b === void 0 ? void 0 : _b.url) ||
+            ((_d = (_c = message.pictureElem) === null || _c === void 0 ? void 0 : _c.snapshotPicture) === null || _d === void 0 ? void 0 : _d.url);
+        if (!imageUrl)
+            return null;
+        return (_jsx("img", { src: imageUrl, alt: "", className: "h-[42px] w-[42px] shrink-0 rounded-lg object-cover" }));
+    }
+    if (message.contentType === MessageType.VideoMessage) {
+        const posterUrl = (_e = message.videoElem) === null || _e === void 0 ? void 0 : _e.snapshotUrl;
+        return (_jsxs("div", { className: "relative h-[42px] w-[42px] shrink-0 overflow-hidden rounded-lg bg-gray-900", children: [posterUrl && (_jsx("img", { src: posterUrl, alt: "", className: "h-full w-full object-cover" })), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-black/60", children: _jsx(Icon, { icon: "play-o", size: 12, className: "text-white" }) }) })] }));
+    }
+    if (message.contentType === MessageType.UrlTextMessage) {
+        const imageUrl = parseUrlMetadataImage(message.ex);
+        if (!imageUrl)
+            return null;
+        return (_jsx("img", { src: imageUrl, alt: "", className: "h-[42px] w-[42px] shrink-0 rounded-lg object-cover" }));
+    }
+    return null;
+};
+export default ReplyPreviewMedia;

package/dist/components/message/reply/ReplyQuoteContent.d.ts

@@ -0,0 +1,9 @@
+import { MessageItem, MessageType } from "@openim/wasm-client-sdk";
+export declare const hasReplyMediaPreview: (contentType: MessageType) => boolean;
+interface ReplyQuoteContentProps {
+    message: MessageItem;
+    title?: string;
+}
+export declare const ReplyQuoteContent: ({ message, title, }: ReplyQuoteContentProps) => import("react/jsx-runtime").JSX.Element;
+export default ReplyQuoteContent;
+//# sourceMappingURL=ReplyQuoteContent.d.ts.map

package/dist/components/message/reply/ReplyQuoteContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplyQuoteContent.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyQuoteContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AASnE,eAAO,MAAM,oBAAoB,GAAI,aAAa,WAAW,YACb,CAAC;AAEjD,UAAU,sBAAsB;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,GAAI,qBAG/B,sBAAsB,4CAsBxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/message/reply/ReplyQuoteContent.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { generateContentBasedOnMessageType } from "../../../utils/common";
+import ReplyPreviewMedia from "./ReplyPreviewMedia";
+const TEXT_LIKE_MESSAGE_TYPES = [
+    MessageType.TextMessage,
+    MessageType.QuoteMessage,
+];
+export const hasReplyMediaPreview = (contentType) => !TEXT_LIKE_MESSAGE_TYPES.includes(contentType);
+export const ReplyQuoteContent = ({ message, title = "", }) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const hasMedia = hasReplyMediaPreview(message.contentType);
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-0.5 pr-2 self-stretch", children: [_jsx("div", { className: "w-[3px] shrink-0 self-stretch rounded bg-gray-cool-200" }), hasMedia && _jsx(ReplyPreviewMedia, { message: message }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center py-1 pl-2", children: [_jsx("p", { className: "truncate text-[14px] font-medium leading-[160%] text-gray-900", children: title }), _jsx("p", { className: "truncate text-[13px] leading-[160%] text-gray-400", children: generateContentBasedOnMessageType(message.contentType, ((_a = message.textElem) === null || _a === void 0 ? void 0 : _a.content) || ((_b = message.quoteElem) === null || _b === void 0 ? void 0 : _b.text), t) })] })] }));
+};
+export default ReplyQuoteContent;

package/dist/hooks/conversation/useBotConversationDetail.js

@@ -5,9 +5,9 @@ import { ENDPOINTS } from "../../services/routes";
 import { QUERY_KEYS } from "../../services/query";
 export const useBotConversationDetail = (conversationId, enabled) => {
     return useQuery({
-        queryKey: [QUERY_KEYS.GET_BIZ_CONVERSATION_DETAIL, conversationId],
+        queryKey: [QUERY_KEYS.GET_CONVERSATION_DETAIL, conversationId],
         queryFn: async () => {
-            const res = await apiInstance.get(ENDPOINTS.chatService.getBizConversationDetail(conversationId));
+            const res = await apiInstance.get(ENDPOINTS.chatService.getConversationDetail(conversationId));
             return res.data.data;
         },
         enabled: enabled && !!conversationId,

package/dist/hooks/conversation/useBotDetail.d.ts

@@ -0,0 +1,3 @@
+import type { BotDetail } from "../../types/conversation";
+export declare const useBotDetail: (botId: string, enabled: boolean) => import("@tanstack/react-query").UseQueryResult<BotDetail, Error>;
+//# sourceMappingURL=useBotDetail.d.ts.map

package/dist/hooks/conversation/useBotDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBotDetail.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useBotDetail.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,SAAS,OAAO,qEAc3D,CAAC"}

package/dist/hooks/conversation/useBotDetail.js

@@ -0,0 +1,18 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { apiInstance } from "../../services/api";
+import { ENDPOINTS } from "../../services/routes";
+import { QUERY_KEYS } from "../../services/query";
+export const useBotDetail = (botId, enabled) => {
+    return useQuery({
+        queryKey: [QUERY_KEYS.GET_BOT_DETAIL, botId],
+        queryFn: async () => {
+            const res = await apiInstance.get(ENDPOINTS.chatService.getBotDetail(botId));
+            return res.data.data;
+        },
+        enabled: enabled && !!botId,
+        staleTime: 0,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+    });
+};

package/dist/hooks/conversation/useBotFlow.d.ts

@@ -7,6 +7,7 @@ interface UseBotFlowParams {
 export declare const useBotFlow: ({ conversationId, isBotThread, }: UseBotFlowParams) => {
     status: BotFlowStatus;
     flowIsEnd: boolean;
+    isBotInactive: boolean;
     isProcessing: boolean;
     shouldShowButtons: boolean;
     currentButtonsBlock: BotInputButtonsBlock | null;

package/dist/hooks/conversation/useBotFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBotFlow.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useBotFlow.ts"],"names":[],"mappings":"AAKA,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAU9B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;AAEtD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAsBD,eAAO,MAAM,UAAU,GAAI,kCAGxB,gBAAgB;;;;;;;6BA0GqB,MAAM;;CAiD7C,CAAC"}
+{"version":3,"file":"useBotFlow.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useBotFlow.ts"],"names":[],"mappings":"AAKA,OAAO,EAKL,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAa9B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;AAEtD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAsBD,eAAO,MAAM,UAAU,GAAI,kCAGxB,gBAAgB;;;;;;;;6BAmHqB,MAAM;;CAkD7C,CAAC"}