@droppii-org/chat-sdk 0.0.30 → 0.0.32

package/dist/components/chatBubble/ChatBubble.js

@@ -1,23 +1,18 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { FloatButton, Drawer, Popover } from "antd";
 import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
 import MessageList from "../message/MessageList";
 import useConversationStore from "../../store/conversation";
+import { useIsMobile } from "../../hooks/common/useIsMobile";
 const ChatBubble = ({ className }) => {
-    const [isMobile, setIsMobile] = useState(false);
+    const isMobile = useIsMobile();
     const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
     const [isOpen, setIsOpen] = useState(false);
     const toggleChat = () => {
         setIsOpen(!isOpen);
     };
-    useEffect(() => {
-        const handleResize = () => setIsMobile(window.innerWidth < 768);
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
     if (isMobile) {
         return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
                         right: 24,
@@ -28,13 +23,13 @@ const ChatBubble = ({ className }) => {
                         body: { padding: 0 },
                     }, classNames: {
                         wrapper: "!z-[9999]",
-                    }, children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: () => setIsOpen(false) }) })] }));
+                    }, width: "100%", push: false, children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: () => setIsOpen(false) }) })] }));
     }
-    return (_jsx(Popover, { placement: "topLeft", trigger: "click", content: _jsx("div", { style: { width: 400, height: 640 }, children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: () => setIsOpen(false) }) }), styles: { body: { padding: 0 } }, children: _jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
+    return (_jsx(Popover, { placement: "topLeft", trigger: "click", open: isOpen, onOpenChange: setIsOpen, content: _jsx("div", { className: "w-[400px] h-[600px]", children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: () => setIsOpen(false) }) }), styles: { body: { padding: 0 } }, children: _jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
                 right: 24,
                 bottom: 24,
                 width: 60,
                 height: 60,
-            }, onClick: toggleChat, className: className }) }));
+            }, className: className }) }));
 };
 export default ChatBubble;

package/dist/components/conversation/ConversationBySessionItem.d.ts

@@ -0,0 +1,7 @@
+import { ISessionByStatus } from "../../store/type";
+interface ConversationBySessionItemProps {
+    sessionItem: ISessionByStatus;
+}
+declare const ConversationBySessionItem: ({ sessionItem, }: ConversationBySessionItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ConversationBySessionItem;
+//# sourceMappingURL=ConversationBySessionItem.d.ts.map

package/dist/components/conversation/ConversationBySessionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,kBAEhC,8BAA8B,mDAwFhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/ConversationBySessionItem.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { useTranslation } from "react-i18next";
+import useConversationStore from "../../store/conversation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Avatar, Badge } from "antd";
+import { Icon } from "../icon";
+import { useChatContext } from "../../context/ChatContext";
+import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
+const ConversationBySessionItem = ({ sessionItem, }) => {
+    const { t } = useTranslation();
+    const { user } = useChatContext();
+    const conversation = useConversationStore((state) => state.conversationList.find((conv) => conv.conversationID === sessionItem.conversationId));
+    const isSelected = useConversationStore((state) => state.selectedConversationId === sessionItem.conversationId);
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const handleConversationClick = (conversation) => {
+        setConversationData(conversation);
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set("threadId", conversation.conversationID);
+        router.push(`${pathname}?${newSearchParams.toString()}`);
+        setSelectedConversationId(conversation.conversationID);
+    };
+    if (!conversation)
+        return null;
+    const { avatar, displayName = "" } = useConversationDisplayData(conversation);
+    return (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors ${isSelected ? "bg-blue-50" : "bg-white"}`, children: [isSelected && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Badge, { dot: true, status: "success", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: avatar, alt: displayName, children: displayName.charAt(0).toUpperCase() }) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: displayName }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: parseLatestMessage(conversation.latestMsg, user === null || user === void 0 ? void 0 : user.userID) })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [_jsx("span", { className: "text-xs text-gray-400", children: formatTimestamp(conversation.latestMsgSendTime) }), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.conversationID));
+};
+export default ConversationBySessionItem;
+const parseLatestMessage = (latestMsg, currentUserId) => {
+    var _a;
+    if (!latestMsg)
+        return "";
+    try {
+        const msgData = JSON.parse(latestMsg);
+        const contentType = msgData === null || msgData === void 0 ? void 0 : msgData.contentType;
+        const isMe = currentUserId && msgData.sendID === currentUserId;
+        const sender = isMe ? "Me" : (msgData === null || msgData === void 0 ? void 0 : msgData.senderNickname) || msgData.sendID;
+        switch (contentType) {
+            case MessageType.TextMessage:
+                if ((_a = msgData.textElem) === null || _a === void 0 ? void 0 : _a.content) {
+                    return `${sender}: ${msgData.textElem.content}`;
+                }
+                break;
+            case MessageType.PictureMessage:
+                return (_jsxs("span", { children: [sender, ": ", _jsx(Icon, { icon: "image-o", size: 16, className: "mr-1" }), "H\u00ECnh \u1EA3nh"] }));
+            case MessageType.VoiceMessage:
+                return `${sender}: [Tin nhắn thoại]`;
+            case MessageType.VideoMessage:
+                return `${sender}: [Video]`;
+            case MessageType.FileMessage:
+                return `${sender}: [File đính kèm]`;
+            default:
+                return "Tin nhắn không khả dụng";
+        }
+        return "Tin nhắn không khả dụng";
+    }
+    catch (error) {
+        console.error("Error parsing latest message:", error);
+        return "";
+    }
+};
+const formatTimestamp = (timestamp) => {
+    if (!timestamp)
+        return "";
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInMs = now.getTime() - date.getTime();
+    const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+    if (diffInDays === 0) {
+        // Today - show time
+        return date.toLocaleTimeString("vi-VN", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+        });
+    }
+    else if (diffInDays === 1) {
+        // Yesterday
+        return "Hôm qua";
+    }
+    else if (diffInDays < 7) {
+        // This week - show day name
+        return date.toLocaleDateString("vi-VN", { weekday: "long" });
+    }
+    else {
+        // Older - show date
+        return date.toLocaleDateString("vi-VN", {
+            day: "2-digit",
+            month: "2-digit",
+        });
+    }
+};

package/dist/components/conversation/ConversationItemList.d.ts

@@ -0,0 +1,7 @@
+import { DChatConversationItem } from "./type";
+declare const ConversationItemList: ({ conversation, isSelected, }: {
+    conversation: DChatConversationItem;
+    isSelected: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ConversationItemList;
+//# sourceMappingURL=ConversationItemList.d.ts.map

package/dist/components/conversation/ConversationItemList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationItemList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationItemList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAG/C,QAAA,MAAM,oBAAoB,GAAI,+BAG3B;IACD,YAAY,EAAE,qBAAqB,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;CACrB,4CA8EA,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/ConversationItemList.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Badge } from "antd";
+import useConversationStore from "../../store/conversation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+const ConversationItemList = ({ conversation, isSelected, }) => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const handleConversationClick = (conversation) => {
+        setConversationData(conversation);
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set("threadId", conversation.conversationID);
+        router.push(`${pathname}?${newSearchParams.toString()}`);
+        setSelectedConversationId(conversation.conversationID);
+    };
+    return (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors ${isSelected ? "bg-blue-50" : "bg-white"}`, children: [isSelected && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Badge, { dot: true, status: "success", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: conversation.faceURL, alt: conversation.showName, children: conversation.showName.charAt(0).toUpperCase() }) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: conversation.showName }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: conversation.lastMessage })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [_jsx("span", { className: "text-xs text-gray-400", children: conversation.timestamp }), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.conversationID));
+};
+export default ConversationItemList;

package/dist/components/conversation/DeskConversationList.d.ts

@@ -1,7 +1,3 @@
-interface DeskConversationListProps {
-    onConversationSelect?: (conversationId: string, threadId: string) => void;
-    className?: string;
-}
-declare const DeskConversationList: ({ onConversationSelect, className, }: DeskConversationListProps) => import("react/jsx-runtime").JSX.Element;
+declare const DeskConversationList: () => import("react/jsx-runtime").JSX.Element;
 export default DeskConversationList;
 //# sourceMappingURL=DeskConversationList.d.ts.map

package/dist/components/conversation/DeskConversationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA0FA,UAAU,yBAAyB;IACjC,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,oBAAoB,GAAI,sCAG3B,yBAAyB,4CAqK3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,oBAAoB,+CAkJzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -1,111 +1,57 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { Input, Avatar, Badge, Empty } from "antd";
+import { Input, Empty, Drawer, Button, Spin } from "antd";
 import { Icon } from "../icon";
-import { useChatContext } from "../../context/ChatContext";
 import useConversationStore from "../../store/conversation";
-const parseLatestMessage = (latestMsg, currentUserId) => {
-    var _a;
-    if (!latestMsg)
-        return "";
-    try {
-        const msgData = JSON.parse(latestMsg);
-        // Check for text message (textElem)
-        if ((_a = msgData.textElem) === null || _a === void 0 ? void 0 : _a.content) {
-            const isMe = currentUserId && msgData.sendID === currentUserId;
-            const sender = isMe ? "Me" : (msgData === null || msgData === void 0 ? void 0 : msgData.senderNickname) || msgData.sendID;
-            return `${sender}: ${msgData.textElem.content}`;
-        }
-        // TODO: Handle other message types (fileElem, videoElem, etc.)
-        // For now, return empty string for non-text messages
-        // This can be enhanced later to show appropriate previews
-        return "Tin nhắn không khả dụng";
-    }
-    catch (error) {
-        console.error("Error parsing latest message:", error);
-        return "";
-    }
-};
-// Utility function to format timestamp
-const formatTimestamp = (timestamp) => {
-    if (!timestamp)
-        return "";
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffInMs = now.getTime() - date.getTime();
-    const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
-    if (diffInDays === 0) {
-        // Today - show time
-        return date.toLocaleTimeString("vi-VN", {
-            hour: "2-digit",
-            minute: "2-digit",
-            hour12: false,
-        });
-    }
-    else if (diffInDays === 1) {
-        // Yesterday
-        return "Hôm qua";
-    }
-    else if (diffInDays < 7) {
-        // This week - show day name
-        return date.toLocaleDateString("vi-VN", { weekday: "long" });
-    }
-    else {
-        // Older - show date
-        return date.toLocaleDateString("vi-VN", {
-            day: "2-digit",
-            month: "2-digit",
-        });
-    }
-};
-// Transform API data to UI-friendly format
-const transformConversationData = (apiData, currentUserId) => {
-    return apiData.map((conv) => (Object.assign(Object.assign({}, conv), { id: conv.conversationID, threadId: conv.conversationID, name: conv.showName || "Unknown User", username: conv.userID || conv.groupID || "", avatar: conv.faceURL || "", lastMessage: parseLatestMessage(conv.latestMsg, currentUserId), timestamp: formatTimestamp(conv.latestMsgSendTime), unreadCount: conv.unreadCount })));
-};
-const DeskConversationList = ({ onConversationSelect, className = "", }) => {
-    const [searchQuery, setSearchQuery] = useState("");
+import { useTranslation } from "react-i18next";
+import { useBoolean, useDebounceFn } from "ahooks";
+import SearchConversation from "../searchConversation";
+import useSessionStore from "../../store/session";
+import { useGetSessionByTagOrStatus } from "../../hooks/session/useGetSessionByTagOrStatus";
+import InfiniteScroll from "react-infinite-scroll-component";
+import ConversationBySessionItem from "./ConversationBySessionItem";
+const DeskConversationList = () => {
+    const searchInputRef = useRef(null);
+    const { t } = useTranslation();
+    const [search, setSearch] = useState("");
+    const [showSearch, { setTrue: setShowSearchTrue, setFalse: setShowSearchFalse },] = useBoolean(false);
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
-    const { user } = useChatContext();
     const setConversationData = useConversationStore((state) => state.setConversationData);
-    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const conversationList = useConversationStore((state) => state.conversationList);
-    console.log({ conversationList });
-    // Transform real conversation data from the API
-    const conversations = transformConversationData(conversationList || [], user === null || user === void 0 ? void 0 : user.userID);
-    const handleConversationClick = (conversation) => {
-        setConversationData(conversation);
-        const newSearchParams = new URLSearchParams(searchParams);
-        newSearchParams.set("threadId", conversation.conversationID);
-        router.push(`${pathname}?${newSearchParams.toString()}`);
-        setSelectedConversationId(conversation.conversationID);
-        onConversationSelect === null || onConversationSelect === void 0 ? void 0 : onConversationSelect(conversation.conversationID, conversation.conversationID);
-    };
+    const filterSummary = useSessionStore((state) => state.filterSummary);
+    const { dataFlatten: sessions, isLoading, error, hasNextPage, fetchNextPage, isFetchingNextPage, } = useGetSessionByTagOrStatus(filterSummary);
+    const { run: deboundSearch } = useDebounceFn((value) => {
+        setSearch(value);
+    }, { wait: 500 });
     useEffect(() => {
         const threadId = searchParams.get("threadId");
         if (threadId) {
             setSelectedConversationId(threadId);
-            const selectedConversation = conversations.find((conv) => conv.conversationID === threadId);
+            const selectedConversation = conversationList.find((conv) => conv.conversationID === threadId);
             if (selectedConversation) {
                 setConversationData(selectedConversation);
             }
         }
-        else if (conversations.length > 0) {
-            setSelectedConversationId(conversations[0].conversationID);
-            setConversationData(conversations[0]);
+        else if (conversationList.length > 0) {
+            setSelectedConversationId(conversationList[0].conversationID);
+            setConversationData(conversationList[0]);
             const newSearchParams = new URLSearchParams(searchParams);
-            newSearchParams.set("threadId", conversations[0].conversationID);
+            newSearchParams.set("threadId", conversationList[0].conversationID);
             router.replace(`${pathname}?${newSearchParams.toString()}`);
         }
-    }, [searchParams, conversations.length]);
-    return (_jsxs("div", { className: `flex flex-col h-full bg-white border-r border-gray-200 w-[320px] ${className}`, children: [_jsx("div", { className: "p-3 border-b border-gray-200", children: _jsx(Input, { placeholder: "T\u00ECm ki\u1EBFm", prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "rounded-lg" }) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [conversations.map((conversation) => (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors ${selectedConversationId === conversation.conversationID
-                            ? "bg-blue-50"
-                            : "bg-white"}`, children: [selectedConversationId === conversation.conversationID && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Badge, { dot: true, status: "success", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: conversation.faceURL, alt: conversation.showName, children: conversation.showName.charAt(0).toUpperCase() }) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: conversation.showName }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: conversation.lastMessage })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [_jsx("span", { className: "text-xs text-gray-400", children: conversation.timestamp }), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.conversationID))), conversations.length === 0 && (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 48, className: "text-gray-300" }), description: _jsxs("div", { children: [_jsx("p", { className: "text-lg font-medium mb-2 text-gray-500", children: "Kh\u00F4ng t\u00ECm th\u1EA5y cu\u1ED9c tr\u00F2 chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-gray-400", children: searchQuery
-                                            ? "Thử tìm kiếm với từ khóa khác"
-                                            : "Chưa có cuộc trò chuyện nào" })] }) }) }))] })] }));
+    }, [searchParams, conversationList]);
+    return (_jsxs("div", { className: `flex flex-col h-full bg-white border-r border-gray-200 w-[320px]`, children: [_jsx("div", { className: "p-3 border-b border-gray-100", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { ref: searchInputRef, placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), onChange: (e) => deboundSearch(e.target.value), className: "rounded-lg text-sm flex-1 h-[36px]", size: "large", allowClear: true, onClick: setShowSearchTrue }), showSearch && (_jsx(Button, { onClick: setShowSearchFalse, variant: "outlined", className: "p-0 w-[36px] h-[36px] text-gray-500", children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] }) }), _jsx("div", { id: "scrollableDiv", style: {
+                    height: "100%",
+                    overflow: "auto",
+                }, children: _jsxs(InfiniteScroll, { dataLength: (sessions === null || sessions === void 0 ? void 0 : sessions.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableDiv", children: [(sessions === null || sessions === void 0 ? void 0 : sessions.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("no_conversation") }) })), sessions === null || sessions === void 0 ? void 0 : sessions.map((session) => (_jsx(ConversationBySessionItem, { sessionItem: session }, session.conversationId)))] }) }), _jsx(Drawer, { open: showSearch, mask: false, closeIcon: false, styles: {
+                    body: {
+                        padding: 0,
+                    },
+                }, getContainer: false, width: "100%", children: _jsx(SearchConversation, {}) })] }));
 };
 export default DeskConversationList;

package/dist/components/mediaCollection/FileCollection.d.ts

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

package/dist/components/mediaCollection/FileCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileCollection.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/FileCollection.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,cAAc,+CA4GnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/mediaCollection/FileCollection.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { useMediaCollection } from "../../hooks/collection/useMediaCollection";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { Empty, Spin } from "antd";
+import { useCallback } from "react";
+import dayjs from "dayjs";
+import useConversationStore from "../../store/conversation";
+import { useTranslation } from "react-i18next";
+import { documentIcon } from "../../assets/svg";
+import { shortenFileName } from "../message/footer/FilePreview";
+import { renderFileSize } from "../../utils/common";
+import { TOP_OFFSET } from ".";
+const FileCollection = () => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useMediaCollection({
+        recvID: selectedSourceId,
+        contentType: MessageType.FileMessage,
+    });
+    const handleDownload = (url, fileName) => {
+        if (!url) {
+            console.warn("Không có link file để tải");
+            return;
+        }
+        const link = document.createElement("a");
+        link.href = url;
+        if (fileName) {
+            link.setAttribute("download", fileName);
+        }
+        link.setAttribute("target", "_blank");
+        link.setAttribute("rel", "noopener noreferrer");
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+    };
+    const renderItem = useCallback((date, items) => {
+        return (_jsxs("div", { className: "px-3", children: [_jsx("span", { className: "text-sm font-medium text-gray-500", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "flex flex-col gap-1 mt-2", children: items.map((item) => {
+                        var _a, _b, _c;
+                        const fileContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-2 cursor-pointer", onClick: () => handleDownload((fileContent === null || fileContent === void 0 ? void 0 : fileContent.sourceUrl) || "", (fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) || ""), children: [documentIcon, _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("span", { className: "text-sm font-medium", children: shortenFileName((fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) || "", {
+                                                maxLength: 32,
+                                            }) }), _jsx("span", { className: "text-xs text-gray-500", children: `${renderFileSize(fileContent.fileSize || 0)}  -  ${dayjs(((_b = item === null || item === void 0 ? void 0 : item.chatLog) === null || _b === void 0 ? void 0 : _b.sendTime) || 0).format("HH:mm")}` })] })] }, (_c = item.chatLog) === null || _c === void 0 ? void 0 : _c.clientMsgID));
+                    }) })] }, date));
+    }, []);
+    if (dataFlatten.length === 0 && !isLoading)
+        return _jsx(Empty, { description: t("no_media_files") });
+    if (isLoading)
+        return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
+    return (_jsx("div", { id: "scrollableFileDiv", className: "h-full overflow-auto", style: { maxHeight: `calc(100vh - ${TOP_OFFSET}px)` }, children: _jsx(InfiniteScroll, { dataLength: Object.keys(groupedData).length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableFileDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }));
+};
+export default FileCollection;

package/dist/components/mediaCollection/ImageCollection.d.ts

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

package/dist/components/mediaCollection/ImageCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCollection.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/ImageCollection.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,eAAe,+CAoHpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/mediaCollection/ImageCollection.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { useMediaCollection } from "../../hooks/collection/useMediaCollection";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { Button, Empty, Image, Spin } from "antd";
+import { useCallback } from "react";
+import dayjs from "dayjs";
+import useConversationStore from "../../store/conversation";
+import { images } from "../../constants/images";
+import { useTranslation } from "react-i18next";
+import { TOP_OFFSET } from ".";
+import { DownloadOutlined } from "@ant-design/icons";
+const ImageCollection = () => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useMediaCollection({
+        recvID: selectedSourceId,
+        contentType: MessageType.PictureMessage,
+    });
+    const handleDownload = (imageUrl) => {
+        if (!imageUrl)
+            return;
+        const link = document.createElement("a");
+        link.href = imageUrl;
+        link.download = imageUrl.substring(imageUrl.lastIndexOf("/") + 1);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    };
+    const renderItem = useCallback((date, items) => {
+        return (_jsxs("div", { className: "mb-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "grid grid-cols-3 justify-start gap-px py-2", children: items.map((item) => {
+                        var _a, _b, _c, _d;
+                        const imageContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        const sourceUrl = ((_b = imageContent.sourcePicture) === null || _b === void 0 ? void 0 : _b.url) ||
+                            ((_c = imageContent.snapshotPicture) === null || _c === void 0 ? void 0 : _c.url);
+                        return (_jsx("div", { className: "border inline-block w-full h-full aspect-square", children: _jsx(Image, { rootClassName: "cursor-pointer w-full h-full", className: "w-full !h-full object-cover", src: sourceUrl, preview: true, placeholder: _jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }), fallback: images.imageFailed }) }, (_d = item === null || item === void 0 ? void 0 : item.chatLog) === null || _d === void 0 ? void 0 : _d.clientMsgID));
+                    }) })] }, date));
+    }, []);
+    if (dataFlatten.length === 0 && !isLoading)
+        return _jsx(Empty, { description: t("no_media_files") });
+    if (isLoading)
+        return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
+    return (_jsx("div", { id: "scrollableImageDiv", className: "h-full overflow-auto", style: { maxHeight: `calc(100vh - ${TOP_OFFSET}px)` }, children: _jsx(Image.PreviewGroup, { preview: {
+                toolbarRender: (originalNode, info) => {
+                    var _a;
+                    const imageUrl = (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url;
+                    return (_jsxs("div", { className: "flex flex-col justify-center gap-2", children: [originalNode, imageUrl && (_jsx(Button, { type: "primary", icon: _jsx(DownloadOutlined, {}), className: "self-center", onClick: () => handleDownload(imageUrl), children: t("download") }))] }));
+                },
+            }, children: _jsx(InfiniteScroll, { dataLength: dataFlatten.length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableImageDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }) }));
+};
+export default ImageCollection;

package/dist/components/mediaCollection/LinkCollection.d.ts

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

package/dist/components/mediaCollection/LinkCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCollection.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/LinkCollection.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc,+CAInB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/mediaCollection/LinkCollection.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Empty } from "antd";
+import { useTranslation } from "react-i18next";
+const LinkCollection = () => {
+    const { t } = useTranslation();
+    return _jsx(Empty, { description: t("no_media_files") });
+};
+export default LinkCollection;

package/dist/components/mediaCollection/VideoCollection.d.ts

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

package/dist/components/mediaCollection/VideoCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoCollection.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/VideoCollection.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,eAAe,+CA8HpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/mediaCollection/VideoCollection.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { useMediaCollection } from "../../hooks/collection/useMediaCollection";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { Carousel, Empty, Image, Modal, Spin } from "antd";
+import { useCallback, useState } from "react";
+import dayjs from "dayjs";
+import useConversationStore from "../../store/conversation";
+import { useBoolean } from "ahooks";
+import { images } from "../../constants/images";
+import { Icon } from "../icon";
+import { useTranslation } from "react-i18next";
+import { TOP_OFFSET } from ".";
+const VideoCollection = () => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useMediaCollection({
+        recvID: selectedSourceId,
+        contentType: MessageType.VideoMessage,
+    });
+    const [open, { setTrue, setFalse }] = useBoolean(false);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const handleOpenPreview = (index) => {
+        setCurrentIndex(index);
+        setTrue();
+    };
+    const renderItem = useCallback((date, items) => {
+        return (_jsxs("div", { className: "mb-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "grid grid-cols-3 justify-start gap-px py-2", children: items.map((item) => {
+                        var _a, _b;
+                        const videoContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        const globalIndex = dataFlatten.findIndex((v) => { var _a, _b; return ((_a = v.chatLog) === null || _a === void 0 ? void 0 : _a.clientMsgID) === ((_b = item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID); });
+                        return (_jsxs("div", { className: "border relative w-full h-full aspect-square cursor-pointer", onClick: () => handleOpenPreview(globalIndex), children: [_jsx(Image, { rootClassName: "w-full h-full", src: videoContent.snapshotUrl, alt: "video thumbnail", className: "w-full !h-full object-cover", fallback: images.imageFailed }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 text-white text-2xl", children: _jsx(Icon, { icon: "play-b", size: 24, color: "white" }) })] }, (_b = item === null || item === void 0 ? void 0 : item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID));
+                    }) })] }, date));
+    }, []);
+    if (dataFlatten.length === 0 && !isLoading)
+        return _jsx(Empty, { description: t("no_media_files") });
+    if (isLoading)
+        return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
+    return (_jsxs("div", { id: "scrollableVideoDiv", className: "h-full overflow-auto", style: { maxHeight: `calc(100vh - ${TOP_OFFSET}px)` }, children: [_jsx(InfiniteScroll, { dataLength: Object.keys(groupedData).length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableVideoDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }), _jsx(Modal, { open: open, onCancel: setFalse, footer: null, centered: true, styles: {
+                    content: {
+                        padding: 0,
+                    },
+                }, children: _jsx(Carousel, { dots: true, infinite: false, initialSlide: currentIndex, afterChange: (i) => setCurrentIndex(i), children: dataFlatten.map((item, idx) => {
+                        var _a;
+                        const videoContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        const sourceUrl = videoContent.videoUrl;
+                        return (_jsx("div", { style: { textAlign: "center" }, children: _jsx("video", { src: sourceUrl, controls: true, autoPlay: idx === currentIndex, style: { width: "100%", maxHeight: "80vh" } }) }, idx));
+                    }) }) })] }));
+};
+export default VideoCollection;

package/dist/components/mediaCollection/index.d.ts

@@ -0,0 +1,10 @@
+export declare enum MediaCollectionTabKey {
+    Image = "image",
+    Video = "video",
+    File = "file",
+    Link = "link"
+}
+export declare const TOP_OFFSET = 128;
+declare const MediaCollection: () => import("react/jsx-runtime").JSX.Element;
+export default MediaCollection;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/mediaCollection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/index.tsx"],"names":[],"mappings":"AAaA,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,eAAO,MAAM,UAAU,MAAM,CAAC;AAE9B,QAAA,MAAM,eAAe,+CA8EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}