@droppii-org/chat-sdk 0.0.33 → 0.0.34

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

@@ -1 +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"}
+{"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,mDA0FhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/ConversationBySessionItem.js

@@ -1,13 +1,12 @@
 "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";
+import { formatTimestamp, parseLatestMessage } from "../../utils/common";
 const ConversationBySessionItem = ({ sessionItem, }) => {
     const { t } = useTranslation();
     const { user } = useChatContext();
@@ -25,73 +24,9 @@ const ConversationBySessionItem = ({ sessionItem, }) => {
         router.push(`${pathname}?${newSearchParams.toString()}`);
         setSelectedConversationId(conversation.conversationID);
     };
+    const { avatar, displayName = "" } = useConversationDisplayData(conversation || null);
     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));
+    return (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-100 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":"AAeA,QAAA,MAAM,oBAAoB,+CAkJzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,oBAAoB,+CAqKzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -1,33 +1,48 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import { Input, Empty, Drawer, Button, Spin } from "antd";
 import { Icon } from "../icon";
 import useConversationStore from "../../store/conversation";
 import { useTranslation } from "react-i18next";
-import { useBoolean, useDebounceFn } from "ahooks";
+import { useBoolean, useDebounce } 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";
+import { useGetSession } from "../../hooks/session/useGetSession";
+import { DChatSDK } from "../../constants/sdk";
 const DeskConversationList = () => {
+    var _a;
     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 setConversationData = useConversationStore((state) => state.setConversationData);
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const conversationList = useConversationStore((state) => state.conversationList);
+    const updateConversationList = useConversationStore((state) => state.updateConversationList);
     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 });
+    const { dataFlatten: sessions, hasNextPage, fetchNextPage, } = useGetSession(filterSummary);
+    const debouncedSearch = useDebounce(search, { wait: 500 });
+    const onCloseSearch = () => {
+        setSearch("");
+        setShowSearchFalse();
+        setTimeout(() => {
+            var _a;
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }, 500);
+    };
+    useEffect(() => {
+        if (showSearch) {
+            setTimeout(() => {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+    }, [showSearch]);
     useEffect(() => {
         const threadId = searchParams.get("threadId");
         if (threadId) {
@@ -36,22 +51,29 @@ const DeskConversationList = () => {
             if (selectedConversation) {
                 setConversationData(selectedConversation);
             }
-        }
-        else if (conversationList.length > 0) {
-            setSelectedConversationId(conversationList[0].conversationID);
-            setConversationData(conversationList[0]);
-            const newSearchParams = new URLSearchParams(searchParams);
-            newSearchParams.set("threadId", conversationList[0].conversationID);
-            router.replace(`${pathname}?${newSearchParams.toString()}`);
+            else {
+                DChatSDK.getMultipleConversation([threadId]).then((res) => {
+                    if (res.data.length > 0) {
+                        setConversationData(res.data[0]);
+                        updateConversationList(res.data, "filter");
+                    }
+                });
+            }
         }
     }, [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: {
+    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) => {
+                                if (!showSearch && e.target.value) {
+                                    setShowSearchTrue();
+                                }
+                                setSearch(e.target.value);
+                            }, className: "rounded-lg text-sm flex-1 h-[36px]", size: "large", allowClear: true, onClick: setShowSearchTrue, value: search, autoFocus: false, onClear: onCloseSearch }), showSearch && (_jsx(Button, { onClick: onCloseSearch, variant: "outlined", className: "p-0 w-[36px] h-[36px] text-gray-500", children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] }) }), _jsxs("div", { id: "scrollableConversationsDiv", 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, {}) })] }));
+                    position: "relative",
+                }, children: [_jsx(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: "scrollableConversationsDiv", 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") }) })) : ((_a = sessions === null || sessions === void 0 ? void 0 : sessions.map) === null || _a === void 0 ? void 0 : _a.call(sessions, (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, { searchTerm: debouncedSearch }) })] })] }));
 };
 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":"AAcA,QAAA,MAAM,cAAc,+CA4GnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FileCollection.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/FileCollection.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,cAAc,+CAqGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/mediaCollection/FileCollection.js

@@ -1,6 +1,6 @@
 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 { useSearchMessage } from "../../hooks/search/useSearchMessage";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { Empty, Spin } from "antd";
 import { useCallback } from "react";
@@ -10,13 +10,14 @@ 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 { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            contentType: MessageType.FileMessage,
+        },
     });
     const handleDownload = (url, fileName) => {
         if (!url) {
@@ -47,6 +48,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", 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)) }) }));
+    return (_jsx("div", { id: "scrollableFileDiv", className: "h-full 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)) }) }));
 };
 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":"AAaA,QAAA,MAAM,eAAe,+CAoHpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ImageCollection.d.ts","sourceRoot":"","sources":["../../../src/components/mediaCollection/ImageCollection.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,eAAe,+CA+GpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/mediaCollection/ImageCollection.js

@@ -1,6 +1,6 @@
 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 { useSearchMessage } from "../../hooks/search/useSearchMessage";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { Button, Empty, Image, Spin } from "antd";
 import { useCallback } from "react";
@@ -8,14 +8,15 @@ 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 { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            contentType: MessageType.PictureMessage,
+        },
     });
     const handleDownload = (imageUrl) => {
         if (!imageUrl)
@@ -40,7 +41,7 @@ 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", className: "h-full overflow-auto", style: { maxHeight: `calc(100vh - ${TOP_OFFSET}px)` }, children: _jsx(Image.PreviewGroup, { preview: {
+    return (_jsx("div", { id: "scrollableImageDiv", className: "h-full overflow-auto", 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;

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

package/dist/components/mediaCollection/VideoCollection.js

@@ -1,6 +1,6 @@
 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 { useSearchMessage } from "../../hooks/search/useSearchMessage";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { Carousel, Empty, Image, Modal, Spin } from "antd";
 import { useCallback, useState } from "react";
@@ -10,13 +10,14 @@ 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 { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            contentType: MessageType.VideoMessage,
+        },
     });
     const [open, { setTrue, setFalse }] = useBoolean(false);
     const [currentIndex, setCurrentIndex] = useState(0);
@@ -36,7 +37,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", 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: {
+    return (_jsxs("div", { id: "scrollableVideoDiv", className: "h-full 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: "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.js

@@ -28,26 +28,26 @@ const MediaCollection = () => {
         return [
             {
                 key: MediaCollectionTabKey.Image,
-                label: "Ảnh",
+                label: t("image"),
                 children: _jsx(ImageCollection, {}),
             },
             {
                 key: MediaCollectionTabKey.Video,
-                label: "Video",
+                label: t("video"),
                 children: _jsx(VideoCollection, {}),
             },
             {
                 key: MediaCollectionTabKey.File,
-                label: "Tập tin",
+                label: t("file"),
                 children: _jsx(FileCollection, {}),
             },
             {
                 key: MediaCollectionTabKey.Link,
-                label: "Liên kết",
+                label: t("link"),
                 children: _jsx(LinkCollection, {}),
             },
         ];
-    }, [isOpen]);
+    }, [isOpen, t]);
     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,

package/dist/components/message/MessageList.d.ts

@@ -1,5 +1,6 @@
 interface MessageListProps {
     conversationId: string;
+    searchClientMsgID?: string;
     className?: string;
     onClose?: () => void;
 }

package/dist/components/message/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAiBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA0F3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAoBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA0J3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMessage } from "../../hooks/message/useMessage";
 import { Empty, Spin } from "antd";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
 import emitter from "../../utils/events";
@@ -13,51 +13,89 @@ import MessageFooter from "./footer";
 import { images } from "../../constants/images";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
+import { isNumber } from "lodash";
+import { useDebounceFn } from "ahooks";
+import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../constants";
 dayjs.extend(isToday);
+const BOTTOM_THRESHOLD = -5;
 const MessageList = (props) => {
-    var _a, _b, _c;
+    var _a;
     const { t } = useTranslation();
-    const { onClose, conversationId } = props;
+    const { onClose, conversationId, searchClientMsgID } = props;
     const scrollRef = useRef(null);
-    const { getMoreOldMessages, moreOldLoading, loadState, latestLoadState } = useMessage(conversationId);
+    const { getMoreOldMessages, moreOldLoading, loadState, getMoreNewMessages, moreNewLoading, } = useMessage(conversationId, searchClientMsgID);
     const conversationData = useConversationStore((state) => state.conversationData);
-    const lastMessage = useMemo(() => {
-        var _a;
-        const messageList = (_a = latestLoadState.current) === null || _a === void 0 ? void 0 : _a.messageList;
-        return messageList === null || messageList === void 0 ? void 0 : messageList[(messageList === null || messageList === void 0 ? void 0 : messageList.length) - 1];
-    }, [(_a = latestLoadState === null || latestLoadState === void 0 ? void 0 : latestLoadState.current) === null || _a === void 0 ? void 0 : _a.messageList]);
     const scrollToBottom = () => {
         setTimeout(() => {
-            var _a, _b;
-            (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-                top: (_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight,
+            var _a, _b, _c, _d;
+            if (isNumber((_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) &&
+                ((_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollTop) >= BOTTOM_THRESHOLD) {
+                return;
+            }
+            (_c = scrollRef.current) === null || _c === void 0 ? void 0 : _c.scrollTo({
+                top: (_d = scrollRef.current) === null || _d === void 0 ? void 0 : _d.scrollHeight,
                 behavior: "smooth",
             });
         });
     };
-    const loadMoreMessage = () => {
+    const scrollToMessage = (clientMsgID) => {
+        setTimeout(() => {
+            const targetElement = document.getElementById(`${MSG_ITEM_PREFIX}${clientMsgID}`);
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.scrollIntoView({
+                behavior: "auto",
+                block: "center",
+            });
+            setTimeout(() => {
+                const targetContentElement = document.getElementById(`${MSG_ITEM_CONTENT_PREFIX}${clientMsgID}`);
+                targetContentElement === null || targetContentElement === void 0 ? void 0 : targetContentElement.classList.add("zoom-in-out-element", "border-blue-500", "border");
+                // Khi animation kết thúc thì remove element
+                const onEnd = () => {
+                    targetContentElement === null || targetContentElement === void 0 ? void 0 : targetContentElement.classList.remove("zoom-in-out-element", "border-blue-500", "border");
+                    targetContentElement === null || targetContentElement === void 0 ? void 0 : targetContentElement.removeEventListener("animationend", onEnd);
+                };
+                targetContentElement === null || targetContentElement === void 0 ? void 0 : targetContentElement.addEventListener("animationend", onEnd, {
+                    once: true,
+                });
+            }, 500);
+        }, 200);
+    };
+    const loadMoreOldMessage = () => {
         if (!loadState.hasMoreOld || moreOldLoading)
             return;
         getMoreOldMessages();
     };
+    const { run: loadMoreNewMessage } = useDebounceFn(() => {
+        if (!loadState.hasMoreNew || moreNewLoading)
+            return;
+        getMoreNewMessages();
+    }, { wait: 200 });
     useEffect(() => {
         emitter.on("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
+        emitter.on("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
         return () => {
             emitter.off("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
+            emitter.off("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
         };
     }, []);
     if (!conversationData) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: _jsx(Empty, { description: t("no_conversation_data") }) }));
     }
+    console.log("moreNewLoading", moreNewLoading);
     return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full", style: {
             backgroundImage: `url(${images.conversationBg})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
-        }, children: [_jsx(MessageHeader, { onClose: onClose }), _jsx("div", { id: "scrollableDiv", style: {
+        }, children: [_jsx(MessageHeader, { onClose: onClose }), _jsx("div", { id: "scrollableMessagesDiv", ref: scrollRef, style: {
                     height: "100%",
                     overflow: "auto",
                     display: "flex",
                     flexDirection: "column-reverse",
-                }, children: _jsx(InfiniteScroll, { dataLength: ((_b = loadState.groupMessageList) === null || _b === void 0 ? void 0 : _b.length) || 0, next: loadMoreMessage, style: { display: "flex", flexDirection: "column-reverse" }, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableDiv", children: (_c = loadState.groupMessageList) === null || _c === void 0 ? void 0 : _c.toReversed().map((message) => (_jsx(MessageItem, { groupMessage: message }, message.groupMessageID))) }) }), _jsx(MessageFooter, { lastMessage: lastMessage })] }));
+                    paddingBottom: 12,
+                }, children: _jsx(InfiniteScroll, { dataLength: ((_a = loadState.messageList) === null || _a === void 0 ? void 0 : _a.length) || 0, next: loadMoreOldMessage, style: { display: "flex", flexDirection: "column-reverse" }, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableMessagesDiv", onScroll: (e) => {
+                        const target = e.target;
+                        if (target.scrollTop > BOTTOM_THRESHOLD) {
+                            loadMoreNewMessage();
+                        }
+                    }, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array }, message.clientMsgID))) }) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), _jsx(MessageFooter, {})] }));
 };
 export default MessageList;

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

@@ -1,10 +1,6 @@
 import { MessageFooterContextType } from "../../../types/chat";
-import { MessageItem } from "@openim/wasm-client-sdk";
-interface IMessageFooterProviderProps {
-    lastMessage?: MessageItem;
-}
 export declare const MessageFooterContext: import("react").Context<MessageFooterContextType>;
 export declare const useMessageFooterContext: () => MessageFooterContextType;
-declare const MessageFooterProvider: (props: IMessageFooterProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageFooterProvider: () => import("react/jsx-runtime").JSX.Element;
 export default MessageFooterProvider;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKtD,UAAU,2BAA2B;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AA+BD,eAAO,MAAM,oBAAoB,mDAI/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,OAAO,2BAA2B,4CAuDhE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAmC/D,eAAO,MAAM,oBAAoB,mDAI/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,+CAuD1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -15,6 +15,7 @@ import EnterHandler from "./EnterHandler";
 import ActionBar from "./ActionBar";
 import { useSendMessage } from "../../../hooks/message/useSendMessage";
 import FilePreview from "./FilePreview";
+import { useTranslation } from "react-i18next";
 const theme = {
     text: {
         bold: "font-bold",
@@ -47,9 +48,9 @@ export const MessageFooterContext = createContext({
     setListUploadFiles: () => { },
 });
 export const useMessageFooterContext = () => useContext(MessageFooterContext);
-const MessageFooterProvider = (props) => {
-    const { lastMessage } = props;
-    const { sendTextMessage, sendMergeMessage } = useSendMessage(lastMessage);
+const MessageFooterProvider = () => {
+    const { t } = useTranslation();
+    const { sendTextMessage, sendMergeMessage } = useSendMessage();
     const [listUploadFiles, setListUploadFiles] = useState([]);
     const onSendMessage = useCallback(async ({ plainText, richText, type, }) => {
         if (type === "text") {
@@ -60,6 +61,6 @@ const MessageFooterProvider = (props) => {
         }
         setListUploadFiles([]);
     }, [sendMergeMessage, sendTextMessage, listUploadFiles]);
-    return (_jsx(MessageFooterContext.Provider, { value: { onSendMessage, listUploadFiles, setListUploadFiles }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsx("div", { className: "relative px-4", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] max-h-[140px] overflow-y-auto px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": "Nh\u1EADp tin nh\u1EAFn", placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: "Nh\u1EADp tin nh\u1EAFn" }) }) }) }), _jsx(ActionBar, {})] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {})] }) }));
+    return (_jsx(MessageFooterContext.Provider, { value: { onSendMessage, listUploadFiles, setListUploadFiles }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsx("div", { className: "relative px-4", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] max-h-[140px] overflow-y-auto px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": t("enter_message"), placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: t("enter_message") }) }) }) }), _jsx(ActionBar, {})] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {})] }) }));
 };
 export default MessageFooterProvider;

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

@@ -1,7 +1,8 @@
-import { GroupMessageItem } from "../../../types/chat";
+import { MessageItem as MessageItemType } from "@openim/wasm-client-sdk";
 interface MessageItemProps {
-    groupMessage: GroupMessageItem;
+    message: MessageItemType;
+    allMessages: MessageItemType[];
 }
-declare const MessageItem: ({ groupMessage }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageItem: ({ message, allMessages }: 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":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAkBvD,UAAU,gBAAgB;IACxB,YAAY,EAAE,gBAAgB,CAAC;CAChC;AAiBD,QAAA,MAAM,WAAW,GAAI,kBAAkB,gBAAgB,mDA2GtD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,WAAW,IAAI,eAAe,EAE/B,MAAM,yBAAyB,CAAC;AAajC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAID,QAAA,MAAM,WAAW,GAAI,0BAA0B,gBAAgB,mDAmH9D,CAAC;AAEF,eAAe,WAAW,CAAC"}