@droppii-org/chat-sdk 0.0.31 → 0.0.33

package/dist/components/chatBubble/ChatBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chatBubble/ChatBubble.tsx"],"names":[],"mappings":"AAQA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,eAAe,eAAe,4CAkFjD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chatBubble/ChatBubble.tsx"],"names":[],"mappings":"AAQA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,eAAe,eAAe,4CAmFjD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/chatBubble/ChatBubble.js

@@ -23,7 +23,7 @@ const ChatBubble = ({ className }) => {
                         body: { padding: 0 },
                     }, classNames: {
                         wrapper: "!z-[9999]",
-                    }, width: "100%", 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", 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,

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/DeskConversationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAsGA,QAAA,MAAM,oBAAoB,+CAqHzB,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,127 +1,57 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { Input, Empty } from "antd";
-import { MessageType } from "@openim/wasm-client-sdk";
+import { Input, Empty, Drawer, Button, Spin } from "antd";
 import { Icon } from "../icon";
-import { useChatContext } from "../../context/ChatContext";
 import useConversationStore from "../../store/conversation";
-import ConversationItemList from "./ConversationItemList";
-import { DChatSDK } from "../../constants/sdk";
-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-b", 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 "";
-    }
-};
-// 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 })));
-};
+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 [searchQuery, setSearchQuery] = useState("");
-    const [conversationIdFromSession, setConversationIdFromSession] = useState([]);
+    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);
-    const assignedSessionList = useConversationStore((state) => state.assignedSessionList);
-    // Transform real conversation data from the API
-    const conversations = useMemo(() => {
-        const filteredConversation = conversationList.filter((conv) => conversationIdFromSession.includes(conv.conversationID));
-        return transformConversationData(filteredConversation || [], user === null || user === void 0 ? void 0 : user.userID);
-    }, [conversationList, conversationIdFromSession, user === null || user === void 0 ? void 0 : user.userID]);
-    useEffect(() => {
-        const conversationIds = assignedSessionList.map((session) => session.conversationId);
-        DChatSDK.getMultipleConversation(conversationIds).then(({ data }) => {
-            const extractConversationIDs = data.map((conv) => conv.conversationID);
-            setConversationIdFromSession(extractConversationIDs);
-        });
-    }, [assignedSessionList]);
-    console.log({ assignedSessionList });
+    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]`, 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) => (_jsx(ConversationItemList, { conversation: conversation, isSelected: selectedConversationId === conversation.conversationID }, 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.map

@@ -1 +1 @@
-{"version":3,"file":"FileCollection.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/FileCollection.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,cAAc,+CA8GnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"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

@@ -10,6 +10,7 @@ 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);
@@ -34,7 +35,7 @@ const FileCollection = () => {
         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 MMM, YYYY") }), _jsx("div", { className: "flex flex-col gap-1 mt-2", children: items.map((item) => {
+        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) || "", {
@@ -46,9 +47,6 @@ const FileCollection = () => {
         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", style: {
-            height: "100%",
-            overflow: "auto",
-        }, 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)) }) }));
+    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.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCollection.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/ImageCollection.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,eAAe,+CAwFpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"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

@@ -2,12 +2,14 @@ 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, Image, Spin } from "antd";
+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);
@@ -15,8 +17,18 @@ const ImageCollection = () => {
         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 MMM, YYYY") }), _jsx("div", { className: "grid grid-cols-3 justify-start gap-px py-2", children: items.map((item) => {
+        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) ||
@@ -28,10 +40,12 @@ const ImageCollection = () => {
         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", style: {
-            height: "100%",
-            overflow: "auto",
-            display: "flex",
-        }, children: _jsx(Image.PreviewGroup, { 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: "scrollableImageDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }) }));
+    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/VideoCollection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoCollection.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/VideoCollection.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,eAAe,+CAiIpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"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

@@ -10,6 +10,7 @@ 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);
@@ -35,11 +36,7 @@ const VideoCollection = () => {
         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", style: {
-            height: "100%",
-            overflow: "auto",
-            display: "flex",
-        }, 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: {
+    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,
                     },

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

@@ -1,9 +1,10 @@
-export declare enum TabKey {
+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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/index.tsx"],"names":[],"mappings":"AAaA,oBAAY,MAAM;IAChB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,eAAe,+CAsEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"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"}

package/dist/components/mediaCollection/index.js

@@ -10,45 +10,49 @@ import { useIsMobile } from "../../hooks/common/useIsMobile";
 import { useMemo } from "react";
 import FileCollection from "./FileCollection";
 import LinkCollection from "./LinkCollection";
-export var TabKey;
-(function (TabKey) {
-    TabKey["Image"] = "image";
-    TabKey["Video"] = "video";
-    TabKey["File"] = "file";
-    TabKey["Link"] = "link";
-})(TabKey || (TabKey = {}));
+export var MediaCollectionTabKey;
+(function (MediaCollectionTabKey) {
+    MediaCollectionTabKey["Image"] = "image";
+    MediaCollectionTabKey["Video"] = "video";
+    MediaCollectionTabKey["File"] = "file";
+    MediaCollectionTabKey["Link"] = "link";
+})(MediaCollectionTabKey || (MediaCollectionTabKey = {}));
+export const TOP_OFFSET = 128; /// HEADER + TAB HEIGHT
 const MediaCollection = () => {
     const { t } = useTranslation();
     const [isOpen, { toggle }] = useBoolean(false);
     const isMobile = useIsMobile();
     const items = useMemo(() => {
+        if (!isOpen)
+            return [];
         return [
             {
-                key: TabKey.Image,
+                key: MediaCollectionTabKey.Image,
                 label: "Ảnh",
                 children: _jsx(ImageCollection, {}),
             },
             {
-                key: TabKey.Video,
+                key: MediaCollectionTabKey.Video,
                 label: "Video",
                 children: _jsx(VideoCollection, {}),
             },
             {
-                key: TabKey.File,
+                key: MediaCollectionTabKey.File,
                 label: "Tập tin",
                 children: _jsx(FileCollection, {}),
             },
             {
-                key: TabKey.Link,
+                key: MediaCollectionTabKey.Link,
                 label: "Liên kết",
                 children: _jsx(LinkCollection, {}),
             },
         ];
-    }, []);
+    }, [isOpen]);
     return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "folder-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: toggle, mask: false, closeIcon: false, styles: {
                     body: {
                         padding: 0,
+                        height: "100%",
                     },
-                }, getContainer: false, width: isMobile ? "100%" : 360, children: _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("library") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx(Tabs, { defaultActiveKey: TabKey.Image, items: items })] }) })] }));
+                }, getContainer: false, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("library") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(Tabs, { defaultActiveKey: MediaCollectionTabKey.Image, items: items, className: "h-full" }) })] }) })] }));
 };
 export default MediaCollection;

package/dist/components/message/footer/ToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ToolbarPlugin.tsx"],"names":[],"mappings":"AAwFA,eAAO,MAAM,aAAa,+CAyNzB,CAAC"}
+{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ToolbarPlugin.tsx"],"names":[],"mappings":"AA4DA,eAAO,MAAM,aAAa,+CAwNzB,CAAC"}

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

@@ -9,7 +9,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { BoldOutlined, ItalicOutlined, StrikethroughOutlined, OrderedListOutlined, UnorderedListOutlined, LinkOutlined, } from "@ant-design/icons";
 import { Button } from "antd";
 const quoteIcon = (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M5.24615 10.5714C4.5616 10.5714 3.99078 10.5715 3.53762 10.5105C3.0593 10.4462 2.62745 10.3047 2.28042 9.95769C1.9334 9.61072 1.79194 9.17887 1.72763 8.70055C1.6667 8.24737 1.66673 7.67654 1.66675 6.99199V6.91274C1.66673 6.22819 1.6667 5.65734 1.72763 5.20419C1.79194 4.72586 1.9334 4.29401 2.28043 3.94699C2.62746 3.59997 3.0593 3.4585 3.53762 3.3942C3.99078 3.33327 4.56161 3.33329 5.24615 3.33331H5.32541C6.00995 3.33329 6.5808 3.33327 7.03397 3.3942C7.51228 3.4585 7.94413 3.59997 8.29116 3.94699C8.63817 4.29401 8.77966 4.72586 8.84396 5.20419C8.90491 5.65734 8.90484 6.22817 8.90484 6.91272V6.99198C8.90484 7.67652 8.90491 8.24737 8.84396 8.70055C8.77966 9.17887 8.63817 9.61072 8.29116 9.95769C7.94413 10.3047 7.51228 10.4462 7.03397 10.5105C6.5808 10.5715 6.00998 10.5714 5.32544 10.5714H5.24615Z", fill: "currentColor" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.84403 16.1313C2.71884 15.7295 2.94301 15.3023 3.34474 15.1772C5.71249 14.4393 7.38095 12.3426 7.38095 9.914V6.76172C7.38095 6.34094 7.72207 5.99982 8.14286 5.99982C8.56366 5.99982 8.90476 6.34094 8.90476 6.76172V9.914C8.90476 13.0731 6.73976 15.7152 3.79812 16.6319C3.39638 16.7572 2.96923 16.533 2.84403 16.1313Z", fill: "currentColor" }), _jsx("path", { d: "M14.389 10.5714C13.7044 10.5714 13.1336 10.5715 12.6804 10.5105C12.2021 10.4462 11.7703 10.3047 11.4233 9.95769C11.0762 9.61072 10.9348 9.17887 10.8704 8.70055C10.8095 8.24737 10.8096 7.67654 10.8096 6.99199V6.91274C10.8096 6.22819 10.8095 5.65734 10.8704 5.20419C10.9348 4.72586 11.0762 4.29401 11.4233 3.94699C11.7703 3.59997 12.2021 3.4585 12.6804 3.3942C13.1336 3.33327 13.7044 3.33329 14.389 3.33331H14.4682C15.1528 3.33329 15.7236 3.33327 16.1768 3.3942C16.6551 3.4585 17.087 3.59997 17.4339 3.94699C17.781 4.29401 17.9225 4.72586 17.9868 5.20419C18.0477 5.65734 18.0477 6.22817 18.0477 6.91272V6.99198C18.0477 7.67652 18.0477 8.24737 17.9868 8.70055C17.9225 9.17887 17.781 9.61072 17.4339 9.95769C17.087 10.3047 16.6551 10.4462 16.1768 10.5105C15.7236 10.5715 15.1528 10.5714 14.4682 10.5714H14.389Z", fill: "currentColor" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.9869 16.1313C11.8617 15.7295 12.0858 15.3023 12.4876 15.1772C14.8553 14.4393 16.5238 12.3426 16.5238 9.914V6.76172C16.5238 6.34094 16.8649 5.99982 17.2857 5.99982C17.7065 5.99982 18.0476 6.34094 18.0476 6.76172V9.914C18.0476 13.0731 15.8825 15.7152 12.9409 16.6319C12.5392 16.7572 12.112 16.533 11.9869 16.1313Z", fill: "currentColor" })] }));
-const codeIcon = (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.41925 6.07724C6.74925 6.40268 6.74925 6.93031 6.41925 7.25575L3.63676 9.99983L6.41925 12.7439C6.74925 13.0693 6.74925 13.597 6.41925 13.9224C6.08926 14.2479 5.55424 14.2479 5.22424 13.9224L1.96374 10.7069C1.56775 10.3164 1.56775 9.68325 1.96374 9.29272L5.22424 6.07724C5.55424 5.7518 6.08926 5.7518 6.41925 6.07724Z", fill: "currentColor" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.5809 6.07724C13.2509 6.40268 13.2509 6.93031 13.5809 7.25575L16.3634 9.99983L13.5809 12.7439C13.2509 13.0693 13.2509 13.597 13.5809 13.9224C13.9109 14.2479 14.4459 14.2479 14.7759 13.9224L18.0364 10.7069C18.4324 10.3164 18.4324 9.68325 18.0364 9.29272L14.7759 6.07724C14.4459 5.7518 13.9109 5.7518 13.5809 6.07724Z", fill: "currentColor" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8957 3.36522C12.3382 3.49166 12.5945 3.9529 12.468 4.39543L9.13468 16.0621C9.00825 16.5046 8.54701 16.7609 8.10448 16.6344C7.66195 16.508 7.40571 16.0468 7.53214 15.6042L10.8655 3.93756C10.9919 3.49503 11.4532 3.23879 11.8957 3.36522Z", fill: "currentColor" })] }));
 export const ToolbarPlugin = () => {
     const [editor] = useLexicalComposerContext();
     const [activeMarks, setActiveMarks] = useState([]);
@@ -121,10 +120,8 @@ export const ToolbarPlugin = () => {
                         marks.push("bold");
                     if (selection.hasFormat("italic"))
                         marks.push("italic");
-                    if (selection.hasFormat("underline"))
-                        marks.push("underline");
-                    if (selection.hasFormat("code"))
-                        marks.push("code");
+                    if (selection.hasFormat("strikethrough"))
+                        marks.push("strikethrough");
                     // block
                     const anchorNode = selection.anchor.getNode();
                     const topLevelNode = anchorNode.getTopLevelElementOrThrow();

package/dist/components/searchConversation/SearchAll.d.ts

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

package/dist/components/searchConversation/SearchAll.d.ts.map

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

package/dist/components/searchConversation/SearchAll.js

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

package/dist/components/searchConversation/SearchConversationAsMessages.d.ts

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

package/dist/components/searchConversation/SearchConversationAsMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchConversationAsMessages.d.ts","sourceRoot":"","sources":["../../../src/components/searchConversation/SearchConversationAsMessages.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,4BAA4B,+CAIjC,CAAC;AAEF,eAAe,4BAA4B,CAAC"}

package/dist/components/searchConversation/SearchConversationAsMessages.js

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

package/dist/components/searchConversation/SearchConversationAsUsers.d.ts

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

package/dist/components/searchConversation/SearchConversationAsUsers.d.ts.map

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

package/dist/components/searchConversation/SearchConversationAsUsers.js

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

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

@@ -0,0 +1,8 @@
+export declare enum SearchConversationTabKey {
+    All = "all",
+    Users = "users",
+    Messages = "messages"
+}
+declare const SearchConversation: () => import("react/jsx-runtime").JSX.Element;
+export default SearchConversation;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/searchConversation/index.tsx"],"names":[],"mappings":"AASA,oBAAY,wBAAwB;IAClC,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,QAAA,MAAM,kBAAkB,+CA4BvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}