@diffsome/react 1.2.11 → 1.2.13

package/dist/chat.css

@@ -263,6 +263,39 @@
   color: #ef4444;
 }
 
+/* End Chat Button */
+.diffsome-chat-end-container {
+  padding: 8px 16px 12px;
+  text-align: center;
+}
+
+.diffsome-chat-end-btn {
+  background: none;
+  border: 1px solid var(--diffsome-chat-border);
+  color: var(--diffsome-chat-text-muted);
+  font-size: 12px;
+  padding: 6px 16px;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.diffsome-chat-end-btn:hover {
+  border-color: #ef4444;
+  color: #ef4444;
+  background: #fef2f2;
+}
+
+/* Chat Ended Message */
+.diffsome-chat-ended {
+  padding: 16px;
+  text-align: center;
+  color: var(--diffsome-chat-text-muted);
+  font-size: 14px;
+  border-top: 1px solid var(--diffsome-chat-border);
+  background: var(--diffsome-chat-bg);
+}
+
 /* System Message */
 .diffsome-chat-message-system {
   align-self: center;

package/dist/index.d.mts

@@ -884,11 +884,13 @@ interface ChatWidgetProps {
     onSend: (message: string) => void;
     onTyping?: () => void;
     onClose?: () => void;
+    onEndChat?: () => void;
     title?: string;
     subtitle?: string;
     placeholder?: string;
     loading?: boolean;
     typing?: boolean;
+    ended?: boolean;
     className?: string;
 }
 declare const ChatWidget: React__default.FC<ChatWidgetProps>;

package/dist/index.d.ts

@@ -884,11 +884,13 @@ interface ChatWidgetProps {
     onSend: (message: string) => void;
     onTyping?: () => void;
     onClose?: () => void;
+    onEndChat?: () => void;
     title?: string;
     subtitle?: string;
     placeholder?: string;
     loading?: boolean;
     typing?: boolean;
+    ended?: boolean;
     className?: string;
 }
 declare const ChatWidget: React__default.FC<ChatWidgetProps>;

package/dist/index.js

@@ -2719,11 +2719,13 @@ var ChatWidget = ({
   onSend,
   onTyping,
   onClose,
+  onEndChat,
   title = "Chat Support",
   subtitle = "We typically reply within a few minutes",
   placeholder = "Type a message...",
   loading = false,
   typing = false,
+  ended = false,
   className = ""
 }) => {
   const messagesEndRef = (0, import_react23.useRef)(null);
@@ -2791,20 +2793,31 @@ var ChatWidget = ({
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: messagesEndRef })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      ChatInput,
-      {
-        onSend,
-        onTyping,
-        placeholder,
-        disabled: loading
-      }
-    )
+    ended ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "diffsome-chat-ended", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Chat ended. Thank you!" }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ChatInput,
+        {
+          onSend,
+          onTyping,
+          placeholder,
+          disabled: loading
+        }
+      ),
+      onEndChat && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "diffsome-chat-end-container", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          className: "diffsome-chat-end-btn",
+          onClick: onEndChat,
+          children: "End Chat"
+        }
+      ) })
+    ] })
   ] });
 };
 
 // src/components/chat/ChatBubble.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var STORAGE_KEY = "diffsome_conversation_id";
 var ChatBubble = ({
   client,
   title = "Chat Support",
@@ -2823,29 +2836,23 @@ var ChatBubble = ({
 }) => {
   const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
   const [messages, setMessages] = (0, import_react24.useState)([]);
-  const [conversationId, setConversationId] = (0, import_react24.useState)(() => {
-    if (typeof localStorage !== "undefined") {
-      const saved = localStorage.getItem("diffsome_conversation_id");
-      return saved ? parseInt(saved, 10) : null;
-    }
-    return null;
-  });
+  const [conversationId, setConversationId] = (0, import_react24.useState)(null);
   const [connection, setConnection] = (0, import_react24.useState)(null);
   const [loading, setLoading] = (0, import_react24.useState)(false);
   const [typing, setTyping] = (0, import_react24.useState)(false);
   const [unreadCount, setUnreadCount] = (0, import_react24.useState)(0);
+  const [initialized, setInitialized] = (0, import_react24.useState)(false);
+  const [ended, setEnded] = (0, import_react24.useState)(false);
   const seenMessageIds = (0, import_react24.useRef)(/* @__PURE__ */ new Set());
-  const isRestoringRef = (0, import_react24.useRef)(false);
-  const connectToConversation = (0, import_react24.useCallback)((convId) => {
-    const conn = client.chat.connect(convId);
-    setConnection(conn);
+  const connectionRef = (0, import_react24.useRef)(null);
+  const setupListeners = (0, import_react24.useCallback)((conn) => {
     conn.onMessage((msg) => {
       if (seenMessageIds.current.has(msg.id)) {
         return;
       }
       seenMessageIds.current.add(msg.id);
       setMessages((prev) => [...prev, msg]);
-      if (!isOpen && msg.sender_type !== "visitor") {
+      if (msg.sender_type !== "visitor") {
         setUnreadCount((c) => c + 1);
       }
     });
@@ -2855,26 +2862,33 @@ var ChatBubble = ({
         setTimeout(() => setTyping(false), 3e3);
       }
     });
-    return conn;
-  }, [client.chat, isOpen]);
+  }, []);
   const initChat = (0, import_react24.useCallback)(async () => {
-    if (connection) return;
+    if (initialized || connectionRef.current) return;
     setLoading(true);
     try {
-      let convId = conversationId;
-      if (convId && !isRestoringRef.current) {
-        isRestoringRef.current = true;
+      let savedConvId = null;
+      if (typeof localStorage !== "undefined") {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+          savedConvId = parseInt(saved, 10);
+        }
+      }
+      if (savedConvId) {
         try {
-          const conn2 = connectToConversation(convId);
+          const conn2 = client.chat.connect(savedConvId);
+          connectionRef.current = conn2;
+          setConnection(conn2);
+          setupListeners(conn2);
           const existingMessages2 = await conn2.getMessages();
           existingMessages2.forEach((m) => seenMessageIds.current.add(m.id));
           setMessages(existingMessages2);
+          setConversationId(savedConvId);
+          setInitialized(true);
           return;
         } catch (error) {
           console.log("Could not restore conversation, starting new one");
-          convId = null;
-          setConversationId(null);
-          localStorage.removeItem("diffsome_conversation_id");
+          localStorage.removeItem(STORAGE_KEY);
         }
       }
       const result = await client.chat.start({
@@ -2882,35 +2896,38 @@ var ChatBubble = ({
         visitor_email: visitorEmail,
         initial_message: greeting
       });
-      convId = result.conversation_id;
-      setConversationId(convId);
+      const newConvId = result.conversation_id;
+      setConversationId(newConvId);
       if (typeof localStorage !== "undefined") {
-        localStorage.setItem("diffsome_conversation_id", convId.toString());
+        localStorage.setItem(STORAGE_KEY, newConvId.toString());
       }
-      const conn = connectToConversation(convId);
+      const conn = client.chat.connect(newConvId);
+      connectionRef.current = conn;
+      setConnection(conn);
+      setupListeners(conn);
       const existingMessages = await conn.getMessages();
       existingMessages.forEach((m) => seenMessageIds.current.add(m.id));
       setMessages(existingMessages);
+      setInitialized(true);
     } catch (error) {
       console.error("Failed to initialize chat:", error);
     } finally {
       setLoading(false);
     }
-  }, [client.chat, connection, conversationId, connectToConversation, visitorName, visitorEmail, greeting]);
+  }, [client.chat, initialized, setupListeners, visitorName, visitorEmail, greeting]);
   const handleOpen = () => {
     setIsOpen(true);
     setUnreadCount(0);
     onOpen?.();
-    if (!conversationId) {
-      initChat();
-    }
+    initChat();
   };
   const handleClose = () => {
     setIsOpen(false);
     onClose?.();
   };
   const handleSend = async (content) => {
-    if (!connection) return;
+    const conn = connectionRef.current;
+    if (!conn) return;
     const tempId = -Date.now();
     const pendingMessage = {
       id: tempId,
@@ -2921,7 +2938,7 @@ var ChatBubble = ({
     };
     setMessages((prev) => [...prev, pendingMessage]);
     try {
-      const sentMessage = await connection.send(content);
+      const sentMessage = await conn.send(content);
       if (sentMessage) {
         seenMessageIds.current.add(sentMessage.id);
         setMessages(
@@ -2936,13 +2953,37 @@ var ChatBubble = ({
     }
   };
   const handleTyping = () => {
-    connection?.sendTyping();
+    connectionRef.current?.sendTyping();
+  };
+  const handleEndChat = async () => {
+    const conn = connectionRef.current;
+    if (!conn) return;
+    try {
+      await conn.close();
+    } catch (error) {
+      console.error("Failed to close chat:", error);
+    }
+    if (typeof localStorage !== "undefined") {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+    setEnded(true);
+    connectionRef.current?.disconnect();
+    connectionRef.current = null;
+    setConnection(null);
+    setInitialized(false);
+    setConversationId(null);
+  };
+  const handleStartNewChat = () => {
+    setEnded(false);
+    setMessages([]);
+    seenMessageIds.current.clear();
+    initChat();
   };
   (0, import_react24.useEffect)(() => {
     return () => {
-      connection?.disconnect();
+      connectionRef.current?.disconnect();
     };
-  }, [connection]);
+  }, []);
   const positionClass = position === "bottom-left" ? "diffsome-chat-bubble-left" : "diffsome-chat-bubble-right";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
@@ -2957,11 +2998,13 @@ var ChatBubble = ({
             onSend: handleSend,
             onTyping: handleTyping,
             onClose: handleClose,
+            onEndChat: handleEndChat,
             title,
             subtitle,
             placeholder,
             loading,
-            typing
+            typing,
+            ended
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(

package/dist/index.mjs

@@ -2627,11 +2627,13 @@ var ChatWidget = ({
   onSend,
   onTyping,
   onClose,
+  onEndChat,
   title = "Chat Support",
   subtitle = "We typically reply within a few minutes",
   placeholder = "Type a message...",
   loading = false,
   typing = false,
+  ended = false,
   className = ""
 }) => {
   const messagesEndRef = useRef2(null);
@@ -2699,20 +2701,31 @@ var ChatWidget = ({
       ] }),
       /* @__PURE__ */ jsx5("div", { ref: messagesEndRef })
     ] }) }),
-    /* @__PURE__ */ jsx5(
-      ChatInput,
-      {
-        onSend,
-        onTyping,
-        placeholder,
-        disabled: loading
-      }
-    )
+    ended ? /* @__PURE__ */ jsx5("div", { className: "diffsome-chat-ended", children: /* @__PURE__ */ jsx5("span", { children: "Chat ended. Thank you!" }) }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx5(
+        ChatInput,
+        {
+          onSend,
+          onTyping,
+          placeholder,
+          disabled: loading
+        }
+      ),
+      onEndChat && messages.length > 0 && /* @__PURE__ */ jsx5("div", { className: "diffsome-chat-end-container", children: /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "diffsome-chat-end-btn",
+          onClick: onEndChat,
+          children: "End Chat"
+        }
+      ) })
+    ] })
   ] });
 };
 
 // src/components/chat/ChatBubble.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var STORAGE_KEY = "diffsome_conversation_id";
 var ChatBubble = ({
   client,
   title = "Chat Support",
@@ -2731,29 +2744,23 @@ var ChatBubble = ({
 }) => {
   const [isOpen, setIsOpen] = useState22(false);
   const [messages, setMessages] = useState22([]);
-  const [conversationId, setConversationId] = useState22(() => {
-    if (typeof localStorage !== "undefined") {
-      const saved = localStorage.getItem("diffsome_conversation_id");
-      return saved ? parseInt(saved, 10) : null;
-    }
-    return null;
-  });
+  const [conversationId, setConversationId] = useState22(null);
   const [connection, setConnection] = useState22(null);
   const [loading, setLoading] = useState22(false);
   const [typing, setTyping] = useState22(false);
   const [unreadCount, setUnreadCount] = useState22(0);
+  const [initialized, setInitialized] = useState22(false);
+  const [ended, setEnded] = useState22(false);
   const seenMessageIds = useRef3(/* @__PURE__ */ new Set());
-  const isRestoringRef = useRef3(false);
-  const connectToConversation = useCallback22((convId) => {
-    const conn = client.chat.connect(convId);
-    setConnection(conn);
+  const connectionRef = useRef3(null);
+  const setupListeners = useCallback22((conn) => {
     conn.onMessage((msg) => {
       if (seenMessageIds.current.has(msg.id)) {
         return;
       }
       seenMessageIds.current.add(msg.id);
       setMessages((prev) => [...prev, msg]);
-      if (!isOpen && msg.sender_type !== "visitor") {
+      if (msg.sender_type !== "visitor") {
         setUnreadCount((c) => c + 1);
       }
     });
@@ -2763,26 +2770,33 @@ var ChatBubble = ({
         setTimeout(() => setTyping(false), 3e3);
       }
     });
-    return conn;
-  }, [client.chat, isOpen]);
+  }, []);
   const initChat = useCallback22(async () => {
-    if (connection) return;
+    if (initialized || connectionRef.current) return;
     setLoading(true);
     try {
-      let convId = conversationId;
-      if (convId && !isRestoringRef.current) {
-        isRestoringRef.current = true;
+      let savedConvId = null;
+      if (typeof localStorage !== "undefined") {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+          savedConvId = parseInt(saved, 10);
+        }
+      }
+      if (savedConvId) {
         try {
-          const conn2 = connectToConversation(convId);
+          const conn2 = client.chat.connect(savedConvId);
+          connectionRef.current = conn2;
+          setConnection(conn2);
+          setupListeners(conn2);
           const existingMessages2 = await conn2.getMessages();
           existingMessages2.forEach((m) => seenMessageIds.current.add(m.id));
           setMessages(existingMessages2);
+          setConversationId(savedConvId);
+          setInitialized(true);
           return;
         } catch (error) {
           console.log("Could not restore conversation, starting new one");
-          convId = null;
-          setConversationId(null);
-          localStorage.removeItem("diffsome_conversation_id");
+          localStorage.removeItem(STORAGE_KEY);
         }
       }
       const result = await client.chat.start({
@@ -2790,35 +2804,38 @@ var ChatBubble = ({
         visitor_email: visitorEmail,
         initial_message: greeting
       });
-      convId = result.conversation_id;
-      setConversationId(convId);
+      const newConvId = result.conversation_id;
+      setConversationId(newConvId);
       if (typeof localStorage !== "undefined") {
-        localStorage.setItem("diffsome_conversation_id", convId.toString());
+        localStorage.setItem(STORAGE_KEY, newConvId.toString());
       }
-      const conn = connectToConversation(convId);
+      const conn = client.chat.connect(newConvId);
+      connectionRef.current = conn;
+      setConnection(conn);
+      setupListeners(conn);
       const existingMessages = await conn.getMessages();
       existingMessages.forEach((m) => seenMessageIds.current.add(m.id));
       setMessages(existingMessages);
+      setInitialized(true);
     } catch (error) {
       console.error("Failed to initialize chat:", error);
     } finally {
       setLoading(false);
     }
-  }, [client.chat, connection, conversationId, connectToConversation, visitorName, visitorEmail, greeting]);
+  }, [client.chat, initialized, setupListeners, visitorName, visitorEmail, greeting]);
   const handleOpen = () => {
     setIsOpen(true);
     setUnreadCount(0);
     onOpen?.();
-    if (!conversationId) {
-      initChat();
-    }
+    initChat();
   };
   const handleClose = () => {
     setIsOpen(false);
     onClose?.();
   };
   const handleSend = async (content) => {
-    if (!connection) return;
+    const conn = connectionRef.current;
+    if (!conn) return;
     const tempId = -Date.now();
     const pendingMessage = {
       id: tempId,
@@ -2829,7 +2846,7 @@ var ChatBubble = ({
     };
     setMessages((prev) => [...prev, pendingMessage]);
     try {
-      const sentMessage = await connection.send(content);
+      const sentMessage = await conn.send(content);
       if (sentMessage) {
         seenMessageIds.current.add(sentMessage.id);
         setMessages(
@@ -2844,13 +2861,37 @@ var ChatBubble = ({
     }
   };
   const handleTyping = () => {
-    connection?.sendTyping();
+    connectionRef.current?.sendTyping();
+  };
+  const handleEndChat = async () => {
+    const conn = connectionRef.current;
+    if (!conn) return;
+    try {
+      await conn.close();
+    } catch (error) {
+      console.error("Failed to close chat:", error);
+    }
+    if (typeof localStorage !== "undefined") {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+    setEnded(true);
+    connectionRef.current?.disconnect();
+    connectionRef.current = null;
+    setConnection(null);
+    setInitialized(false);
+    setConversationId(null);
+  };
+  const handleStartNewChat = () => {
+    setEnded(false);
+    setMessages([]);
+    seenMessageIds.current.clear();
+    initChat();
   };
   useEffect21(() => {
     return () => {
-      connection?.disconnect();
+      connectionRef.current?.disconnect();
     };
-  }, [connection]);
+  }, []);
   const positionClass = position === "bottom-left" ? "diffsome-chat-bubble-left" : "diffsome-chat-bubble-right";
   return /* @__PURE__ */ jsxs5(
     "div",
@@ -2865,11 +2906,13 @@ var ChatBubble = ({
             onSend: handleSend,
             onTyping: handleTyping,
             onClose: handleClose,
+            onEndChat: handleEndChat,
             title,
             subtitle,
             placeholder,
             loading,
-            typing
+            typing,
+            ended
           }
         ),
         /* @__PURE__ */ jsxs5(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diffsome/react",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "description": "React hooks and providers for Diffsome SDK - Headless e-commerce & CMS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",