@diffsome/react 1.2.10 → 1.2.12

package/dist/index.js

@@ -2805,6 +2805,7 @@ var ChatWidget = ({
 
 // 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",
@@ -2828,58 +2829,92 @@ var ChatBubble = ({
   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 seenMessageIds = (0, import_react24.useRef)(/* @__PURE__ */ new Set());
+  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 (msg.sender_type !== "visitor") {
+        setUnreadCount((c) => c + 1);
+      }
+    });
+    conn.onTyping((senderType) => {
+      if (senderType === "agent") {
+        setTyping(true);
+        setTimeout(() => setTyping(false), 3e3);
+      }
+    });
+  }, []);
   const initChat = (0, import_react24.useCallback)(async () => {
-    if (conversationId) return;
+    if (initialized || connectionRef.current) return;
     setLoading(true);
     try {
+      let savedConvId = null;
+      if (typeof localStorage !== "undefined") {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+          savedConvId = parseInt(saved, 10);
+        }
+      }
+      if (savedConvId) {
+        try {
+          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");
+          localStorage.removeItem(STORAGE_KEY);
+        }
+      }
       const result = await client.chat.start({
         visitor_name: visitorName,
         visitor_email: visitorEmail,
         initial_message: greeting
       });
-      setConversationId(result.conversation_id);
-      const conn = client.chat.connect(result.conversation_id);
+      const newConvId = result.conversation_id;
+      setConversationId(newConvId);
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(STORAGE_KEY, newConvId.toString());
+      }
+      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);
-      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") {
-          setUnreadCount((c) => c + 1);
-        }
-      });
-      conn.onTyping((senderType) => {
-        if (senderType === "agent") {
-          setTyping(true);
-          setTimeout(() => setTyping(false), 3e3);
-        }
-      });
+      setInitialized(true);
     } catch (error) {
       console.error("Failed to initialize chat:", error);
     } finally {
       setLoading(false);
     }
-  }, [client.chat, conversationId, visitorName, visitorEmail, greeting, isOpen]);
+  }, [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,
@@ -2890,7 +2925,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(
@@ -2905,13 +2940,13 @@ var ChatBubble = ({
     }
   };
   const handleTyping = () => {
-    connection?.sendTyping();
+    connectionRef.current?.sendTyping();
   };
   (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",

package/dist/index.mjs

@@ -2713,6 +2713,7 @@ var ChatWidget = ({
 
 // 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",
@@ -2736,58 +2737,92 @@ var ChatBubble = ({
   const [loading, setLoading] = useState22(false);
   const [typing, setTyping] = useState22(false);
   const [unreadCount, setUnreadCount] = useState22(0);
+  const [initialized, setInitialized] = useState22(false);
   const seenMessageIds = useRef3(/* @__PURE__ */ new Set());
+  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 (msg.sender_type !== "visitor") {
+        setUnreadCount((c) => c + 1);
+      }
+    });
+    conn.onTyping((senderType) => {
+      if (senderType === "agent") {
+        setTyping(true);
+        setTimeout(() => setTyping(false), 3e3);
+      }
+    });
+  }, []);
   const initChat = useCallback22(async () => {
-    if (conversationId) return;
+    if (initialized || connectionRef.current) return;
     setLoading(true);
     try {
+      let savedConvId = null;
+      if (typeof localStorage !== "undefined") {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+          savedConvId = parseInt(saved, 10);
+        }
+      }
+      if (savedConvId) {
+        try {
+          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");
+          localStorage.removeItem(STORAGE_KEY);
+        }
+      }
       const result = await client.chat.start({
         visitor_name: visitorName,
         visitor_email: visitorEmail,
         initial_message: greeting
       });
-      setConversationId(result.conversation_id);
-      const conn = client.chat.connect(result.conversation_id);
+      const newConvId = result.conversation_id;
+      setConversationId(newConvId);
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(STORAGE_KEY, newConvId.toString());
+      }
+      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);
-      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") {
-          setUnreadCount((c) => c + 1);
-        }
-      });
-      conn.onTyping((senderType) => {
-        if (senderType === "agent") {
-          setTyping(true);
-          setTimeout(() => setTyping(false), 3e3);
-        }
-      });
+      setInitialized(true);
     } catch (error) {
       console.error("Failed to initialize chat:", error);
     } finally {
       setLoading(false);
     }
-  }, [client.chat, conversationId, visitorName, visitorEmail, greeting, isOpen]);
+  }, [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,
@@ -2798,7 +2833,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(
@@ -2813,13 +2848,13 @@ var ChatBubble = ({
     }
   };
   const handleTyping = () => {
-    connection?.sendTyping();
+    connectionRef.current?.sendTyping();
   };
   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",

package/package.json

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