@droppii-org/chat-sdk 0.0.18 → 0.0.20

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chatBubble/ChatBubble.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,uDAKjB,eAAe,4CAmDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/{ChatBubble.js → chatBubble/ChatBubble.js}

@@ -3,8 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState } from "react";
 import { FloatButton, Drawer } from "antd";
 import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
-import MessageList from "./message/MessageList";
-import { useConversationDetail } from "../hooks/conversation/useConversation";
+import MessageList from "../message/MessageList";
+import { useConversationDetail } from "../../hooks/conversation/useConversation";
 const ChatBubble = ({ conversationId, sourceID, sessionType, className, }) => {
     const { conversationDetail } = useConversationDetail({
         sourceID,

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

@@ -1,8 +1,7 @@
 interface DeskConversationListProps {
     onConversationSelect?: (conversationId: string, threadId: string) => void;
-    selectedConversationId?: string;
     className?: string;
 }
-declare const DeskConversationList: ({ onConversationSelect, selectedConversationId, className, }: DeskConversationListProps) => import("react/jsx-runtime").JSX.Element;
+declare const DeskConversationList: ({ onConversationSelect, className, }: DeskConversationListProps) => 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":"AAkHA,UAAU,yBAAyB;IACjC,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmDD,QAAA,MAAM,oBAAoB,GAAI,8DAI3B,yBAAyB,4CAiK3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAwGA,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,4CAiL3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -1,168 +1,127 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } 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 { Icon } from "../icon";
-const mockConversations = [
-    {
-        id: "1",
-        threadId: "thread_001",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "unassigned",
-        source: "obefe",
-    },
-    {
-        id: "2",
-        threadId: "thread_002",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "slow",
-        source: "obefe",
-    },
-    {
-        id: "3",
-        threadId: "thread_003",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "waiting",
-        source: "obefe",
-    },
-    {
-        id: "4",
-        threadId: "thread_004",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "not_replied",
-        source: "obefe",
-    },
-    {
-        id: "5",
-        threadId: "thread_005",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "processing",
-        source: "obefe",
-    },
-    {
-        id: "6",
-        threadId: "thread_006",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "closed",
-        source: "obefe",
-    },
-];
-const getStatusIcon = (status) => {
-    switch (status) {
-        case "unassigned":
-            return {
-                icon: "user-del-o",
-                bgColor: "bg-red-100",
-                iconColor: "text-red-500",
-            };
-        case "slow":
-            return {
-                icon: "warning-square-o",
-                bgColor: "bg-orange-100",
-                iconColor: "text-orange-500",
-            };
-        case "waiting":
-            return {
-                icon: "time-circle-o",
-                bgColor: "bg-yellow-100",
-                iconColor: "text-yellow-600",
-            };
-        case "not_replied":
-            return {
-                icon: "arrow-reply-o",
-                bgColor: "bg-orange-100",
-                iconColor: "text-orange-500",
-            };
-        case "processing":
-            return {
-                icon: "play-b",
-                bgColor: "bg-blue-100",
-                iconColor: "text-blue-500",
-            };
-        case "paused":
-            return {
-                icon: "pause-b",
-                bgColor: "bg-gray-100",
-                iconColor: "text-gray-500",
-            };
-        case "closed":
-            return {
-                icon: "check-b",
-                bgColor: "bg-green-100",
-                iconColor: "text-green-500",
-            };
-        default:
-            return null;
+import { useChatContext } from "../../context/ChatContext";
+import useMessageStore from "../../hooks/zustand/useMessageStore";
+import { useMessage } from "../../hooks/message/useMessage";
+const parseLatestMessage = (latestMsg, currentUserId) => {
+    var _a;
+    if (!latestMsg)
+        return "";
+    try {
+        const msgData = JSON.parse(latestMsg);
+        // Check for text message (textElem)
+        if ((_a = msgData.textElem) === null || _a === void 0 ? void 0 : _a.content) {
+            const isMe = currentUserId && msgData.sendID === currentUserId;
+            const sender = isMe ? "Me" : (msgData === null || msgData === void 0 ? void 0 : msgData.senderNickname) || msgData.sendID;
+            return `${sender}: ${msgData.textElem.content}`;
+        }
+        // TODO: Handle other message types (fileElem, videoElem, etc.)
+        // For now, return empty string for non-text messages
+        // This can be enhanced later to show appropriate previews
+        return "Tin nhắn không khả dụng";
     }
+    catch (error) {
+        console.error("Error parsing latest message:", error);
+        return "";
+    }
+};
+// Utility function to format timestamp
+const formatTimestamp = (timestamp) => {
+    if (!timestamp)
+        return "";
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInMs = now.getTime() - date.getTime();
+    const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+    if (diffInDays === 0) {
+        // Today - show time
+        return date.toLocaleTimeString("vi-VN", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+        });
+    }
+    else if (diffInDays === 1) {
+        // Yesterday
+        return "Hôm qua";
+    }
+    else if (diffInDays < 7) {
+        // This week - show day name
+        return date.toLocaleDateString("vi-VN", { weekday: "long" });
+    }
+    else {
+        // Older - show date
+        return date.toLocaleDateString("vi-VN", {
+            day: "2-digit",
+            month: "2-digit",
+        });
+    }
+};
+// Transform API data to UI-friendly format
+const transformConversationData = (apiData, currentUserId) => {
+    return apiData.map((conv) => (Object.assign(Object.assign({}, conv), { id: conv.conversationID, threadId: conv.conversationID, name: conv.showName || "Unknown User", username: conv.userID || conv.groupID || "", avatar: conv.faceURL ||
+            "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg", lastMessage: parseLatestMessage(conv.latestMsg, currentUserId), timestamp: formatTimestamp(conv.latestMsgSendTime), unreadCount: conv.unreadCount, isOnline: true, source: conv.conversationType === 3 ? "group" : "direct" })));
 };
-const DeskConversationList = ({ onConversationSelect, selectedConversationId, className = "", }) => {
-    const { conversationList } = useConversationList();
+const DeskConversationList = ({ onConversationSelect, className = "", }) => {
     const [searchQuery, setSearchQuery] = useState("");
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
-    console.log(conversationList);
-    const currentThreadId = searchParams.get("threadId");
-    const [selectedThreadId, setSelectedThreadId] = useState(currentThreadId);
-    useEffect(() => {
-        setSelectedThreadId(currentThreadId);
-    }, [currentThreadId]);
-    const conversations = mockConversations;
+    const { user } = useChatContext();
+    const selectedThreadId = useMessageStore((state) => state.selectedThreadId);
+    const setSelectedThreadId = useMessageStore((state) => state.setSelectedThreadId);
+    const setSelectedSourceId = useMessageStore((state) => state.setSelectedSourceId);
+    const { markConversationMessageAsRead } = useMessage(selectedThreadId);
+    const { conversationList } = useConversationList(selectedThreadId);
+    // 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()) ||
         conv.lastMessage.toLowerCase().includes(searchQuery.toLowerCase()));
     const handleConversationClick = (conversation) => {
         const newSearchParams = new URLSearchParams(searchParams);
-        newSearchParams.set("threadId", conversation.threadId);
+        newSearchParams.set("threadId", conversation.id);
         router.push(`${pathname}?${newSearchParams.toString()}`);
-        setSelectedThreadId(conversation.threadId);
-        onConversationSelect === null || onConversationSelect === void 0 ? void 0 : onConversationSelect(conversation.id, conversation.threadId);
+        setSelectedThreadId(conversation.id);
+        onConversationSelect === null || onConversationSelect === void 0 ? void 0 : onConversationSelect(conversation.id, conversation.id);
     };
-    return (_jsxs("div", { className: `flex flex-col h-full bg-white border-r border-gray-200 ${className}`, children: [_jsx("div", { className: "p-3 border-b border-gray-200", children: _jsxs("div", { className: "relative", children: [_jsx(Icon, { icon: "search-o", size: 18, className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" }), _jsx("input", { type: "text", placeholder: "T\u00ECm ki\u1EBFm", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" })] }) }), _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
+    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);
+        }
+        else if (conversations.length > 0) {
+            setSelectedThreadId(conversations[0].id);
+            const newSearchParams = new URLSearchParams(searchParams);
+            newSearchParams.set("threadId", conversations[0].id);
+            router.replace(`${pathname}?${newSearchParams.toString()}`);
+        }
+    }, [searchParams, conversations.length]);
+    useEffect(() => {
+        if (!!selectedThreadId) {
+            markConversationMessageAsRead();
+            onSetSelectedSourceId();
+        }
+    }, [selectedThreadId, onSetSelectedSourceId, markConversationMessageAsRead]);
+    return (_jsxs("div", { className: `flex flex-col h-full bg-white border-r border-gray-200 ${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
                             ? "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: [_jsxs("div", { className: "relative flex-shrink-0", children: [_jsx("img", { src: conversation.avatar, alt: conversation.name, className: "w-12 h-12 rounded-full object-cover" }), conversation.isOnline && (_jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-500 border-2 border-white rounded-full" }))] }), _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 }), _jsxs("div", { className: "flex items-center gap-1", children: [conversation.unreadCount > 0 && (_jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 text-xs font-medium text-white bg-red-500 rounded-full", children: conversation.unreadCount })), (() => {
-                                                                    const statusIcon = getStatusIcon(conversation.status);
-                                                                    if (!statusIcon)
-                                                                        return null;
-                                                                    return (_jsx("div", { className: `w-5 h-5 ${statusIcon.bgColor} rounded-full flex items-center justify-center`, children: _jsx(Icon, { icon: statusIcon.icon, size: 12, className: statusIcon.iconColor }) }));
-                                                                })()] })] })] }) })] })] }, conversation.id))), filteredConversations.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-gray-500", children: [_jsx(Icon, { icon: "chat-square-b", size: 48, className: "text-gray-300 mb-4" }), _jsx("p", { className: "text-lg font-medium mb-2", children: "Kh\u00F4ng t\u00ECm th\u1EA5y cu\u1ED9c tr\u00F2 chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-center", children: searchQuery
-                                    ? "Thử tìm kiếm với từ khóa khác"
-                                    : "Chưa có cuộc trò chuyện nào" })] }))] })] }));
+                            : "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 }) }) }), _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" })] }) }) }))] })] }));
 };
 export default DeskConversationList;

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,EACL,KAAK,gBAAgB,EAGtB,MAAM,yBAAyB,CAAC;AASjC,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,4CAyL3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,gBAAgB,EAGtB,MAAM,yBAAyB,CAAC;AAkBjC,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,4CA0O3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -1,4 +1,15 @@
 "use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SessionType, } from "@openim/wasm-client-sdk";
 import { useChatContext } from "../../context/ChatContext";
@@ -7,11 +18,14 @@ import { Avatar, Button, Input, Tooltip } from "antd";
 import { Icon } from "../icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
-import { useSendMessage } from "../../hooks/message/useSendMessage";
+import { useSendMessage, } from "../../hooks/message/useSendMessage";
+import InfiniteLoader from "react-window-infinite-loader";
+import { VariableSizeList as List, } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
 const MessageList = (props) => {
     var _a, _b;
     const { conversationId, conversationData, onClose } = props;
-    const { messageList, refetch } = useMessage(conversationId);
+    const { messageList, groupMessages, refetch } = useMessage(conversationId);
     const scrollRef = useRef(null);
     const shouldScrollToBottomRef = useRef(true);
     const lastMessageCountRef = useRef((messageList === null || messageList === void 0 ? void 0 : messageList.length) || 0);
@@ -25,6 +39,7 @@ const MessageList = (props) => {
             : (conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID) || "",
     });
     const [textMessage, setTextMessage] = useState("");
+    const [composing, setComposing] = useState(false);
     const [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false);
     const scrollToBottom = useCallback((force = false) => {
         if (scrollRef.current) {
@@ -51,20 +66,27 @@ const MessageList = (props) => {
         setShowScrollToBottomButton(distanceFromBottom > SCROLL_DOWN_THRESHOLD &&
             !shouldScrollToBottomRef.current);
     }, []);
-    const onSendTextMessage = async () => {
+    const onSendTextMessage = useCallback(async () => {
         setTextMessage("");
-        const res = await sendTextMessage(textMessage);
+        const lastMessage = messageList === null || messageList === void 0 ? void 0 : messageList[(messageList === null || messageList === void 0 ? void 0 : messageList.length) - 1];
+        const res = await sendTextMessage(textMessage, lastMessage);
         if (res) {
             refetch();
         }
-    };
-    const renderMessageItem = useCallback((message) => {
-        var _a, _b, _c;
-        const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === (user === null || user === void 0 ? void 0 : user.userID);
-        return (_jsx("div", { className: clsx("flex", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: "flex items-end gap-2", children: [!isMine && (_jsx(Avatar, { children: ((_b = (_a = message === null || message === void 0 ? void 0 : message.senderNickname) === 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 items-start", children: [!isMine && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsx("div", { className: clsx("px-3 py-2 sm:px-4 sm:py-2 rounded-2xl max-w-full break-words", isMine
-                                    ? "bg-blue-500 text-white"
-                                    : "bg-gray-100 text-gray-900"), children: _jsx("p", { className: "text-sm sm:text-base whitespace-pre-wrap", children: ((_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) || "Tin nhắn không khả dụng" }) })] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID));
-    }, [user === null || user === void 0 ? void 0 : user.userID]);
+    }, [textMessage, sendTextMessage, refetch, messageList]);
+    const renderMessageItem = useCallback((listItemProps) => {
+        const { index } = listItemProps;
+        const groupMessage = groupMessages === null || groupMessages === void 0 ? void 0 : groupMessages[index];
+        const messagesInGroup = (groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.messages) || [];
+        return (_jsxs("div", { children: [_jsx("div", { children: groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.sendTime }), messagesInGroup === null || messagesInGroup === void 0 ? void 0 : messagesInGroup.map((message) => {
+                    var _a, _b, _c;
+                    const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === (user === null || user === void 0 ? void 0 : user.userID);
+                    return (_jsx("div", { className: clsx("flex", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: "flex items-end gap-2", children: [!isMine && (_jsx(Avatar, { children: ((_b = (_a = message === null || message === void 0 ? void 0 : message.senderNickname) === 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 items-start", children: [!isMine && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsx("div", { className: clsx("px-3 py-2 sm:px-4 sm:py-2 rounded-2xl max-w-full break-words", isMine
+                                                ? "bg-blue-500 text-white"
+                                                : "bg-gray-100 text-gray-900"), children: _jsx("p", { className: "text-sm sm:text-base whitespace-pre-wrap", children: ((_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) ||
+                                                    "Tin nhắn không khả dụng" }) })] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID));
+                })] }));
+    }, [user === null || user === void 0 ? void 0 : user.userID, groupMessages]);
     useEffect(() => {
         const currentMessageCount = (messageList === null || messageList === void 0 ? void 0 : messageList.length) || 0;
         const previousMessageCount = lastMessageCountRef.current;
@@ -82,10 +104,20 @@ const MessageList = (props) => {
         }
         lastMessageCountRef.current = currentMessageCount;
     }, [messageList, user === null || user === void 0 ? void 0 : user.userID, scrollToBottom]);
-    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full bg-white", children: [_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, 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" })] }), _jsx(Button, { type: "text", shape: "circle", icon: _jsx(Icon, { icon: "align-justify-o", size: 24 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "circle", icon: _jsx(Icon, { icon: "close-b", size: 24 }), onClick: onClose }))] }), _jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx("div", { className: "relative h-full h-full", children: _jsx("div", { ref: scrollRef, className: "h-full overflow-y-auto p-3 sm:p-4 flex flex-col gap-2", children: messageList === null || messageList === void 0 ? void 0 : messageList.map((message) => renderMessageItem(message)) }) }) }), _jsx("div", { className: "border-t px-4 py-3", children: _jsx("div", { className: "border rounded-lg bg-gray-50", children: _jsxs("div", { className: "px-4 py-3 flex items-center gap-4", children: [_jsx(Input, { placeholder: "Nh\u1EADp tin nh\u1EAFn", size: "small", variant: "borderless", value: textMessage, onChange: (e) => setTextMessage(e.target.value), onKeyDown: (e) => {
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full bg-white", children: [_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, 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" })] }), _jsx(Button, { type: "text", shape: "circle", icon: _jsx(Icon, { icon: "align-justify-o", size: 24 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "circle", icon: _jsx(Icon, { icon: "close-b", size: 24 }), onClick: onClose }))] }), _jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx("div", { className: "relative h-full", children: _jsx(AutoSizer, { children: ({ height, width }) => (_jsx(InfiniteLoader, { isItemLoaded: () => true, loadMoreItems: () => { }, itemCount: (groupMessages === null || groupMessages === void 0 ? void 0 : groupMessages.length) || 0, children: (_a) => {
+                                var { onItemsRendered, ref } = _a, rest = __rest(_a, ["onItemsRendered", "ref"]);
+                                return (_jsx(List, Object.assign({ ref: ref }, rest, { itemCount: (groupMessages === null || groupMessages === void 0 ? void 0 : groupMessages.length) || 0, onItemsRendered: onItemsRendered, height: height, width: width, itemSize: (index) => {
+                                        const groupMessage = groupMessages === null || groupMessages === void 0 ? void 0 : groupMessages[index];
+                                        const messagesInGroup = (groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.messages) || [];
+                                        return (messagesInGroup === null || messagesInGroup === void 0 ? void 0 : messagesInGroup.length) * 50;
+                                    }, children: renderMessageItem })));
+                            } })) }) }) }), _jsx("div", { className: "border-t px-4 py-3", children: _jsx("div", { className: "border rounded-lg bg-gray-50", children: _jsxs("div", { className: "px-4 py-3 flex items-center gap-4", children: [_jsx(Input, { placeholder: "Nh\u1EADp tin nh\u1EAFn", size: "small", variant: "borderless", value: textMessage, onChange: (e) => setTextMessage(e.target.value), onKeyDown: (e) => {
+                                    if (composing) {
+                                        return;
+                                    }
                                     if (e.key === "Enter") {
                                         onSendTextMessage();
                                     }
-                                } }), _jsx(Tooltip, { title: "G\u1EEDi tin nh\u1EAFn", children: _jsx(Button, { type: "primary", shape: "circle", size: "middle", icon: _jsx(Icon, { icon: "send-b", color: "white", size: 16 }), disabled: textMessage.length === 0, onClick: onSendTextMessage }) })] }) }) })] }));
+                                }, onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false) }), _jsx(Tooltip, { title: "G\u1EEDi tin nh\u1EAFn", children: _jsx(Button, { type: "primary", shape: "circle", size: "middle", icon: _jsx(Icon, { icon: "send-b", color: "white", size: 16 }), disabled: textMessage.length === 0, onClick: onSendTextMessage }) })] }) }) })] }));
 };
 export default MessageList;

package/dist/constants/index.d.ts

@@ -0,0 +1,2 @@
+export declare const coreWasmPath = "https://droppiistg.blob.core.windows.net/droppii-stg-public/3315964d-11d5-4d27-8af7-d2ec2354994f.wasm";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/constants/index.js

@@ -0,0 +1 @@
+export const coreWasmPath = "https://droppiistg.blob.core.windows.net/droppii-stg-public/3315964d-11d5-4d27-8af7-d2ec2354994f.wasm";

package/dist/constants/sdk.d.ts

@@ -0,0 +1,3 @@
+import { getSDK } from "@openim/wasm-client-sdk";
+export declare const DChatSDK: ReturnType<typeof getSDK>;
+//# sourceMappingURL=sdk.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../../src/constants/sdk.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjD,eAAO,MAAM,QAAQ,EAAE,UAAU,CAAC,OAAO,MAAM,CAI7C,CAAC"}

package/dist/constants/sdk.js

@@ -0,0 +1,7 @@
+import { getSDK } from "@openim/wasm-client-sdk";
+import { coreWasmPath } from "./index";
+export const DChatSDK = getSDK({
+    coreWasmPath,
+    sqlWasmPath: "/sql-wasm.wasm",
+    debug: process.env.NODE_ENV === "development",
+});

package/dist/context/ChatContext.d.ts

@@ -1,5 +1,5 @@
 import { ChatContextType, ChatProviderProps } from "../types/chat";
 export declare const ChatContext: import("react").Context<ChatContextType>;
 export declare const useChatContext: () => ChatContextType;
-export declare const ChatProvider: ({ children, config }: ChatProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChatProvider: ({ children, config, refetchToken, }: ChatProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatContext.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,WAAW,0CAEtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,sBAAsB,iBAAiB,4CAkCnE,CAAC"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,WAAW,0CAGtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,qCAI1B,iBAAiB,4CAyEnB,CAAC"}

package/dist/context/ChatContext.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from "react";
-import { getSDK, } from "@openim/wasm-client-sdk";
-import { Spin } from "antd";
-const DChatSDK = getSDK();
+import { CbEvents } from "@openim/wasm-client-sdk";
+import { ConnectStatus, } from "../types/chat";
+import { DChatSDK } from "../constants/sdk";
 export const ChatContext = createContext({
     user: null,
+    connectStatus: ConnectStatus.Disconnected,
 });
 export const useChatContext = () => useContext(ChatContext);
-export const ChatProvider = ({ children, config }) => {
-    const [loading, setLoading] = useState(true);
+export const ChatProvider = ({ children, config, refetchToken, }) => {
+    const [connectStatus, setConnectStatus] = useState(ConnectStatus.Disconnected);
     const [user, setUser] = useState(null);
     const getUserInfo = () => {
         DChatSDK.getSelfUserInfo()
@@ -20,11 +21,10 @@ export const ChatProvider = ({ children, config }) => {
             console.log("getSelfUserInfo", errCode, errMsg);
         });
     };
-    const handleLogin = () => {
-        DChatSDK.login(config)
+    const handleLogin = (newToken) => {
+        DChatSDK.login(Object.assign(Object.assign({}, config), { token: newToken || config.token }))
             .then((res) => {
             getUserInfo();
-            setLoading(false);
         })
             .catch(({ errCode, errMsg }) => {
             console.log("handleLogin", errCode, errMsg);
@@ -33,5 +33,39 @@ export const ChatProvider = ({ children, config }) => {
     useEffect(() => {
         handleLogin();
     }, [config]);
-    return (_jsx(ChatContext.Provider, { value: { user }, children: loading ? _jsx(Spin, { fullscreen: true }) : children }));
+    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: children }));
 };

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

@@ -1,8 +1,9 @@
-import { ConversationItem, SessionType } from '@openim/wasm-client-sdk';
-export declare const useConversationList: () => {
+import { ConversationItem, SessionType } from "@openim/wasm-client-sdk";
+export declare const useConversationList: (selectedThreadId?: string) => {
     conversationList: ConversationItem[];
+    getAllConversationList: () => Promise<void>;
 };
-export declare const useConversationDetail: ({ sourceID, sessionType }: {
+export declare const useConversationDetail: ({ sourceID, sessionType, }: {
     sourceID: string;
     sessionType: SessionType;
 }) => {

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,EAAU,gBAAgB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAIhF,eAAO,MAAM,mBAAmB;;CA8B/B,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,2BAAyB;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,WAAW,CAAA;CAAC;;CAqB1G,CAAA"}
+{"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;;;CA0C5D,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,4BAGnC;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC1B;;CAuBA,CAAC"}