@droppii-org/chat-sdk 0.0.5 → 0.0.6

package/dist/components/ChatBubble.d.ts

@@ -0,0 +1,10 @@
+import { SessionType } from "@openim/wasm-client-sdk";
+interface ChatBubbleProps {
+    conversationId: string;
+    sourceID: string;
+    sessionType: SessionType;
+    className?: string;
+}
+declare const ChatBubble: ({ conversationId, sourceID, sessionType, className, }: ChatBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default ChatBubble;
+//# sourceMappingURL=ChatBubble.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../src/components/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,4CAgDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ChatBubble.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FloatButton, Drawer } from "antd";
+import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
+import MessageList from "./message/MessageList";
+import { useConversationDetail } from "src/hooks/conversation/useConversation";
+const ChatBubble = ({ conversationId, sourceID, sessionType, className, }) => {
+    const { conversationDetail } = useConversationDetail({
+        sourceID,
+        sessionType,
+    });
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleChat = () => {
+        setIsOpen(!isOpen);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
+                    right: 24,
+                    bottom: 24,
+                    width: 60,
+                    height: 60,
+                }, onClick: toggleChat, className: className }), _jsx(Drawer, { placement: "right", onClose: () => setIsOpen(false), open: isOpen, mask: true, closable: false, styles: {
+                    body: { padding: 0 },
+                }, children: _jsx(MessageList, { conversationId: conversationId, conversationData: conversationDetail, className: "flex-1", onClose: () => setIsOpen(false) }) })] }));
+};
+export default ChatBubble;

package/dist/components/chat-bubble/ChatBubble.d.ts

@@ -0,0 +1,9 @@
+import type { ConversationItem } from "@openim/wasm-client-sdk";
+interface ChatBubbleProps {
+    conversationId: string;
+    conversationData: ConversationItem | null;
+    className?: string;
+}
+declare const ChatBubble: ({ conversationId, conversationData, className }: ChatBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default ChatBubble;
+//# sourceMappingURL=ChatBubble.d.ts.map

package/dist/components/chat-bubble/ChatBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chat-bubble/ChatBubble.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAA;IACtB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,GAAI,iDAAiD,eAAe,4CAkDnF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/components/chat-bubble/ChatBubble.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FloatButton, Drawer } from "antd";
+import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
+import MessageList from "../message/MessageList";
+const ChatBubble = ({ conversationId, conversationData, className }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleChat = () => {
+        setIsOpen(!isOpen);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
+                    right: 24,
+                    bottom: 24,
+                    width: 60,
+                    height: 60,
+                }, onClick: toggleChat, className: className }), _jsx(Drawer, { title: "Chat", placement: "right", onClose: () => setIsOpen(false), open: isOpen, width: 400, height: 600, style: {
+                    position: "fixed",
+                    right: 24,
+                    bottom: 100,
+                    borderRadius: "12px",
+                }, styles: {
+                    body: { padding: 0, height: "100%" },
+                    header: { padding: "12px 16px", borderBottom: "1px solid #f0f0f0" },
+                }, mask: false, destroyOnClose: false, children: _jsx("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: _jsx(MessageList, { conversationId: conversationId, conversationData: conversationData, className: "flex-1" }) }) })] }));
+};
+export default ChatBubble;

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

@@ -0,0 +1,8 @@
+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;
+export default DeskConversationList;
+//# sourceMappingURL=DeskConversationList.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/conversation/DeskConversationList.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+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;
+    }
+};
+const DeskConversationList = ({ onConversationSelect, selectedConversationId, className = "", }) => {
+    const { conversationList } = useConversationList();
+    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 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);
+        router.push(`${pathname}?${newSearchParams.toString()}`);
+        setSelectedThreadId(conversation.threadId);
+        onConversationSelect === null || onConversationSelect === void 0 ? void 0 : onConversationSelect(conversation.id, conversation.threadId);
+    };
+    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
+                            ? "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" })] }))] })] }));
+};
+export default DeskConversationList;

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

@@ -0,0 +1,11 @@
+import React from "react";
+export interface IconProps {
+    icon: string;
+    size?: number | string;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+}
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqBpC,CAAC"}

package/dist/components/icon/index.js

@@ -0,0 +1,18 @@
+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 } from "react/jsx-runtime";
+import IcoMoon from "react-icomoon";
+import iconSet from "../../assets/droppiiFontSelection.json";
+export const Icon = (_a) => {
+    var { icon, size = 24, color = "currentColor", className = "", style = {}, onClick } = _a, props = __rest(_a, ["icon", "size", "color", "className", "style", "onClick"]);
+    return (_jsx(IcoMoon, Object.assign({ iconSet: iconSet, icon: icon, size: size, color: color, className: className, style: style, onClick: onClick }, props)));
+};

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

@@ -0,0 +1,10 @@
+import { type ConversationItem } from "@openim/wasm-client-sdk";
+interface MessageListProps {
+    conversationId: string;
+    conversationData: ConversationItem | null;
+    className?: string;
+    onClose?: () => void;
+}
+declare const MessageList: (props: MessageListProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageList;
+//# sourceMappingURL=MessageList.d.ts.map

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

@@ -0,0 +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,4CAsL3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SessionType, } from "@openim/wasm-client-sdk";
+import { useChatContext } from "../../context/ChatContext";
+import { useMessage } from "../../hooks/message/useMessage";
+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";
+const MessageList = (props) => {
+    var _a, _b;
+    const { conversationId, conversationData, onClose } = props;
+    const { messageList, refetch } = useMessage(conversationId);
+    const scrollRef = useRef(null);
+    const shouldScrollToBottomRef = useRef(true);
+    const lastMessageCountRef = useRef((messageList === null || messageList === void 0 ? void 0 : messageList.length) || 0);
+    const { user } = useChatContext();
+    const { sendTextMessage } = useSendMessage({
+        recvID: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType) !== SessionType.Single
+            ? ""
+            : (conversationData === null || conversationData === void 0 ? void 0 : conversationData.userID) || "",
+        groupID: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType) === SessionType.Single
+            ? ""
+            : (conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID) || "",
+    });
+    const [textMessage, setTextMessage] = useState("");
+    const [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false);
+    const scrollToBottom = useCallback((force = false) => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+            if (force) {
+                shouldScrollToBottomRef.current = true; // If forced, ensure auto-scroll is re-enabled
+            }
+        }
+    }, []);
+    const handleScroll = useCallback(() => {
+        if (!scrollRef.current)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const SCROLL_UP_THRESHOLD = 200; // If user scrolls up more than 200px from bottom, disable auto-scroll
+        const SCROLL_DOWN_THRESHOLD = 5; // If user scrolls within 5px of bottom, re-enable auto-scroll
+        if (distanceFromBottom > SCROLL_UP_THRESHOLD) {
+            shouldScrollToBottomRef.current = false;
+        }
+        else if (distanceFromBottom <= SCROLL_DOWN_THRESHOLD) {
+            shouldScrollToBottomRef.current = true;
+        }
+        // Show button if not at bottom AND auto-scroll is disabled
+        setShowScrollToBottomButton(distanceFromBottom > SCROLL_DOWN_THRESHOLD &&
+            !shouldScrollToBottomRef.current);
+    }, []);
+    const onSendTextMessage = async () => {
+        setTextMessage("");
+        const res = await sendTextMessage(textMessage);
+        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" }) })] })] }) }));
+    }, [user === null || user === void 0 ? void 0 : user.userID]);
+    useEffect(() => {
+        const currentMessageCount = (messageList === null || messageList === void 0 ? void 0 : messageList.length) || 0;
+        const previousMessageCount = lastMessageCountRef.current;
+        if (currentMessageCount > previousMessageCount) {
+            const newMessages = messageList === null || messageList === void 0 ? void 0 : messageList.slice(previousMessageCount);
+            const hasNewMessageFromCurrentUser = newMessages === null || newMessages === void 0 ? void 0 : newMessages.some((msg) => msg.sendID === (user === null || user === void 0 ? void 0 : user.userID));
+            // If current user sent a message, always scroll to bottom
+            // If another user sent a message, only scroll if shouldScrollToBottomRef is true (user is already at bottom)
+            if (hasNewMessageFromCurrentUser) {
+                setTimeout(() => scrollToBottom(true), 50); // Force scroll for own messages
+            }
+            else if (shouldScrollToBottomRef.current) {
+                setTimeout(() => scrollToBottom(), 50); // Scroll if auto-scroll is enabled for others' messages
+            }
+        }
+        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) => {
+                                    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 }) })] }) }) })] }));
+};
+export default MessageList;

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

@@ -0,0 +1,7 @@
+interface AssignedSessionFilterProps {
+    onFilterChange?: (categoryId: string, subCategoryId?: string) => void;
+    className?: string;
+}
+declare const AssignedSessionFilter: ({ onFilterChange, className, }: AssignedSessionFilterProps) => import("react/jsx-runtime").JSX.Element;
+export default AssignedSessionFilter;
+//# sourceMappingURL=AssignedSessionFilter.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/session/AssignedSessionFilter.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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",
+            },
+            {
+                icon: "play-b",
+                label: "Đang xử lý",
+                count: 38,
+                color: "text-gray-600",
+            },
+            {
+                icon: "pause-b",
+                label: "Tạm chờ",
+                count: 2,
+                color: "text-gray-600",
+            },
+        ],
+    },
+    {
+        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)) {
+            newExpanded.delete(index);
+        }
+        else {
+            newExpanded.add(index);
+        }
+        setExpandedCategories(newExpanded);
+    };
+    const handleFilterSelect = (categoryId, subCategoryId) => {
+        const filterId = subCategoryId || categoryId;
+        setSelectedFilter(filterId);
+        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: () => {
+                                    if (category.subCategories) {
+                                        toggleCategory(index);
+                                    }
+                                    else {
+                                        handleFilterSelect(category.label);
+                                    }
+                                }, className: `w-full flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors group ${selectedFilter === category.label && !category.subCategories
+                                    ? "bg-blue-50 border-r-2 border-blue-500"
+                                    : ""}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [category.subCategories && (_jsx(Icon, { icon: expandedCategories.has(index)
+                                                            ? "chevron-down-b"
+                                                            : "chevron-right-b", size: 14, className: "text-gray-400" })), _jsx(Icon, { icon: category.icon, size: 20, className: category.color })] }), _jsx("span", { className: "font-medium text-gray-800 text-left", children: category.label })] }), _jsx("span", { className: "text-sm font-medium text-gray-500 min-w-0", children: category.count })] }), category.subCategories && expandedCategories.has(index) && (_jsx("ul", { className: "ml-4 border-l border-gray-200", children: category.subCategories.map((subCategory, subIndex) => (_jsx("li", { children: _jsxs("button", { onClick: () => handleFilterSelect(category.label, subCategory.label), className: `w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 transition-colors group ${selectedFilter === subCategory.label
+                                            ? "bg-blue-50 border-r-2 border-blue-500"
+                                            : ""}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex-shrink-0 ml-4", children: _jsx(Icon, { icon: subCategory.icon, size: 18, className: subCategory.color }) }), _jsx("span", { className: "text-sm font-medium text-gray-700 text-left", children: subCategory.label })] }), _jsx("span", { className: "text-xs font-medium text-gray-500 min-w-0", children: subCategory.count })] }) }, subIndex))) }))] }, index))) }) })] }));
+};
+export default AssignedSessionFilter;

package/dist/context/ChatContext.d.ts

@@ -0,0 +1,5 @@
+import { ChatContextType, ChatProviderProps } from "src/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;
+//# sourceMappingURL=ChatContext.d.ts.map

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

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

package/dist/context/ChatContext.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { getSDK, } from "@openim/wasm-client-sdk";
+const DChatSDK = getSDK();
+export const ChatContext = createContext({
+    user: null,
+});
+export const useChatContext = () => useContext(ChatContext);
+export const ChatProvider = ({ children, config }) => {
+    const [loading, setLoading] = useState(true);
+    const [user, setUser] = useState(null);
+    const getUserInfo = () => {
+        DChatSDK.getSelfUserInfo()
+            .then(({ data }) => {
+            setUser(data);
+        })
+            .catch(({ errCode, errMsg }) => {
+            console.log("getSelfUserInfo", errCode, errMsg);
+        });
+    };
+    const handleLogin = () => {
+        DChatSDK.login(config)
+            .then((res) => {
+            getUserInfo();
+            setLoading(false);
+        })
+            .catch(({ errCode, errMsg }) => {
+            console.log("login", errCode, errMsg);
+        });
+    };
+    useEffect(() => {
+        handleLogin();
+    }, [config]);
+    return (_jsx(ChatContext.Provider, { value: { user }, children: !loading ? children : null }));
+};

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

@@ -0,0 +1,11 @@
+import { ConversationItem, SessionType } from '@openim/wasm-client-sdk';
+export declare const useConversationList: () => {
+    conversationList: ConversationItem[];
+};
+export declare const useConversationDetail: ({ sourceID, sessionType }: {
+    sourceID: string;
+    sessionType: SessionType;
+}) => {
+    conversationDetail: ConversationItem | null;
+};
+//# sourceMappingURL=useConversation.d.ts.map

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

@@ -0,0 +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"}

package/dist/hooks/conversation/useConversation.js

@@ -0,0 +1,51 @@
+import { getSDK } from '@openim/wasm-client-sdk';
+import { useCallback, useEffect, useState } from 'react';
+const DChatSDK = getSDK();
+export const useConversationList = () => {
+    const [conversationList, setConversationList] = useState([]);
+    const getAllConversationList = useCallback(async () => {
+        DChatSDK.getAllConversationList().then(({ data }) => {
+            console.log('getAllConversationList', data);
+            setConversationList(data);
+        }).catch((err) => {
+            console.log('getAllConversationList', err);
+        });
+    }, []);
+    const getOneConversation = useCallback(async () => {
+        DChatSDK.getOneConversation({
+            sourceID: '3408237279',
+            sessionType: 3
+        }).then(({ data }) => {
+            console.log('getOneConversation', data);
+        }).catch((err) => {
+            console.log('getOneConversation', err);
+        });
+    }, []);
+    useEffect(() => {
+        getAllConversationList();
+        getOneConversation();
+    }, [getAllConversationList]);
+    return {
+        conversationList,
+    };
+};
+export const useConversationDetail = ({ sourceID, sessionType }) => {
+    const [conversationDetail, setConversationDetail] = useState(null);
+    const getConversationDetail = useCallback(async () => {
+        DChatSDK.getOneConversation({
+            sourceID,
+            sessionType
+        }).then(({ data }) => {
+            console.log('getOneConversation', data);
+            setConversationDetail(data);
+        }).catch((err) => {
+            console.log('getOneConversation', err);
+        });
+    }, [sourceID, sessionType]);
+    useEffect(() => {
+        getConversationDetail();
+    }, [getConversationDetail]);
+    return {
+        conversationDetail,
+    };
+};