@diffsome/react 1.2.2 → 1.2.4

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { Diffsome, Cart, WishlistItem, DiffsomeConfig, CurrencyInfo, SiteInfo, Member, LoginCredentials, AuthResponse, RegisterData, UpdateProfileData, ResetPasswordData, SocialProvider, WishlistToggleResult, WishlistMoveToCartResult, BundlePricing, ProductCategory, Product, PaginationMeta, ProductListParams, ProductType, CreateOrderData, Order, OrderListParams, PaymentStatusResponse, StripeCheckoutResponse, StripeVerifyResponse, TossPaymentReadyResponse, TossPaymentConfirmResponse, Coupon, CouponValidation, MemberSubscription, DigitalDownloadLink, CanReviewResponse, CreateProductReviewData, ProductReview, UpdateProductReviewData, ProductReviewStats, ProductReviewListParams, BlogCategory, BlogListParams, BlogPost, BoardPost, Board, CreateBoardPostData, BoardPostListParams, BoardListParams, Comment, CreateCommentData, Form, FormSubmissionData, FormSubmission, ReservationSlot, CreateReservationData, Reservation, ReservationService, ReservationSettings, ReservationStaff, ReservationListParams, Media, CustomEntity, EntityRecord, EntityListParams } from '@diffsome/sdk';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { Diffsome, Cart, WishlistItem, DiffsomeConfig, CurrencyInfo, SiteInfo, Member, LoginCredentials, AuthResponse, RegisterData, UpdateProfileData, ResetPasswordData, SocialProvider, WishlistToggleResult, WishlistMoveToCartResult, BundlePricing, ProductCategory, Product, PaginationMeta, ProductListParams, ProductType, CreateOrderData, Order, OrderListParams, PaymentStatusResponse, StripeCheckoutResponse, StripeVerifyResponse, TossPaymentReadyResponse, TossPaymentConfirmResponse, Coupon, CouponValidation, MemberSubscription, DigitalDownloadLink, CanReviewResponse, CreateProductReviewData, ProductReview, UpdateProductReviewData, ProductReviewStats, ProductReviewListParams, BlogCategory, BlogListParams, BlogPost, BoardPost, Board, CreateBoardPostData, BoardPostListParams, BoardListParams, Comment, CreateCommentData, Form, FormSubmissionData, FormSubmission, ReservationSlot, CreateReservationData, Reservation, ReservationService, ReservationSettings, ReservationStaff, ReservationListParams, Media, CustomEntity, EntityRecord, EntityListParams, ChatConversation, ChatMessage as ChatMessage$1 } from '@diffsome/sdk';
 export { AddToCartData, AuthResponse, BlogCategory, BlogListParams, BlogPost, Board, BoardListParams, BoardPost, BoardPostListParams, CanReviewResponse, Cart, CartItem, Comment, Coupon, CouponType, CouponValidation, CreateBoardPostData, CreateCommentData, CreateOrderData, CreateProductReviewData, CreateReservationData, CustomEntity, DiffsomeConfig, DigitalDownloadLink, DigitalFile, EntityField, EntityListParams, EntityRecord, EntitySchema, Form, FormSubmission, FormSubmissionData, ListResponse, LoginCredentials, Media, Member, MemberSubscription, Order, OrderItem, OrderListParams, OrderStatus, PaginatedResponse, PaginationMeta, Payment, PaymentMethod, PaymentStatus, PaymentStatusResponse, Product, ProductCategory, ProductListParams, ProductReview, ProductReviewStats, ProductType, ProductVariant, RegisterData, Reservation, ReservationService, ReservationSettings, ReservationSlot, ReservationStaff, ResetPasswordData, SiteInfo, SocialAuthUrl, SocialProvider, StripeCheckoutResponse, StripeVerifyResponse, SubscriptionInterval, SubscriptionPlan, SubscriptionStatus, TossPaymentConfirmResponse, TossPaymentReadyResponse, UpdateProfileData, WishlistItem, WishlistMoveToCartResult, WishlistToggleResult } from '@diffsome/sdk';
 
 interface DiffsomeContextValue {
@@ -16,7 +16,7 @@ interface DiffsomeContextValue {
     setWishlistItems: (items: WishlistItem[]) => void;
     refreshWishlist: () => Promise<void>;
 }
-declare const DiffsomeContext: react.Context<DiffsomeContextValue | null>;
+declare const DiffsomeContext: React.Context<DiffsomeContextValue | null>;
 interface DiffsomeProviderProps {
     children: ReactNode;
     config?: Partial<DiffsomeConfig>;
@@ -757,6 +757,46 @@ declare function useTypedEntity<T extends Record<string, any>>(slug: string): {
     delete: (id: number) => Promise<void>;
 };
 
+interface UseChatOptions {
+    /** Auto-connect when hook mounts */
+    autoConnect?: boolean;
+    /** Visitor name */
+    visitorName?: string;
+    /** Visitor email */
+    visitorEmail?: string;
+    /** Initial greeting message */
+    greeting?: string;
+}
+interface UseChatReturn {
+    /** Current conversation */
+    conversation: ChatConversation | null;
+    /** Messages in the conversation */
+    messages: ChatMessage$1[];
+    /** Whether chat is loading */
+    loading: boolean;
+    /** Error if any */
+    error: Error | null;
+    /** Whether connection is active */
+    connected: boolean;
+    /** Whether agent is typing */
+    agentTyping: boolean;
+    /** Start a new conversation */
+    start: (options?: {
+        visitorName?: string;
+        visitorEmail?: string;
+        greeting?: string;
+    }) => Promise<void>;
+    /** Send a message */
+    send: (content: string) => Promise<void>;
+    /** Send typing indicator */
+    sendTyping: () => void;
+    /** Close the conversation */
+    close: () => Promise<void>;
+    /** Disconnect from real-time updates */
+    disconnect: () => void;
+}
+declare function useChat(options?: UseChatOptions): UseChatReturn;
+
 interface RichContentProps {
     /** HTML content from CMS/Editor */
     html: string;
@@ -797,4 +837,100 @@ interface RichContentProps {
  */
 declare function RichContent({ html, className, prose, proseVariant, proseSize, maxWidth, }: RichContentProps): react_jsx_runtime.JSX.Element;
 
-export { type CommentType, DiffsomeContext, type DiffsomeContextValue, DiffsomeProvider, type DiffsomeProviderProps, RichContent, type RichContentProps, type UseAuthReturn, type UseAvailableSlotsReturn, type UseBlogCategoriesReturn, type UseBlogOptions, type UseBlogPostReturn, type UseBlogReturn, type UseBlogSearchReturn, type UseBlogTagsReturn, type UseBoardPostReturn, type UseBoardPostsReturn, type UseBoardReturn, type UseBoardsReturn, type UseBundleItemsReturn, type UseCanReviewReturn, type UseCartReturn, type UseCategoriesReturn, type UseCommentsOptions, type UseCommentsReturn, type UseCouponsReturn, type UseCreateBoardPostReturn, type UseCreateOrderReturn, type UseCreateReservationReturn, type UseCreateReviewReturn, type UseCreateSubscriptionReturn, type UseCurrencyReturn, type UseDownloadsReturn, type UseEntitiesReturn, type UseEntityRecordReturn, type UseEntityRecordsReturn, type UseEntityReturn, type UseFeaturedBlogReturn, type UseFeaturedProductsReturn, type UseFormReturn, type UseMediaOptions, type UseMediaReturn, type UseMyReservationsReturn, type UseMyReviewsReturn, type UseOrderDownloadsReturn, type UseOrderReturn, type UseOrdersReturn, type UsePaymentStatusReturn, type UseProductReturn, type UseProductReviewsReturn, type UseProductsByTypeReturn, type UseProductsOptions, type UseProductsReturn, type UseReservationServicesReturn, type UseReservationSettingsReturn, type UseReservationStaffsReturn, type UseSiteReturn, type UseSocialAuthReturn, type UseStripePaymentReturn, type UseSubscriptionReturn, type UseSubscriptionsReturn, type UseTossPaymentReturn, type UseValidateCouponReturn, type UseWishlistReturn, useAuth, useAvailableSlots, useBlog, useBlogCategories, useBlogPost, useBlogSearch, useBlogTags, useBoard, useBoardPost, useBoardPosts, useBoards, useBundleItems, useBundleProducts, useCanReview, useCart, useCategories, useClient, useComments, useCoupons, useCreateBoardPost, useCreateOrder, useCreateReservation, useCreateReview, useCreateSubscription, useCurrency, useDiffsome, useDigitalProducts, useDownloads, useEntities, useEntity, useEntityRecord, useEntityRecords, useFeaturedBlog, useFeaturedProducts, useForm, useMedia, useMyReservations, useMyReviews, useOrder, useOrderDownloads, useOrders, usePaymentStatus, useProduct, useProductReviews, useProducts, useProductsByType, useReservationServices, useReservationSettings, useReservationStaffs, useSite, useSocialAuth, useStripePayment, useSubscription, useSubscriptionProducts, useSubscriptions, useTossPayment, useTypedEntity, useValidateCoupon, useWishlist };
+interface Message {
+    id: number;
+    content: string;
+    senderType: 'visitor' | 'agent' | 'system';
+    senderName?: string;
+    timestamp?: string;
+    isRead?: boolean;
+}
+interface ChatWidgetProps {
+    messages: Message[];
+    onSend: (message: string) => void;
+    onTyping?: () => void;
+    onClose?: () => void;
+    title?: string;
+    subtitle?: string;
+    placeholder?: string;
+    loading?: boolean;
+    typing?: boolean;
+    className?: string;
+}
+declare const ChatWidget: React__default.FC<ChatWidgetProps>;
+
+interface ChatBubbleProps {
+    /** Diffsome SDK client instance */
+    client: {
+        chat: {
+            start: (data?: {
+                visitor_name?: string;
+                visitor_email?: string;
+                initial_message?: string;
+            }) => Promise<{
+                conversation_id: number;
+                visitor_id: string;
+            }>;
+            connect: (conversationId: number) => {
+                send: (content: string) => Promise<unknown>;
+                getMessages: () => Promise<Message[]>;
+                onMessage: (callback: (msg: Message) => void) => () => void;
+                onTyping: (callback: (senderType: string) => void) => () => void;
+                sendTyping: () => void;
+                disconnect: () => void;
+            };
+            checkAvailability: () => Promise<{
+                available: boolean;
+                agents_online: number;
+            }>;
+        };
+    };
+    /** Chat widget title */
+    title?: string;
+    /** Chat widget subtitle */
+    subtitle?: string;
+    /** Input placeholder text */
+    placeholder?: string;
+    /** Visitor name */
+    visitorName?: string;
+    /** Visitor email */
+    visitorEmail?: string;
+    /** Initial greeting message from visitor */
+    greeting?: string;
+    /** Primary color */
+    primaryColor?: string;
+    /** Position of the bubble */
+    position?: 'bottom-right' | 'bottom-left';
+    /** Z-index for the widget */
+    zIndex?: number;
+    /** Whether to show unread badge */
+    showUnreadBadge?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Callback when chat is opened */
+    onOpen?: () => void;
+    /** Callback when chat is closed */
+    onClose?: () => void;
+}
+declare const ChatBubble: React__default.FC<ChatBubbleProps>;
+
+interface ChatMessageProps {
+    content: string;
+    senderType: 'visitor' | 'agent' | 'system';
+    senderName?: string;
+    timestamp?: string;
+    isRead?: boolean;
+    className?: string;
+}
+declare const ChatMessage: React__default.FC<ChatMessageProps>;
+
+interface ChatInputProps {
+    onSend: (message: string) => void;
+    onTyping?: () => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const ChatInput: React__default.FC<ChatInputProps>;
+
+export { ChatBubble, type ChatBubbleProps, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, ChatWidget, type ChatWidgetProps, type CommentType, DiffsomeContext, type DiffsomeContextValue, DiffsomeProvider, type DiffsomeProviderProps, type Message, RichContent, type RichContentProps, type UseAuthReturn, type UseAvailableSlotsReturn, type UseBlogCategoriesReturn, type UseBlogOptions, type UseBlogPostReturn, type UseBlogReturn, type UseBlogSearchReturn, type UseBlogTagsReturn, type UseBoardPostReturn, type UseBoardPostsReturn, type UseBoardReturn, type UseBoardsReturn, type UseBundleItemsReturn, type UseCanReviewReturn, type UseCartReturn, type UseCategoriesReturn, type UseChatOptions, type UseChatReturn, type UseCommentsOptions, type UseCommentsReturn, type UseCouponsReturn, type UseCreateBoardPostReturn, type UseCreateOrderReturn, type UseCreateReservationReturn, type UseCreateReviewReturn, type UseCreateSubscriptionReturn, type UseCurrencyReturn, type UseDownloadsReturn, type UseEntitiesReturn, type UseEntityRecordReturn, type UseEntityRecordsReturn, type UseEntityReturn, type UseFeaturedBlogReturn, type UseFeaturedProductsReturn, type UseFormReturn, type UseMediaOptions, type UseMediaReturn, type UseMyReservationsReturn, type UseMyReviewsReturn, type UseOrderDownloadsReturn, type UseOrderReturn, type UseOrdersReturn, type UsePaymentStatusReturn, type UseProductReturn, type UseProductReviewsReturn, type UseProductsByTypeReturn, type UseProductsOptions, type UseProductsReturn, type UseReservationServicesReturn, type UseReservationSettingsReturn, type UseReservationStaffsReturn, type UseSiteReturn, type UseSocialAuthReturn, type UseStripePaymentReturn, type UseSubscriptionReturn, type UseSubscriptionsReturn, type UseTossPaymentReturn, type UseValidateCouponReturn, type UseWishlistReturn, useAuth, useAvailableSlots, useBlog, useBlogCategories, useBlogPost, useBlogSearch, useBlogTags, useBoard, useBoardPost, useBoardPosts, useBoards, useBundleItems, useBundleProducts, useCanReview, useCart, useCategories, useChat, useClient, useComments, useCoupons, useCreateBoardPost, useCreateOrder, useCreateReservation, useCreateReview, useCreateSubscription, useCurrency, useDiffsome, useDigitalProducts, useDownloads, useEntities, useEntity, useEntityRecord, useEntityRecords, useFeaturedBlog, useFeaturedProducts, useForm, useMedia, useMyReservations, useMyReviews, useOrder, useOrderDownloads, useOrders, usePaymentStatus, useProduct, useProductReviews, useProducts, useProductsByType, useReservationServices, useReservationSettings, useReservationStaffs, useSite, useSocialAuth, useStripePayment, useSubscription, useSubscriptionProducts, useSubscriptions, useTossPayment, useTypedEntity, useValidateCoupon, useWishlist };

package/dist/index.js

@@ -20,6 +20,10 @@ 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,
@@ -39,6 +43,7 @@ __export(index_exports, {
   useCanReview: () => useCanReview,
   useCart: () => useCart,
   useCategories: () => useCategories,
+  useChat: () => useChat,
   useClient: () => useClient,
   useComments: () => useComments,
   useCoupons: () => useCoupons,
@@ -2410,6 +2415,105 @@ function useTypedEntity(slug) {
   }), [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 = `
@@ -2476,8 +2580,380 @@ function RichContent({
     )
   ] });
 }
+
+// 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,
@@ -2497,6 +2973,7 @@ function RichContent({
   useCanReview,
   useCart,
   useCategories,
+  useChat,
   useClient,
   useComments,
   useCoupons,