@droppii-org/chat-sdk 0.0.27 → 0.0.28

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":"AAOA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,eAAe,eAAe,4CA4FjD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chatBubble/ChatBubble.tsx"],"names":[],"mappings":"AAOA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,eAAe,eAAe,4CAuFjD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/chatBubble/ChatBubble.js

@@ -4,11 +4,10 @@ import { useEffect, useState } from "react";
 import { FloatButton, Drawer, Popover } from "antd";
 import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
 import MessageList from "../message/MessageList";
-import useConversationStore from "../../hooks/conversation/useConversationStore";
+import useConversationStore from "../../store/conversation";
 const ChatBubble = ({ className }) => {
     const [isMobile, setIsMobile] = useState(false);
-    const conversationDetail = useConversationStore((state) => state.conversationData);
-    const selectedThreadId = useConversationStore((state) => state.selectedThreadId);
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
     const [isOpen, setIsOpen] = useState(false);
     const toggleChat = () => {
         setIsOpen(!isOpen);
@@ -29,9 +28,9 @@ const ChatBubble = ({ className }) => {
                         body: { padding: 0 },
                     }, classNames: {
                         wrapper: "!z-[9999]",
-                    }, children: _jsx(MessageList, { conversationId: selectedThreadId, conversationData: conversationDetail, className: "flex-1", onClose: () => setIsOpen(false) }) })] }));
+                    }, children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: () => setIsOpen(false) }) })] }));
     }
-    return (_jsx(Popover, { placement: "topLeft", trigger: "click", content: _jsx("div", { style: { width: 400, height: 640 }, children: _jsx(MessageList, { conversationId: selectedThreadId, conversationData: conversationDetail, 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", 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: {
                 right: 24,
                 bottom: 24,
                 width: 60,

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":"AAqGA,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,4CAgM3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAqGA,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,4CAgL3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { Input, Avatar, Badge, Empty } from "antd";
-import { SessionType } from "@openim/wasm-client-sdk";
-import { useConversationList } from "../../hooks/conversation/useConversation";
+import { markConversationMessageAsRead } from "../../hooks/conversation/useConversation";
 import { Icon } from "../icon";
 import { useChatContext } from "../../context/ChatContext";
-import useConversationStore from "../../hooks/conversation/useConversationStore";
+import useConversationStore from "../../store/conversation";
 const parseLatestMessage = (latestMsg, currentUserId) => {
     var _a;
     if (!latestMsg)
@@ -73,10 +72,9 @@ const DeskConversationList = ({ onConversationSelect, className = "", }) => {
     const searchParams = useSearchParams();
     const { user } = useChatContext();
     const setConversationData = useConversationStore((state) => state.setConversationData);
-    const selectedThreadId = useConversationStore((state) => state.selectedThreadId);
-    const setSelectedThreadId = useConversationStore((state) => state.setSelectedThreadId);
-    const setSelectedSourceId = useConversationStore((state) => state.setSelectedSourceId);
-    const { conversationList, markConversationMessageAsRead } = useConversationList(selectedThreadId);
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const conversationList = useConversationStore((state) => state.conversationList);
     // Transform real conversation data from the API
     const conversations = transformConversationData(conversationList || [], user === null || user === void 0 ? void 0 : user.userID);
     const filteredConversations = conversations.filter((conv) => conv.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -86,30 +84,20 @@ const DeskConversationList = ({ onConversationSelect, className = "", }) => {
         const newSearchParams = new URLSearchParams(searchParams);
         newSearchParams.set("threadId", conversation.id);
         router.push(`${pathname}?${newSearchParams.toString()}`);
-        setSelectedThreadId(conversation.id);
+        setSelectedConversationId(conversation.id);
         onConversationSelect === null || onConversationSelect === void 0 ? void 0 : onConversationSelect(conversation.id, conversation.id);
     };
-    const onSetSelectedSourceId = useCallback(() => {
-        const selectedConversation = conversations.findIndex((conv) => conv.id === selectedThreadId);
-        if (selectedConversation !== -1) {
-            const conversation = conversations[selectedConversation];
-            const sourceId = conversation.conversationType === SessionType.Group
-                ? conversation.groupID
-                : conversation.userID;
-            setSelectedSourceId(sourceId);
-        }
-    }, [conversationList, selectedThreadId]);
     useEffect(() => {
         const threadId = searchParams.get("threadId");
         if (threadId) {
-            setSelectedThreadId(threadId);
+            setSelectedConversationId(threadId);
             const selectedConversation = conversations.find((conv) => conv.id === threadId);
             if (selectedConversation) {
                 setConversationData(selectedConversation);
             }
         }
         else if (conversations.length > 0) {
-            setSelectedThreadId(conversations[0].id);
+            setSelectedConversationId(conversations[0].id);
             setConversationData(conversations[0]);
             const newSearchParams = new URLSearchParams(searchParams);
             newSearchParams.set("threadId", conversations[0].id);
@@ -117,14 +105,13 @@ const DeskConversationList = ({ onConversationSelect, className = "", }) => {
         }
     }, [searchParams, conversations.length]);
     useEffect(() => {
-        if (!!selectedThreadId) {
-            markConversationMessageAsRead(selectedThreadId);
-            onSetSelectedSourceId();
+        if (!!selectedConversationId) {
+            markConversationMessageAsRead(selectedConversationId);
         }
-    }, [selectedThreadId, onSetSelectedSourceId]);
-    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: [filteredConversations.map((conversation) => (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors ${selectedThreadId === conversation.threadId
+    }, [selectedConversationId]);
+    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: [filteredConversations.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.threadId
                             ? "bg-blue-50"
-                            : "bg-white"}`, children: [selectedThreadId === conversation.threadId && (_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: conversation.isOnline, status: conversation.isOnline ? "success" : "default", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: conversation.avatar, alt: conversation.name, children: conversation.name.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.name }), _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.id))), filteredConversations.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
+                            : "bg-white"}`, children: [selectedConversationId === conversation.threadId && (_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: conversation.isOnline, status: conversation.isOnline ? "success" : "default", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: conversation.avatar, alt: conversation.name, children: conversation.name.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.name }), _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.id))), filteredConversations.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/message/MessageHeader.d.ts

@@ -1,8 +1,6 @@
-import { ConversationItem } from "@openim/wasm-client-sdk";
 interface MessageHeaderProps {
-    conversationData: ConversationItem | null;
     onClose?: () => void;
 }
-declare const MessageHeader: ({ conversationData, onClose }: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageHeader: ({ onClose }: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageHeader;
 //# sourceMappingURL=MessageHeader.d.ts.map

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":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAI3D,UAAU,kBAAkB;IAC1B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,GAAI,+BAA+B,kBAAkB,4CA6CvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"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"}

package/dist/components/message/MessageHeader.js

@@ -2,8 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Button } from "antd";
 import { Icon } from "../icon";
-const MessageHeader = ({ conversationData, onClose }) => {
-    var _a, _b;
-    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3", children: [_jsx(Avatar, { src: conversationData === null || conversationData === void 0 ? void 0 : conversationData.faceURL, size: "large", children: ((_b = (_a = conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("p", { children: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) || "" }), _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 }) }))] })] }));
+import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
+import useConversationStore from "../../store/conversation";
+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 }) }))] })] }));
 };
 export default MessageHeader;

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

@@ -1,7 +1,5 @@
-import { ConversationItem } from "@openim/wasm-client-sdk";
 interface MessageListProps {
     conversationId: string;
-    conversationData: ConversationItem | null;
     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":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAc3D,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAkE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"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,4CAkE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -12,15 +12,15 @@ import MessageHeader from "./MessageHeader";
 import MessageFooter from "./footer";
 dayjs.extend(isToday);
 const MessageList = (props) => {
-    var _a, _b;
-    const { conversationData, onClose, conversationId } = props;
+    var _a, _b, _c;
+    const { onClose, conversationId } = props;
     const scrollRef = useRef(null);
     const { getMoreOldMessages, moreOldLoading, loadState, latestLoadState } = useMessage(conversationId);
     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];
-    }, [latestLoadState]);
+    }, [(_a = latestLoadState === null || latestLoadState === void 0 ? void 0 : latestLoadState.current) === null || _a === void 0 ? void 0 : _a.messageList]);
     const scrollToBottom = () => {
         setTimeout(() => {
             var _a, _b;
@@ -41,11 +41,11 @@ 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, { conversationData: conversationData, onClose: onClose }), _jsx("div", { id: "scrollableDiv", style: {
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full bg-white", children: [_jsx(MessageHeader, { onClose: onClose }), _jsx("div", { id: "scrollableDiv", style: {
                     height: "100%",
                     overflow: "auto",
                     display: "flex",
                     flexDirection: "column-reverse",
-                }, children: _jsx(InfiniteScroll, { dataLength: ((_a = loadState.groupMessageList) === null || _a === void 0 ? void 0 : _a.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: (_b = loadState.groupMessageList) === null || _b === void 0 ? void 0 : _b.toReversed().map((message) => _jsx(MessageItem, { groupMessage: message })) }) }), _jsx(MessageFooter, { lastMessage: lastMessage })] }));
+                }, 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 })) }) }), _jsx(MessageFooter, { lastMessage: lastMessage })] }));
 };
 export default MessageList;

package/dist/components/session/AssignedSessionFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssignedSessionFilter.d.ts","sourceRoot":"","sources":["../../../src/components/session/AssignedSessionFilter.tsx"],"names":[],"mappings":"AAyEA,UAAU,0BAA0B;IAClC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,qBAAqB,GAAI,gCAG5B,0BAA0B,4CA0H5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"AssignedSessionFilter.d.ts","sourceRoot":"","sources":["../../../src/components/session/AssignedSessionFilter.tsx"],"names":[],"mappings":"AAyBA,UAAU,0BAA0B;IAClC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,qBAAqB,GAAI,gCAG5B,0BAA0B,4CA6P5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/session/AssignedSessionFilter.js

@@ -1,62 +1,101 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Icon } from "../icon";
-const messageCategories = [
-    {
-        icon: "chat-square-b",
-        label: "Đang mở",
-        count: 43,
-        color: "text-gray-600",
-        subCategories: [
-            {
-                icon: "user-del-o",
-                label: "Chưa phân công",
-                count: 1,
-                color: "text-orange-500",
-            },
-            {
-                icon: "warning-square-o",
-                label: "Chậm xử lý",
-                count: 1,
-                color: "text-red-500",
-            },
-            {
-                icon: "time-circle-o",
-                label: "Chờ xử lý",
-                count: 0,
-                color: "text-orange-400",
-            },
-            {
-                icon: "arrow-reply-o",
-                label: "Chưa trả lời",
-                count: 1,
-                color: "text-purple-500",
-            },
+import useConversationStore from "../../store/conversation";
+import { SESSION_STATUS_ENUM, TAG_ENUM } from "../../constants";
+const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
+    const [expandedCategories, setExpandedCategories] = useState(new Set([0]));
+    const [selectedFilter, setSelectedFilter] = useState("");
+    const summary = useConversationStore((state) => state.summary);
+    const setFilterSummary = useConversationStore((state) => state.setFilterSummary);
+    const messageCategories = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return [
             {
-                icon: "play-b",
-                label: "Đang xử lý",
-                count: 38,
+                icon: "chat-square-b",
+                label: "Đang mở",
+                count: (summary === null || summary === void 0 ? void 0 : summary.activeSessionCount) || 0,
                 color: "text-gray-600",
+                query: {
+                    status: undefined,
+                    tag: undefined,
+                },
+                subCategories: [
+                    {
+                        icon: "user-del-o",
+                        label: "Chưa phân công",
+                        count: ((_b = (_a = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _a === void 0 ? void 0 : _a.find((status) => status.type === SESSION_STATUS_ENUM.UNASSIGNED)) === null || _b === void 0 ? void 0 : _b.count) || 0,
+                        color: "text-orange-500",
+                        query: {
+                            status: SESSION_STATUS_ENUM.UNASSIGNED,
+                            tag: undefined,
+                        },
+                    },
+                    {
+                        icon: "warning-square-o",
+                        label: "Chậm xử lý",
+                        count: ((_d = (_c = summary === null || summary === void 0 ? void 0 : summary.tagCounts) === null || _c === void 0 ? void 0 : _c.find((status) => status.type === TAG_ENUM.SLOW_PROCESSING)) === null || _d === void 0 ? void 0 : _d.count) || 0,
+                        color: "text-red-500",
+                        query: {
+                            status: undefined,
+                            tag: TAG_ENUM.SLOW_PROCESSING,
+                        },
+                    },
+                    {
+                        icon: "time-circle-o",
+                        label: "Chờ xử lý",
+                        count: ((_f = (_e = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _e === void 0 ? void 0 : _e.find((status) => status.type === SESSION_STATUS_ENUM.WAITING_PROCESS)) === null || _f === void 0 ? void 0 : _f.count) || 0,
+                        color: "text-orange-400",
+                        query: {
+                            status: SESSION_STATUS_ENUM.WAITING_PROCESS,
+                            tag: undefined,
+                        },
+                    },
+                    {
+                        icon: "arrow-reply-o",
+                        label: "Chưa trả lời",
+                        count: ((_h = (_g = summary === null || summary === void 0 ? void 0 : summary.tagCounts) === null || _g === void 0 ? void 0 : _g.find((status) => status.type === TAG_ENUM.AWAITING_REPLY)) === null || _h === void 0 ? void 0 : _h.count) || 0,
+                        color: "text-purple-500",
+                        query: {
+                            status: undefined,
+                            tag: TAG_ENUM.AWAITING_REPLY,
+                        },
+                    },
+                    {
+                        icon: "play-b",
+                        label: "Đang xử lý",
+                        count: ((_k = (_j = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _j === void 0 ? void 0 : _j.find((status) => status.type === SESSION_STATUS_ENUM.IN_PROCESS)) === null || _k === void 0 ? void 0 : _k.count) || 0,
+                        color: "text-gray-600",
+                        query: {
+                            status: SESSION_STATUS_ENUM.IN_PROCESS,
+                            tag: undefined,
+                        },
+                    },
+                    {
+                        icon: "pause-b",
+                        label: "Tạm chờ",
+                        count: ((_m = (_l = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _l === void 0 ? void 0 : _l.find((status) => status.type === TAG_ENUM.TEMPORARILY_PAUSED)) === null || _m === void 0 ? void 0 : _m.count) || 0,
+                        color: "text-gray-600",
+                        query: {
+                            status: undefined,
+                            tag: TAG_ENUM.TEMPORARILY_PAUSED,
+                        },
+                    },
+                ],
             },
             {
-                icon: "pause-b",
-                label: "Tạm chờ",
-                count: 2,
-                color: "text-gray-600",
+                icon: "check-b",
+                label: "Đã đóng",
+                count: ((_p = (_o = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _o === void 0 ? void 0 : _o.find((status) => status.type === SESSION_STATUS_ENUM.COMPLETED)) === null || _p === void 0 ? void 0 : _p.count) || 0,
+                color: "text-green-600",
+                query: {
+                    status: SESSION_STATUS_ENUM.COMPLETED,
+                    tag: undefined,
+                },
             },
-        ],
-    },
-    {
-        icon: "check-b",
-        label: "Đã đóng",
-        count: 0,
-        color: "text-green-600",
-    },
-];
-const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
-    const [expandedCategories, setExpandedCategories] = useState(new Set([0]));
-    const [selectedFilter, setSelectedFilter] = useState("");
+        ];
+    }, []);
     const toggleCategory = (index) => {
         const newExpanded = new Set(expandedCategories);
         if (newExpanded.has(index)) {
@@ -70,6 +109,21 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
     const handleFilterSelect = (categoryId, subCategoryId) => {
         const filterId = subCategoryId || categoryId;
         setSelectedFilter(filterId);
+        // Find the selected category and subcategory
+        const category = messageCategories.find((cat) => cat.label === categoryId);
+        let query;
+        if (category) {
+            if (subCategoryId && category.subCategories) {
+                const subCategory = category.subCategories.find((sub) => sub.label === subCategoryId);
+                query = subCategory === null || subCategory === void 0 ? void 0 : subCategory.query;
+            }
+            else {
+                query = category.query;
+            }
+        }
+        if (query) {
+            setFilterSummary(query);
+        }
         onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(categoryId, subCategoryId);
     };
     return (_jsxs("div", { className: `w-64 bg-white border-r border-gray-200 flex flex-col ${className}`, children: [_jsx("div", { className: "p-4 border-b border-gray-200", children: _jsx("h2", { className: "text-lg font-semibold text-gray-800", children: "TIN NH\u1EAEN C\u1EE6A T\u00D4I" }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx("ul", { className: "py-2", children: messageCategories.map((category, index) => (_jsxs("li", { children: [_jsxs("button", { onClick: () => {

package/dist/constants/im.d.ts

@@ -0,0 +1,3 @@
+import { SessionType } from "@openim/wasm-client-sdk";
+export declare const GroupSessionTypes: SessionType[];
+//# sourceMappingURL=im.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"im.d.ts","sourceRoot":"","sources":["../../src/constants/im.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,eAAgD,CAAC"}

package/dist/constants/im.js

@@ -0,0 +1,2 @@
+import { SessionType } from "@openim/wasm-client-sdk";
+export const GroupSessionTypes = [SessionType.Group, SessionType.WorkingGroup];

package/dist/constants/index.d.ts

@@ -1,2 +1,14 @@
 export declare const coreWasmPath = "https://droppiistg.blob.core.windows.net/droppii-stg-public/3315964d-11d5-4d27-8af7-d2ec2354994f.wasm";
+export declare const SESSION_STATUS_ENUM: {
+    UNASSIGNED: string;
+    WAITING_PROCESS: string;
+    IN_PROCESS: string;
+    COMPLETED: string;
+};
+export declare const TAG_ENUM: {
+    NONE: string;
+    AWAITING_REPLY: string;
+    SLOW_PROCESSING: string;
+    TEMPORARILY_PAUSED: string;
+};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,0GACgF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,0GACgF,CAAC;AAE1G,eAAO,MAAM,mBAAmB;;;;;CAK/B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;CAKpB,CAAC"}

package/dist/constants/index.js

@@ -1 +1,13 @@
 export const coreWasmPath = "https://droppiistg.blob.core.windows.net/droppii-stg-public/3315964d-11d5-4d27-8af7-d2ec2354994f.wasm";
+export const SESSION_STATUS_ENUM = {
+    UNASSIGNED: "UNASSIGNED",
+    WAITING_PROCESS: "WAITING_PROCESS",
+    IN_PROCESS: "IN_PROCESS",
+    COMPLETED: "COMPLETED",
+};
+export const TAG_ENUM = {
+    NONE: "NONE",
+    AWAITING_REPLY: "AWAITING_REPLY",
+    SLOW_PROCESSING: "SLOW_PROCESSING",
+    TEMPORARILY_PAUSED: "TEMPORARILY_PAUSED",
+};

package/dist/context/ChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,WAAW,0CAGtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,qCAI1B,iBAAiB,4CA6EnB,CAAC"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,iBAAiB,EAGlB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,WAAW,0CAOtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,qCAI1B,iBAAiB,4CAoEnB,CAAC"}

package/dist/context/ChatContext.js

@@ -1,17 +1,21 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from "react";
-import { CbEvents } from "@openim/wasm-client-sdk";
-import { ConnectStatus, } from "../types/chat";
+import { ConnectStatus, SyncStatus, } from "../types/chat";
 import { DChatSDK } from "../constants/sdk";
 import MainLayout from "../layout";
 export const ChatContext = createContext({
     user: null,
     connectStatus: ConnectStatus.Disconnected,
+    syncStatus: SyncStatus.Success,
+    userTokenHandler: () => { },
+    updateConnectStatus: () => { },
+    updateSyncStatus: () => { },
 });
 export const useChatContext = () => useContext(ChatContext);
 export const ChatProvider = ({ children, config, refetchToken, }) => {
     const [connectStatus, setConnectStatus] = useState(ConnectStatus.Disconnected);
+    const [syncStatus, setSyncStatus] = useState(SyncStatus.Success);
     const [user, setUser] = useState(null);
     const getUserInfo = () => {
         DChatSDK.getSelfUserInfo()
@@ -19,7 +23,7 @@ export const ChatProvider = ({ children, config, refetchToken, }) => {
             setUser(data);
         })
             .catch(({ errCode, errMsg }) => {
-            console.log("getSelfUserInfo", errCode, errMsg);
+            console.error("getSelfUserInfo", errCode, errMsg);
         });
     };
     const handleLogin = (newToken) => {
@@ -29,48 +33,34 @@ export const ChatProvider = ({ children, config, refetchToken, }) => {
                 getUserInfo();
             })
                 .catch(({ errCode, errMsg }) => {
-                console.log("handleLogin", errCode, errMsg);
+                console.error("handleLogin", errCode, errMsg);
             });
         }
     };
+    const userTokenHandler = () => {
+        refetchToken().then((token) => {
+            if (!!token) {
+                handleLogin(token);
+            }
+        });
+    };
+    const updateConnectStatus = (status) => {
+        setConnectStatus(status);
+    };
+    const updateSyncStatus = (status) => {
+        setSyncStatus(status);
+    };
     useEffect(() => {
         if (config) {
             handleLogin();
         }
     }, [config]);
-    useEffect(() => {
-        DChatSDK.on(CbEvents.OnUserTokenExpired, () => {
-            console.log("OnUserTokenExpired");
-            refetchToken().then((token) => {
-                if (!!token) {
-                    handleLogin(token);
-                }
-            });
-        });
-        DChatSDK.on(CbEvents.OnUserTokenInvalid, () => {
-            console.log("OnUserTokenInvalid");
-            refetchToken().then((token) => {
-                if (!!token) {
-                    handleLogin(token);
-                }
-            });
-        });
-        DChatSDK.on(CbEvents.OnConnectSuccess, () => {
-            setConnectStatus(ConnectStatus.Connected);
-        });
-        DChatSDK.on(CbEvents.OnConnecting, () => {
-            setConnectStatus(ConnectStatus.Connecting);
-        });
-        DChatSDK.on(CbEvents.OnConnectFailed, () => {
-            setConnectStatus(ConnectStatus.Disconnected);
-        });
-        return () => {
-            DChatSDK.off(CbEvents.OnUserTokenExpired, () => { });
-            DChatSDK.off(CbEvents.OnUserTokenInvalid, () => { });
-            DChatSDK.off(CbEvents.OnConnectSuccess, () => { });
-            DChatSDK.off(CbEvents.OnConnectFailed, () => { });
-            DChatSDK.off(CbEvents.OnConnecting, () => { });
-        };
-    }, [refetchToken]);
-    return (_jsx(ChatContext.Provider, { value: { user, connectStatus }, children: _jsx(MainLayout, { children: children }) }));
+    return (_jsx(ChatContext.Provider, { value: {
+            user,
+            connectStatus,
+            syncStatus,
+            userTokenHandler,
+            updateConnectStatus,
+            updateSyncStatus,
+        }, children: _jsx(MainLayout, { children: children }) }));
 };

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

@@ -1,13 +1,13 @@
 import { ConversationItem, SessionType } from "@openim/wasm-client-sdk";
-export declare const useConversationList: (selectedThreadId?: string) => {
-    conversationList: ConversationItem[];
-    getAllConversationList: () => Promise<void>;
-    markConversationMessageAsRead: (conversationId: string) => void;
-};
+export declare const markConversationMessageAsRead: (conversationId: string) => void;
 export declare const useConversationDetail: ({ sourceID, sessionType, }: {
     sourceID: string;
     sessionType: SessionType;
 }) => {
     conversationDetail: ConversationItem | null;
 };
+export declare const useConversationDisplayData: (conversation: ConversationItem | null) => {
+    avatar?: string | undefined;
+    displayName?: string | undefined;
+};
 //# sourceMappingURL=useConversation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useConversation.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useConversation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,mBAAmB,GAAI,mBAAmB,MAAM;;;oDAgBxC,MAAM;CA+C1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,4BAGnC;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC1B;;CAuBA,CAAC"}
+{"version":3,"file":"useConversation.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useConversation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQxE,eAAO,MAAM,6BAA6B,GAAI,gBAAgB,MAAM,SAOnE,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,4BAGnC;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC1B;;CAuBA,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,cAAc,gBAAgB,GAAG,IAAI;;;CA4CtC,CAAC"}