@diffsome/react 1.2.15 → 1.2.18

package/dist/chat.css

@@ -230,6 +230,22 @@
   border-bottom-left-radius: 4px;
 }
 
+/* Bot Message */
+.diffsome-chat-message-bot {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.diffsome-chat-message-bot .diffsome-chat-message-bubble {
+  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
+  color: #1e40af;
+  border-bottom-left-radius: 4px;
+}
+
+.diffsome-chat-bot-icon {
+  font-size: 11px;
+}
+
 .diffsome-chat-message-content {
   font-size: 14px;
   line-height: 1.4;
@@ -316,6 +332,35 @@
   background: var(--diffsome-chat-primary-dark);
 }
 
+/* Login Prompt */
+.diffsome-chat-login-prompt {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-top: 1px solid #bae6fd;
+  font-size: 13px;
+  color: #0369a1;
+}
+
+.diffsome-chat-login-btn {
+  background: var(--diffsome-chat-primary);
+  color: white;
+  text-decoration: none;
+  padding: 6px 14px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background-color 0.2s ease;
+}
+
+.diffsome-chat-login-btn:hover {
+  background: var(--diffsome-chat-primary-dark);
+}
+
 /* System Message */
 .diffsome-chat-message-system {
   align-self: center;

package/dist/index.d.mts

@@ -872,13 +872,19 @@ interface ChatBubbleProps {
     onClose?: () => void;
     /** Member auth token for logged-in users (optional) */
     memberToken?: string;
+    /** Show login prompt for non-logged-in users */
+    showLoginPrompt?: boolean;
+    /** Login page URL (used when showLoginPrompt is true) */
+    loginUrl?: string;
+    /** Custom login prompt message */
+    loginPromptMessage?: string;
 }
 declare const ChatBubble: React__default.FC<ChatBubbleProps>;
 
 interface Message {
     id: number;
     content: string;
-    sender_type: 'visitor' | 'agent' | 'system';
+    sender_type: 'visitor' | 'agent' | 'bot' | 'system';
     sender_name?: string;
     created_at?: string;
     is_read?: boolean;
@@ -899,12 +905,20 @@ interface ChatWidgetProps {
     typing?: boolean;
     ended?: boolean;
     className?: string;
+    /** Whether user is logged in */
+    isLoggedIn?: boolean;
+    /** Show login prompt for non-logged-in users */
+    showLoginPrompt?: boolean;
+    /** Login page URL */
+    loginUrl?: string;
+    /** Custom login prompt message */
+    loginPromptMessage?: string;
 }
 declare const ChatWidget: React__default.FC<ChatWidgetProps>;
 
 interface ChatMessageProps {
     content: string;
-    senderType: 'visitor' | 'agent' | 'system';
+    senderType: 'visitor' | 'agent' | 'bot' | 'system';
     senderName?: string;
     timestamp?: string;
     isRead?: boolean;

package/dist/index.d.ts

@@ -872,13 +872,19 @@ interface ChatBubbleProps {
     onClose?: () => void;
     /** Member auth token for logged-in users (optional) */
     memberToken?: string;
+    /** Show login prompt for non-logged-in users */
+    showLoginPrompt?: boolean;
+    /** Login page URL (used when showLoginPrompt is true) */
+    loginUrl?: string;
+    /** Custom login prompt message */
+    loginPromptMessage?: string;
 }
 declare const ChatBubble: React__default.FC<ChatBubbleProps>;
 
 interface Message {
     id: number;
     content: string;
-    sender_type: 'visitor' | 'agent' | 'system';
+    sender_type: 'visitor' | 'agent' | 'bot' | 'system';
     sender_name?: string;
     created_at?: string;
     is_read?: boolean;
@@ -899,12 +905,20 @@ interface ChatWidgetProps {
     typing?: boolean;
     ended?: boolean;
     className?: string;
+    /** Whether user is logged in */
+    isLoggedIn?: boolean;
+    /** Show login prompt for non-logged-in users */
+    showLoginPrompt?: boolean;
+    /** Login page URL */
+    loginUrl?: string;
+    /** Custom login prompt message */
+    loginPromptMessage?: string;
 }
 declare const ChatWidget: React__default.FC<ChatWidgetProps>;
 
 interface ChatMessageProps {
     content: string;
-    senderType: 'visitor' | 'agent' | 'system';
+    senderType: 'visitor' | 'agent' | 'bot' | 'system';
     senderName?: string;
     timestamp?: string;
     isRead?: boolean;

package/dist/index.js

@@ -2612,25 +2612,24 @@ var ChatMessage = ({
 }) => {
   const isVisitor = senderType === "visitor";
   const isSystem = senderType === "system";
+  const isBot = senderType === "bot";
   if (isSystem) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `diffsome-chat-message-system ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: content }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      className: `diffsome-chat-message ${isVisitor ? "diffsome-chat-message-visitor" : "diffsome-chat-message-agent"} ${className}`,
-      children: [
-        !isVisitor && senderName && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "diffsome-chat-message-sender", children: senderName }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `diffsome-chat-message-bubble ${isPending ? "diffsome-chat-message-pending" : ""} ${isFailed ? "diffsome-chat-message-failed" : ""}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "diffsome-chat-message-content", children: content }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "diffsome-chat-message-time", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "diffsome-chat-message-status", children: "Sending..." }) : isFailed ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "diffsome-chat-message-status diffsome-chat-message-error", children: "Failed" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            timestamp,
-            isVisitor && isRead && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "diffsome-chat-message-read", children: " \u2713" })
-          ] }) })
-        ] })
-      ]
-    }
-  );
+  const messageClass = isVisitor ? "diffsome-chat-message-visitor" : isBot ? "diffsome-chat-message-bot" : "diffsome-chat-message-agent";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `diffsome-chat-message ${messageClass} ${className}`, children: [
+    !isVisitor && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "diffsome-chat-message-sender", children: [
+      isBot && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "diffsome-chat-bot-icon", children: "\u{1F916} " }),
+      senderName || (isBot ? "AI Assistant" : "Agent")
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `diffsome-chat-message-bubble ${isPending ? "diffsome-chat-message-pending" : ""} ${isFailed ? "diffsome-chat-message-failed" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "diffsome-chat-message-content", children: content }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "diffsome-chat-message-time", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "diffsome-chat-message-status", children: "Sending..." }) : isFailed ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "diffsome-chat-message-status diffsome-chat-message-error", children: "Failed" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        timestamp,
+        isVisitor && isRead && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "diffsome-chat-message-read", children: " \u2713" })
+      ] }) })
+    ] })
+  ] });
 };
 
 // src/components/chat/ChatInput.tsx
@@ -2738,7 +2737,11 @@ var ChatWidget = ({
   loading = false,
   typing = false,
   ended = false,
-  className = ""
+  className = "",
+  isLoggedIn = false,
+  showLoginPrompt = false,
+  loginUrl = "/auth/login",
+  loginPromptMessage = "Login to save your chat history across devices"
 }) => {
   const messagesEndRef = (0, import_react23.useRef)(null);
   const scrollToBottom = () => {
@@ -2816,6 +2819,10 @@ var ChatWidget = ({
         }
       )
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      showLoginPrompt && !isLoggedIn && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "diffsome-chat-login-prompt", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: loginPromptMessage }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: loginUrl, className: "diffsome-chat-login-btn", children: "Login" })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ChatInput,
         {
@@ -2856,7 +2863,10 @@ var ChatBubble = ({
   className = "",
   onOpen,
   onClose,
-  memberToken
+  memberToken,
+  showLoginPrompt = false,
+  loginUrl = "/auth/login",
+  loginPromptMessage = "Login to save your chat history across devices"
 }) => {
   (0, import_react24.useEffect)(() => {
     if (memberToken) {
@@ -2987,12 +2997,16 @@ var ChatBubble = ({
     };
     setMessages((prev) => [...prev, pendingMessage]);
     try {
-      const sentMessage = await conn.send(content);
-      if (sentMessage) {
-        seenMessageIds.current.add(sentMessage.id);
+      const response = await conn.send(content);
+      if (response) {
+        seenMessageIds.current.add(response.id);
         setMessages(
-          (prev) => prev.map((m) => m.id === tempId ? { ...sentMessage, is_pending: false } : m)
+          (prev) => prev.map((m) => m.id === tempId ? { ...response, is_pending: false } : m)
         );
+        if (response.bot_response) {
+          seenMessageIds.current.add(response.bot_response.id);
+          setMessages((prev) => [...prev, response.bot_response]);
+        }
       }
     } catch (error) {
       console.error("Failed to send message:", error);
@@ -3054,7 +3068,11 @@ var ChatBubble = ({
             placeholder,
             loading,
             typing,
-            ended
+            ended,
+            isLoggedIn: !!memberToken,
+            showLoginPrompt,
+            loginUrl,
+            loginPromptMessage
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(

package/dist/index.mjs

@@ -2520,25 +2520,24 @@ var ChatMessage = ({
 }) => {
   const isVisitor = senderType === "visitor";
   const isSystem = senderType === "system";
+  const isBot = senderType === "bot";
   if (isSystem) {
     return /* @__PURE__ */ jsx3("div", { className: `diffsome-chat-message-system ${className}`, children: /* @__PURE__ */ jsx3("span", { children: content }) });
   }
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: `diffsome-chat-message ${isVisitor ? "diffsome-chat-message-visitor" : "diffsome-chat-message-agent"} ${className}`,
-      children: [
-        !isVisitor && senderName && /* @__PURE__ */ jsx3("div", { className: "diffsome-chat-message-sender", children: senderName }),
-        /* @__PURE__ */ jsxs2("div", { className: `diffsome-chat-message-bubble ${isPending ? "diffsome-chat-message-pending" : ""} ${isFailed ? "diffsome-chat-message-failed" : ""}`, children: [
-          /* @__PURE__ */ jsx3("div", { className: "diffsome-chat-message-content", children: content }),
-          /* @__PURE__ */ jsx3("div", { className: "diffsome-chat-message-time", children: isPending ? /* @__PURE__ */ jsx3("span", { className: "diffsome-chat-message-status", children: "Sending..." }) : isFailed ? /* @__PURE__ */ jsx3("span", { className: "diffsome-chat-message-status diffsome-chat-message-error", children: "Failed" }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-            timestamp,
-            isVisitor && isRead && /* @__PURE__ */ jsx3("span", { className: "diffsome-chat-message-read", children: " \u2713" })
-          ] }) })
-        ] })
-      ]
-    }
-  );
+  const messageClass = isVisitor ? "diffsome-chat-message-visitor" : isBot ? "diffsome-chat-message-bot" : "diffsome-chat-message-agent";
+  return /* @__PURE__ */ jsxs2("div", { className: `diffsome-chat-message ${messageClass} ${className}`, children: [
+    !isVisitor && /* @__PURE__ */ jsxs2("div", { className: "diffsome-chat-message-sender", children: [
+      isBot && /* @__PURE__ */ jsx3("span", { className: "diffsome-chat-bot-icon", children: "\u{1F916} " }),
+      senderName || (isBot ? "AI Assistant" : "Agent")
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: `diffsome-chat-message-bubble ${isPending ? "diffsome-chat-message-pending" : ""} ${isFailed ? "diffsome-chat-message-failed" : ""}`, children: [
+      /* @__PURE__ */ jsx3("div", { className: "diffsome-chat-message-content", children: content }),
+      /* @__PURE__ */ jsx3("div", { className: "diffsome-chat-message-time", children: isPending ? /* @__PURE__ */ jsx3("span", { className: "diffsome-chat-message-status", children: "Sending..." }) : isFailed ? /* @__PURE__ */ jsx3("span", { className: "diffsome-chat-message-status diffsome-chat-message-error", children: "Failed" }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        timestamp,
+        isVisitor && isRead && /* @__PURE__ */ jsx3("span", { className: "diffsome-chat-message-read", children: " \u2713" })
+      ] }) })
+    ] })
+  ] });
 };
 
 // src/components/chat/ChatInput.tsx
@@ -2646,7 +2645,11 @@ var ChatWidget = ({
   loading = false,
   typing = false,
   ended = false,
-  className = ""
+  className = "",
+  isLoggedIn = false,
+  showLoginPrompt = false,
+  loginUrl = "/auth/login",
+  loginPromptMessage = "Login to save your chat history across devices"
 }) => {
   const messagesEndRef = useRef2(null);
   const scrollToBottom = () => {
@@ -2724,6 +2727,10 @@ var ChatWidget = ({
         }
       )
     ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      showLoginPrompt && !isLoggedIn && /* @__PURE__ */ jsxs4("div", { className: "diffsome-chat-login-prompt", children: [
+        /* @__PURE__ */ jsx5("span", { children: loginPromptMessage }),
+        /* @__PURE__ */ jsx5("a", { href: loginUrl, className: "diffsome-chat-login-btn", children: "Login" })
+      ] }),
       /* @__PURE__ */ jsx5(
         ChatInput,
         {
@@ -2764,7 +2771,10 @@ var ChatBubble = ({
   className = "",
   onOpen,
   onClose,
-  memberToken
+  memberToken,
+  showLoginPrompt = false,
+  loginUrl = "/auth/login",
+  loginPromptMessage = "Login to save your chat history across devices"
 }) => {
   useEffect20(() => {
     if (memberToken) {
@@ -2895,12 +2905,16 @@ var ChatBubble = ({
     };
     setMessages((prev) => [...prev, pendingMessage]);
     try {
-      const sentMessage = await conn.send(content);
-      if (sentMessage) {
-        seenMessageIds.current.add(sentMessage.id);
+      const response = await conn.send(content);
+      if (response) {
+        seenMessageIds.current.add(response.id);
         setMessages(
-          (prev) => prev.map((m) => m.id === tempId ? { ...sentMessage, is_pending: false } : m)
+          (prev) => prev.map((m) => m.id === tempId ? { ...response, is_pending: false } : m)
         );
+        if (response.bot_response) {
+          seenMessageIds.current.add(response.bot_response.id);
+          setMessages((prev) => [...prev, response.bot_response]);
+        }
       }
     } catch (error) {
       console.error("Failed to send message:", error);
@@ -2962,7 +2976,11 @@ var ChatBubble = ({
             placeholder,
             loading,
             typing,
-            ended
+            ended,
+            isLoggedIn: !!memberToken,
+            showLoginPrompt,
+            loginUrl,
+            loginPromptMessage
           }
         ),
         /* @__PURE__ */ jsxs5(

package/package.json

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