@droppii-org/chat-sdk 0.1.59 → 0.1.60

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/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/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/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/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,mDAoSlB,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);
@@ -170,12 +186,14 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
         return renderMessageByType(message);
     };
     const bubbleNode = (_jsx(MessageBubble, { isMine: isMine, isInternal: isInternalMessage, senderName: message === null || message === void 0 ? void 0 : message.senderNickname, showSenderName: showSenderName, showTip: showTip, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, content: renderBubbleContent() }));
-    const wrappedBubble = hasContextMenu ? (_jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, overlayClassName: MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, children: _jsx("div", { ref: bubbleWrapperRef, className: "min-w-0", children: bubbleNode }) })) : (bubbleNode);
+    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/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";

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

@@ -0,0 +1,3 @@
+import { MessageType } from "@openim/wasm-client-sdk";
+export declare const isPinnableMessageType: (contentType?: MessageType) => boolean;
+//# sourceMappingURL=isPinnableMessageType.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"isPinnableMessageType.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/isPinnableMessageType.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAYtD,eAAO,MAAM,qBAAqB,GAAI,cAAc,WAAW,YACY,CAAC"}

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

@@ -0,0 +1,11 @@
+import { MessageType } from "@openim/wasm-client-sdk";
+const PINNABLE_MESSAGE_TYPES = [
+    MessageType.TextMessage,
+    MessageType.QuoteMessage,
+    MessageType.UrlTextMessage,
+    MessageType.PictureMessage,
+    MessageType.VideoMessage,
+    MessageType.FileMessage,
+    MessageType.MergeMessage
+];
+export const isPinnableMessageType = (contentType) => contentType !== undefined && PINNABLE_MESSAGE_TYPES.includes(contentType);

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

@@ -1,6 +1,7 @@
 export declare const MessageToolboxActionKey: {
     readonly REPLY: "REPLY";
     readonly PIN: "PIN";
+    readonly UNPIN: "UNPIN";
     readonly COPY_MESSAGE: "COPY_MESSAGE";
     readonly REVOKE: "REVOKE";
 };

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;;;;CAK1B,CAAC;AAEX,MAAM,MAAM,uBAAuB,GACjC,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,OAAO,uBAAuB,CAAC,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,uBAAuB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;;;;;CAM1B,CAAC;AAEX,MAAM,MAAM,uBAAuB,GACjC,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,OAAO,uBAAuB,CAAC,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,uBAAuB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

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

@@ -1,6 +1,7 @@
 export const MessageToolboxActionKey = {
     REPLY: "REPLY",
     PIN: "PIN",
+    UNPIN: "UNPIN",
     COPY_MESSAGE: "COPY_MESSAGE",
     REVOKE: "REVOKE",
 };

package/dist/constants/index.d.ts

@@ -7,4 +7,5 @@ export declare const PAGE_SIZE: {
 };
 export declare const MSG_ITEM_PREFIX = "msg-item-";
 export declare const MSG_ITEM_CONTENT_PREFIX = "msg-item-content-";
+export declare const MAX_PINNED_MESSAGES_PER_CONVERSATION = 5;
 //# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,qFAC2D,CAAC;AAErF,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,uBAAuB,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,qFAC2D,CAAC;AAErF,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,uBAAuB,sBAAsB,CAAC;AAE3D,eAAO,MAAM,oCAAoC,IAAI,CAAC"}

package/dist/constants/index.js

@@ -7,3 +7,4 @@ export const PAGE_SIZE = {
 };
 export const MSG_ITEM_PREFIX = "msg-item-";
 export const MSG_ITEM_CONTENT_PREFIX = "msg-item-content-";
+export const MAX_PINNED_MESSAGES_PER_CONVERSATION = 5;

package/dist/hooks/message/usePinMessage.d.ts

@@ -0,0 +1,7 @@
+export declare const usePinMessage: () => {
+    pinMessage: (conversationID: string, clientMsgID: string) => Promise<void>;
+    unpinMessage: (conversationID: string, clientMsgID: string) => Promise<void>;
+    pinLoading: boolean;
+    unpinLoading: boolean;
+};
+//# sourceMappingURL=usePinMessage.d.ts.map

package/dist/hooks/message/usePinMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePinMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/usePinMessage.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa;;;;;CA6CzB,CAAC"}

package/dist/hooks/message/usePinMessage.js

@@ -0,0 +1,42 @@
+import { useRequest } from "ahooks";
+import { DChatSDK } from "../../constants/sdk";
+import useAuthStore from "../../store/auth";
+import { updateOneMessage } from "../../hooks/message/useMessage";
+import { fetchPinnedMessages } from "./usePinnedMessages";
+export const usePinMessage = () => {
+    const userID = useAuthStore((state) => state.userID);
+    const { runAsync: pinMessage, loading: pinLoading } = useRequest(async (conversationID, clientMsgID) => {
+        await DChatSDK.pinMsg({
+            conversationID,
+            clientMsgID,
+        });
+        updateOneMessage({
+            clientMsgID,
+            isPinned: true,
+            pinnedByUserID: userID,
+            pinnedTime: Date.now(),
+        });
+        await fetchPinnedMessages(conversationID);
+    }, {
+        manual: true,
+    });
+    const { runAsync: unpinMessage, loading: unpinLoading } = useRequest(async (conversationID, clientMsgID) => {
+        await DChatSDK.unpinMsg({
+            conversationID,
+            clientMsgID,
+        });
+        updateOneMessage({
+            clientMsgID,
+            isPinned: false,
+        });
+        await fetchPinnedMessages(conversationID);
+    }, {
+        manual: true,
+    });
+    return {
+        pinMessage,
+        unpinMessage,
+        pinLoading,
+        unpinLoading,
+    };
+};

package/dist/hooks/message/usePinnedMessages.d.ts

@@ -0,0 +1,6 @@
+export declare const fetchPinnedMessages: (conversationID: string) => Promise<void>;
+export declare const usePinnedMessages: (conversationID: string) => {
+    pinnedMessageList: import("@openim/wasm-client-sdk").MessageItem[];
+    pinnedTotalCount: number;
+};
+//# sourceMappingURL=usePinnedMessages.d.ts.map

package/dist/hooks/message/usePinnedMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedMessages.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/usePinnedMessages.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB,GAAU,gBAAgB,MAAM,kBAmB/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,MAAM;;;CAiBvD,CAAC"}

package/dist/hooks/message/usePinnedMessages.js

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { DChatSDK } from "../../constants/sdk";
+import { PAGE_SIZE } from "../../constants";
+import useConversationStore from "../../store/conversation";
+export const fetchPinnedMessages = async (conversationID) => {
+    var _a;
+    const { setPinnedMessageData } = useConversationStore.getState();
+    try {
+        const { data } = await DChatSDK.getPinnedMessageList({
+            conversationID,
+            offset: 0,
+            pageSize: PAGE_SIZE.small,
+        });
+        const sortedMessageList = [...(data.messageList || [])].sort((first, second) => (second.pinnedTime || 0) - (first.pinnedTime || 0));
+        setPinnedMessageData(sortedMessageList, data.totalCount || 0, (_a = data.isEnd) !== null && _a !== void 0 ? _a : true);
+    }
+    catch (error) {
+        console.error("fetchPinnedMessages failed", error);
+    }
+};
+export const usePinnedMessages = (conversationID) => {
+    const pinnedMessageList = useConversationStore((state) => state.pinnedMessageList);
+    const pinnedTotalCount = useConversationStore((state) => state.pinnedTotalCount);
+    useEffect(() => {
+        if (!conversationID)
+            return;
+        void fetchPinnedMessages(conversationID);
+    }, [conversationID]);
+    return {
+        pinnedMessageList,
+        pinnedTotalCount,
+    };
+};