@min98/chat-sdk 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1068 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/context/ChatContext.tsx
+import { createContext, useContext, useState, useEffect, useRef, useCallback } from "react";
+
+// src/core/api-client.ts
+import axios from "axios";
+var ChatApiClient = class {
+  constructor(apiBaseUrl, token) {
+    __publicField(this, "axiosInstance");
+    this.axiosInstance = axios.create({
+      baseURL: apiBaseUrl
+    });
+    this.axiosInstance.interceptors.request.use((config) => {
+      const activeToken = typeof token === "function" ? token() : token;
+      if (activeToken) {
+        config.headers.Authorization = `Bearer ${activeToken}`;
+      }
+      return config;
+    });
+  }
+  async getActiveSession(userId) {
+    const res = await this.axiosInstance.get("/api/chat/session", {
+      params: userId ? { userId } : {}
+    });
+    return res.data?.data;
+  }
+  async startSession(title, userId) {
+    const res = await this.axiosInstance.post("/api/chat/session", { title, userId });
+    return res.data?.data;
+  }
+  async closeSession(userId) {
+    const res = await this.axiosInstance.patch("/api/chat/session", { userId });
+    return res.data?.data;
+  }
+  async getMessages(userId, limit = 15, before) {
+    const res = await this.axiosInstance.get("/api/chat/messages", {
+      params: {
+        limit,
+        userId,
+        before
+      }
+    });
+    return res.data;
+  }
+  async sendMessage(content, userId, attachments) {
+    const res = await this.axiosInstance.post("/api/chat/messages", {
+      content,
+      userId,
+      attachments
+    });
+    return res.data?.data;
+  }
+  async markAsRead(userId) {
+    const res = await this.axiosInstance.post("/api/chat/read", { userId });
+    return res.data;
+  }
+  async uploadFile(file) {
+    const formData = new FormData();
+    formData.append("file", file);
+    const res = await this.axiosInstance.post("/api/chat/upload", formData, {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    });
+    return res.data?.data;
+  }
+  async getRooms() {
+    const res = await this.axiosInstance.get("/api/chat/rooms");
+    return res.data?.data;
+  }
+  async getSseTicket() {
+    const res = await this.axiosInstance.post("/api/chat/sse-ticket");
+    return res.data?.data?.ticket;
+  }
+};
+
+// src/core/sse-client.ts
+var ChatSseClient = class {
+  constructor(apiClient, apiBaseUrl, onMessageReceived, onStatusChange) {
+    __publicField(this, "apiClient");
+    __publicField(this, "apiBaseUrl");
+    __publicField(this, "eventSource", null);
+    __publicField(this, "reconnectTimeout", null);
+    __publicField(this, "onMessageReceived");
+    __publicField(this, "onStatusChange");
+    __publicField(this, "isConnected", false);
+    __publicField(this, "isDestroyed", false);
+    this.apiClient = apiClient;
+    this.apiBaseUrl = apiBaseUrl;
+    this.onMessageReceived = onMessageReceived;
+    this.onStatusChange = onStatusChange;
+  }
+  async connect() {
+    this.disconnect();
+    this.isDestroyed = false;
+    try {
+      const ticket = await this.apiClient.getSseTicket();
+      if (!ticket) {
+        throw new Error("Kh\xF4ng nh\u1EADn \u0111\u01B0\u1EE3c ticket k\u1EBFt n\u1ED1i realtime");
+      }
+      if (this.isDestroyed) return;
+      const streamUrl = `${this.apiBaseUrl.replace(/\/$/, "")}/api/v1/sse/stream?ticket=${ticket}`;
+      const eventSource = new EventSource(streamUrl);
+      this.eventSource = eventSource;
+      eventSource.onopen = () => {
+        if (this.isDestroyed) return;
+        this.isConnected = true;
+        this.onStatusChange(true, null);
+      };
+      eventSource.addEventListener("connected", () => {
+        if (this.isDestroyed) return;
+        this.isConnected = true;
+        this.onStatusChange(true, null);
+      });
+      eventSource.addEventListener("new_chat_message", (event) => {
+        if (this.isDestroyed) return;
+        try {
+          const parsed = JSON.parse(event.data);
+          this.onMessageReceived({
+            event: "new_chat_message",
+            data: parsed.data,
+            ts: parsed.ts
+          });
+        } catch (err) {
+          console.error("[sse-client] L\u1ED7i parse new_chat_message:", err);
+        }
+      });
+      eventSource.addEventListener("chat_session_updated", (event) => {
+        if (this.isDestroyed) return;
+        try {
+          const parsed = JSON.parse(event.data);
+          this.onMessageReceived({
+            event: "chat_session_updated",
+            data: parsed.data,
+            ts: parsed.ts
+          });
+        } catch (err) {
+          console.error("[sse-client] L\u1ED7i parse chat_session_updated:", err);
+        }
+      });
+      eventSource.addEventListener("__end_session__", () => {
+        if (this.isDestroyed) return;
+        this.disconnect();
+        this.onStatusChange(false, "Session ended by admin");
+      });
+      eventSource.onerror = (err) => {
+        if (this.isDestroyed) return;
+        console.warn("[sse-client] EventSource error, reconnecting...", err);
+        this.isConnected = false;
+        this.onStatusChange(false, "M\u1EA5t k\u1EBFt n\u1ED1i. \u0110ang k\u1EBFt n\u1ED1i l\u1EA1i...");
+        this.disconnect(true);
+        this.scheduleReconnect();
+      };
+    } catch (err) {
+      if (this.isDestroyed) return;
+      console.error("[sse-client] Connection failed:", err);
+      this.isConnected = false;
+      this.onStatusChange(false, err instanceof Error ? err.message : "L\u1ED7i k\u1EBFt n\u1ED1i");
+      this.scheduleReconnect();
+    }
+  }
+  scheduleReconnect() {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+    }
+    this.reconnectTimeout = setTimeout(() => {
+      if (!this.isDestroyed) {
+        void this.connect();
+      }
+    }, 5e3);
+  }
+  disconnect(keepReconnectStatus = false) {
+    if (this.eventSource) {
+      this.eventSource.close();
+      this.eventSource = null;
+    }
+    if (this.reconnectTimeout && !keepReconnectStatus) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    if (!keepReconnectStatus) {
+      this.isConnected = false;
+      this.isDestroyed = true;
+    }
+  }
+};
+
+// src/context/ChatContext.tsx
+import { jsx } from "react/jsx-runtime";
+var ChatContext = createContext(void 0);
+var ChatProvider = ({
+  apiBaseUrl,
+  token,
+  isAdmin = false,
+  children
+}) => {
+  const [messages, setMessages] = useState([]);
+  const [activeSession, setActiveSession] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [sseError, setSseError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingSession, setIsLoadingSession] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [rooms, setRooms] = useState([]);
+  const [selectedRoom, setSelectedRoomState] = useState(null);
+  const apiClientRef = useRef(null);
+  const sseClientRef = useRef(null);
+  if (!apiClientRef.current) {
+    apiClientRef.current = new ChatApiClient(apiBaseUrl, token);
+  }
+  const apiClient = apiClientRef.current;
+  const getUserIdFromToken = useCallback(() => {
+    try {
+      const activeToken = typeof token === "function" ? token() : token;
+      if (!activeToken) return void 0;
+      const payloadBase64 = activeToken.split(".")[1];
+      if (!payloadBase64) return void 0;
+      const decodedPayload = JSON.parse(atob(payloadBase64));
+      return decodedPayload.id || decodedPayload.sub;
+    } catch {
+      return void 0;
+    }
+  }, [token]);
+  const currentUserId = getUserIdFromToken();
+  const loadRooms = useCallback(async () => {
+    if (!isAdmin) return;
+    setIsLoading(true);
+    try {
+      const data = await apiClient.getRooms();
+      setRooms(data || []);
+    } catch (err) {
+      console.error("[ChatSDK] L\u1ED7i load rooms:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiClient, isAdmin]);
+  const setSelectedRoom = useCallback((room) => {
+    setSelectedRoomState(room);
+  }, []);
+  const loadMessages = useCallback(async (userId) => {
+    setIsLoading(true);
+    try {
+      const targetUid = isAdmin ? userId : void 0;
+      const res = await apiClient.getMessages(targetUid, 15);
+      const data = res?.data || [];
+      setMessages(data);
+      setHasMore(!!res?.hasMore);
+      if (!isAdmin && currentUserId) {
+        const unreads = data.filter((m) => m.senderId !== currentUserId && !m.isRead).length;
+        setUnreadCount(unreads);
+      }
+    } catch (err) {
+      console.error("[ChatSDK] L\u1ED7i load tin nh\u1EAFn:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiClient, isAdmin, currentUserId]);
+  const loadMoreMessages = useCallback(async (userId) => {
+    if (!hasMore || isLoadingMore || messages.length === 0) return;
+    setIsLoadingMore(true);
+    try {
+      const firstMsg = messages[0];
+      const targetUid = isAdmin ? userId : void 0;
+      const res = await apiClient.getMessages(targetUid, 15, firstMsg.createdAt);
+      const newMsgs = res?.data || [];
+      if (newMsgs.length > 0) {
+        setMessages((prev) => [...newMsgs, ...prev]);
+        setHasMore(!!res?.hasMore);
+      } else {
+        setHasMore(false);
+      }
+    } catch (err) {
+      console.error("[ChatSDK] L\u1ED7i load th\xEAm tin nh\u1EAFn:", err);
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [apiClient, hasMore, isLoadingMore, messages, isAdmin]);
+  const loadActiveSession = useCallback(async (userId) => {
+    setIsLoadingSession(true);
+    try {
+      const targetUid = isAdmin ? userId : void 0;
+      const sessionData = await apiClient.getActiveSession(targetUid);
+      setActiveSession(sessionData || null);
+    } catch (err) {
+      console.error("[ChatSDK] L\u1ED7i load session active:", err);
+    } finally {
+      setIsLoadingSession(false);
+    }
+  }, [apiClient, isAdmin]);
+  const sendMessage = useCallback(async (content, attachments) => {
+    const targetUid = isAdmin ? selectedRoom?.userId : void 0;
+    try {
+      const newMsg = await apiClient.sendMessage(content, targetUid, attachments);
+      if (newMsg) {
+        setMessages((prev) => {
+          if (prev.some((m) => m._id === newMsg._id)) return prev;
+          return [...prev, newMsg];
+        });
+      }
+    } catch (err) {
+      console.error("[ChatSDK] G\u1EEDi tin nh\u1EAFn th\u1EA5t b\u1EA1i:", err);
+      throw err;
+    }
+  }, [apiClient, isAdmin, selectedRoom]);
+  const startSession = useCallback(async (title, userId) => {
+    setIsLoadingSession(true);
+    try {
+      const sess = await apiClient.startSession(title, userId);
+      if (sess) {
+        setActiveSession(sess);
+        if (isAdmin && selectedRoom && selectedRoom.userId === userId) {
+          setSelectedRoomState((prev) => prev ? { ...prev, activeSession: sess } : null);
+        }
+      }
+    } catch (err) {
+      console.error("[ChatSDK] B\u1EAFt \u0111\u1EA7u phi\xEAn th\u1EA5t b\u1EA1i:", err);
+      throw err;
+    } finally {
+      setIsLoadingSession(false);
+    }
+  }, [apiClient, isAdmin, selectedRoom]);
+  const closeSession = useCallback(async (userId) => {
+    setIsLoadingSession(true);
+    try {
+      await apiClient.closeSession(userId);
+      setActiveSession(null);
+      if (isAdmin && selectedRoom && selectedRoom.userId === userId) {
+        setSelectedRoomState((prev) => prev ? { ...prev, activeSession: null } : null);
+      }
+    } catch (err) {
+      console.error("[ChatSDK] \u0110\xF3ng phi\xEAn th\u1EA5t b\u1EA1i:", err);
+      throw err;
+    } finally {
+      setIsLoadingSession(false);
+    }
+  }, [apiClient, isAdmin, selectedRoom]);
+  const markAsRead = useCallback(async (userId) => {
+    try {
+      await apiClient.markAsRead(userId);
+      setUnreadCount(0);
+      setMessages(
+        (prev) => prev.map((m) => {
+          if (isAdmin) {
+            return m.senderId === userId ? { ...m, isRead: true } : m;
+          } else {
+            return m.senderId !== currentUserId ? { ...m, isRead: true } : m;
+          }
+        })
+      );
+    } catch (err) {
+      console.error("[ChatSDK] L\u1ED7i \u0111\xE1nh d\u1EA5u \u0111\u1ECDc tin nh\u1EAFn:", err);
+    }
+  }, [apiClient, isAdmin, currentUserId]);
+  const uploadFile = useCallback(async (file) => {
+    setIsUploading(true);
+    try {
+      const data = await apiClient.uploadFile(file);
+      return data;
+    } catch (err) {
+      console.error("[ChatSDK] Upload file th\u1EA5t b\u1EA1i:", err);
+      throw err;
+    } finally {
+      setIsUploading(false);
+    }
+  }, [apiClient]);
+  const handleRealtimeEvent = useCallback((event) => {
+    if (event.event === "new_chat_message") {
+      const newMsg = event.data;
+      if (isAdmin) {
+        if (selectedRoom && newMsg.userId === selectedRoom.userId) {
+          setMessages((prev) => {
+            if (prev.some((m) => m._id === newMsg._id)) return prev;
+            return [...prev, newMsg];
+          });
+          apiClient.markAsRead(selectedRoom.userId).catch(() => void 0);
+        }
+        setRooms((prev) => {
+          const idx = prev.findIndex((r) => r.userId === newMsg.userId);
+          if (idx !== -1) {
+            const updated = [...prev];
+            const oldRoom = updated[idx];
+            updated[idx] = {
+              ...oldRoom,
+              lastMessage: {
+                content: newMsg.content,
+                attachments: newMsg.attachments || [],
+                senderId: newMsg.senderId,
+                createdAt: newMsg.createdAt
+              },
+              unreadCount: (!selectedRoom || selectedRoom.userId !== newMsg.userId) && newMsg.senderId === newMsg.userId ? oldRoom.unreadCount + 1 : oldRoom.unreadCount
+            };
+            return updated.sort((a, b) => new Date(b.lastMessage.createdAt).getTime() - new Date(a.lastMessage.createdAt).getTime());
+          } else {
+            void loadRooms();
+            return prev;
+          }
+        });
+      } else {
+        setMessages((prev) => {
+          if (prev.some((m) => m._id === newMsg._id)) return prev;
+          return [...prev, newMsg];
+        });
+        if (newMsg.senderId !== currentUserId) {
+          setUnreadCount((c) => c + 1);
+        }
+      }
+    } else if (event.event === "chat_session_updated") {
+      const updatedSess = event.data;
+      if (isAdmin) {
+        if (updatedSess && updatedSess.userId) {
+          const targetUid = updatedSess.userId.toString();
+          const isActive = updatedSess.status === "active";
+          setRooms(
+            (prev) => prev.map((r) => r.userId === targetUid ? { ...r, activeSession: isActive ? updatedSess : null } : r)
+          );
+          if (selectedRoom && selectedRoom.userId === targetUid) {
+            setSelectedRoomState((prev) => prev ? { ...prev, activeSession: isActive ? updatedSess : null } : null);
+            setActiveSession(isActive ? updatedSess : null);
+          }
+        }
+      } else {
+        setActiveSession(updatedSess || null);
+      }
+    }
+  }, [isAdmin, selectedRoom, currentUserId, apiClient, loadRooms]);
+  useEffect(() => {
+    if (!currentUserId) return;
+    const sseClient = new ChatSseClient(
+      apiClient,
+      apiBaseUrl,
+      handleRealtimeEvent,
+      (connected, error) => {
+        setIsConnected(connected);
+        setSseError(error);
+      }
+    );
+    sseClientRef.current = sseClient;
+    void sseClient.connect();
+    return () => {
+      sseClient.disconnect();
+      sseClientRef.current = null;
+    };
+  }, [apiBaseUrl, apiClient, currentUserId, handleRealtimeEvent]);
+  useEffect(() => {
+    if (!isAdmin && currentUserId) {
+      void loadActiveSession();
+      void loadMessages();
+    }
+  }, [isAdmin, currentUserId, loadActiveSession, loadMessages]);
+  useEffect(() => {
+    if (isAdmin) {
+      void loadRooms();
+    }
+  }, [isAdmin, loadRooms]);
+  useEffect(() => {
+    if (isAdmin && selectedRoom) {
+      void loadMessages(selectedRoom.userId);
+      void loadActiveSession(selectedRoom.userId);
+      void markAsRead(selectedRoom.userId);
+    }
+  }, [isAdmin, selectedRoom?.userId]);
+  return /* @__PURE__ */ jsx(
+    ChatContext.Provider,
+    {
+      value: {
+        apiClient,
+        messages,
+        activeSession,
+        isConnected,
+        sseError,
+        isLoading,
+        isLoadingSession,
+        isUploading,
+        hasMore,
+        isLoadingMore,
+        unreadCount,
+        rooms,
+        selectedRoom,
+        setSelectedRoom,
+        sendMessage,
+        startSession,
+        closeSession,
+        markAsRead,
+        loadMessages,
+        loadMoreMessages,
+        uploadFile,
+        loadRooms
+      },
+      children
+    }
+  );
+};
+var useChatContext = () => {
+  const context = useContext(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within a ChatProvider");
+  }
+  return context;
+};
+
+// src/hooks/useChat.ts
+function useChat() {
+  const {
+    messages,
+    activeSession,
+    isConnected,
+    sseError,
+    isLoading,
+    isLoadingSession,
+    isUploading,
+    hasMore,
+    isLoadingMore,
+    unreadCount,
+    sendMessage,
+    startSession,
+    closeSession,
+    markAsRead,
+    loadMessages,
+    loadMoreMessages,
+    uploadFile
+  } = useChatContext();
+  return {
+    messages,
+    activeSession,
+    isConnected,
+    sseError,
+    isLoading,
+    isLoadingSession,
+    isUploading,
+    hasMore,
+    isLoadingMore,
+    unreadCount,
+    sendMessage,
+    startSession: (title) => startSession(title),
+    closeSession: () => closeSession(),
+    markAsRead: () => markAsRead(),
+    loadMessages: () => loadMessages(),
+    loadMoreMessages: () => loadMoreMessages(),
+    uploadFile
+  };
+}
+
+// src/hooks/useChatAdmin.ts
+function useChatAdmin() {
+  const {
+    messages,
+    isConnected,
+    sseError,
+    isLoading,
+    isLoadingSession,
+    isUploading,
+    hasMore,
+    isLoadingMore,
+    rooms,
+    selectedRoom,
+    setSelectedRoom,
+    sendMessage,
+    startSession,
+    closeSession,
+    markAsRead,
+    loadMessages,
+    loadMoreMessages,
+    uploadFile,
+    loadRooms
+  } = useChatContext();
+  return {
+    messages,
+    isConnected,
+    sseError,
+    isLoading,
+    isLoadingSession,
+    isUploading,
+    hasMore,
+    isLoadingMore,
+    rooms,
+    selectedRoom,
+    setSelectedRoom,
+    sendMessage,
+    startSession: (title) => {
+      if (selectedRoom) {
+        return startSession(title, selectedRoom.userId);
+      }
+      return Promise.reject(new Error("No selected room"));
+    },
+    closeSession: () => {
+      if (selectedRoom) {
+        return closeSession(selectedRoom.userId);
+      }
+      return Promise.reject(new Error("No selected room"));
+    },
+    markAsRead: () => {
+      if (selectedRoom) {
+        return markAsRead(selectedRoom.userId);
+      }
+      return Promise.resolve();
+    },
+    loadMessages: () => {
+      if (selectedRoom) {
+        return loadMessages(selectedRoom.userId);
+      }
+      return Promise.resolve();
+    },
+    loadMoreMessages: () => {
+      if (selectedRoom) {
+        return loadMoreMessages(selectedRoom.userId);
+      }
+      return Promise.resolve();
+    },
+    uploadFile,
+    loadRooms
+  };
+}
+
+// src/components/ChatWindow.tsx
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import {
+  Send,
+  Paperclip,
+  Loader2,
+  FileIcon,
+  MessageSquare,
+  Sparkles,
+  Clock,
+  RefreshCw,
+  X,
+  ChevronRight,
+  LogOut,
+  HelpCircle
+} from "lucide-react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ChatWindow = ({
+  isAdminMode = false,
+  onClose,
+  title = "H\u1ED7 tr\u1EE3 tr\u1EF1c tuy\u1EBFn",
+  quickQuestions = [
+    "L\xE0m th\u1EBF n\xE0o \u0111\u1EC3 c\xE0i \u0111\u1EB7t v\xE0 k\xEDch ho\u1EA1t Extension?",
+    "T\xF4i mu\u1ED1n h\u1ECFi v\u1EC1 c\xE1ch c\u1EA5u h\xECnh workflow t\u1EF1 \u0111\u1ED9ng",
+    "Giao d\u1ECBch n\u1EA1p ti\u1EC1n c\u1EE7a t\xF4i g\u1EB7p l\u1ED7i, c\u1EA7n \u0111\u1ED1i so\xE1t",
+    "H\u1EA1n ng\u1EA1ch s\u1EED d\u1EE5ng h\xE0ng ng\xE0y c\u1EE7a t\xF4i b\u1ECB h\u1EBFt, l\xE0m th\u1EBF n\xE0o \u0111\u1EC3 gia h\u1EA1n?"
+  ],
+  cannedResponses = [
+    "Ch\xE0o b\u1EA1n, Admin c\xF3 th\u1EC3 h\u1ED7 tr\u1EE3 g\xEC cho b\u1EA1n \u1EA1?",
+    "C\u1EA3m \u01A1n b\u1EA1n \u0111\xE3 ph\u1EA3n h\u1ED3i, \u0111\u1ED9i ng\u0169 k\u1EF9 thu\u1EADt \u0111ang ki\u1EC3m tra l\u1ED7i n\xE0y v\xE0 s\u1EBD b\xE1o l\u1EA1i b\u1EA1n s\u1EDBm nh\u1EA5t.",
+    "B\u1EA1n vui l\xF2ng ch\u1EE5p \u1EA3nh m\xE0n h\xECnh l\u1ED7i \u0111\u1EC3 Admin ki\u1EC3m tra nhanh h\u01A1n nh\xE9.",
+    "Giao d\u1ECBch n\u1EA1p ti\u1EC1n c\u1EE7a b\u1EA1n \u0111\xE3 \u0111\u01B0\u1EE3c \u0111\u1ED1i so\xE1t th\xE0nh c\xF4ng, vui l\xF2ng ki\u1EC3m tra l\u1EA1i s\u1ED1 d\u01B0 v\xED."
+  ]
+}) => {
+  const userChat = useChat();
+  const adminChat = useChatAdmin();
+  const chat = isAdminMode ? adminChat : userChat;
+  const [inputText, setInputText] = useState2("");
+  const [showConfirmModal, setShowConfirmModal] = useState2(false);
+  const [showCannedList, setShowCannedList] = useState2(false);
+  const [attachment, setAttachment] = useState2(null);
+  const messagesEndRef = useRef2(null);
+  const scrollContainerRef = useRef2(null);
+  const fileInputRef = useRef2(null);
+  const oldScrollHeightRef = useRef2(null);
+  const lastMessageIdRef = useRef2(null);
+  const isInitialLoad = useRef2(true);
+  const messages = chat.messages;
+  const isConnected = chat.isConnected;
+  const isLoading = chat.isLoading;
+  const isUploading = chat.isUploading;
+  const isLoadingMore = chat.isLoadingMore;
+  const activeSession = isAdminMode ? adminChat.selectedRoom?.activeSession : userChat.activeSession;
+  const scrollToBottom = (behavior = "smooth") => {
+    setTimeout(() => {
+      if (scrollContainerRef.current) {
+        const { scrollHeight, clientHeight } = scrollContainerRef.current;
+        scrollContainerRef.current.scrollTo({
+          top: scrollHeight - clientHeight,
+          behavior
+        });
+      }
+    }, 60);
+  };
+  useEffect2(() => {
+    if (messages.length > 0 && !isLoading) {
+      const lastMsg = messages[messages.length - 1];
+      const hasNewLastMessage = lastMessageIdRef.current !== lastMsg._id;
+      lastMessageIdRef.current = lastMsg._id;
+      if (isInitialLoad.current) {
+        scrollToBottom("auto");
+        isInitialLoad.current = false;
+      } else if (hasNewLastMessage) {
+        const container = scrollContainerRef.current;
+        if (container) {
+          const isNearBottom = container.scrollHeight - container.clientHeight - container.scrollTop <= 150;
+          if (isNearBottom || lastMsg.senderId === lastMsg.userId) {
+            scrollToBottom("smooth");
+          }
+        }
+      }
+    }
+  }, [messages, isLoading]);
+  const handleScroll = (e) => {
+    if (e.currentTarget.scrollTop === 0) {
+      const container = e.currentTarget;
+      oldScrollHeightRef.current = container.scrollHeight;
+      void chat.loadMoreMessages().then(() => {
+        if (oldScrollHeightRef.current !== null && scrollContainerRef.current) {
+          scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight - oldScrollHeightRef.current;
+          oldScrollHeightRef.current = null;
+        }
+      });
+    }
+  };
+  const handleStartSession = async (sessionTitle = "H\u1ED7 tr\u1EE3 chung", firstMessage) => {
+    try {
+      await chat.startSession(sessionTitle);
+      if (firstMessage) {
+        await chat.sendMessage(firstMessage);
+      }
+      scrollToBottom("smooth");
+    } catch (err) {
+      console.error("Kh\xF4ng th\u1EC3 b\u1EAFt \u0111\u1EA7u phi\xEAn:", err);
+    }
+  };
+  const handleSend = async (e) => {
+    if (e) e.preventDefault();
+    if (!inputText.trim() && !attachment) return;
+    const text = inputText;
+    const attToSend = attachment ? [attachment] : void 0;
+    setInputText("");
+    setAttachment(null);
+    setShowCannedList(false);
+    try {
+      await chat.sendMessage(text, attToSend);
+      scrollToBottom("smooth");
+    } catch (err) {
+      console.error("L\u1ED7i g\u1EEDi tin nh\u1EAFn:", err);
+    }
+  };
+  const handleFileUpload = async (file) => {
+    try {
+      const data = await chat.uploadFile(file);
+      if (data) {
+        setAttachment({
+          type: data.type,
+          url: data.url,
+          name: data.name
+        });
+      }
+    } catch (err) {
+      console.error("Upload th\u1EA5t b\u1EA1i:", err);
+    }
+  };
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file) void handleFileUpload(file);
+  };
+  const handlePaste = (e) => {
+    const items = e.clipboardData.items;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf("image") !== -1) {
+        const file = items[i].getAsFile();
+        if (file) {
+          e.preventDefault();
+          void handleFileUpload(file);
+          break;
+        }
+      }
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      void handleFileUpload(file);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      className: "flex h-full w-full flex-col bg-white dark:bg-slate-900 overflow-hidden relative border border-slate-200 dark:border-slate-800 rounded-2xl shadow-lg",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-slate-100 dark:border-slate-800/60 px-6 py-4 bg-slate-50/50 dark:bg-slate-950/20", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx2("div", { className: "relative flex h-10 w-10 items-center justify-center rounded-xl bg-teal-500/10 text-teal-600 dark:text-teal-400", children: /* @__PURE__ */ jsx2(MessageSquare, { className: "h-5 w-5" }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx2("h2", { className: "text-sm font-bold text-slate-800 dark:text-slate-100", children: title }),
+                activeSession && /* @__PURE__ */ jsx2("span", { className: "px-2 py-0.5 text-[10px] font-semibold rounded-full bg-teal-500/15 text-teal-600 dark:text-teal-400 max-w-[150px] truncate", children: activeSession.title })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [
+                /* @__PURE__ */ jsx2("span", { className: `h-2 w-2 rounded-full ${isConnected ? "bg-emerald-500 animate-pulse" : "bg-amber-500 animate-pulse"}` }),
+                /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-slate-500", children: isConnected ? "\u0110\xE3 k\u1EBFt n\u1ED1i" : "\u0110ang k\u1EBFt n\u1ED1i l\u1EA1i..." })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            activeSession && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowConfirmModal(true),
+                className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-xl text-red-600 hover:bg-red-500/10 border border-red-500/20 transition",
+                children: [
+                  /* @__PURE__ */ jsx2(LogOut, { className: "h-3.5 w-3.5" }),
+                  "\u0110\xF3ng phi\xEAn"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => chat.loadMessages(),
+                className: "rounded-lg p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800",
+                children: /* @__PURE__ */ jsx2(RefreshCw, { className: "h-4 w-4" })
+              }
+            ),
+            onClose && /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "rounded-lg p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800",
+                children: /* @__PURE__ */ jsx2(X, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            ref: scrollContainerRef,
+            onScroll: handleScroll,
+            className: "flex-1 overflow-y-auto p-6 space-y-4",
+            children: isLoading ? /* @__PURE__ */ jsx2("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx2(Loader2, { className: "h-8 w-8 animate-spin text-teal-500" }) }) : !activeSession ? (
+              // Màn hình chào khi chưa bắt đầu phiên
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center min-h-full py-8 text-center px-4 space-y-6", children: [
+                /* @__PURE__ */ jsx2("div", { className: "p-4 bg-teal-500/10 text-teal-500 rounded-3xl animate-bounce", children: /* @__PURE__ */ jsx2(Sparkles, { className: "h-10 w-10" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2 max-w-md", children: [
+                  /* @__PURE__ */ jsx2("h3", { className: "text-sm font-bold text-slate-800 dark:text-slate-200", children: "Ch\xE0o m\u1EEBng b\u1EA1n \u0111\u1EBFn v\u1EDBi h\u1ED7 tr\u1EE3 tr\u1EF1c tuy\u1EBFn" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-slate-500 leading-normal", children: "Vui l\xF2ng b\u1EA5m b\u1EAFt \u0111\u1EA7u phi\xEAn h\u1ED7 tr\u1EE3 \u0111\u1EC3 chat tr\u1EF1c ti\u1EBFp v\u1EDBi ban qu\u1EA3n tr\u1ECB vi\xEAn ho\u1EB7c ch\u1ECDn c\xE2u h\u1ECFi nhanh th\u01B0\u1EDDng g\u1EB7p \u1EDF d\u01B0\u1EDBi." })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleStartSession("H\u1ED7 tr\u1EE3 chung"),
+                    className: "flex items-center gap-2 px-5 py-2.5 text-xs font-bold text-white bg-teal-500 hover:bg-teal-600 rounded-xl transition",
+                    children: [
+                      /* @__PURE__ */ jsx2(MessageSquare, { className: "h-4 w-4" }),
+                      "B\u1EAFt \u0111\u1EA7u phi\xEAn h\u1ED7 tr\u1EE3 m\u1EDBi"
+                    ]
+                  }
+                ),
+                !isAdminMode && quickQuestions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "w-full max-w-xl space-y-2 pt-4 border-t border-slate-100 dark:border-slate-800/60 text-left", children: [
+                  /* @__PURE__ */ jsxs("h4", { className: "text-[10px] font-bold text-slate-600 dark:text-slate-400 flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx2(HelpCircle, { className: "h-3.5 w-3.5 text-teal-500" }),
+                    "B\u1EA1n c\u1EA7n h\u1ED7 tr\u1EE3 v\u1EC1 ch\u1EE7 \u0111\u1EC1 n\xE0o?"
+                  ] }),
+                  /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-2", children: quickQuestions.map((q, idx) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleStartSession(q, q),
+                      className: "flex items-center justify-between p-3 text-xs text-slate-700 dark:text-slate-300 bg-slate-50 hover:bg-slate-100/80 border border-slate-150 rounded-xl transition text-left",
+                      children: [
+                        /* @__PURE__ */ jsx2("span", { className: "line-clamp-2 leading-relaxed", children: q }),
+                        /* @__PURE__ */ jsx2(ChevronRight, { className: "h-4 w-4 text-slate-400" })
+                      ]
+                    },
+                    idx
+                  )) })
+                ] })
+              ] })
+            ) : messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center text-center p-6", children: [
+              /* @__PURE__ */ jsx2(MessageSquare, { className: "h-12 w-12 text-slate-300 mb-3 animate-pulse" }),
+              /* @__PURE__ */ jsx2("h3", { className: "text-sm font-bold text-slate-800 dark:text-slate-200", children: "Phi\xEAn h\u1ED7 tr\u1EE3 \u0111\xE3 m\u1EDF" }),
+              /* @__PURE__ */ jsx2("p", { className: "text-xs text-slate-500 max-w-xs mt-1", children: "H\xE3y g\u1EEDi c\xE2u h\u1ECFi c\u1EE7a b\u1EA1n t\u1EA1i \u0111\xE2y \u0111\u1EC3 \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3." })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              isLoadingMore && /* @__PURE__ */ jsx2("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin text-teal-500" }) }),
+              messages.map((msg) => {
+                const isMe = isAdminMode ? msg.senderId !== msg.userId : msg.senderId === msg.userId;
+                return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${isMe ? "items-end" : "items-start"}`, children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: `max-w-[75%] rounded-2xl px-4 py-2.5 text-xs shadow-sm ${isMe ? "bg-teal-500 text-white rounded-br-none" : "bg-slate-100 dark:bg-slate-850 text-slate-800 dark:text-slate-200 rounded-bl-none"}`,
+                      children: [
+                        msg.attachments && msg.attachments.map((att, idx) => /* @__PURE__ */ jsx2("div", { className: "mb-2 max-w-full", children: att.type === "image" ? /* @__PURE__ */ jsx2(
+                          "img",
+                          {
+                            src: att.url,
+                            alt: att.name,
+                            className: "max-h-48 rounded-lg cursor-zoom-in object-contain max-w-full",
+                            onClick: () => window.open(att.url, "_blank")
+                          }
+                        ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-black/10 px-3 py-2", children: [
+                          /* @__PURE__ */ jsx2(FileIcon, { className: "h-4 w-4 text-sky-500" }),
+                          /* @__PURE__ */ jsx2("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", className: "underline line-clamp-1", children: att.name })
+                        ] }) }, idx)),
+                        msg.content && /* @__PURE__ */ jsx2("p", { className: "whitespace-pre-wrap break-words", children: msg.content })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2("span", { className: "text-[9px] text-slate-400 mt-1 px-1", children: new Date(msg.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+                ] }, msg._id);
+              }),
+              /* @__PURE__ */ jsx2("div", { ref: messagesEndRef })
+            ] })
+          }
+        ),
+        attachment && /* @__PURE__ */ jsxs("div", { className: "relative mx-6 mb-3 p-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-100 dark:border-slate-800 rounded-xl flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            attachment.type === "image" ? /* @__PURE__ */ jsx2("img", { src: attachment.url, alt: "Preview", className: "h-12 w-12 object-cover rounded-lg border" }) : /* @__PURE__ */ jsx2("div", { className: "h-12 w-12 flex items-center justify-center rounded-lg bg-slate-100", children: /* @__PURE__ */ jsx2(FileIcon, { className: "h-6 w-6 text-sky-500" }) }),
+            /* @__PURE__ */ jsx2("span", { className: "text-xs font-semibold text-slate-800 dark:text-slate-200 line-clamp-1 max-w-[200px]", children: attachment.name })
+          ] }),
+          /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setAttachment(null), className: "p-1 hover:text-red-500", children: /* @__PURE__ */ jsx2(X, { className: "h-4 w-4" }) })
+        ] }),
+        /* @__PURE__ */ jsx2("form", { onSubmit: handleSend, className: "border-t border-slate-100 dark:border-slate-850 p-4 bg-slate-50/20 dark:bg-slate-950/20", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => fileInputRef.current?.click(),
+              disabled: isUploading || !activeSession,
+              className: "rounded-xl p-2.5 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-50",
+              children: isUploading ? /* @__PURE__ */ jsx2(Loader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsx2(Paperclip, { className: "h-5 w-5" })
+            }
+          ),
+          /* @__PURE__ */ jsx2("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, accept: "image/*,audio/*", className: "hidden" }),
+          isAdminMode && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowCannedList(!showCannedList),
+                className: "rounded-xl p-2.5 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800",
+                children: /* @__PURE__ */ jsx2(Clock, { className: "h-5 w-5" })
+              }
+            ),
+            showCannedList && /* @__PURE__ */ jsx2("div", { className: "absolute bottom-14 left-0 z-50 w-72 max-h-48 overflow-y-auto rounded-xl border border-slate-200 bg-white p-2 shadow-xl dark:border-slate-800 dark:bg-slate-950", children: cannedResponses.map((resp, idx) => /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setInputText((prev) => prev ? prev + " " + resp : resp);
+                  setShowCannedList(false);
+                },
+                className: "w-full text-left text-xs p-2.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 truncate",
+                title: resp,
+                children: resp
+              },
+              idx
+            )) })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "textarea",
+            {
+              value: inputText,
+              onChange: (e) => setInputText(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  void handleSend();
+                }
+              },
+              onPaste: handlePaste,
+              disabled: !activeSession,
+              placeholder: activeSession ? "Nh\u1EADp tin nh\u1EAFn... (H\u1ED7 tr\u1EE3 Ctrl+V d\xE1n \u1EA3nh)" : "Vui l\xF2ng b\u1EAFt \u0111\u1EA7u phi\xEAn h\u1ED7 tr\u1EE3...",
+              rows: 2,
+              className: "flex-1 max-h-24 min-h-[50px] resize-none rounded-xl border border-slate-200 dark:border-slate-800 px-3.5 py-2.5 text-xs text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-950 outline-none"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "submit",
+              disabled: !inputText.trim() && !attachment || isUploading || !activeSession,
+              className: "flex h-10 w-10 items-center justify-center rounded-xl bg-teal-500 text-white disabled:opacity-50",
+              children: /* @__PURE__ */ jsx2(Send, { className: "h-4 w-4" })
+            }
+          )
+        ] }) }),
+        showConfirmModal && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[280px] p-5 bg-white dark:bg-slate-900 border dark:border-slate-800 rounded-xl shadow-xl", children: [
+          /* @__PURE__ */ jsx2("h4", { className: "text-xs font-bold text-slate-800 dark:text-slate-200", children: "X\xE1c nh\u1EADn k\u1EBFt th\xFAc" }),
+          /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-slate-500 mt-2 leading-relaxed", children: "B\u1EA1n c\xF3 ch\u1EAFc ch\u1EAFn mu\u1ED1n \u0111\xF3ng phi\xEAn h\u1ED7 tr\u1EE3 n\xE0y kh\xF4ng? Cu\u1ED9c tr\xF2 chuy\u1EC7n n\xE0y s\u1EBD \u0111\u01B0\u1EE3c k\u1EBFt th\xFAc." }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-4", children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowConfirmModal(false),
+                className: "px-3 py-1.5 text-[10px] font-semibold rounded-lg border text-slate-700 dark:text-slate-350 hover:bg-slate-50 dark:hover:bg-slate-800",
+                children: "H\u1EE7y"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setShowConfirmModal(false);
+                  void chat.closeSession();
+                },
+                className: "px-3 py-1.5 text-[10px] font-semibold rounded-lg bg-red-500 text-white hover:bg-red-600",
+                children: "X\xE1c nh\u1EADn"
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+};
+
+// src/components/ChatWidget.tsx
+import { useState as useState3, useEffect as useEffect3 } from "react";
+import { MessageSquare as MessageSquare2, X as X2 } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChatWidget = ({
+  title = "H\u1ED7 tr\u1EE3 tr\u1EF1c tuy\u1EBFn",
+  quickQuestions
+}) => {
+  const [isOpen, setIsOpen] = useState3(false);
+  const { unreadCount, markAsRead } = useChat();
+  useEffect3(() => {
+    if (isOpen && unreadCount > 0) {
+      void markAsRead();
+    }
+  }, [isOpen, unreadCount, markAsRead]);
+  return /* @__PURE__ */ jsxs2("div", { className: "fixed bottom-6 right-6 z-50 flex flex-col items-end", children: [
+    isOpen && /* @__PURE__ */ jsx3("div", { className: "mb-4 h-[520px] w-[360px] sm:w-[380px] transition-all duration-300", children: /* @__PURE__ */ jsx3(
+      ChatWindow,
+      {
+        onClose: () => setIsOpen(false),
+        title,
+        quickQuestions
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        className: "relative flex h-14 w-14 items-center justify-center rounded-full bg-teal-500 hover:bg-teal-600 text-white shadow-xl transition-all duration-300 hover:scale-105 active:scale-95",
+        children: [
+          isOpen ? /* @__PURE__ */ jsx3(X2, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx3(MessageSquare2, { className: "h-6 w-6" }),
+          !isOpen && unreadCount > 0 && /* @__PURE__ */ jsx3("span", { className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white ring-2 ring-white animate-bounce", children: unreadCount })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  ChatProvider,
+  ChatWidget,
+  ChatWindow,
+  useChat,
+  useChatAdmin,
+  useChatContext
+};