@droppii-org/chat-sdk 0.1.71 → 0.1.73

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

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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 = useConversationAvatarUrl(conversation);
+    const peerType = conversation.peerType;
+    const badgeLabel = resolvePeerBadgeLabel(peerType, t);
+    const subtitle = t("thread_detail.profile_hint");
+    return (_jsxs("div", { "data-testid": "conversation-detail-header", className: "flex w-full cursor-default items-center border-b border-gray-25 bg-white p-2 shadow-inset-gray-divider", children: [_jsx(HeaderIconButton, { icon: "arrow-left-o", onClick: onBack, testId: "conversation-detail-back" }), _jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 px-1", "data-testid": "conversation-detail-profile", children: [_jsx(ConversationPeerAvatar, { peerType: peerType, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(ConversationInboxTitle, { peerType: peerType, displayName: displayName }), _jsx("p", { className: "truncate text-[10px] font-normal leading-[160%] tracking-[0.1px] text-gray-600 [font-feature-settings:'liga'_off,'clig'_off]", children: subtitle })] })] })] }));
+};
+export default ConversationDetailHeader;

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

@@ -0,0 +1,10 @@
+import type { MoreOptionConfig } from "../../constants/moreOption";
+export interface ConversationDetailInputProps {
+    placeholder?: string;
+    onSendMessage?: (text: string) => void;
+    onInputChange?: (value: string) => void;
+    moreOptions?: MoreOptionConfig[];
+}
+declare const ConversationDetailInput: ({ placeholder, onSendMessage, onInputChange, moreOptions, }: ConversationDetailInputProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationDetailInput;
+//# sourceMappingURL=ConversationDetailInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAK/D,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAClC;AAED,QAAA,MAAM,uBAAuB,GAAI,6DAK9B,4BAA4B,4CA8Y9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -0,0 +1,259 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useBoolean } from "ahooks";
+import clsx from "clsx";
+import { Icon } from "../../components/icon";
+import { useSendMessage } from "../../hooks/message/useSendMessage";
+import useAuthStore from "../../store/auth";
+import useConversationStore from "../../store/conversation";
+import useMessageDraftStore from "../../store/messageDraft";
+import { resolveConversationAvatarUrl, resolveConversationDisplayName, } from "../../utils/conversation";
+import { emit } from "../../utils/events";
+import { extractLinkUrls } from "../../utils/link";
+import { useFetchUrlMetadata } from "../../hooks/common/useFetchUrlMetadata";
+import { processAndValidateDocuments, processAndValidateFiles, } from "../../utils/fileValidation";
+import { FilePreviewList } from "../../components/message/footer/FilePreview";
+import LinkInputPreview from "../../components/message/footer/LinkInputPreview";
+import { ReplyPreviewBar } from "../../components/message/reply/ReplyPreviewBar";
+import ConversationMoreOptionPanel from "./ConversationMoreOptionPanel";
+const MAX_LINES = 5;
+const CONTAINER_MIN_HEIGHT = 48;
+const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, moreOptions, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { t: tCommon } = useTranslation("common");
+    const conversationData = useConversationStore((state) => state.conversationData);
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const conversationId = selectedConversationId || (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
+    const isConversationReady = !!conversationData && (!!conversationData.userID || !!conversationData.groupID);
+    const sendMessageOptions = useMemo(() => ({
+        scrollEvent: "CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM",
+        resolveOfflinePushMeta: () => ({
+            title: conversationData
+                ? resolveConversationDisplayName(conversationData, t)
+                : "Droppii Chat",
+            icon: (conversationData && resolveConversationAvatarUrl(conversationData)) ||
+                "",
+            conversationId: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "",
+        }),
+    }), [conversationData, t]);
+    const { sendMergeMessage } = useSendMessage(sendMessageOptions);
+    const userID = useAuthStore((state) => state.userID);
+    const setDraft = useMessageDraftStore((state) => state.setDraft);
+    const clearDraft = useMessageDraftStore((state) => state.clearDraft);
+    const containerRef = useRef(null);
+    const textareaRef = useRef(null);
+    const mediaInputRef = useRef(null);
+    const documentInputRef = useRef(null);
+    const [value, setValue] = useState("");
+    const [listUploadFiles, setListUploadFiles] = useState([]);
+    const [isVideoLoading, setIsVideoLoading] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isSending, setIsSending] = useState(false);
+    const [previewDismissed, setPreviewDismissed] = useState(false);
+    const [isMoreOptionOpen, { setFalse: closeMoreOption, toggle: toggleMoreOption },] = useBoolean(false);
+    const previewUrl = useMemo(() => {
+        const urls = extractLinkUrls(value);
+        return urls.length === 1 ? urls[0] : null;
+    }, [value]);
+    const showLinkPreview = !!previewUrl && !previewDismissed;
+    const { data: previewMetadata } = useFetchUrlMetadata(previewUrl !== null && previewUrl !== void 0 ? previewUrl : "", showLinkPreview);
+    useEffect(() => {
+        setPreviewDismissed(false);
+    }, [previewUrl]);
+    const hasFiles = listUploadFiles.length > 0;
+    const canSend = (value.trim().length > 0 || hasFiles) &&
+        !isSending &&
+        isConversationReady &&
+        !isVideoLoading;
+    const getTextareaHeights = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return null;
+        const lineHeight = parseFloat(window.getComputedStyle(textarea).lineHeight);
+        return {
+            lineHeight,
+            maxHeight: lineHeight * MAX_LINES,
+        };
+    }, []);
+    const adjustTextareaHeight = useCallback(() => {
+        const textarea = textareaRef.current;
+        const heights = getTextareaHeights();
+        if (!textarea || !heights)
+            return;
+        textarea.style.height = `${heights.lineHeight}px`;
+        const scrollHeight = textarea.scrollHeight;
+        const nextHeight = Math.min(Math.max(scrollHeight, heights.lineHeight), heights.maxHeight);
+        textarea.style.height = `${nextHeight}px`;
+        textarea.style.overflowY =
+            scrollHeight > heights.maxHeight ? "auto" : "hidden";
+    }, [getTextareaHeights]);
+    useEffect(() => {
+        closeMoreOption();
+        setListUploadFiles([]);
+        setIsVideoLoading(false);
+    }, [conversationId, userID, closeMoreOption]);
+    useEffect(() => {
+        var _a;
+        if (!conversationId || !userID) {
+            setValue("");
+            return;
+        }
+        const draft = (_a = useMessageDraftStore.getState().drafts[`${userID}:${conversationId}`]) !== null && _a !== void 0 ? _a : "";
+        setValue(draft);
+        requestAnimationFrame(adjustTextareaHeight);
+    }, [conversationId, userID, adjustTextareaHeight]);
+    useEffect(() => {
+        adjustTextareaHeight();
+    }, [value, adjustTextareaHeight]);
+    useEffect(() => {
+        if (!isFocused)
+            return;
+        const handlePointerDown = (event) => {
+            var _a, _b;
+            if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))
+                return;
+            (_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [isFocused]);
+    useEffect(() => {
+        const viewport = window.visualViewport;
+        if (!viewport)
+            return;
+        const handleViewportChange = () => {
+            if (document.activeElement === textareaRef.current) {
+                emit("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
+            }
+        };
+        viewport.addEventListener("resize", handleViewportChange);
+        return () => viewport.removeEventListener("resize", handleViewportChange);
+    }, []);
+    const handleMediaInputChange = useCallback((event) => {
+        var _a;
+        const files = Array.from((_a = event.target.files) !== null && _a !== void 0 ? _a : []);
+        if (files.length === 0)
+            return;
+        const validFiles = processAndValidateFiles(files, {
+            t: tCommon,
+            currentUploadedFiles: listUploadFiles,
+        });
+        if (validFiles.length > 0) {
+            setListUploadFiles((prev) => [...prev, ...validFiles]);
+            const hasVideo = validFiles.some((f) => { var _a; return (_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("video/"); });
+            if (hasVideo)
+                setIsVideoLoading(true);
+        }
+        event.target.value = "";
+    }, [tCommon, listUploadFiles]);
+    const handleDocumentInputChange = useCallback((event) => {
+        var _a;
+        const files = Array.from((_a = event.target.files) !== null && _a !== void 0 ? _a : []);
+        if (files.length === 0)
+            return;
+        const validFiles = processAndValidateDocuments(files, tCommon);
+        if (validFiles.length > 0) {
+            setListUploadFiles((prev) => [...prev, ...validFiles]);
+        }
+        event.target.value = "";
+    }, [tCommon]);
+    const handleRemoveFile = useCallback((uid) => {
+        setListUploadFiles((prev) => prev.filter((f) => f.uid !== uid));
+        setIsVideoLoading(false);
+    }, []);
+    const handleChange = (nextValue) => {
+        setValue(nextValue);
+        if (conversationId && userID) {
+            setDraft(userID, conversationId, nextValue);
+        }
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
+    };
+    const resetComposer = () => {
+        setValue("");
+        setListUploadFiles([]);
+        setIsVideoLoading(false);
+        setPreviewDismissed(false);
+        if (conversationId && userID) {
+            clearDraft(userID, conversationId);
+        }
+        requestAnimationFrame(adjustTextareaHeight);
+    };
+    const handleSend = async () => {
+        const text = value.trim();
+        if ((!text && !hasFiles) || isSending)
+            return;
+        const filesToSend = listUploadFiles;
+        const urlMetadata = showLinkPreview && previewUrl && previewMetadata
+            ? {
+                url: previewUrl,
+                title: previewMetadata.title,
+                description: previewMetadata.description,
+                image: previewMetadata.image,
+            }
+            : undefined;
+        resetComposer();
+        setIsSending(true);
+        try {
+            if (onSendMessage) {
+                onSendMessage(text);
+            }
+            else {
+                await sendMergeMessage({
+                    plainText: text,
+                    richText: "",
+                    files: filesToSend,
+                    isInternal: false,
+                    urlMetadata,
+                });
+            }
+        }
+        catch (error) {
+            console.error("handleSend", error);
+        }
+        finally {
+            setIsSending(false);
+        }
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+        closeMoreOption();
+        emit("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+    };
+    const handleToggleMoreOption = () => {
+        var _a;
+        if (!isMoreOptionOpen) {
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        toggleMoreOption();
+    };
+    const insertNewline = (textarea) => {
+        const { selectionStart, selectionEnd } = textarea;
+        const nextValue = value.slice(0, selectionStart) + "\n" + value.slice(selectionEnd);
+        handleChange(nextValue);
+        requestAnimationFrame(() => {
+            textarea.selectionStart = selectionStart + 1;
+            textarea.selectionEnd = selectionStart + 1;
+            adjustTextareaHeight();
+        });
+    };
+    const handleKeyDown = (event) => {
+        if (event.key !== "Enter")
+            return;
+        if (event.shiftKey) {
+            event.preventDefault();
+            insertNewline(event.currentTarget);
+            return;
+        }
+        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-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, options: moreOptions, onTriggerMediaInput: () => { var _a; return (_a = mediaInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onTriggerDocumentInput: () => { var _a; return (_a = documentInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))] }));
+};
+export default ConversationDetailInput;

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export interface ConversationMessageListProps {
+    bottomSlot?: ReactNode;
+}
+declare const ConversationMessageList: ({ bottomSlot }: ConversationMessageListProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationMessageList;
+//# sourceMappingURL=ConversationMessageList.d.ts.map

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

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

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

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+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 { useRevokeMessage } from "../../hooks/message/useRevokeMessage";
+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";
+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);
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
+    const searchClientMsgID = useConversationStore((state) => state.searchClientMsgID);
+    const setSearchClientMsgID = useConversationStore((state) => state.setSearchClientMsgID);
+    const conversationId = selectedConversationId || (conversation === null || conversation === void 0 ? void 0 : conversation.conversationID) || "";
+    const isGroupChat = conversation ? resolveIsGroupChat(conversation) : false;
+    const messageController = useMessage(conversationId, searchClientMsgID, true, true);
+    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottomIfAtBottom, scrollToMessage, } = useMessageListScroll(Object.assign({ conversationId, userId: (user === null || user === void 0 ? void 0 : user.userID) || authUserID }, messageController));
+    const { loadState, moreOldLoading } = messageController;
+    const isMessageLoading = !conversationId || loadState.initLoading;
+    const [openToolboxMessageId, setOpenToolboxMessageId] = useState(null);
+    const closeToolbox = useCallback(() => setOpenToolboxMessageId(null), []);
+    const { pinMessage, unpinMessage } = usePinMessage();
+    const pinnedTotalCount = useConversationStore((state) => state.pinnedTotalCount);
+    const pinnedRemainingCount = useConversationStore((state) => state.pinnedRemainingCount);
+    const [pinLimitModalOpen, setPinLimitModalOpen] = useState(false);
+    const handlePinMessage = useCallback(async (message) => {
+        if (pinnedRemainingCount <= 0 && pinnedTotalCount > 0) {
+            setPinLimitModalOpen(true);
+            return;
+        }
+        try {
+            await pinMessage(conversationId, message.clientMsgID);
+            toastMessage.success(tCommon("pin_message_success"));
+        }
+        catch (_a) {
+            toastMessage.error(tCommon("pin_message_failed"));
+        }
+    }, [conversationId, pinMessage, pinnedRemainingCount, pinnedTotalCount, tCommon]);
+    const handleUnpinMessage = useCallback(async (message) => {
+        try {
+            await unpinMessage(conversationId, message.clientMsgID);
+            toastMessage.success(tCommon("unpin_message_success"));
+        }
+        catch (_a) {
+            toastMessage.error(tCommon("unpin_message_failed"));
+        }
+    }, [conversationId, unpinMessage, tCommon]);
+    const { revokeMessage } = useRevokeMessage();
+    const handleRevokeMessage = useCallback(async (clientMsgID) => {
+        closeToolbox();
+        try {
+            await revokeMessage(conversationId, clientMsgID);
+            toastMessage.success(tCommon("revoke_message_success"));
+        }
+        catch (_a) {
+            toastMessage.error(tCommon("revoke_message_failed"));
+        }
+    }, [closeToolbox, conversationId, revokeMessage, tCommon]);
+    const onPressQuoteMessage = useCallback((clientMsgID) => {
+        const hasMessage = loadState.messageList.some((msg) => msg.clientMsgID === clientMsgID);
+        if (hasMessage) {
+            scrollToMessage(clientMsgID);
+        }
+        else {
+            setSearchClientMsgID(clientMsgID);
+        }
+    }, [scrollToMessage, loadState.messageList, setSearchClientMsgID]);
+    useEffect(() => {
+        emitter.on("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
+        emitter.on("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
+        return () => {
+            emitter.off("CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
+            emitter.off("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
+        };
+    }, [scrollToBottomIfAtBottom, scrollToMessage]);
+    useEventListener("scroll", closeToolbox, {
+        target: scrollRef,
+        enable: !!openToolboxMessageId,
+    });
+    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: handleRevokeMessage, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: handlePinMessage, onUnpinMessage: handleUnpinMessage, enableLongPress: true }, message.clientMsgID)))] })), _jsx(PinLimitModal, { open: pinLimitModalOpen, max: pinnedTotalCount, onClose: () => setPinLimitModalOpen(false) })] }));
+};
+export default ConversationMessageList;

package/dist/src/components/conversation-detail/ConversationMoreOptionItem.d.ts

@@ -0,0 +1,8 @@
+import type { MoreOptionConfig } from "../../constants/moreOption";
+export interface ConversationMoreOptionItemProps {
+    option: MoreOptionConfig;
+    onSelect: (option: MoreOptionConfig) => void;
+}
+declare const ConversationMoreOptionItem: ({ option, onSelect }: ConversationMoreOptionItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationMoreOptionItem;
+//# sourceMappingURL=ConversationMoreOptionItem.d.ts.map

package/dist/src/components/conversation-detail/ConversationMoreOptionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationMoreOptionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/ConversationMoreOptionItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,0BAA0B,GAAI,sBAAsB,+BAA+B,4CA+BxF,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

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

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+const ICON_SIZE = 24;
+const ConversationMoreOptionItem = ({ option, onSelect }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const label = t(option.labelKey);
+    const handleClick = () => {
+        if (!option.enabled)
+            return;
+        onSelect(option);
+    };
+    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 })] }));
+};
+export default ConversationMoreOptionItem;

package/dist/src/components/conversation-detail/ConversationMoreOptionPanel.d.ts

@@ -0,0 +1,11 @@
+import { MoreOptionConfig } from "../../constants/moreOption";
+export interface ConversationMoreOptionPanelProps {
+    disabled?: boolean;
+    options?: MoreOptionConfig[];
+    onSelectOption?: (option: MoreOptionConfig) => void;
+    onTriggerMediaInput?: () => void;
+    onTriggerDocumentInput?: () => void;
+}
+declare const ConversationMoreOptionPanel: ({ disabled, options, onSelectOption, onTriggerMediaInput, onTriggerDocumentInput, }: ConversationMoreOptionPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationMoreOptionPanel;
+//# sourceMappingURL=ConversationMoreOptionPanel.d.ts.map

package/dist/src/components/conversation-detail/ConversationMoreOptionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationMoreOptionPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/ConversationMoreOptionPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,gBAAgB,EAEjB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,2BAA2B,GAAI,qFAMlC,gCAAgC,4CAkClC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/src/components/conversation-detail/ConversationMoreOptionPanel.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { MORE_OPTIONS, MoreOptionKey, } from "../../constants/moreOption";
+import ConversationMoreOptionItem from "./ConversationMoreOptionItem";
+const ConversationMoreOptionPanel = ({ disabled = false, options = MORE_OPTIONS, onSelectOption, onTriggerMediaInput, onTriggerDocumentInput, }) => {
+    const handleSelectOption = useCallback((option) => {
+        if (option.key === MoreOptionKey.Media) {
+            onTriggerMediaInput === null || onTriggerMediaInput === void 0 ? void 0 : onTriggerMediaInput();
+            return;
+        }
+        if (option.key === MoreOptionKey.Document) {
+            onTriggerDocumentInput === null || onTriggerDocumentInput === void 0 ? void 0 : onTriggerDocumentInput();
+            return;
+        }
+        if (option.onSelect) {
+            option.onSelect();
+            return;
+        }
+        onSelectOption === null || onSelectOption === void 0 ? void 0 : onSelectOption(option);
+    }, [onSelectOption, onTriggerMediaInput, onTriggerDocumentInput]);
+    return (_jsx("div", { "data-testid": "conversation-more-option-panel", className: "grid grid-cols-4 gap-y-5 bg-white py-5", children: options.map((option) => (_jsx(ConversationMoreOptionItem, { option: Object.assign(Object.assign({}, option), { enabled: option.enabled && !disabled }), onSelect: handleSelectOption }, option.key))) }));
+};
+export default ConversationMoreOptionPanel;

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

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

package/dist/src/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":"AAGA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,GAAI,wBAAwB,kBAAkB,4CAkChE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Button } from "antd";
+import { useTranslation } from "react-i18next";
+const PinLimitModal = ({ open, max, 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 }) }), _jsx(Button, { type: "primary", size: "large", block: true, className: "mt-2 !border-primary-400 !bg-primary-400 !text-white hover:!border-primary-300 hover:!bg-primary-300", onClick: onClose, children: t("pin_limit_modal_confirm") })] }) }));
+};
+export default PinLimitModal;

package/dist/src/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/src/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":"AAgHA,QAAA,MAAM,gBAAgB,sDAyFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+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";
+import PinnedMessagesPanel from "./PinnedMessagesPanel";
+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 [isPanelOpen, setIsPanelOpen] = useState(false);
+    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 isRevoked = latestPinnedMessage.contentType === MessageType.RevokeMessage;
+    const subtitleKey = PINNED_SUBTITLE_KEY_BY_TYPE[latestPinnedMessage.contentType] ||
+        "pinned_from_text";
+    const title = isRevoked
+        ? t("revoked")
+        : getPinnedMessageTitle(latestPinnedMessage);
+    const showTitle = !TITLE_LESS_MESSAGE_TYPES.includes(latestPinnedMessage.contentType) &&
+        Boolean(title);
+    const hasThumbnail = !isRevoked &&
+        latestPinnedMessage.contentType !== MessageType.TextMessage &&
+        latestPinnedMessage.contentType !== MessageType.QuoteMessage;
+    const hasFlushThumbnail = hasThumbnail &&
+        latestPinnedMessage.contentType !== MessageType.FileMessage;
+    const remainingPinnedCount = pinnedTotalCount - 1;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "pinned-message-bar", role: "button", tabIndex: 0, onClick: () => setIsPanelOpen(true), className: clsx("flex w-full shrink-0 cursor-pointer 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" })] })] }), _jsx(PinnedMessagesPanel, { open: isPanelOpen, onClose: () => setIsPanelOpen(false) })] }));
+};
+export default PinnedMessageBar;