@droppii-org/chat-sdk 0.1.56 → 0.1.58

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,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAalD,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,uBAAuB,GAAI,gBAAgB,4BAA4B,4CA0E5E,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

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Empty, Spin } from "antd";
+import { useEventListener } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { useChatContext } from "../../context/ChatContext";
 import MessageInfiniteScroll from "../../components/message/MessageInfiniteScroll";
@@ -18,18 +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]);
-    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 }, message.clientMsgID)))] })) }));
+    }, [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: setQuotedMessage, onRevokeMessage: closeToolbox, onPressQuoteMessage: onPressQuoteMessage, enableLongPress: true }, message.clientMsgID)))] })) }));
 };
 export default ConversationMessageList;

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/index.d.ts

@@ -9,7 +9,8 @@ interface MessageItemProps {
     onRevokeMessage?: (clientMsgID: string) => void;
     onQuoteMessage?: (message: MessageItemType) => void;
     onPressQuoteMessage?: (clientMsgID: string) => void;
+    enableLongPress?: boolean;
 }
-declare const MessageItem: ({ message, allMessages, isGroupChat, forceHideTip, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageItem: ({ message, allMessages, isGroupChat, forceHideTip, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, enableLongPress, }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default MessageItem;
 //# sourceMappingURL=index.d.ts.map

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;AA6BjC,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;CACrD;AAeD,QAAA,MAAM,WAAW,GAAI,sJAUlB,gBAAgB,mDA+QlB,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,mDA4RlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,8 +1,8 @@
 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 } from "antd";
+import { Dropdown, message as toastMessage } from "antd";
 import { MessageStatus, MessageType, } from "@openim/wasm-client-sdk";
 import TextMessageItem from "./TextMessage";
 import ImageMessageItem from "./ImageMessage";
@@ -15,7 +15,8 @@ import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../../constants";
 import { formatTimestamp } from "../../../utils/common";
 import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
+import { useLongPress } from "ahooks";
 import { Trans, useTranslation } from "react-i18next";
 import UrlTextMessageItem from "./UrlTextMessage";
 import MessageStatusIndicator from "./MessageStatusIndicator";
@@ -25,8 +26,9 @@ import RevokeMessageItem from "./RevokeMessage";
 import QuoteMessageItem from "./QuoteMessage";
 import SystemLogMessageItem from "./SystemLogMessage";
 import { isSystemLogMessageType } from "../../../utils/messageLog";
+import { buildMessageToolboxMenuItems, getCopyableMessageText, isCopyableMessageType, MessageToolboxActionKey, MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, useMessageToolboxVisibility, } from "../../../components/message/toolbox";
 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, forceHideTip = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }) => {
+const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, enableLongPress = false, }) => {
     var _a;
     const { t } = useTranslation();
     const { resendMessage } = useSendMessage();
@@ -56,52 +58,63 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
                 return _jsx(TextMessageItem, { message: item });
         }
     }, []);
-    const { isReplyable, isRevocable, isMine } = useMemo(() => {
-        const isMyMessage = (message === null || message === void 0 ? void 0 : message.sendID) === userID;
-        const isOlderThanOneDay = dayjs().diff(dayjs(message === null || message === void 0 ? void 0 : message.sendTime), "days", true) >= 1;
-        const status = message.status;
-        const isDeliveredForUi = status !== MessageStatus.Sending && status !== MessageStatus.Failed;
-        return {
-            isReplyable: isDeliveredForUi,
-            isRevocable: isMyMessage && isDeliveredForUi && !isOlderThanOneDay,
-            isMine: isMyMessage,
-        };
-    }, [userID, message]);
+    const { isDeliveredForUi, isRevocable, isMine } = useMessageToolboxVisibility(message, userID);
     const contextMenuItems = useMemo(() => {
         if ((message === null || message === void 0 ? void 0 : message.contentType) === MessageType.RevokeMessage ||
             isSystemLogMessageType(message === null || message === void 0 ? void 0 : message.contentType)) {
             return [];
         }
-        return [
-            ...(isReplyable && onQuoteMessage
-                ? [
-                    {
-                        key: "TB01",
-                        label: t("context_menu_reply"),
-                        icon: (_jsx(Icon, { icon: "arrow-reply-alt-o", size: 18, className: "text-chat-focus" })),
-                        onClick: () => onQuoteMessage === null || onQuoteMessage === void 0 ? void 0 : onQuoteMessage(message),
-                    },
-                ]
-                : []),
-            ...(isRevocable && onRevokeMessage
-                ? [
-                    {
-                        key: "TB05",
-                        label: t("context_menu_revoke"),
-                        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) || ""),
-                    },
-                ]
-                : []),
-        ];
+        const closeToolbox = () => onContextMenuOpenChange === null || onContextMenuOpenChange === void 0 ? void 0 : onContextMenuOpenChange(false);
+        const actions = [];
+        if (isDeliveredForUi && onQuoteMessage) {
+            actions.push({
+                key: MessageToolboxActionKey.REPLY,
+                label: t("context_menu_reply"),
+                icon: "arrow-reply-o",
+                onClick: () => onQuoteMessage(message),
+            });
+        }
+        if (isDeliveredForUi) {
+            actions.push({
+                key: MessageToolboxActionKey.PIN,
+                label: t("context_menu_pin"),
+                icon: "thumbstack-o",
+                onClick: closeToolbox,
+            });
+        }
+        if (isDeliveredForUi && isCopyableMessageType(message === null || message === void 0 ? void 0 : message.contentType)) {
+            actions.push({
+                key: MessageToolboxActionKey.COPY_MESSAGE,
+                label: t("context_menu_copy_message"),
+                icon: "copy-o",
+                onClick: () => {
+                    navigator.clipboard.writeText(getCopyableMessageText(message));
+                    toastMessage.success(t("copy_message_success"));
+                    closeToolbox();
+                },
+            });
+        }
+        if (isRevocable && onRevokeMessage) {
+            actions.push({
+                key: MessageToolboxActionKey.REVOKE,
+                label: t("context_menu_revoke"),
+                icon: "trash-alt-o-1",
+                danger: true,
+                onClick: () => onRevokeMessage((message === null || message === void 0 ? void 0 : message.clientMsgID) || ""),
+            });
+        }
+        return buildMessageToolboxMenuItems(actions);
     }, [
-        isReplyable,
+        isDeliveredForUi,
         isRevocable,
         t,
         onRevokeMessage,
         message,
         onQuoteMessage,
+        onContextMenuOpenChange,
     ]);
+    const bubbleWrapperRef = useRef(null);
+    useLongPress(() => onContextMenuOpenChange === null || onContextMenuOpenChange === void 0 ? void 0 : onContextMenuOpenChange(true), enableLongPress ? bubbleWrapperRef : undefined, { delay: 500 });
     const showSenderInfo = useMemo(() => {
         var _a, _b, _c;
         try {
@@ -147,13 +160,13 @@ 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 wrappedBubble = hasContextMenu ? (_jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, children: _jsx("div", { className: "min-w-0", children: bubbleNode }) })) : (bubbleNode);
+    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.quoteElem) ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(QuoteMessageItem, { message: message, onPressQuoteMessage: onPressQuoteMessage }), renderMessageByType(message)] })) : (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 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,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB,GAAI,oBAAoB,sBAAsB,4CAsB3E,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/components/message/toolbox/MessageToolboxMenu.d.ts

@@ -0,0 +1,5 @@
+import type { MenuProps } from "antd";
+import { MessageToolboxAction } from "./types";
+export declare const MESSAGE_TOOLBOX_OVERLAY_CLASSNAME: string;
+export declare const buildMessageToolboxMenuItems: (actions: MessageToolboxAction[]) => NonNullable<MenuProps["items"]>;
+//# sourceMappingURL=MessageToolboxMenu.d.ts.map

package/dist/components/message/toolbox/MessageToolboxMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageToolboxMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/MessageToolboxMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,iCAAiC,QAS7C,CAAC;AA0BF,eAAO,MAAM,4BAA4B,GACvC,SAAS,oBAAoB,EAAE,KAC9B,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAO5B,CAAC"}

package/dist/components/message/toolbox/MessageToolboxMenu.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "../../../components/icon";
+export const MESSAGE_TOOLBOX_OVERLAY_CLASSNAME = clsx("[&_.ant-dropdown-menu]:min-w-[200px]", "[&_.ant-dropdown-menu]:rounded-2xl", "[&_.ant-dropdown-menu]:p-0", "[&_.ant-dropdown-menu]:py-2", "[&_.ant-dropdown-menu]:shadow-message-toolbox", "[&_.ant-dropdown-menu-item]:rounded-none", "[&_.ant-dropdown-menu-item]:px-4", "[&_.ant-dropdown-menu-item]:py-1.5");
+const ToolboxMenuRow = ({ icon, label, danger = false }) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Icon, { icon: icon, size: 24, className: danger ? "text-danger-400" : "text-gray-900" }), _jsx("span", { className: clsx("text-base font-medium", danger ? "text-danger-400" : "text-gray-900"), children: label })] }));
+export const buildMessageToolboxMenuItems = (actions) => actions.map((action) => ({
+    key: action.key,
+    label: (_jsx(ToolboxMenuRow, { icon: action.icon, label: action.label, danger: action.danger })),
+    onClick: action.onClick,
+}));

package/dist/components/message/toolbox/getCopyableMessageText.d.ts

@@ -0,0 +1,4 @@
+import { MessageItem as MessageItemType, MessageType } from "@openim/wasm-client-sdk";
+export declare const isCopyableMessageType: (contentType?: MessageType) => boolean;
+export declare const getCopyableMessageText: (message: MessageItemType) => string;
+//# sourceMappingURL=getCopyableMessageText.d.ts.map

package/dist/components/message/toolbox/getCopyableMessageText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCopyableMessageText.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/getCopyableMessageText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAUtF,eAAO,MAAM,qBAAqB,GAAI,cAAc,WAAW,KAAG,OACH,CAAC;AAEhE,eAAO,MAAM,sBAAsB,GAAI,SAAS,eAAe,KAAG,MAuBjE,CAAC"}