@diffsome/react 1.2.2 → 1.2.4

package/dist/index.mjs

@@ -2323,6 +2323,105 @@ function useTypedEntity(slug) {
   }), [client, slug]);
 }
 
+// src/hooks/useChat.ts
+import { useState as useState20, useEffect as useEffect18, useCallback as useCallback21 } from "react";
+function useChat(options = {}) {
+  const client = useClient();
+  const [conversation, setConversation] = useState20(null);
+  const [messages, setMessages] = useState20([]);
+  const [loading, setLoading] = useState20(false);
+  const [error, setError] = useState20(null);
+  const [connected, setConnected] = useState20(false);
+  const [agentTyping, setAgentTyping] = useState20(false);
+  const [connection, setConnection] = useState20(null);
+  const start = useCallback21(async (startOptions) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await client.chat.start({
+        visitor_name: startOptions?.visitorName || options.visitorName,
+        visitor_email: startOptions?.visitorEmail || options.visitorEmail,
+        initial_message: startOptions?.greeting || options.greeting
+      });
+      const conv = await client.chat.get(result.conversation_id);
+      setConversation(conv);
+      const conn = client.chat.connect(result.conversation_id);
+      setConnection(conn);
+      setConnected(true);
+      const existingMessages = await conn.getMessages();
+      setMessages(existingMessages);
+      const unsubMessage = conn.onMessage((msg) => {
+        setMessages((prev) => {
+          if (prev.some((m) => m.id === msg.id)) return prev;
+          return [...prev, msg];
+        });
+      });
+      const unsubTyping = conn.onTyping((senderType) => {
+        if (senderType === "agent") {
+          setAgentTyping(true);
+          setTimeout(() => setAgentTyping(false), 3e3);
+        }
+      });
+      conn.onStatusChange((status) => {
+        setConversation((prev) => prev ? { ...prev, status } : null);
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to start chat"));
+    } finally {
+      setLoading(false);
+    }
+  }, [client.chat, options.visitorName, options.visitorEmail, options.greeting]);
+  const send = useCallback21(async (content) => {
+    if (!connection) {
+      throw new Error("Not connected to chat");
+    }
+    try {
+      const message = await connection.send(content);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to send message"));
+      throw err;
+    }
+  }, [connection]);
+  const sendTyping = useCallback21(() => {
+    connection?.sendTyping();
+  }, [connection]);
+  const close = useCallback21(async () => {
+    if (!connection) return;
+    try {
+      await connection.close();
+      setConversation((prev) => prev ? { ...prev, status: "closed" } : null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to close chat"));
+    }
+  }, [connection]);
+  const disconnect = useCallback21(() => {
+    connection?.disconnect();
+    setConnected(false);
+    setConnection(null);
+  }, [connection]);
+  useEffect18(() => {
+    if (options.autoConnect) {
+      start();
+    }
+    return () => {
+      connection?.disconnect();
+    };
+  }, [options.autoConnect]);
+  return {
+    conversation,
+    messages,
+    loading,
+    error,
+    connected,
+    agentTyping,
+    start,
+    send,
+    sendTyping,
+    close,
+    disconnect
+  };
+}
+
 // src/components/RichContent.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var quillStyles = `
@@ -2389,7 +2488,379 @@ function RichContent({
     )
   ] });
 }
+
+// src/components/chat/ChatBubble.tsx
+import { useState as useState22, useEffect as useEffect21, useCallback as useCallback22 } 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";
+var ChatMessage = ({
+  content,
+  senderType,
+  senderName,
+  timestamp,
+  isRead,
+  className = ""
+}) => {
+  const isVisitor = senderType === "visitor";
+  const isSystem = senderType === "system";
+  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", children: [
+          /* @__PURE__ */ jsx3("div", { className: "diffsome-chat-message-content", children: content }),
+          timestamp && /* @__PURE__ */ jsxs2("div", { className: "diffsome-chat-message-time", children: [
+            timestamp,
+            isVisitor && isRead && /* @__PURE__ */ jsx3("span", { className: "diffsome-chat-message-read", children: " \u2713" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/chat/ChatInput.tsx
+import { useState as useState21, useRef, useEffect as useEffect19 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChatInput = ({
+  onSend,
+  onTyping,
+  placeholder = "Type a message...",
+  disabled = false,
+  className = ""
+}) => {
+  const [message, setMessage] = useState21("");
+  const inputRef = useRef(null);
+  const typingTimeoutRef = useRef(null);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (message.trim() && !disabled) {
+      onSend(message.trim());
+      setMessage("");
+      inputRef.current?.focus();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+  const handleChange = (e) => {
+    setMessage(e.target.value);
+    if (onTyping) {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      onTyping();
+      typingTimeoutRef.current = setTimeout(() => {
+        typingTimeoutRef.current = null;
+      }, 2e3);
+    }
+  };
+  useEffect19(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs3(
+    "form",
+    {
+      className: `diffsome-chat-input ${className}`,
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ jsx4(
+          "textarea",
+          {
+            ref: inputRef,
+            value: message,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            placeholder,
+            disabled,
+            rows: 1,
+            className: "diffsome-chat-input-field"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "submit",
+            disabled: disabled || !message.trim(),
+            className: "diffsome-chat-input-button",
+            "aria-label": "Send message",
+            children: /* @__PURE__ */ jsx4(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "currentColor",
+                width: "20",
+                height: "20",
+                children: /* @__PURE__ */ jsx4("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/chat/ChatWidget.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChatWidget = ({
+  messages,
+  onSend,
+  onTyping,
+  onClose,
+  title = "Chat Support",
+  subtitle = "We typically reply within a few minutes",
+  placeholder = "Type a message...",
+  loading = false,
+  typing = false,
+  className = ""
+}) => {
+  const messagesEndRef = useRef2(null);
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  useEffect20(() => {
+    scrollToBottom();
+  }, [messages, typing]);
+  const formatTime = (timestamp) => {
+    if (!timestamp) return void 0;
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: `diffsome-chat-widget ${className}`, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "diffsome-chat-header", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "diffsome-chat-header-info", children: [
+        /* @__PURE__ */ jsx5("div", { className: "diffsome-chat-header-title", children: title }),
+        /* @__PURE__ */ jsx5("div", { className: "diffsome-chat-header-subtitle", children: subtitle })
+      ] }),
+      onClose && /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "diffsome-chat-header-close",
+          onClick: onClose,
+          "aria-label": "Close chat",
+          children: /* @__PURE__ */ jsx5(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              width: "24",
+              height: "24",
+              children: /* @__PURE__ */ jsx5("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__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.map((msg) => /* @__PURE__ */ jsx5(
+        ChatMessage,
+        {
+          content: msg.content,
+          senderType: msg.senderType,
+          senderName: msg.senderName,
+          timestamp: formatTime(msg.timestamp),
+          isRead: msg.isRead
+        },
+        msg.id
+      )),
+      typing && /* @__PURE__ */ jsxs4("div", { className: "diffsome-chat-typing", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "diffsome-chat-typing-indicator", children: [
+          /* @__PURE__ */ jsx5("span", {}),
+          /* @__PURE__ */ jsx5("span", {}),
+          /* @__PURE__ */ jsx5("span", {})
+        ] }),
+        /* @__PURE__ */ jsx5("span", { children: "Agent is typing..." })
+      ] }),
+      /* @__PURE__ */ jsx5("div", { ref: messagesEndRef })
+    ] }) }),
+    /* @__PURE__ */ jsx5(
+      ChatInput,
+      {
+        onSend,
+        onTyping,
+        placeholder,
+        disabled: loading
+      }
+    )
+  ] });
+};
+
+// src/components/chat/ChatBubble.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChatBubble = ({
+  client,
+  title = "Chat Support",
+  subtitle = "We typically reply within a few minutes",
+  placeholder = "Type a message...",
+  visitorName,
+  visitorEmail,
+  greeting,
+  primaryColor = "#6366f1",
+  position = "bottom-right",
+  zIndex = 9999,
+  showUnreadBadge = true,
+  className = "",
+  onOpen,
+  onClose
+}) => {
+  const [isOpen, setIsOpen] = useState22(false);
+  const [messages, setMessages] = useState22([]);
+  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 initChat = useCallback22(async () => {
+    if (conversationId) return;
+    setLoading(true);
+    try {
+      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);
+      setConnection(conn);
+      const existingMessages = await conn.getMessages();
+      setMessages(existingMessages);
+      conn.onMessage((msg) => {
+        setMessages((prev) => [...prev, msg]);
+        if (!isOpen && msg.senderType !== "visitor") {
+          setUnreadCount((c) => c + 1);
+        }
+      });
+      conn.onTyping((senderType) => {
+        if (senderType === "agent") {
+          setTyping(true);
+          setTimeout(() => setTyping(false), 3e3);
+        }
+      });
+    } catch (error) {
+      console.error("Failed to initialize chat:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [client.chat, conversationId, visitorName, visitorEmail, greeting, isOpen]);
+  const handleOpen = () => {
+    setIsOpen(true);
+    setUnreadCount(0);
+    onOpen?.();
+    if (!conversationId) {
+      initChat();
+    }
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+  const handleSend = async (content) => {
+    if (!connection) return;
+    const tempMessage = {
+      id: Date.now(),
+      content,
+      senderType: "visitor",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    setMessages((prev) => [...prev, tempMessage]);
+    try {
+      await connection.send(content);
+    } catch (error) {
+      console.error("Failed to send message:", error);
+    }
+  };
+  const handleTyping = () => {
+    connection?.sendTyping();
+  };
+  useEffect21(() => {
+    return () => {
+      connection?.disconnect();
+    };
+  }, [connection]);
+  const positionClass = position === "bottom-left" ? "diffsome-chat-bubble-left" : "diffsome-chat-bubble-right";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `diffsome-chat-bubble-container ${positionClass} ${className}`,
+      style: { "--diffsome-chat-primary": primaryColor, zIndex },
+      children: [
+        isOpen && /* @__PURE__ */ jsx6(
+          ChatWidget,
+          {
+            messages,
+            onSend: handleSend,
+            onTyping: handleTyping,
+            onClose: handleClose,
+            title,
+            subtitle,
+            placeholder,
+            loading,
+            typing
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            className: `diffsome-chat-bubble-button ${isOpen ? "diffsome-chat-bubble-button-open" : ""}`,
+            onClick: isOpen ? handleClose : handleOpen,
+            "aria-label": isOpen ? "Close chat" : "Open chat",
+            children: [
+              isOpen ? /* @__PURE__ */ jsx6(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "currentColor",
+                  width: "28",
+                  height: "28",
+                  children: /* @__PURE__ */ jsx6("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+                }
+              ) : /* @__PURE__ */ jsx6(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "currentColor",
+                  width: "28",
+                  height: "28",
+                  children: /* @__PURE__ */ jsx6("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" })
+                }
+              ),
+              showUnreadBadge && unreadCount > 0 && !isOpen && /* @__PURE__ */ jsx6("span", { className: "diffsome-chat-bubble-badge", children: unreadCount > 9 ? "9+" : unreadCount })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 export {
+  ChatBubble,
+  ChatInput,
+  ChatMessage,
+  ChatWidget,
   DiffsomeContext,
   DiffsomeProvider,
   RichContent,
@@ -2409,6 +2880,7 @@ export {
   useCanReview,
   useCart,
   useCategories,
+  useChat,
   useClient,
   useComments,
   useCoupons,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diffsome/react",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "React hooks and providers for Diffsome SDK - Headless e-commerce & CMS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -10,13 +10,15 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./chat.css": "./dist/chat.css",
+    "./dist/chat.css": "./dist/chat.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react",
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react && cp src/components/chat/styles.css dist/chat.css",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build"