@droppii-org/chat-sdk 0.1.54 → 0.1.56

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

@@ -3,12 +3,13 @@ interface MessageItemProps {
     message: MessageItemType;
     allMessages: MessageItemType[];
     isGroupChat?: boolean;
+    forceHideTip?: boolean;
     contextMenuOpen?: boolean;
     onContextMenuOpenChange?: (open: boolean) => void;
     onRevokeMessage?: (clientMsgID: string) => void;
     onQuoteMessage?: (message: MessageItemType) => void;
     onPressQuoteMessage?: (clientMsgID: string) => void;
 }
-declare const MessageItem: ({ message, allMessages, isGroupChat, 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, }: 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;AA+BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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,wIASlB,gBAAgB,mDAkRlB,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;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"}

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

@@ -25,10 +25,8 @@ import RevokeMessageItem from "./RevokeMessage";
 import QuoteMessageItem from "./QuoteMessage";
 import SystemLogMessageItem from "./SystemLogMessage";
 import { isSystemLogMessageType } from "../../../utils/messageLog";
-import { BOT_BUTTONS_MESSAGE_TYPE } from "../../../constants/botFlow";
-import BotButtonMessage from "../../../components/biz-thread-detail/bot/BotButtonMessage";
 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, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }) => {
+const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }) => {
     var _a;
     const { t } = useTranslation();
     const { resendMessage } = useSendMessage();
@@ -54,8 +52,6 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, contextMenuOpe
                 return _jsx(SystemLogMessageItem, { message: item });
             case MessageType.RevokeMessage:
                 return _jsx(RevokeMessageItem, {});
-            case BOT_BUTTONS_MESSAGE_TYPE:
-                return _jsx(BotButtonMessage, {});
             default:
                 return _jsx(TextMessageItem, { message: item });
         }
@@ -73,7 +69,6 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, contextMenuOpe
     }, [userID, message]);
     const contextMenuItems = useMemo(() => {
         if ((message === null || message === void 0 ? void 0 : message.contentType) === MessageType.RevokeMessage ||
-            (message === null || message === void 0 ? void 0 : message.contentType) === BOT_BUTTONS_MESSAGE_TYPE ||
             isSystemLogMessageType(message === null || message === void 0 ? void 0 : message.contentType)) {
             return [];
         }
@@ -132,7 +127,7 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, contextMenuOpe
     const showPeerInfo = isGroupChat || showSenderInfo;
     const showAvatar = showPeerInfo && !isMine && !nextSameUser;
     const showSenderName = showPeerInfo && !isMine && !prevSameUser;
-    const showTip = !nextSameUser;
+    const showTip = forceHideTip ? false : !nextSameUser;
     if (!isCrm && isInternalMessage) {
         return null;
     }

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

@@ -1,8 +1,3 @@
-import { MessageItem, MessageType } from "@openim/wasm-client-sdk";
 export declare const BOT_DEFAULT_BUTTON_ID = "default-item-button";
 export declare const BOT_BUTTON_MENU_THRESHOLD = 3;
-export declare const BOT_BUTTONS_MESSAGE_TYPE: MessageType;
-export declare const buildBotButtonsMessage: ({ sendID, }: {
-    sendID: string;
-}) => MessageItem;
 //# sourceMappingURL=botFlow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"botFlow.d.ts","sourceRoot":"","sources":["../../src/constants/botFlow.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EAEX,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAE3C,eAAO,MAAM,wBAAwB,EAAwB,WAAW,CAAC;AAEzE,eAAO,MAAM,sBAAsB,GAAI,aAEpC;IACD,MAAM,EAAE,MAAM,CAAC;CAChB,KAAG,WAS0B,CAAC"}
+{"version":3,"file":"botFlow.d.ts","sourceRoot":"","sources":["../../src/constants/botFlow.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,eAAO,MAAM,yBAAyB,IAAI,CAAC"}

package/dist/constants/botFlow.js

@@ -1,13 +1,2 @@
-import { MessageStatus, } from "@openim/wasm-client-sdk";
 export const BOT_DEFAULT_BUTTON_ID = "default-item-button";
 export const BOT_BUTTON_MENU_THRESHOLD = 3;
-export const BOT_BUTTONS_MESSAGE_TYPE = 990001;
-export const buildBotButtonsMessage = ({ sendID, }) => ({
-    clientMsgID: "bot-buttons",
-    contentType: BOT_BUTTONS_MESSAGE_TYPE,
-    sendID,
-    sendTime: Date.now(),
-    status: MessageStatus.Succeed,
-    isInternal: false,
-    ex: "",
-});

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

@@ -1,12 +1,13 @@
 import { type BotInputButtonsBlock } from "../../types/biz";
-export type BotFlowStatus = "idle" | "not_started" | "running" | "waiting" | "ended";
+export type BotFlowStatus = "running" | "not_started";
 interface UseBotFlowParams {
     conversationId: string;
     isBotThread: boolean;
 }
 export declare const useBotFlow: ({ conversationId, isBotThread, }: UseBotFlowParams) => {
-    status: "running" | "not_started";
+    status: BotFlowStatus;
     isProcessing: boolean;
+    shouldShowButtons: boolean;
     currentButtonsBlock: BotInputButtonsBlock | null;
     start: () => Promise<void>;
     selectButton: (actionId: string) => Promise<void>;

package/dist/hooks/biz/useBotFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBotFlow.d.ts","sourceRoot":"","sources":["../../../src/hooks/biz/useBotFlow.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,aAAa,CAAC;AAKrB,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,aAAa,GACb,SAAS,GACT,SAAS,GACT,OAAO,CAAC;AAEZ,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAYD,eAAO,MAAM,UAAU,GAAI,kCAGxB,gBAAgB;;;;;6BA0DqB,MAAM;;CAkB7C,CAAC"}
+{"version":3,"file":"useBotFlow.d.ts","sourceRoot":"","sources":["../../../src/hooks/biz/useBotFlow.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,aAAa,CAAC;AASrB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;AAEtD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAoBD,eAAO,MAAM,UAAU,GAAI,kCAGxB,gBAAgB;;;;;;6BAoGqB,MAAM;;CAqC7C,CAAC"}

package/dist/hooks/biz/useBotFlow.js

@@ -1,6 +1,9 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { BotBlockType, BotFlowNodeType, } from "../../types/biz";
+import { useSendMessage } from "../../hooks/message/useSendMessage";
+import useAuthStore from "../../store/auth";
+import emitter from "../../utils/events";
 import { useConversationDetail } from "./useConversationDetail";
 import { useRunBotFlow } from "./useRunBotFlow";
 import { useResetBotFlow } from "./useResetBotFlow";
@@ -8,16 +11,33 @@ const INITIAL_BOT_FLOW_STATE = {
     conversationId: "",
     flowCurrentStep: null,
 };
+const parseMessageFlowGroupId = (ex) => {
+    var _a;
+    try {
+        return (_a = JSON.parse(ex || "{}").flow) === null || _a === void 0 ? void 0 : _a.groupId;
+    }
+    catch (_b) {
+        return undefined;
+    }
+};
 export const useBotFlow = ({ conversationId, isBotThread, }) => {
     var _a;
     const [botFlowState, setBotFlowState] = useState(INITIAL_BOT_FLOW_STATE);
-    const { conversationId: storedConversationId, flowCurrentStep, } = botFlowState;
+    const { conversationId: storedConversationId, flowCurrentStep } = botFlowState;
+    const [pendingGroupId, setPendingGroupId] = useState(null);
+    const latestBotFlowGroupIdRef = useRef(null);
+    const authUserID = useAuthStore((state) => state.userID);
     const detailQuery = useConversationDetail(conversationId, isBotThread);
     const runMutation = useRunBotFlow();
     const resetMutation = useResetBotFlow();
+    const { sendMergeMessage } = useSendMessage({
+        scrollEvent: "BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM",
+    });
     useEffect(() => {
         if (!isBotThread) {
             setBotFlowState(INITIAL_BOT_FLOW_STATE);
+            setPendingGroupId(null);
+            latestBotFlowGroupIdRef.current = null;
             return;
         }
         if (detailQuery.data) {
@@ -25,13 +45,32 @@ export const useBotFlow = ({ conversationId, isBotThread, }) => {
                 conversationId,
                 flowCurrentStep: detailQuery.data.flowCurrentStep,
             });
+            setPendingGroupId(null);
+            latestBotFlowGroupIdRef.current = null;
         }
     }, [isBotThread, conversationId, detailQuery.data]);
+    useEffect(() => {
+        const handleNewMessage = (message) => {
+            if (message.sendID === authUserID)
+                return;
+            const groupId = parseMessageFlowGroupId(message.ex);
+            if (!groupId)
+                return;
+            latestBotFlowGroupIdRef.current = groupId;
+            setPendingGroupId((currentGroupId) => currentGroupId === groupId ? null : currentGroupId);
+        };
+        emitter.on("PUSH_NEW_MSG", handleNewMessage);
+        return () => {
+            emitter.off("PUSH_NEW_MSG", handleNewMessage);
+        };
+    }, [authUserID]);
     const activeStep = storedConversationId === conversationId ? flowCurrentStep : null;
     const currentButtonsBlock = (_a = activeStep === null || activeStep === void 0 ? void 0 : activeStep.data.children.find((child) => child.type === BotBlockType.InputButtons)) !== null && _a !== void 0 ? _a : null;
     const isProcessing = runMutation.isPending || resetMutation.isPending;
+    const shouldShowButtons = !!currentButtonsBlock && !isProcessing && !pendingGroupId;
     const status = (activeStep === null || activeStep === void 0 ? void 0 : activeStep.type) === BotFlowNodeType.Start ? "not_started" : "running";
     const runStep = async (step, actionId = null) => {
+        latestBotFlowGroupIdRef.current = null;
         const result = await runMutation.mutateAsync({
             conversationId,
             groupId: step.id,
@@ -42,6 +81,11 @@ export const useBotFlow = ({ conversationId, isBotThread, }) => {
             conversationId,
             flowCurrentStep: result.flowNextStep,
         });
+        const nextGroupId = result.flowNextStep.id;
+        setPendingGroupId(result.havingBotMessage &&
+            latestBotFlowGroupIdRef.current !== nextGroupId
+            ? nextGroupId
+            : null);
     };
     const start = async () => {
         if (!activeStep)
@@ -51,6 +95,20 @@ export const useBotFlow = ({ conversationId, isBotThread, }) => {
     const selectButton = async (actionId) => {
         if (!activeStep)
             return;
+        const flow = {
+            groupId: activeStep.id,
+            childId: null,
+            actionId,
+        };
+        const selectedButton = currentButtonsBlock === null || currentButtonsBlock === void 0 ? void 0 : currentButtonsBlock.data.buttons.find((button) => button.id === actionId);
+        if (selectedButton) {
+            await sendMergeMessage({
+                plainText: selectedButton.label,
+                richText: "",
+                isInternal: false,
+                flow,
+            });
+        }
         await runStep(activeStep, actionId);
     };
     const restart = async () => {
@@ -60,6 +118,7 @@ export const useBotFlow = ({ conversationId, isBotThread, }) => {
     return {
         status,
         isProcessing,
+        shouldShowButtons,
         currentButtonsBlock,
         start,
         selectButton,

package/dist/hooks/biz/useRunBotFlow.d.ts

@@ -1,5 +1,6 @@
-import type { RunBotFlowBody, RunBotFlowResponse } from "../../types/biz";
-export interface RunBotFlowParams extends RunBotFlowBody {
+import type { BotFlowMeta } from "../../types/chat";
+import type { RunBotFlowResponse } from "../../types/biz";
+export interface RunBotFlowParams extends BotFlowMeta {
     conversationId: string;
 }
 export declare const useRunBotFlow: () => import("@tanstack/react-query").UseMutationResult<RunBotFlowResponse, Error, RunBotFlowParams, unknown>;

package/dist/hooks/biz/useRunBotFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRunBotFlow.d.ts","sourceRoot":"","sources":["../../../src/hooks/biz/useRunBotFlow.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,+GAgBzB,CAAC"}
+{"version":3,"file":"useRunBotFlow.d.ts","sourceRoot":"","sources":["../../../src/hooks/biz/useRunBotFlow.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,+GAgBzB,CAAC"}

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"}

package/dist/hooks/conversation/useBotConversationDetail.js

@@ -0,0 +1,18 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { apiInstance } from "../../services/api";
+import { ENDPOINTS } from "../../services/routes";
+import { QUERY_KEYS } from "../../services/query";
+export const useBotConversationDetail = (conversationId, enabled) => {
+    return useQuery({
+        queryKey: [QUERY_KEYS.GET_BIZ_CONVERSATION_DETAIL, conversationId],
+        queryFn: async () => {
+            const res = await apiInstance.get(ENDPOINTS.chatService.getBizConversationDetail(conversationId));
+            return res.data.data;
+        },
+        enabled: enabled && !!conversationId,
+        staleTime: 0,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+    });
+};

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

@@ -0,0 +1,18 @@
+import { type BotInputButtonsBlock } from "../../types/conversation";
+export type BotFlowStatus = "running" | "not_started";
+interface UseBotFlowParams {
+    conversationId: string;
+    isBotThread: boolean;
+}
+export declare const useBotFlow: ({ conversationId, isBotThread, }: UseBotFlowParams) => {
+    status: BotFlowStatus;
+    flowIsEnd: boolean;
+    isProcessing: boolean;
+    shouldShowButtons: boolean;
+    currentButtonsBlock: BotInputButtonsBlock | null;
+    start: () => Promise<void>;
+    selectButton: (actionId: string) => Promise<void>;
+    restart: () => Promise<void>;
+};
+export {};
+//# sourceMappingURL=useBotFlow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBotFlow.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useBotFlow.ts"],"names":[],"mappings":"AAKA,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAU9B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;AAEtD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAsBD,eAAO,MAAM,UAAU,GAAI,kCAGxB,gBAAgB;;;;;;;6BA0GqB,MAAM;;CAiD7C,CAAC"}