@droppii-org/chat-sdk 0.0.30 → 0.0.31

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%", 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/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":"AAsGA,QAAA,MAAM,oBAAoB,+CAqHzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -1,26 +1,40 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { Input, Avatar, Badge, Empty } from "antd";
+import { Input, Empty } from "antd";
+import { MessageType } from "@openim/wasm-client-sdk";
 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);
-        // 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}`;
+        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";
         }
-        // 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) {
@@ -64,8 +78,9 @@ const formatTimestamp = (timestamp) => {
 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 DeskConversationList = () => {
     const [searchQuery, setSearchQuery] = useState("");
+    const [conversationIdFromSession, setConversationIdFromSession] = useState([]);
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
@@ -74,17 +89,20 @@ const DeskConversationList = ({ onConversationSelect, className = "", }) => {
     const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const conversationList = useConversationStore((state) => state.conversationList);
-    console.log({ conversationList });
+    const assignedSessionList = useConversationStore((state) => state.assignedSessionList);
     // 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 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 });
     useEffect(() => {
         const threadId = searchParams.get("threadId");
         if (threadId) {
@@ -102,9 +120,7 @@ const DeskConversationList = ({ onConversationSelect, className = "", }) => {
             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
+    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" })] }) }) }))] })] }));
 };

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":"AAaA,QAAA,MAAM,cAAc,+CA8GnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/mediaCollection/FileCollection.js

@@ -0,0 +1,54 @@
+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";
+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 MMM, 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", 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)) }) }));
+};
+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":"AAWA,QAAA,MAAM,eAAe,+CAwFpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/mediaCollection/ImageCollection.js

@@ -0,0 +1,37 @@
+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 { useCallback } from "react";
+import dayjs from "dayjs";
+import useConversationStore from "../../store/conversation";
+import { images } from "../../constants/images";
+import { useTranslation } from "react-i18next";
+const ImageCollection = () => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useMediaCollection({
+        recvID: selectedSourceId,
+        contentType: MessageType.PictureMessage,
+    });
+    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) => {
+                        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", 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)) }) }) }));
+};
+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":"AAaA,QAAA,MAAM,eAAe,+CAiIpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/mediaCollection/VideoCollection.js

@@ -0,0 +1,53 @@
+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";
+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", 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: {
+                    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,9 @@
+export declare enum TabKey {
+    Image = "image",
+    Video = "video",
+    File = "file",
+    Link = "link"
+}
+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,MAAM;IAChB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,eAAe,+CAsEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/mediaCollection/index.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useBoolean } from "ahooks";
+import { Button, Drawer, Tabs } from "antd";
+import { Icon } from "../icon";
+import { useTranslation } from "react-i18next";
+import ImageCollection from "./ImageCollection";
+import VideoCollection from "./VideoCollection";
+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 = {}));
+const MediaCollection = () => {
+    const { t } = useTranslation();
+    const [isOpen, { toggle }] = useBoolean(false);
+    const isMobile = useIsMobile();
+    const items = useMemo(() => {
+        return [
+            {
+                key: TabKey.Image,
+                label: "Ảnh",
+                children: _jsx(ImageCollection, {}),
+            },
+            {
+                key: TabKey.Video,
+                label: "Video",
+                children: _jsx(VideoCollection, {}),
+            },
+            {
+                key: TabKey.File,
+                label: "Tập tin",
+                children: _jsx(FileCollection, {}),
+            },
+            {
+                key: TabKey.Link,
+                label: "Liên kết",
+                children: _jsx(LinkCollection, {}),
+            },
+        ];
+    }, []);
+    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,
+                    },
+                }, 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 })] }) })] }));
+};
+export default MediaCollection;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AAQA,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,GAAI,aAAa,kBAAkB,4CAkDrD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,GAAI,aAAa,kBAAkB,4CA4CrD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/MessageHeader.js

@@ -4,10 +4,11 @@ import { Avatar, Button } from "antd";
 import { Icon } from "../icon";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import useConversationStore from "../../store/conversation";
+import MediaCollection from "../mediaCollection";
 const MessageHeader = ({ onClose }) => {
     var _a;
     const conversationData = useConversationStore((state) => state.conversationData);
     const { avatar, displayName } = useConversationDisplayData(conversationData);
-    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3", children: [_jsx(Avatar, { src: avatar, size: "large", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("p", { children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500", children: "2 thành viên" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "search-o", size: 22 }) }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "folder-o", size: 22 }) }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
+    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white", children: [_jsx(Avatar, { src: avatar, size: "large", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("p", { children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500", children: "2 thành viên" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "search-o", size: 22 }) }), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
 };
 export default MessageHeader;

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":"AAeA,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,4CAuE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"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"}

package/dist/components/message/MessageList.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMessage } from "../../hooks/message/useMessage";
-import { Spin } from "antd";
+import { Empty, Spin } from "antd";
 import { useEffect, useMemo, useRef } from "react";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
@@ -10,12 +10,17 @@ import MessageItem from "./item";
 import InfiniteScroll from "react-infinite-scroll-component";
 import MessageHeader from "./MessageHeader";
 import MessageFooter from "./footer";
+import { images } from "../../constants/images";
+import { useTranslation } from "react-i18next";
+import useConversationStore from "../../store/conversation";
 dayjs.extend(isToday);
 const MessageList = (props) => {
     var _a, _b, _c;
+    const { t } = useTranslation();
     const { onClose, conversationId } = props;
     const scrollRef = useRef(null);
     const { getMoreOldMessages, moreOldLoading, loadState, latestLoadState } = useMessage(conversationId);
+    const conversationData = useConversationStore((state) => state.conversationData);
     const lastMessage = useMemo(() => {
         var _a;
         const messageList = (_a = latestLoadState.current) === null || _a === void 0 ? void 0 : _a.messageList;
@@ -41,7 +46,14 @@ const MessageList = (props) => {
             emitter.off("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
         };
     }, []);
-    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full bg-white", children: [_jsx(MessageHeader, { onClose: onClose }), _jsx("div", { id: "scrollableDiv", style: {
+    if (!conversationData) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: _jsx(Empty, { description: t("no_conversation_data") }) }));
+    }
+    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: {
                     height: "100%",
                     overflow: "auto",
                     display: "flex",

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

@@ -1,4 +1,3 @@
-export declare const documentIcon: import("react/jsx-runtime").JSX.Element;
 interface ShortenOptions {
     maxLength?: number;
     keepStart?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,yCAoCxB,CAAC;AAEF,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,UAAS,cAAmB,WAkBzE,CAAC;AAEF,QAAA,MAAM,WAAW,+CAkFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAYA,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,UAAS,cAAmB,WAkBzE,CAAC;AAEF,QAAA,MAAM,WAAW,+CAkFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -4,12 +4,12 @@ import { useCallback } from "react";
 import { useMessageFooterContext } from ".";
 import { Button } from "antd";
 import { Icon } from "../../icon";
+import { documentIcon } from "../../../assets/svg";
 const documentTypes = [
     "application/pdf",
     "application/msword",
     "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
 ];
-export const documentIcon = (_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M10.1923 5.83301L23.4363 5.83301L34.1656 14.2054V29.8639C34.1656 31.8997 32.5286 34.1663 29.8068 34.1663C27.0849 34.1663 10.1923 34.1663 10.1923 34.1663C7.4704 34.1663 5.8335 31.8997 5.8335 29.8639V10.0305C5.8335 7.99475 7.4704 5.83301 10.1923 5.83301Z", fill: "#24B0FF" }), _jsx("path", { d: "M10.8335 28.1394V20.833H16.0309V22.4222H12.7026V23.5916H15.3612V25.1708H12.7026V28.1394H10.8335Z", fill: "#edf6ff" }), _jsx("path", { d: "M19.0073 28.0885V20.833H20.8613V26.5118H24.0146V28.0885L19.0073 28.0885Z", fill: "#edf6ff" }), _jsx("path", { d: "M16.5918 28.1001V20.833H18.4485V28.1001H16.5918Z", fill: "#edf6ff" }), _jsx("path", { d: "M24.5737 20.833V28.1393H29.7723V26.5573H26.439L26.4422 25.1708H29.1017V23.5916H26.4422V22.4222H29.7723V20.833H24.5737Z", fill: "#edf6ff" }), _jsx("path", { opacity: "0.302", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.2686 5.83301V14.2281H34.1655L23.2686 5.83301Z", fill: "#edf6ff" })] }));
 export const shortenFileName = (name, options = {}) => {
     const { maxLength = 20, keepStart = 8, keepEnd = 3 } = options;
     if (name.length <= maxLength)
@@ -31,7 +31,7 @@ const FilePreview = () => {
         setListUploadFiles(listUploadFiles.filter((f) => f.uid !== file.uid));
     };
     const renderFilePreview = useCallback((file) => {
-        var _a, _b;
+        var _a, _b, _c;
         const isDocument = documentTypes.includes(((_a = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _a === void 0 ? void 0 : _a.type) || "");
         const isVideo = (_b = file.type) === null || _b === void 0 ? void 0 : _b.startsWith("video/");
         let src = file.url;
@@ -39,10 +39,10 @@ const FilePreview = () => {
             src = URL.createObjectURL(file.originFileObj);
         }
         if (isDocument) {
-            return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-1 pr-2", children: [documentIcon, _jsx("span", { className: "text-xs text-gray-500", children: shortenFileName(file.name) }), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemoveFile(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) })] }, file.uid));
+            return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-1 pr-2", children: [documentIcon, _jsx("span", { className: "text-xs text-gray-500", children: shortenFileName(((_c = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _c === void 0 ? void 0 : _c.name) || "") }), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemoveFile(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) })] }, file.uid));
         }
         return (_jsxs("div", { className: "relative rounded-md border", children: [isVideo ? (_jsx("video", { src: src, className: "w-[48px] h-[48px] object-cover rounded-lg", autoPlay: false })) : (_jsx("img", { src: src, alt: file.name, className: "w-[48px] h-[48px] object-cover rounded-lg" })), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemoveFile(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) }), isVideo && (_jsx(Icon, { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", icon: "play-b", size: 20, color: "white" }))] }, file.uid));
     }, [listUploadFiles]);
-    return (_jsx("div", { className: "overflow-x-auto", children: _jsx("div", { className: "border-b py-2 px-4", children: _jsx("div", { className: "flex items-center gap-2", children: listUploadFiles.map((file) => renderFilePreview(file)) }) }) }));
+    return (_jsx("div", { className: "overflow-x-auto mb-[-4px]", children: _jsx("div", { className: "border-b py-2 px-4", children: _jsx("div", { className: "flex items-center gap-2", children: listUploadFiles.map((file) => renderFilePreview(file)) }) }) }));
 };
 export default FilePreview;