@diffsome/react 1.2.8 → 1.2.10

package/dist/chat.css

@@ -246,6 +246,23 @@
   color: #10b981;
 }
 
+.diffsome-chat-message-pending {
+  opacity: 0.7;
+}
+
+.diffsome-chat-message-failed {
+  opacity: 0.7;
+  border: 1px solid #ef4444;
+}
+
+.diffsome-chat-message-status {
+  font-style: italic;
+}
+
+.diffsome-chat-message-error {
+  color: #ef4444;
+}
+
 /* System Message */
 .diffsome-chat-message-system {
   align-self: center;

package/dist/index.d.mts

@@ -876,6 +876,8 @@ interface Message {
     sender_name?: string;
     created_at?: string;
     is_read?: boolean;
+    is_pending?: boolean;
+    is_failed?: boolean;
 }
 interface ChatWidgetProps {
     messages: Message[];
@@ -897,6 +899,8 @@ interface ChatMessageProps {
     senderName?: string;
     timestamp?: string;
     isRead?: boolean;
+    isPending?: boolean;
+    isFailed?: boolean;
     className?: string;
 }
 declare const ChatMessage: React__default.FC<ChatMessageProps>;

package/dist/index.d.ts

@@ -876,6 +876,8 @@ interface Message {
     sender_name?: string;
     created_at?: string;
     is_read?: boolean;
+    is_pending?: boolean;
+    is_failed?: boolean;
 }
 interface ChatWidgetProps {
     messages: Message[];
@@ -897,6 +899,8 @@ interface ChatMessageProps {
     senderName?: string;
     timestamp?: string;
     isRead?: boolean;
+    isPending?: boolean;
+    isFailed?: boolean;
     className?: string;
 }
 declare const ChatMessage: React__default.FC<ChatMessageProps>;

package/dist/index.js

@@ -2595,6 +2595,8 @@ var ChatMessage = ({
   senderName,
   timestamp,
   isRead,
+  isPending,
+  isFailed,
   className = ""
 }) => {
   const isVisitor = senderType === "visitor";
@@ -2608,12 +2610,12 @@ var ChatMessage = ({
       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", children: [
+        /* @__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 }),
-          timestamp && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "diffsome-chat-message-time", children: [
+          /* @__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" })
-          ] })
+          ] }) })
         ] })
       ]
     }
@@ -2773,7 +2775,9 @@ var ChatWidget = ({
           senderType: msg.sender_type,
           senderName: msg.sender_name,
           timestamp: formatTime(msg.created_at),
-          isRead: msg.is_read
+          isRead: msg.is_read,
+          isPending: msg.is_pending,
+          isFailed: msg.is_failed
         },
         msg.id
       )),
@@ -2824,6 +2828,7 @@ 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 seenMessageIds = (0, import_react24.useRef)(/* @__PURE__ */ new Set());
   const initChat = (0, import_react24.useCallback)(async () => {
     if (conversationId) return;
     setLoading(true);
@@ -2837,14 +2842,14 @@ var ChatBubble = ({
       const conn = client.chat.connect(result.conversation_id);
       setConnection(conn);
       const existingMessages = await conn.getMessages();
+      existingMessages.forEach((m) => seenMessageIds.current.add(m.id));
       setMessages(existingMessages);
       conn.onMessage((msg) => {
-        setMessages((prev) => {
-          if (prev.some((m) => m.id === msg.id)) {
-            return prev;
-          }
-          return [...prev, 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);
         }
@@ -2875,10 +2880,28 @@ var ChatBubble = ({
   };
   const handleSend = async (content) => {
     if (!connection) return;
-    try {
-      await connection.send(content);
+    const tempId = -Date.now();
+    const pendingMessage = {
+      id: tempId,
+      content,
+      sender_type: "visitor",
+      created_at: (/* @__PURE__ */ new Date()).toISOString(),
+      is_pending: true
+    };
+    setMessages((prev) => [...prev, pendingMessage]);
+    try {
+      const sentMessage = await connection.send(content);
+      if (sentMessage) {
+        seenMessageIds.current.add(sentMessage.id);
+        setMessages(
+          (prev) => prev.map((m) => m.id === tempId ? { ...sentMessage, is_pending: false } : m)
+        );
+      }
     } catch (error) {
       console.error("Failed to send message:", error);
+      setMessages(
+        (prev) => prev.map((m) => m.id === tempId ? { ...m, is_pending: false, is_failed: true } : m)
+      );
     }
   };
   const handleTyping = () => {

package/dist/index.mjs

@@ -2490,19 +2490,21 @@ function RichContent({
 }
 
 // src/components/chat/ChatBubble.tsx
-import { useState as useState22, useEffect as useEffect21, useCallback as useCallback22 } from "react";
+import { useState as useState22, useEffect as useEffect21, useCallback as useCallback22, useRef as useRef3 } from "react";
 
 // src/components/chat/ChatWidget.tsx
 import { useRef as useRef2, useEffect as useEffect20 } from "react";
 
 // src/components/chat/ChatMessage.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var ChatMessage = ({
   content,
   senderType,
   senderName,
   timestamp,
   isRead,
+  isPending,
+  isFailed,
   className = ""
 }) => {
   const isVisitor = senderType === "visitor";
@@ -2516,12 +2518,12 @@ var ChatMessage = ({
       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", children: [
+        /* @__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 }),
-          timestamp && /* @__PURE__ */ jsxs2("div", { className: "diffsome-chat-message-time", children: [
+          /* @__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" })
-          ] })
+          ] }) })
         ] })
       ]
     }
@@ -2619,7 +2621,7 @@ var ChatInput = ({
 };
 
 // src/components/chat/ChatWidget.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var ChatWidget = ({
   messages,
   onSend,
@@ -2673,7 +2675,7 @@ var ChatWidget = ({
     /* @__PURE__ */ jsx5("div", { className: "diffsome-chat-messages", children: loading ? /* @__PURE__ */ jsxs4("div", { className: "diffsome-chat-loading", children: [
       /* @__PURE__ */ jsx5("div", { className: "diffsome-chat-loading-spinner" }),
       /* @__PURE__ */ jsx5("span", { children: "Loading messages..." })
-    ] }) : messages.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "diffsome-chat-empty", children: /* @__PURE__ */ jsx5("span", { children: "No messages yet. Start the conversation!" }) }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    ] }) : messages.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "diffsome-chat-empty", children: /* @__PURE__ */ jsx5("span", { children: "No messages yet. Start the conversation!" }) }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
       messages.map((msg) => /* @__PURE__ */ jsx5(
         ChatMessage,
         {
@@ -2681,7 +2683,9 @@ var ChatWidget = ({
           senderType: msg.sender_type,
           senderName: msg.sender_name,
           timestamp: formatTime(msg.created_at),
-          isRead: msg.is_read
+          isRead: msg.is_read,
+          isPending: msg.is_pending,
+          isFailed: msg.is_failed
         },
         msg.id
       )),
@@ -2732,6 +2736,7 @@ var ChatBubble = ({
   const [loading, setLoading] = useState22(false);
   const [typing, setTyping] = useState22(false);
   const [unreadCount, setUnreadCount] = useState22(0);
+  const seenMessageIds = useRef3(/* @__PURE__ */ new Set());
   const initChat = useCallback22(async () => {
     if (conversationId) return;
     setLoading(true);
@@ -2745,14 +2750,14 @@ var ChatBubble = ({
       const conn = client.chat.connect(result.conversation_id);
       setConnection(conn);
       const existingMessages = await conn.getMessages();
+      existingMessages.forEach((m) => seenMessageIds.current.add(m.id));
       setMessages(existingMessages);
       conn.onMessage((msg) => {
-        setMessages((prev) => {
-          if (prev.some((m) => m.id === msg.id)) {
-            return prev;
-          }
-          return [...prev, 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);
         }
@@ -2783,10 +2788,28 @@ var ChatBubble = ({
   };
   const handleSend = async (content) => {
     if (!connection) return;
-    try {
-      await connection.send(content);
+    const tempId = -Date.now();
+    const pendingMessage = {
+      id: tempId,
+      content,
+      sender_type: "visitor",
+      created_at: (/* @__PURE__ */ new Date()).toISOString(),
+      is_pending: true
+    };
+    setMessages((prev) => [...prev, pendingMessage]);
+    try {
+      const sentMessage = await connection.send(content);
+      if (sentMessage) {
+        seenMessageIds.current.add(sentMessage.id);
+        setMessages(
+          (prev) => prev.map((m) => m.id === tempId ? { ...sentMessage, is_pending: false } : m)
+        );
+      }
     } catch (error) {
       console.error("Failed to send message:", error);
+      setMessages(
+        (prev) => prev.map((m) => m.id === tempId ? { ...m, is_pending: false, is_failed: true } : m)
+      );
     }
   };
   const handleTyping = () => {

package/package.json

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