@diffsome/react 1.2.13 → 1.2.14

package/dist/chat.css

@@ -294,6 +294,26 @@
   font-size: 14px;
   border-top: 1px solid var(--diffsome-chat-border);
   background: var(--diffsome-chat-bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.diffsome-chat-new-btn {
+  background: var(--diffsome-chat-primary);
+  color: white;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.diffsome-chat-new-btn:hover {
+  background: var(--diffsome-chat-primary-dark);
 }
 
 /* System Message */

package/dist/index.d.mts

@@ -866,6 +866,8 @@ interface ChatBubbleProps {
     onOpen?: () => void;
     /** Callback when chat is closed */
     onClose?: () => void;
+    /** Member auth token for logged-in users (optional) */
+    memberToken?: string;
 }
 declare const ChatBubble: React__default.FC<ChatBubbleProps>;
 
@@ -885,6 +887,7 @@ interface ChatWidgetProps {
     onTyping?: () => void;
     onClose?: () => void;
     onEndChat?: () => void;
+    onStartNewChat?: () => void;
     title?: string;
     subtitle?: string;
     placeholder?: string;

package/dist/index.d.ts

@@ -866,6 +866,8 @@ interface ChatBubbleProps {
     onOpen?: () => void;
     /** Callback when chat is closed */
     onClose?: () => void;
+    /** Member auth token for logged-in users (optional) */
+    memberToken?: string;
 }
 declare const ChatBubble: React__default.FC<ChatBubbleProps>;
 
@@ -885,6 +887,7 @@ interface ChatWidgetProps {
     onTyping?: () => void;
     onClose?: () => void;
     onEndChat?: () => void;
+    onStartNewChat?: () => void;
     title?: string;
     subtitle?: string;
     placeholder?: string;

package/dist/index.js

@@ -2720,6 +2720,7 @@ var ChatWidget = ({
   onTyping,
   onClose,
   onEndChat,
+  onStartNewChat,
   title = "Chat Support",
   subtitle = "We typically reply within a few minutes",
   placeholder = "Type a message...",
@@ -2793,7 +2794,17 @@ var ChatWidget = ({
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: messagesEndRef })
     ] }) }),
-    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: [
+    ended ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "diffsome-chat-ended", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Chat ended. Thank you!" }),
+      onStartNewChat && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          className: "diffsome-chat-new-btn",
+          onClick: onStartNewChat,
+          children: "Start New Chat"
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ChatInput,
         {
@@ -2818,6 +2829,7 @@ var ChatWidget = ({
 // src/components/chat/ChatBubble.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var STORAGE_KEY = "diffsome_conversation_id";
+var MEMBER_STORAGE_PREFIX = "diffsome_member_conversation_";
 var ChatBubble = ({
   client,
   title = "Chat Support",
@@ -2832,8 +2844,33 @@ var ChatBubble = ({
   showUnreadBadge = true,
   className = "",
   onOpen,
-  onClose
+  onClose,
+  memberToken
 }) => {
+  (0, import_react24.useEffect)(() => {
+    if (memberToken) {
+      client.setToken(memberToken);
+    } else {
+      client.setToken(null);
+    }
+    if (initialized) {
+      connectionRef.current?.disconnect();
+      connectionRef.current = null;
+      setConnection(null);
+      setMessages([]);
+      setConversationId(null);
+      setInitialized(false);
+      setEnded(false);
+      seenMessageIds.current.clear();
+    }
+  }, [client, memberToken]);
+  const getStorageKey = (0, import_react24.useCallback)(() => {
+    if (memberToken) {
+      const hash = memberToken.slice(-8);
+      return `${MEMBER_STORAGE_PREFIX}${hash}`;
+    }
+    return STORAGE_KEY;
+  }, [memberToken]);
   const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
   const [messages, setMessages] = (0, import_react24.useState)([]);
   const [conversationId, setConversationId] = (0, import_react24.useState)(null);
@@ -2866,10 +2903,11 @@ var ChatBubble = ({
   const initChat = (0, import_react24.useCallback)(async () => {
     if (initialized || connectionRef.current) return;
     setLoading(true);
+    const storageKey = getStorageKey();
     try {
       let savedConvId = null;
       if (typeof localStorage !== "undefined") {
-        const saved = localStorage.getItem(STORAGE_KEY);
+        const saved = localStorage.getItem(storageKey);
         if (saved) {
           savedConvId = parseInt(saved, 10);
         }
@@ -2888,7 +2926,7 @@ var ChatBubble = ({
           return;
         } catch (error) {
           console.log("Could not restore conversation, starting new one");
-          localStorage.removeItem(STORAGE_KEY);
+          localStorage.removeItem(storageKey);
         }
       }
       const result = await client.chat.start({
@@ -2899,7 +2937,7 @@ var ChatBubble = ({
       const newConvId = result.conversation_id;
       setConversationId(newConvId);
       if (typeof localStorage !== "undefined") {
-        localStorage.setItem(STORAGE_KEY, newConvId.toString());
+        localStorage.setItem(storageKey, newConvId.toString());
       }
       const conn = client.chat.connect(newConvId);
       connectionRef.current = conn;
@@ -2914,7 +2952,7 @@ var ChatBubble = ({
     } finally {
       setLoading(false);
     }
-  }, [client.chat, initialized, setupListeners, visitorName, visitorEmail, greeting]);
+  }, [client.chat, initialized, setupListeners, visitorName, visitorEmail, greeting, getStorageKey]);
   const handleOpen = () => {
     setIsOpen(true);
     setUnreadCount(0);
@@ -2964,7 +3002,7 @@ var ChatBubble = ({
       console.error("Failed to close chat:", error);
     }
     if (typeof localStorage !== "undefined") {
-      localStorage.removeItem(STORAGE_KEY);
+      localStorage.removeItem(getStorageKey());
     }
     setEnded(true);
     connectionRef.current?.disconnect();
@@ -2999,6 +3037,7 @@ var ChatBubble = ({
             onTyping: handleTyping,
             onClose: handleClose,
             onEndChat: handleEndChat,
+            onStartNewChat: handleStartNewChat,
             title,
             subtitle,
             placeholder,

package/dist/index.mjs

@@ -2628,6 +2628,7 @@ var ChatWidget = ({
   onTyping,
   onClose,
   onEndChat,
+  onStartNewChat,
   title = "Chat Support",
   subtitle = "We typically reply within a few minutes",
   placeholder = "Type a message...",
@@ -2701,7 +2702,17 @@ var ChatWidget = ({
       ] }),
       /* @__PURE__ */ jsx5("div", { ref: messagesEndRef })
     ] }) }),
-    ended ? /* @__PURE__ */ jsx5("div", { className: "diffsome-chat-ended", children: /* @__PURE__ */ jsx5("span", { children: "Chat ended. Thank you!" }) }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    ended ? /* @__PURE__ */ jsxs4("div", { className: "diffsome-chat-ended", children: [
+      /* @__PURE__ */ jsx5("span", { children: "Chat ended. Thank you!" }),
+      onStartNewChat && /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "diffsome-chat-new-btn",
+          onClick: onStartNewChat,
+          children: "Start New Chat"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
       /* @__PURE__ */ jsx5(
         ChatInput,
         {
@@ -2726,6 +2737,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 MEMBER_STORAGE_PREFIX = "diffsome_member_conversation_";
 var ChatBubble = ({
   client,
   title = "Chat Support",
@@ -2740,8 +2752,33 @@ var ChatBubble = ({
   showUnreadBadge = true,
   className = "",
   onOpen,
-  onClose
+  onClose,
+  memberToken
 }) => {
+  useEffect21(() => {
+    if (memberToken) {
+      client.setToken(memberToken);
+    } else {
+      client.setToken(null);
+    }
+    if (initialized) {
+      connectionRef.current?.disconnect();
+      connectionRef.current = null;
+      setConnection(null);
+      setMessages([]);
+      setConversationId(null);
+      setInitialized(false);
+      setEnded(false);
+      seenMessageIds.current.clear();
+    }
+  }, [client, memberToken]);
+  const getStorageKey = useCallback22(() => {
+    if (memberToken) {
+      const hash = memberToken.slice(-8);
+      return `${MEMBER_STORAGE_PREFIX}${hash}`;
+    }
+    return STORAGE_KEY;
+  }, [memberToken]);
   const [isOpen, setIsOpen] = useState22(false);
   const [messages, setMessages] = useState22([]);
   const [conversationId, setConversationId] = useState22(null);
@@ -2774,10 +2811,11 @@ var ChatBubble = ({
   const initChat = useCallback22(async () => {
     if (initialized || connectionRef.current) return;
     setLoading(true);
+    const storageKey = getStorageKey();
     try {
       let savedConvId = null;
       if (typeof localStorage !== "undefined") {
-        const saved = localStorage.getItem(STORAGE_KEY);
+        const saved = localStorage.getItem(storageKey);
         if (saved) {
           savedConvId = parseInt(saved, 10);
         }
@@ -2796,7 +2834,7 @@ var ChatBubble = ({
           return;
         } catch (error) {
           console.log("Could not restore conversation, starting new one");
-          localStorage.removeItem(STORAGE_KEY);
+          localStorage.removeItem(storageKey);
         }
       }
       const result = await client.chat.start({
@@ -2807,7 +2845,7 @@ var ChatBubble = ({
       const newConvId = result.conversation_id;
       setConversationId(newConvId);
       if (typeof localStorage !== "undefined") {
-        localStorage.setItem(STORAGE_KEY, newConvId.toString());
+        localStorage.setItem(storageKey, newConvId.toString());
       }
       const conn = client.chat.connect(newConvId);
       connectionRef.current = conn;
@@ -2822,7 +2860,7 @@ var ChatBubble = ({
     } finally {
       setLoading(false);
     }
-  }, [client.chat, initialized, setupListeners, visitorName, visitorEmail, greeting]);
+  }, [client.chat, initialized, setupListeners, visitorName, visitorEmail, greeting, getStorageKey]);
   const handleOpen = () => {
     setIsOpen(true);
     setUnreadCount(0);
@@ -2872,7 +2910,7 @@ var ChatBubble = ({
       console.error("Failed to close chat:", error);
     }
     if (typeof localStorage !== "undefined") {
-      localStorage.removeItem(STORAGE_KEY);
+      localStorage.removeItem(getStorageKey());
     }
     setEnded(true);
     connectionRef.current?.disconnect();
@@ -2907,6 +2945,7 @@ var ChatBubble = ({
             onTyping: handleTyping,
             onClose: handleClose,
             onEndChat: handleEndChat,
+            onStartNewChat: handleStartNewChat,
             title,
             subtitle,
             placeholder,

package/package.json

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