@diffsome/react 1.2.1 → 1.2.3

package/dist/index.js

@@ -20,8 +20,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ChatBubble: () => ChatBubble,
+  ChatInput: () => ChatInput,
+  ChatMessage: () => ChatMessage,
+  ChatWidget: () => ChatWidget,
   DiffsomeContext: () => DiffsomeContext,
   DiffsomeProvider: () => DiffsomeProvider,
+  RichContent: () => RichContent,
   useAuth: () => useAuth,
   useAvailableSlots: () => useAvailableSlots,
   useBlog: () => useBlog,
@@ -38,6 +43,7 @@ __export(index_exports, {
   useCanReview: () => useCanReview,
   useCart: () => useCart,
   useCategories: () => useCategories,
+  useChat: () => useChat,
   useClient: () => useClient,
   useComments: () => useComments,
   useCoupons: () => useCoupons,
@@ -2408,10 +2414,549 @@ function useTypedEntity(slug) {
     delete: (id) => client.entities.deleteRecord(slug, id)
   }), [client, slug]);
 }
+
+// src/hooks/useChat.ts
+var import_react21 = require("react");
+function useChat(options = {}) {
+  const client = useClient();
+  const [conversation, setConversation] = (0, import_react21.useState)(null);
+  const [messages, setMessages] = (0, import_react21.useState)([]);
+  const [loading, setLoading] = (0, import_react21.useState)(false);
+  const [error, setError] = (0, import_react21.useState)(null);
+  const [connected, setConnected] = (0, import_react21.useState)(false);
+  const [agentTyping, setAgentTyping] = (0, import_react21.useState)(false);
+  const [connection, setConnection] = (0, import_react21.useState)(null);
+  const start = (0, import_react21.useCallback)(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 = (0, import_react21.useCallback)(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 = (0, import_react21.useCallback)(() => {
+    connection?.sendTyping();
+  }, [connection]);
+  const close = (0, import_react21.useCallback)(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 = (0, import_react21.useCallback)(() => {
+    connection?.disconnect();
+    setConnected(false);
+    setConnection(null);
+  }, [connection]);
+  (0, import_react21.useEffect)(() => {
+    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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var quillStyles = `
+  /* Quill Alignment */
+  .ql-align-center { text-align: center; }
+  .ql-align-right { text-align: right; }
+  .ql-align-justify { text-align: justify; }
+
+  /* Quill Font Sizes */
+  .ql-size-small { font-size: 0.75em; }
+  .ql-size-large { font-size: 1.5em; }
+  .ql-size-huge { font-size: 2.5em; }
+
+  /* Quill Fonts */
+  .ql-font-serif { font-family: Georgia, Times New Roman, serif; }
+  .ql-font-monospace { font-family: Monaco, Courier New, monospace; }
+
+  /* Quill Indent */
+  .ql-indent-1 { padding-left: 3em; }
+  .ql-indent-2 { padding-left: 6em; }
+  .ql-indent-3 { padding-left: 9em; }
+  .ql-indent-4 { padding-left: 12em; }
+  .ql-indent-5 { padding-left: 15em; }
+
+  /* Quill Video */
+  .ql-video {
+    display: block;
+    max-width: 100%;
+    margin: 1em 0;
+  }
+
+  /* Quill Code Block */
+  .ql-code-block-container {
+    background-color: #23241f;
+    color: #f8f8f2;
+    border-radius: 0.375rem;
+    padding: 1em;
+    margin: 1em 0;
+    overflow-x: auto;
+  }
+`;
+function RichContent({
+  html,
+  className = "",
+  prose = true,
+  proseVariant = "default",
+  proseSize = "base",
+  maxWidth = "none"
+}) {
+  const proseClasses = prose ? [
+    "prose",
+    proseVariant !== "default" && `prose-${proseVariant}`,
+    proseSize !== "base" && `prose-${proseSize}`,
+    maxWidth !== "none" && `max-w-${maxWidth}`
+  ].filter(Boolean).join(" ") : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { dangerouslySetInnerHTML: { __html: quillStyles } }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: `rich-content ${proseClasses} ${className}`.trim(),
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    )
+  ] });
+}
+
+// src/components/chat/ChatBubble.tsx
+var import_react24 = require("react");
+
+// src/components/chat/ChatWidget.tsx
+var import_react23 = require("react");
+
+// src/components/chat/ChatMessage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ChatMessage = ({
+  content,
+  senderType,
+  senderName,
+  timestamp,
+  isRead,
+  className = ""
+}) => {
+  const isVisitor = senderType === "visitor";
+  const isSystem = senderType === "system";
+  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", 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: [
+            timestamp,
+            isVisitor && isRead && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "diffsome-chat-message-read", children: " \u2713" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/chat/ChatInput.tsx
+var import_react22 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChatInput = ({
+  onSend,
+  onTyping,
+  placeholder = "Type a message...",
+  disabled = false,
+  className = ""
+}) => {
+  const [message, setMessage] = (0, import_react22.useState)("");
+  const inputRef = (0, import_react22.useRef)(null);
+  const typingTimeoutRef = (0, import_react22.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);
+    }
+  };
+  (0, import_react22.useEffect)(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "form",
+    {
+      className: `diffsome-chat-input ${className}`,
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "textarea",
+          {
+            ref: inputRef,
+            value: message,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            placeholder,
+            disabled,
+            rows: 1,
+            className: "diffsome-chat-input-field"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "submit",
+            disabled: disabled || !message.trim(),
+            className: "diffsome-chat-input-button",
+            "aria-label": "Send message",
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "currentColor",
+                width: "20",
+                height: "20",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/chat/ChatWidget.tsx
+var import_jsx_runtime5 = require("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 = (0, import_react23.useRef)(null);
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  (0, import_react23.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `diffsome-chat-widget ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "diffsome-chat-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "diffsome-chat-header-info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "diffsome-chat-header-title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "diffsome-chat-header-subtitle", children: subtitle })
+      ] }),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          className: "diffsome-chat-header-close",
+          onClick: onClose,
+          "aria-label": "Close chat",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              width: "24",
+              height: "24",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("div", { className: "diffsome-chat-messages", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "diffsome-chat-loading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "diffsome-chat-loading-spinner" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Loading messages..." })
+    ] }) : messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "diffsome-chat-empty", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "No messages yet. Start the conversation!" }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ChatMessage,
+        {
+          content: msg.content,
+          senderType: msg.senderType,
+          senderName: msg.senderName,
+          timestamp: formatTime(msg.timestamp),
+          isRead: msg.isRead
+        },
+        msg.id
+      )),
+      typing && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "diffsome-chat-typing", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "diffsome-chat-typing-indicator", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Agent is typing..." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: messagesEndRef })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ChatInput,
+      {
+        onSend,
+        onTyping,
+        placeholder,
+        disabled: loading
+      }
+    )
+  ] });
+};
+
+// src/components/chat/ChatBubble.tsx
+var import_jsx_runtime6 = require("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] = (0, import_react24.useState)(false);
+  const [messages, setMessages] = (0, import_react24.useState)([]);
+  const [conversationId, setConversationId] = (0, import_react24.useState)(null);
+  const [connection, setConnection] = (0, import_react24.useState)(null);
+  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 initChat = (0, import_react24.useCallback)(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();
+  };
+  (0, import_react24.useEffect)(() => {
+    return () => {
+      connection?.disconnect();
+    };
+  }, [connection]);
+  const positionClass = position === "bottom-left" ? "diffsome-chat-bubble-left" : "diffsome-chat-bubble-right";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: `diffsome-chat-bubble-container ${positionClass} ${className}`,
+      style: { "--diffsome-chat-primary": primaryColor, zIndex },
+      children: [
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          ChatWidget,
+          {
+            messages,
+            onSend: handleSend,
+            onTyping: handleTyping,
+            onClose: handleClose,
+            title,
+            subtitle,
+            placeholder,
+            loading,
+            typing
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "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__ */ (0, import_jsx_runtime6.jsx)(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "currentColor",
+                  width: "28",
+                  height: "28",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "currentColor",
+                  width: "28",
+                  height: "28",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "diffsome-chat-bubble-badge", children: unreadCount > 9 ? "9+" : unreadCount })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ChatBubble,
+  ChatInput,
+  ChatMessage,
+  ChatWidget,
   DiffsomeContext,
   DiffsomeProvider,
+  RichContent,
   useAuth,
   useAvailableSlots,
   useBlog,
@@ -2428,6 +2973,7 @@ function useTypedEntity(slug) {
   useCanReview,
   useCart,
   useCategories,
+  useChat,
   useClient,
   useComments,
   useCoupons,