@droppii-org/chat-sdk 0.1.55 → 0.1.57

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

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import { Empty, Spin } from "antd";
+import InfiniteScroll from "react-infinite-scroll-component";
+import useConversationStore from "../../store/conversation";
+import { Icon } from "../../components/icon";
+import ConversationInboxItem from "./ConversationInboxItem";
+const FooterSkeleton = () => (_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("div", { className: "h-10 w-10 animate-pulse rounded-full bg-neutral-200" }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx("div", { className: "h-3 w-1/2 animate-pulse rounded bg-neutral-200" }), _jsx("div", { className: "h-2.5 w-1/3 animate-pulse rounded bg-neutral-200" })] })] }));
+const ConversationInboxList = ({ items, isLoading, isFetchingNextPage, hasNextPage, onLoadMore, onSelectThread, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const handleSelectThread = (item) => {
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set("threadId", item.conversationID);
+        router.push(`${pathname}?${newSearchParams.toString()}`);
+        setSelectedConversationId(item.conversationID);
+        setConversationData(item);
+        onSelectThread === null || onSelectThread === void 0 ? void 0 : onSelectThread(item);
+    };
+    const handleEndReached = () => {
+        if (hasNextPage && !isFetchingNextPage) {
+            onLoadMore();
+        }
+    };
+    if (isLoading) {
+        return (_jsx("div", { "data-testid": "conversation-inbox-thread-list", className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) }));
+    }
+    return (_jsx("div", { id: "scrollableConversationThreadsDiv", "data-testid": "conversation-inbox-thread-list", className: "min-h-0 w-full flex-1 overflow-auto", children: _jsx(InfiniteScroll, { dataLength: items.length, next: handleEndReached, hasMore: hasNextPage, loader: isFetchingNextPage ? _jsx(FooterSkeleton, {}) : null, scrollableTarget: "scrollableConversationThreadsDiv", children: items.length === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("empty.no_conversations") }) })) : (items.map((item) => (_jsx(ConversationInboxItem, { item: item, onClick: handleSelectThread }, item.conversationID)))) }) }));
+};
+export default ConversationInboxList;

package/dist/components/conversation-inbox/ConversationInboxTitle.d.ts

@@ -0,0 +1,9 @@
+import { PeerType } from "../../types/conversation";
+export interface ConversationInboxTitleProps {
+    peerType: PeerType;
+    displayName: string;
+    hasUnread?: boolean;
+}
+declare const ConversationInboxTitle: ({ peerType, displayName, hasUnread, }: ConversationInboxTitleProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationInboxTitle;
+//# sourceMappingURL=ConversationInboxTitle.d.ts.map

package/dist/components/conversation-inbox/ConversationInboxTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationInboxTitle.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxTitle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,sBAAsB,GAAI,uCAI7B,2BAA2B,4CAmB7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,7 @@
+"use client";
+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 })] }));
+export default ConversationInboxTitle;

package/dist/components/conversation-inbox/ConversationPeerAvatar.d.ts

@@ -0,0 +1,10 @@
+import { PeerType } from "../../types/conversation";
+export interface ConversationPeerAvatarProps {
+    peerType: PeerType;
+    displayName: string;
+    avatarUrl: string | null;
+    badgeLabel: string;
+}
+declare const ConversationPeerAvatar: ({ peerType, displayName, avatarUrl, badgeLabel, }: ConversationPeerAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationPeerAvatar;
+//# sourceMappingURL=ConversationPeerAvatar.d.ts.map

package/dist/components/conversation-inbox/ConversationPeerAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationPeerAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationPeerAvatar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGhD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,sBAAsB,GAAI,mDAK7B,2BAA2B,4CAyB7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Avatar } from "antd";
+import { resolvePeerBadgeColor } from "../../utils/conversation";
+const ConversationPeerAvatar = ({ peerType, displayName, avatarUrl, badgeLabel, }) => {
+    const badge = badgeLabel ? (_jsx("span", { className: clsx("absolute -bottom-px -right-px flex h-[17px] items-center justify-center gap-2 rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-badge-inset", resolvePeerBadgeColor(peerType)), children: badgeLabel })) : null;
+    return (_jsxs("div", { className: "relative h-12 w-12 shrink-0", children: [_jsx(Avatar, { size: 48, src: avatarUrl || undefined, alt: displayName, className: "uppercase", children: (displayName === null || displayName === void 0 ? void 0 : displayName.charAt(0)) || "A" }), badge] }));
+};
+export default ConversationPeerAvatar;

package/dist/components/conversation-inbox/index.d.ts

@@ -0,0 +1,10 @@
+export { default as ConversationInboxHeader } from "./ConversationInboxHeader";
+export { default as ConversationPeerAvatar } from "./ConversationPeerAvatar";
+export type { ConversationPeerAvatarProps } from "./ConversationPeerAvatar";
+export { default as ConversationInboxTitle } from "./ConversationInboxTitle";
+export type { ConversationInboxTitleProps } from "./ConversationInboxTitle";
+export { default as ConversationInboxItem } from "./ConversationInboxItem";
+export type { ConversationInboxItemProps } from "./ConversationInboxItem";
+export { default as ConversationInboxList } from "./ConversationInboxList";
+export type { ConversationInboxListProps } from "./ConversationInboxList";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC"}

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

@@ -0,0 +1,5 @@
+export { default as ConversationInboxHeader } from "./ConversationInboxHeader";
+export { default as ConversationPeerAvatar } from "./ConversationPeerAvatar";
+export { default as ConversationInboxTitle } from "./ConversationInboxTitle";
+export { default as ConversationInboxItem } from "./ConversationInboxItem";
+export { default as ConversationInboxList } from "./ConversationInboxList";

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

@@ -6,7 +6,7 @@ import { getHostLabel } from "../../../utils/link";
 import { openLink } from "../../../utils/openLink";
 import { useTranslation } from "react-i18next";
 const LinkInputPreview = ({ url, onRemove }) => {
-    const { t } = useTranslation("biz-inbox");
+    const { t } = useTranslation("conversation-inbox");
     const { data, isLoading, isError } = useFetchUrlMetadata(url);
     const handleOpen = () => {
         openLink(url, t);

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

@@ -17,7 +17,7 @@ const ImageMessageItem = (props) => {
         snapshotHeight: (_k = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.snapshotPicture) === null || _k === void 0 ? void 0 : _k.height,
     });
     const isSending = message.status === MessageStatus.Sending;
-    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx(Image, { src: sourceUrl, width: minStyle.width, className: "cursor-pointer rounded-xl object-contain", preview: {
+    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative flex max-w-[200px] overflow-hidden rounded-xl", style: minStyle, children: _jsx(Image, { src: sourceUrl, width: minStyle.width, className: "block cursor-pointer rounded-xl object-cover", preview: {
                     src: bigUrl,
                     toolbarRender: (originalNode, info) => { var _a; return renderImagePreviewToolbar(originalNode, (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url, t); },
                 }, placeholder: _jsx("div", { className: "flex items-center justify-center rounded-xl bg-black/10", style: minStyle, children: _jsx(Spin, {}) }) }) }) }));

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

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { getHostLabel } from "../../../utils/link";
 import { openLink } from "../../../utils/openLink";
 const LinkCard = ({ metadata, url }) => {
-    const { t } = useTranslation("biz-inbox");
+    const { t } = useTranslation("conversation-inbox");
     const { title, description, image } = metadata;
     if (!title && !description && !image) {
         return null;

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

@@ -6,7 +6,7 @@ import { parseTextWithLinks } from "../../../utils/link";
 import { openLink } from "../../../utils/openLink";
 import { MESSAGE_TEXT_CLASS } from "./textStyle";
 const LinkText = ({ text }) => {
-    const { t } = useTranslation("biz-inbox");
+    const { t } = useTranslation("conversation-inbox");
     const segments = parseTextWithLinks(text);
     return (_jsx("span", { className: clsx("min-w-0 whitespace-pre-wrap text-left [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), children: segments.map((segment, index) => segment.type === "link" ? (_jsx("button", { type: "button", onClick: () => openLink(segment.url, t), className: "inline text-left font-medium text-primary-400 underline-offset-2 hover:underline", children: segment.value }, `${segment.url}-${index}`)) : (_jsx("span", { children: segment.value }, `text-${index}`))) }));
 };

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

@@ -13,6 +13,6 @@ const VideoMessageItem = (props) => {
         snapshotHeight: videoElem === null || videoElem === void 0 ? void 0 : videoElem.snapshotHeight,
     });
     const isSending = message.status === MessageStatus.Sending;
-    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx("video", { src: videoUrl, poster: posterUrl, controls: true, className: "rounded-xl object-cover", style: { width: minStyle.width } }) }) }));
+    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px] overflow-hidden rounded-xl", style: minStyle, children: _jsx("video", { src: videoUrl, poster: posterUrl, controls: true, className: "block rounded-xl object-cover", style: { width: minStyle.width } }) }) }));
 };
 export default VideoMessageItem;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AA6BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAeD,QAAA,MAAM,WAAW,GAAI,sJAUlB,gBAAgB,mDA+QlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AAuCjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAeD,QAAA,MAAM,WAAW,GAAI,uKAWlB,gBAAgB,mDA4RlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import dayjs from "dayjs";
 import clsx from "clsx";
-import { Dropdown } from "antd";
+import { Dropdown, message as toastMessage } from "antd";
 import { MessageStatus, MessageType, } from "@openim/wasm-client-sdk";
 import TextMessageItem from "./TextMessage";
 import ImageMessageItem from "./ImageMessage";
@@ -15,7 +15,8 @@ import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../../constants";
 import { formatTimestamp } from "../../../utils/common";
 import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
+import { useLongPress } from "ahooks";
 import { Trans, useTranslation } from "react-i18next";
 import UrlTextMessageItem from "./UrlTextMessage";
 import MessageStatusIndicator from "./MessageStatusIndicator";
@@ -25,8 +26,9 @@ import RevokeMessageItem from "./RevokeMessage";
 import QuoteMessageItem from "./QuoteMessage";
 import SystemLogMessageItem from "./SystemLogMessage";
 import { isSystemLogMessageType } from "../../../utils/messageLog";
+import { buildMessageToolboxMenuItems, getCopyableMessageText, isCopyableMessageType, MessageToolboxActionKey, MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, useMessageToolboxVisibility, } from "../../../components/message/toolbox";
 const MessageAvatar = ({ avatarUrl }) => avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-6 w-6 shrink-0 self-end rounded-full object-cover" })) : (_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center self-end rounded-full bg-chat-avatar", children: _jsx(Icon, { icon: "droppii-o-1", size: 14, className: "text-white" }) }));
-const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }) => {
+const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, enableLongPress = false, }) => {
     var _a;
     const { t } = useTranslation();
     const { resendMessage } = useSendMessage();
@@ -56,52 +58,63 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
                 return _jsx(TextMessageItem, { message: item });
         }
     }, []);
-    const { isReplyable, isRevocable, isMine } = useMemo(() => {
-        const isMyMessage = (message === null || message === void 0 ? void 0 : message.sendID) === userID;
-        const isOlderThanOneDay = dayjs().diff(dayjs(message === null || message === void 0 ? void 0 : message.sendTime), "days", true) >= 1;
-        const status = message.status;
-        const isDeliveredForUi = status !== MessageStatus.Sending && status !== MessageStatus.Failed;
-        return {
-            isReplyable: isDeliveredForUi,
-            isRevocable: isMyMessage && isDeliveredForUi && !isOlderThanOneDay,
-            isMine: isMyMessage,
-        };
-    }, [userID, message]);
+    const { isDeliveredForUi, isRevocable, isMine } = useMessageToolboxVisibility(message, userID);
     const contextMenuItems = useMemo(() => {
         if ((message === null || message === void 0 ? void 0 : message.contentType) === MessageType.RevokeMessage ||
             isSystemLogMessageType(message === null || message === void 0 ? void 0 : message.contentType)) {
             return [];
         }
-        return [
-            ...(isReplyable && onQuoteMessage
-                ? [
-                    {
-                        key: "TB01",
-                        label: t("context_menu_reply"),
-                        icon: (_jsx(Icon, { icon: "arrow-reply-alt-o", size: 18, className: "text-chat-focus" })),
-                        onClick: () => onQuoteMessage === null || onQuoteMessage === void 0 ? void 0 : onQuoteMessage(message),
-                    },
-                ]
-                : []),
-            ...(isRevocable && onRevokeMessage
-                ? [
-                    {
-                        key: "TB05",
-                        label: t("context_menu_revoke"),
-                        icon: (_jsx(Icon, { icon: "arrow-reload-o", size: 18, className: "text-chat-focus" })),
-                        onClick: () => onRevokeMessage === null || onRevokeMessage === void 0 ? void 0 : onRevokeMessage((message === null || message === void 0 ? void 0 : message.clientMsgID) || ""),
-                    },
-                ]
-                : []),
-        ];
+        const closeToolbox = () => onContextMenuOpenChange === null || onContextMenuOpenChange === void 0 ? void 0 : onContextMenuOpenChange(false);
+        const actions = [];
+        if (isDeliveredForUi && onQuoteMessage) {
+            actions.push({
+                key: MessageToolboxActionKey.REPLY,
+                label: t("context_menu_reply"),
+                icon: "arrow-reply-o",
+                onClick: () => onQuoteMessage(message),
+            });
+        }
+        if (isDeliveredForUi) {
+            actions.push({
+                key: MessageToolboxActionKey.PIN,
+                label: t("context_menu_pin"),
+                icon: "thumbstack-o",
+                onClick: closeToolbox,
+            });
+        }
+        if (isDeliveredForUi && isCopyableMessageType(message === null || message === void 0 ? void 0 : message.contentType)) {
+            actions.push({
+                key: MessageToolboxActionKey.COPY_MESSAGE,
+                label: t("context_menu_copy_message"),
+                icon: "copy-o",
+                onClick: () => {
+                    navigator.clipboard.writeText(getCopyableMessageText(message));
+                    toastMessage.success(t("copy_message_success"));
+                    closeToolbox();
+                },
+            });
+        }
+        if (isRevocable && onRevokeMessage) {
+            actions.push({
+                key: MessageToolboxActionKey.REVOKE,
+                label: t("context_menu_revoke"),
+                icon: "trash-alt-o-1",
+                danger: true,
+                onClick: () => onRevokeMessage((message === null || message === void 0 ? void 0 : message.clientMsgID) || ""),
+            });
+        }
+        return buildMessageToolboxMenuItems(actions);
     }, [
-        isReplyable,
+        isDeliveredForUi,
         isRevocable,
         t,
         onRevokeMessage,
         message,
         onQuoteMessage,
+        onContextMenuOpenChange,
     ]);
+    const bubbleWrapperRef = useRef(null);
+    useLongPress(() => onContextMenuOpenChange === null || onContextMenuOpenChange === void 0 ? void 0 : onContextMenuOpenChange(true), enableLongPress ? bubbleWrapperRef : undefined, { delay: 500 });
     const showSenderInfo = useMemo(() => {
         var _a, _b, _c;
         try {
@@ -148,7 +161,7 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
             _jsx(SystemLogMessageItem, { message: message })));
     }
     const bubbleNode = (_jsx(MessageBubble, { isMine: isMine, isInternal: isInternalMessage, senderName: message === null || message === void 0 ? void 0 : message.senderNickname, showSenderName: showSenderName, showTip: showTip, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, content: (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs(_Fragment, { children: [_jsx(MergeImageMessageItem, { message: message }), (message === null || message === void 0 ? void 0 : message.textElem) && _jsx(TextMessageItem, { message: message })] })) : (renderMessageByType(message)) }));
-    const wrappedBubble = hasContextMenu ? (_jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, children: _jsx("div", { className: "min-w-0", children: bubbleNode }) })) : (bubbleNode);
+    const wrappedBubble = hasContextMenu ? (_jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, overlayClassName: MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, children: _jsx("div", { ref: bubbleWrapperRef, className: "min-w-0", children: bubbleNode }) })) : (bubbleNode);
     return (_createElement("div", Object.assign({}, messageContainerProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID }),
         timeBreakNode,
         _jsxs("div", { className: clsx("flex min-w-0 items-end gap-1", isMine ? "justify-end pl-12 pr-3" : "justify-start pl-3 pr-12"), children: [!isMine &&

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

@@ -1 +1 @@
-{"version":3,"file":"mediaSize.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/mediaSize.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,2BAA2B;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,uBAAuB,GAAI,8CAIrC,2BAA2B;;;;CAoB7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,iDAtBjC,2BAA2B;;;;CAsBgC,CAAC"}
+{"version":3,"file":"mediaSize.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/mediaSize.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,2BAA2B;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,uBAAuB,GAAI,8CAIrC,2BAA2B;;;;CAmB7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,iDArBjC,2BAA2B;;;;CAqBgC,CAAC"}

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

@@ -2,19 +2,19 @@ const IMAGE_MAX_WIDTH = 200;
 export const getImageMessageMinStyle = ({ imageWidth, imageHeight, snapshotHeight, }) => {
     if (!imageWidth || !imageHeight || imageWidth <= 0 || imageHeight <= 0) {
         return {
-            minHeight: "210px",
-            minWidth: "210px",
+            minHeight: `${IMAGE_MAX_WIDTH}px`,
+            minWidth: `${IMAGE_MAX_WIDTH}px`,
             width: IMAGE_MAX_WIDTH,
         };
     }
     const snapshotMaxHeight = snapshotHeight !== null && snapshotHeight !== void 0 ? snapshotHeight : imageHeight;
-    const minHeight = Math.min(IMAGE_MAX_WIDTH, imageWidth) * (imageHeight / imageWidth) + 2;
-    const adaptedHeight = Math.min(minHeight, snapshotMaxHeight) + 10;
-    const adaptedWidth = Math.min(imageWidth, IMAGE_MAX_WIDTH) + 10;
+    const displayWidth = Math.min(imageWidth, IMAGE_MAX_WIDTH);
+    const aspectHeight = displayWidth * (imageHeight / imageWidth);
+    const displayHeight = Math.min(aspectHeight, snapshotMaxHeight);
     return {
-        minHeight: `${adaptedHeight}px`,
-        minWidth: `${adaptedWidth}px`,
-        width: Math.min(imageWidth, IMAGE_MAX_WIDTH),
+        minHeight: `${displayHeight}px`,
+        minWidth: `${displayWidth}px`,
+        width: displayWidth,
     };
 };
 export const getVideoMessageMinStyle = getImageMessageMinStyle;

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { MessageType } from "@openim/wasm-client-sdk";
+import { htmlHasFormatting, stripHtml } from "../../../utils/common";
+const COPYABLE_MESSAGE_TYPES = [
+    MessageType.TextMessage,
+    MessageType.QuoteMessage,
+    MessageType.UrlTextMessage,
+];
+export const isCopyableMessageType = (contentType) => !!contentType && COPYABLE_MESSAGE_TYPES.includes(contentType);
+export const getCopyableMessageText = (message) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    let extendMessageInfo = null;
+    try {
+        extendMessageInfo = JSON.parse((message === null || message === void 0 ? void 0 : message.ex) || "{}");
+    }
+    catch (_h) {
+        extendMessageInfo = {};
+    }
+    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)) {
+        return stripHtml(richHtmlContent);
+    }
+    return (((_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) ||
+        ((_e = message === null || message === void 0 ? void 0 : message.urlTextElem) === null || _e === void 0 ? void 0 : _e.content) ||
+        stripHtml(richHtmlContent) ||
+        ((_g = (_f = message === null || message === void 0 ? void 0 : message.urlTextElem) === null || _f === void 0 ? void 0 : _f.urls) === null || _g === void 0 ? void 0 : _g[0]) ||
+        "");
+};

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./MessageToolboxMenu";
+export * from "./useMessageToolboxVisibility";
+export * from "./getCopyableMessageText";

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

@@ -0,0 +1,15 @@
+export declare const MessageToolboxActionKey: {
+    readonly REPLY: "REPLY";
+    readonly PIN: "PIN";
+    readonly COPY_MESSAGE: "COPY_MESSAGE";
+    readonly REVOKE: "REVOKE";
+};
+export type MessageToolboxActionKey = (typeof MessageToolboxActionKey)[keyof typeof MessageToolboxActionKey];
+export interface MessageToolboxAction {
+    key: MessageToolboxActionKey;
+    label: string;
+    icon: string;
+    danger?: boolean;
+    onClick: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,9 @@
+import { MessageItem as MessageItemType } from "@openim/wasm-client-sdk";
+interface MessageToolboxVisibility {
+    isDeliveredForUi: boolean;
+    isMine: boolean;
+    isRevocable: boolean;
+}
+export declare const useMessageToolboxVisibility: (message: MessageItemType, userID?: string) => MessageToolboxVisibility;
+export {};
+//# sourceMappingURL=useMessageToolboxVisibility.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageToolboxVisibility.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/useMessageToolboxVisibility.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,IAAI,eAAe,EAE/B,MAAM,yBAAyB,CAAC;AAIjC,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,2BAA2B,GACtC,SAAS,eAAe,EACxB,SAAS,MAAM,KACd,wBAcoB,CAAC"}

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

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import dayjs from "dayjs";
+import { MessageStatus, } from "@openim/wasm-client-sdk";
+const REVOKE_WINDOW_DAYS = 1;
+export const useMessageToolboxVisibility = (message, userID) => useMemo(() => {
+    const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === userID;
+    const isOlderThanRevokeWindow = dayjs().diff(dayjs(message === null || message === void 0 ? void 0 : message.sendTime), "days", true) >= REVOKE_WINDOW_DAYS;
+    const isDeliveredForUi = (message === null || message === void 0 ? void 0 : message.status) !== MessageStatus.Sending &&
+        (message === null || message === void 0 ? void 0 : message.status) !== MessageStatus.Failed;
+    return {
+        isDeliveredForUi,
+        isMine,
+        isRevocable: isMine && isDeliveredForUi && !isOlderThanRevokeWindow,
+    };
+}, [userID, message]);

package/dist/constants/moreOption.d.ts

@@ -0,0 +1,9 @@
+export interface MoreOptionConfig {
+    icon: string;
+    labelKey: string;
+    enabled: boolean;
+}
+export declare const DEFAULT_MORE_OPTIONS: MoreOptionConfig[];
+export declare function createMoreOptions(extraOptions?: MoreOptionConfig[]): MoreOptionConfig[];
+export declare const MORE_OPTIONS: MoreOptionConfig[];
+//# sourceMappingURL=moreOption.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moreOption.d.ts","sourceRoot":"","sources":["../../src/constants/moreOption.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,gBAAgB,EAgBlD,CAAC;AAEF,wBAAgB,iBAAiB,CAC/B,YAAY,GAAE,gBAAgB,EAAO,GACpC,gBAAgB,EAAE,CAEpB;AAED,eAAO,MAAM,YAAY,EAAE,gBAAgB,EAgBzC,CAAC"}

package/dist/constants/moreOption.js

@@ -0,0 +1,37 @@
+export const DEFAULT_MORE_OPTIONS = [
+    {
+        icon: "image-02-o",
+        labelKey: "thread_detail.more_option.media",
+        enabled: true,
+    },
+    {
+        icon: "camera-o",
+        labelKey: "thread_detail.more_option.camera",
+        enabled: false,
+    },
+    {
+        icon: "paperclip-o",
+        labelKey: "thread_detail.more_option.document",
+        enabled: true,
+    },
+];
+export function createMoreOptions(extraOptions = []) {
+    return [...DEFAULT_MORE_OPTIONS, ...extraOptions];
+}
+export const MORE_OPTIONS = createMoreOptions([
+    {
+        icon: "receipt-o",
+        labelKey: "thread_detail.more_option.order",
+        enabled: false,
+    },
+    {
+        icon: "shopping-basket-o",
+        labelKey: "thread_detail.more_option.product",
+        enabled: false,
+    },
+    {
+        icon: "calendar-active-o",
+        labelKey: "thread_detail.more_option.appointment",
+        enabled: false,
+    },
+]);

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

@@ -0,0 +1,3 @@
+import type { ConversationListItem } from "../../types/conversation";
+export declare const useActiveConversation: (conversationItems: ConversationListItem[]) => void;
+//# sourceMappingURL=useActiveConversation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useActiveConversation.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useActiveConversation.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,eAAO,MAAM,qBAAqB,GAChC,mBAAmB,oBAAoB,EAAE,SAuC1C,CAAC"}

package/dist/hooks/conversation/useActiveConversation.js

@@ -0,0 +1,31 @@
+"use client";
+import { useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+import useConversationStore from "../../store/conversation";
+export const useActiveConversation = (conversationItems) => {
+    const searchParams = useSearchParams();
+    const threadId = searchParams.get("threadId");
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const clearSelectedConversation = useConversationStore((state) => state.clearSelectedConversation);
+    useEffect(() => {
+        if (!threadId) {
+            clearSelectedConversation();
+            return;
+        }
+        setSelectedConversationId(threadId);
+        const matchedThread = conversationItems.find((item) => item.conversationID === threadId);
+        if (!matchedThread)
+            return;
+        const currentData = useConversationStore.getState().conversationData;
+        if ((currentData === null || currentData === void 0 ? void 0 : currentData.conversationID) !== threadId) {
+            setConversationData(matchedThread);
+        }
+    }, [
+        threadId,
+        conversationItems,
+        setSelectedConversationId,
+        setConversationData,
+        clearSelectedConversation,
+    ]);
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBotConversationDetail.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useBotConversationDetail.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,eAAO,MAAM,wBAAwB,GACnC,gBAAgB,MAAM,EACtB,SAAS,OAAO,iFAejB,CAAC"}