@droppii-org/chat-sdk 0.1.58 → 0.1.60

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.js

@@ -252,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 }), _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
+    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-b", 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,4CAsH5E,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;AAkBzE,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,uBAAuB,GAAI,gBAAgB,4BAA4B,4CAiK5E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -1,20 +1,24 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
-import { Empty, Spin } from "antd";
+import { Empty, Spin, message as toastMessage } from "antd";
 import { useEventListener } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { useChatContext } from "../../context/ChatContext";
 import MessageInfiniteScroll from "../../components/message/MessageInfiniteScroll";
 import { useMessage } from "../../hooks/message/useMessage";
 import { useMessageListScroll } from "../../hooks/message/useMessageListScroll";
+import { usePinMessage } from "../../hooks/message/usePinMessage";
 import useConversationStore from "../../store/conversation";
 import useAuthStore from "../../store/auth";
 import { isGroupChat as resolveIsGroupChat } from "../../utils/conversation";
 import emitter from "../../utils/events";
 import MessageItem from "../../components/message/item";
+import PinLimitModal from "./PinLimitModal";
+import { MAX_PINNED_MESSAGES_PER_CONVERSATION } from "../../constants";
 const ConversationMessageList = ({ bottomSlot }) => {
     const { t } = useTranslation("conversation-inbox");
+    const { t: tCommon } = useTranslation();
     const { user } = useChatContext();
     const authUserID = useAuthStore((state) => state.userID);
     const conversation = useConversationStore((state) => state.conversationData);
@@ -30,6 +34,33 @@ const ConversationMessageList = ({ bottomSlot }) => {
     const isMessageLoading = !conversationId || loadState.initLoading;
     const [openToolboxMessageId, setOpenToolboxMessageId] = useState(null);
     const closeToolbox = useCallback(() => setOpenToolboxMessageId(null), []);
+    const { pinMessage, unpinMessage } = usePinMessage();
+    const pinnedTotalCount = useConversationStore((state) => state.pinnedTotalCount);
+    const [pinLimitModalOpen, setPinLimitModalOpen] = useState(false);
+    const handlePinMessage = useCallback(async (message) => {
+        if (pinnedTotalCount >= MAX_PINNED_MESSAGES_PER_CONVERSATION) {
+            setPinLimitModalOpen(true);
+            return;
+        }
+        try {
+            await pinMessage(conversationId, message.clientMsgID);
+            toastMessage.success(tCommon("pin_message_success"));
+        }
+        catch (error) {
+            console.error("pinMessage failed", error);
+            toastMessage.error(tCommon("pin_message_failed"));
+        }
+    }, [conversationId, pinMessage, pinnedTotalCount, tCommon]);
+    const handleUnpinMessage = useCallback(async (message) => {
+        try {
+            await unpinMessage(conversationId, message.clientMsgID);
+            toastMessage.success(tCommon("unpin_message_success"));
+        }
+        catch (error) {
+            console.error("unpinMessage failed", error);
+            toastMessage.error(tCommon("unpin_message_failed"));
+        }
+    }, [conversationId, unpinMessage, tCommon]);
     const onPressQuoteMessage = useCallback((clientMsgID) => {
         const hasMessage = loadState.messageList.some((msg) => msg.clientMsgID === clientMsgID);
         if (hasMessage) {
@@ -51,6 +82,6 @@ const ConversationMessageList = ({ bottomSlot }) => {
         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)))] })) }));
+    return (_jsxs("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, onPinMessage: handlePinMessage, onUnpinMessage: handleUnpinMessage, enableLongPress: true }, message.clientMsgID)))] })), _jsx(PinLimitModal, { open: pinLimitModalOpen, onClose: () => setPinLimitModalOpen(false) })] }));
 };
 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/PinLimitModal.d.ts

@@ -0,0 +1,7 @@
+interface PinLimitModalProps {
+    open: boolean;
+    onClose: () => void;
+}
+declare const PinLimitModal: ({ open, onClose }: PinLimitModalProps) => import("react/jsx-runtime").JSX.Element;
+export default PinLimitModal;
+//# sourceMappingURL=PinLimitModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinLimitModal.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinLimitModal.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,GAAI,mBAAmB,kBAAkB,4CAoC3D,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Button } from "antd";
+import { useTranslation } from "react-i18next";
+import { MAX_PINNED_MESSAGES_PER_CONVERSATION } from "../../constants";
+const PinLimitModal = ({ open, onClose }) => {
+    const { t } = useTranslation();
+    return (_jsx(Modal, { open: open, onCancel: onClose, footer: null, centered: true, width: 400, children: _jsxs("div", { className: "flex flex-col gap-2 pt-2", role: "alertdialog", "aria-label": t("pin_limit_modal_title"), children: [_jsx("p", { className: "text-lg font-semibold text-gray-900", children: t("pin_limit_modal_title") }), _jsx("p", { className: "text-base text-gray-600", children: t("pin_limit_modal_description", {
+                        max: MAX_PINNED_MESSAGES_PER_CONVERSATION,
+                    }) }), _jsx(Button, { type: "primary", size: "large", block: true, className: "mt-2", onClick: onClose, children: t("pin_limit_modal_confirm") })] }) }));
+};
+export default PinLimitModal;

package/dist/components/conversation-detail/PinnedMessageBar.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinnedMessageBar.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinnedMessageBar.tsx"],"names":[],"mappings":"AA8GA,QAAA,MAAM,gBAAgB,sDAuErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { Icon } from "../../components/icon";
+import { documentIcon } from "../../assets/svg";
+import useAuthStore from "../../store/auth";
+import useConversationStore from "../../store/conversation";
+import { usePinnedMessages } from "../../hooks/message/usePinnedMessages";
+import { parseUrlMetadata } from "../../utils/common";
+const PINNED_SUBTITLE_KEY_BY_TYPE = {
+    [MessageType.UrlTextMessage]: "pinned_from_link",
+    [MessageType.PictureMessage]: "pinned_from_image",
+    [MessageType.MergeMessage]: "pinned_from_image",
+    [MessageType.VideoMessage]: "pinned_from_video",
+    [MessageType.FileMessage]: "pinned_from_file",
+};
+const TITLE_LESS_MESSAGE_TYPES = [
+    MessageType.PictureMessage,
+    MessageType.MergeMessage,
+    MessageType.VideoMessage,
+];
+const getPinnedMessageTitle = (message) => {
+    var _a, _b, _c, _d, _e;
+    switch (message.contentType) {
+        case MessageType.UrlTextMessage: {
+            const urlMetadata = parseUrlMetadata(message.ex);
+            return ((urlMetadata === null || urlMetadata === void 0 ? void 0 : urlMetadata.title) ||
+                ((_a = message.urlTextElem) === null || _a === void 0 ? void 0 : _a.content) ||
+                ((_b = message.textElem) === null || _b === void 0 ? void 0 : _b.content) ||
+                "");
+        }
+        case MessageType.FileMessage:
+            return ((_c = message.fileElem) === null || _c === void 0 ? void 0 : _c.fileName) || "";
+        default:
+            return ((_d = message.textElem) === null || _d === void 0 ? void 0 : _d.content) || ((_e = message.quoteElem) === null || _e === void 0 ? void 0 : _e.text) || "";
+    }
+};
+const PinnedMessageThumbnail = ({ message }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    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 ||
+        message.contentType === MessageType.MergeMessage) {
+        const firstSubMessage = (_b = (_a = message.mergeElem) === null || _a === void 0 ? void 0 : _a.multiMessage) === null || _b === void 0 ? void 0 : _b[0];
+        const imageUrl = ((_d = (_c = firstSubMessage === null || firstSubMessage === void 0 ? void 0 : firstSubMessage.pictureElem) === null || _c === void 0 ? void 0 : _c.snapshotPicture) === null || _d === void 0 ? void 0 : _d.url) ||
+            ((_f = (_e = firstSubMessage === null || firstSubMessage === void 0 ? void 0 : firstSubMessage.pictureElem) === null || _e === void 0 ? void 0 : _e.sourcePicture) === null || _f === void 0 ? void 0 : _f.url) ||
+            ((_h = (_g = message.pictureElem) === null || _g === void 0 ? void 0 : _g.snapshotPicture) === null || _h === void 0 ? void 0 : _h.url) ||
+            ((_k = (_j = message.pictureElem) === null || _j === void 0 ? void 0 : _j.sourcePicture) === null || _k === void 0 ? void 0 : _k.url);
+        if (!imageUrl)
+            return null;
+        return (_jsx("img", { src: imageUrl, alt: "", className: "h-[51px] w-[51px] shrink-0 object-cover" }));
+    }
+    if (message.contentType === MessageType.VideoMessage) {
+        const posterUrl = (_l = message.videoElem) === null || _l === void 0 ? void 0 : _l.snapshotUrl;
+        return (_jsxs("div", { className: "relative h-[51px] w-[51px] shrink-0 overflow-hidden 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 = (_m = parseUrlMetadata(message.ex)) === null || _m === void 0 ? void 0 : _m.image;
+        if (!imageUrl) {
+            return (_jsx("div", { className: "flex h-[51px] w-[51px] shrink-0 items-center justify-center", children: _jsx(Icon, { icon: "link-alt-o", size: 24, className: "text-primary-400" }) }));
+        }
+        return (_jsx("img", { src: imageUrl, alt: "", className: "h-[51px] w-[51px] shrink-0 object-cover" }));
+    }
+    return null;
+};
+const PinnedMessageBar = () => {
+    const { t } = useTranslation();
+    const userID = useAuthStore((state) => state.userID);
+    const conversation = useConversationStore((state) => state.conversationData);
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const conversationId = selectedConversationId || (conversation === null || conversation === void 0 ? void 0 : conversation.conversationID) || "";
+    const { pinnedMessageList, pinnedTotalCount } = usePinnedMessages(conversationId);
+    const latestPinnedMessage = pinnedMessageList[0];
+    if (!latestPinnedMessage)
+        return null;
+    const isMe = latestPinnedMessage.sendID === userID;
+    const senderName = isMe
+        ? t("your_self")
+        : latestPinnedMessage.senderNickname || t("message_sender_unnamed");
+    const subtitleKey = PINNED_SUBTITLE_KEY_BY_TYPE[latestPinnedMessage.contentType] ||
+        "pinned_from_text";
+    const title = getPinnedMessageTitle(latestPinnedMessage);
+    const showTitle = !TITLE_LESS_MESSAGE_TYPES.includes(latestPinnedMessage.contentType) &&
+        Boolean(title);
+    const hasThumbnail = latestPinnedMessage.contentType !== MessageType.TextMessage &&
+        latestPinnedMessage.contentType !== MessageType.QuoteMessage;
+    const hasFlushThumbnail = hasThumbnail &&
+        latestPinnedMessage.contentType !== MessageType.FileMessage;
+    const remainingPinnedCount = pinnedTotalCount - 1;
+    return (_jsxs("div", { "data-testid": "pinned-message-bar", className: clsx("flex w-full shrink-0 items-center gap-3 bg-gray-cool-25 pr-3", hasFlushThumbnail ? "py-0 pl-0" : "py-1 pl-3"), children: [hasThumbnail && _jsx(PinnedMessageThumbnail, { message: latestPinnedMessage }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [showTitle && (_jsx("p", { className: "truncate text-sm font-medium leading-[160%] text-gray-900", children: title })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Icon, { icon: "thumbtack-b", size: 12, className: "text-primary-400" }), _jsx("p", { className: "truncate text-[13px] leading-[160%] text-gray-600", children: t(subtitleKey, { name: senderName }) })] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [remainingPinnedCount > 0 && (_jsxs("span", { className: "flex min-w-[26px] items-center justify-center rounded-full border-2 border-white bg-gradient-danger-light px-1 text-xs font-bold leading-[160%] text-white", children: ["+", remainingPinnedCount] })), _jsx(Icon, { icon: "angle-down-o", size: 20, className: "text-gray-600" })] })] }));
+};
+export default PinnedMessageBar;

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

@@ -3,6 +3,8 @@ export type { ConversationDetailHeaderProps } from "./ConversationDetailHeader";
 export { default as ConversationDetailInput } from "./ConversationDetailInput";
 export type { ConversationDetailInputProps } from "./ConversationDetailInput";
 export { default as ConversationMessageList } from "./ConversationMessageList";
+export { default as PinnedMessageBar } from "./PinnedMessageBar";
+export { default as PinLimitModal } from "./PinLimitModal";
 export { default as ConversationMoreOptionPanel } from "./ConversationMoreOptionPanel";
 export type { ConversationMoreOptionPanelProps } from "./ConversationMoreOptionPanel";
 export { default as ConversationMoreOptionItem } from "./ConversationMoreOptionItem";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACvF,YAAY,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,YAAY,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACvF,YAAY,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,YAAY,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC"}

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

@@ -1,5 +1,7 @@
 export { default as ConversationDetailHeader } from "./ConversationDetailHeader";
 export { default as ConversationDetailInput } from "./ConversationDetailInput";
 export { default as ConversationMessageList } from "./ConversationMessageList";
+export { default as PinnedMessageBar } from "./PinnedMessageBar";
+export { default as PinLimitModal } from "./PinLimitModal";
 export { default as ConversationMoreOptionPanel } from "./ConversationMoreOptionPanel";
 export { default as ConversationMoreOptionItem } from "./ConversationMoreOptionItem";

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/conversation-inbox/ConversationInboxTitle.js

@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { Icon } from "../../components/icon";
 import { PeerType } from "../../types/conversation";
-const ConversationInboxTitle = ({ peerType, displayName, hasUnread = false, }) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [peerType === PeerType.GROUP && (_jsx(Icon, { icon: "user-two-b", size: 12, className: "shrink-0 text-black" })), peerType === PeerType.BOT && (_jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-black text-white", children: _jsx(Icon, { icon: "droppii-o-1", size: 8 }) })), _jsx("span", { className: clsx("min-w-0 truncate text-[16px] leading-[160%] text-black [font-feature-settings:'liga'_off,'clig'_off]", hasUnread ? "font-bold tracking-[0.16px]" : "font-[510]"), children: displayName })] }));
+const ConversationInboxTitle = ({ peerType, displayName, hasUnread = false, }) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [peerType === PeerType.GROUP && (_jsx(Icon, { icon: "user-two-b", size: 12, className: "shrink-0 text-black" })), peerType === PeerType.BOT && (_jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-black text-white", children: _jsx(Icon, { icon: "droppii-b", size: 8 }) })), _jsx("span", { className: clsx("min-w-0 truncate text-[16px] leading-[160%] text-black [font-feature-settings:'liga'_off,'clig'_off]", hasUnread ? "font-bold tracking-[0.16px]" : "font-[510]"), children: displayName })] }));
 export default ConversationInboxTitle;

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

@@ -36,6 +36,6 @@ const QuoteMessageItem = ({ message, onPressQuoteMessage, }) => {
         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 || "" }) }));
+    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

@@ -9,8 +9,10 @@ interface MessageItemProps {
     onRevokeMessage?: (clientMsgID: string) => void;
     onQuoteMessage?: (message: MessageItemType) => void;
     onPressQuoteMessage?: (clientMsgID: string) => void;
+    onPinMessage?: (message: MessageItemType) => void;
+    onUnpinMessage?: (message: MessageItemType) => void;
     enableLongPress?: boolean;
 }
-declare const MessageItem: ({ message, allMessages, isGroupChat, forceHideTip, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, enableLongPress, }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageItem: ({ message, allMessages, isGroupChat, forceHideTip, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, onPinMessage, onUnpinMessage, 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;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;AAwCjC,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,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAeD,QAAA,MAAM,WAAW,GAAI,qMAalB,gBAAgB,mDA4UlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -26,9 +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, enableLongPress = false, }) => {
+import { buildMessageToolboxMenuItems, getCopyableMessageText, isCopyableMessageType, isPinnableMessageType, 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-b", size: 14, className: "text-white" }) }));
+const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, onPinMessage, onUnpinMessage, enableLongPress = false, }) => {
     var _a;
     const { t } = useTranslation();
     const { resendMessage } = useSendMessage();
@@ -74,12 +74,26 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
                 onClick: () => onQuoteMessage(message),
             });
         }
-        if (isDeliveredForUi) {
+        if (isDeliveredForUi &&
+            isPinnableMessageType(message === null || message === void 0 ? void 0 : message.contentType) &&
+            onPinMessage &&
+            onUnpinMessage) {
+            const isMessagePinned = Boolean(message === null || message === void 0 ? void 0 : message.isPinned);
             actions.push({
-                key: MessageToolboxActionKey.PIN,
-                label: t("context_menu_pin"),
-                icon: "thumbstack-o",
-                onClick: closeToolbox,
+                key: isMessagePinned
+                    ? MessageToolboxActionKey.UNPIN
+                    : MessageToolboxActionKey.PIN,
+                label: isMessagePinned ? t("context_menu_unpin") : t("context_menu_pin"),
+                icon: isMessagePinned ? "thumbtack-off-o" : "thumbtack-o",
+                onClick: () => {
+                    if (isMessagePinned) {
+                        onUnpinMessage(message);
+                    }
+                    else {
+                        onPinMessage(message);
+                    }
+                    closeToolbox();
+                },
             });
         }
         if (isDeliveredForUi && isCopyableMessageType(message === null || message === void 0 ? void 0 : message.contentType)) {
@@ -98,7 +112,7 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
             actions.push({
                 key: MessageToolboxActionKey.REVOKE,
                 label: t("context_menu_revoke"),
-                icon: "trash-alt-o-1",
+                icon: "trash-o",
                 danger: true,
                 onClick: () => onRevokeMessage((message === null || message === void 0 ? void 0 : message.clientMsgID) || ""),
             });
@@ -111,6 +125,8 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
         onRevokeMessage,
         message,
         onQuoteMessage,
+        onPinMessage,
+        onUnpinMessage,
         onContextMenuOpenChange,
     ]);
     const bubbleWrapperRef = useRef(null);
@@ -160,13 +176,24 @@ 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.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);
+    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 showPinnedBadge = Boolean(message === null || message === void 0 ? void 0 : message.isPinned) && Boolean(onPinMessage);
+    const pinnedBadgeNode = showPinnedBadge ? (_jsx("span", { "data-testid": "message-pinned-badge", className: clsx("absolute -top-2.5 z-[1] flex h-[22px] w-[26px] items-center justify-center rounded-full border border-white bg-gray-25", isMine ? "left-0" : "right-0"), children: _jsx(Icon, { icon: "thumbtack-b", size: 12, className: "text-primary-400" }) })) : null;
+    const wrappedBubble = hasContextMenu ? (_jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, overlayClassName: MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, children: _jsxs("div", { ref: bubbleWrapperRef, className: "relative min-w-0", children: [bubbleNode, pinnedBadgeNode] }) })) : (_jsxs("div", { className: "relative min-w-0", children: [bubbleNode, pinnedBadgeNode] }));
     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: [_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: clsx("flex items-end gap-1.5", showPinnedBadge && "mt-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/ReplyPreviewMedia.d.ts.map

@@ -1 +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"}
+{"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;AAED,QAAA,MAAM,iBAAiB,GAAI,aAAa,sBAAsB,mDAoD7D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -2,20 +2,9 @@ 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;
-    }
-};
+import { parseUrlMetadata } from "../../../utils/common";
 const ReplyPreviewMedia = ({ message }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     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 }));
     }
@@ -31,7 +20,7 @@ const ReplyPreviewMedia = ({ message }) => {
         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);
+        const imageUrl = (_f = parseUrlMetadata(message.ex)) === null || _f === void 0 ? void 0 : _f.image;
         if (!imageUrl)
             return null;
         return (_jsx("img", { src: imageUrl, alt: "", className: "h-[42px] w-[42px] shrink-0 rounded-lg object-cover" }));

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

@@ -2,8 +2,8 @@ import { MessageItem, MessageType } from "@openim/wasm-client-sdk";
 export declare const hasReplyMediaPreview: (contentType: MessageType) => boolean;
 interface ReplyQuoteContentProps {
     message: MessageItem;
-    title: string;
+    title?: string;
 }
-export declare const ReplyQuoteContent: ({ message, title }: ReplyQuoteContentProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +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"}
+{"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

@@ -8,7 +8,7 @@ const TEXT_LIKE_MESSAGE_TYPES = [
     MessageType.QuoteMessage,
 ];
 export const hasReplyMediaPreview = (contentType) => !TEXT_LIKE_MESSAGE_TYPES.includes(contentType);
-export const ReplyQuoteContent = ({ message, title }) => {
+export const ReplyQuoteContent = ({ message, title = "", }) => {
     var _a, _b;
     const { t } = useTranslation();
     const hasMedia = hasReplyMediaPreview(message.contentType);

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

@@ -2,4 +2,5 @@ export * from "./types";
 export * from "./MessageToolboxMenu";
 export * from "./useMessageToolboxVisibility";
 export * from "./getCopyableMessageText";
+export * from "./isPinnableMessageType";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC"}

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

@@ -2,3 +2,4 @@ export * from "./types";
 export * from "./MessageToolboxMenu";
 export * from "./useMessageToolboxVisibility";
 export * from "./getCopyableMessageText";
+export * from "./isPinnableMessageType";