simple-support-chat 0.3.2 → 0.4.0

package/README.md

@@ -5,6 +5,7 @@ Embeddable chat widget SDK that routes customer messages to Slack threads. Open-
 - Zero cost, self-hosted
 - Slack-native: messages appear as threads in your workspace
 - Bidirectional: team replies in Slack threads show in the chat widget
+- Real-time delivery via SSE, with automatic polling fallback
 - Slack emoji shortcodes (`:heart:`) auto-converted to Unicode (❤️)
 - Works with any React app (Next.js, Remix, Vite, etc.)
 - Anonymous and authenticated user support
@@ -407,6 +408,182 @@ const store = new SupabaseChatStore();
 // Use this store instance in createSupportHandler, createWebhookHandler, and createRepliesHandler
 ```
 
+## Real-time Replies (SSE)
+
+By default, bidirectional chat uses polling (the client fetches `/api/support/replies` every 4 seconds). Starting in v0.4.0, you can upgrade to **Server-Sent Events (SSE)** for instant delivery with zero polling overhead.
+
+SSE is **optional** -- existing polling setups continue to work with zero changes. Add SSE alongside your existing routes for real-time delivery, with automatic fallback to polling if the SSE connection fails.
+
+### How It Works
+
+1. The **emitter** is an in-process pub/sub bridge: the webhook handler publishes replies into it, and the SSE handler streams them out to connected clients.
+2. The client opens a single persistent `EventSource` connection. Replies arrive instantly as SSE events.
+3. If the SSE connection fails (network error, unsupported environment), the client automatically falls back to polling via `repliesUrl`.
+
+### Server Setup
+
+Create a shared emitter and pass it to the webhook handler and SSE handler:
+
+```ts
+// lib/support-chat.ts
+import { InMemoryStore, createReplyEmitter } from "simple-support-chat/server";
+
+export const store = new InMemoryStore();
+export const emitter = createReplyEmitter();
+```
+
+#### Next.js App Router
+
+Next.js App Router supports SSE via streaming `Response` objects in route handlers. Add a new SSE route alongside your existing routes:
+
+```ts
+// app/api/support/route.ts
+import { createSupportHandler } from "simple-support-chat/server";
+import { store, emitter } from "@/lib/support-chat";
+
+export const POST = createSupportHandler({
+  slackBotToken: process.env.SLACK_BOT_TOKEN!,
+  slackChannel: process.env.SLACK_CHANNEL_ID!,
+  store,
+  emitter,
+});
+```
+
+```ts
+// app/api/support/webhook/route.ts
+import { createWebhookHandler } from "simple-support-chat/server";
+import { store, emitter } from "@/lib/support-chat";
+
+export const POST = createWebhookHandler({
+  store,
+  signingSecret: process.env.SLACK_SIGNING_SECRET!,
+  emitter,
+});
+```
+
+```ts
+// app/api/support/sse/route.ts
+import { createSSEHandler } from "simple-support-chat/server";
+import { emitter } from "@/lib/support-chat";
+
+export const GET = createSSEHandler({ emitter });
+```
+
+```ts
+// app/api/support/replies/route.ts (keep for polling fallback)
+import { createRepliesHandler } from "simple-support-chat/server";
+import { store } from "@/lib/support-chat";
+
+export const GET = createRepliesHandler({ store });
+```
+
+> **Important:** The `emitter` instance must be shared across the support handler, webhook handler, and SSE handler within the same server process. Module-level singletons (as shown above) work well for this.
+
+#### Express
+
+```ts
+import express from "express";
+import {
+  createExpressHandler,
+  createExpressWebhookHandler,
+  createExpressRepliesHandler,
+  createExpressSSEHandler,
+  createReplyEmitter,
+  InMemoryStore,
+} from "simple-support-chat/server";
+
+const app = express();
+const store = new InMemoryStore();
+const emitter = createReplyEmitter();
+
+// Message handler
+app.post(
+  "/api/support",
+  express.json(),
+  createExpressHandler({
+    slackBotToken: process.env.SLACK_BOT_TOKEN!,
+    slackChannel: process.env.SLACK_CHANNEL_ID!,
+    store,
+    emitter,
+  }),
+);
+
+// Webhook handler (pass emitter to broadcast replies)
+app.post(
+  "/api/support/webhook",
+  express.raw({ type: "application/json" }),
+  createExpressWebhookHandler({
+    store,
+    signingSecret: process.env.SLACK_SIGNING_SECRET!,
+    emitter,
+  }),
+);
+
+// SSE endpoint (real-time reply stream)
+app.get("/api/support/sse", createExpressSSEHandler({ emitter }));
+
+// Replies endpoint (polling fallback)
+app.get("/api/support/replies", createExpressRepliesHandler({ store }));
+
+app.listen(3000);
+```
+
+### Client Setup
+
+Pass the `sseUrl` prop alongside `repliesUrl`:
+
+```tsx
+<ChatBubble
+  apiUrl="/api/support"
+  repliesUrl="/api/support/replies"
+  sseUrl="/api/support/sse"
+/>
+```
+
+Or with the modal:
+
+```tsx
+<SupportChatModal
+  apiUrl="/api/support"
+  repliesUrl="/api/support/replies"
+  sseUrl="/api/support/sse"
+  isOpen={isOpen}
+  onClose={close}
+/>
+```
+
+When `sseUrl` is provided, the widget opens a single persistent SSE connection for real-time delivery. If the SSE connection fails, it automatically falls back to polling via `repliesUrl`. If only `repliesUrl` is provided (no `sseUrl`), polling works exactly as before.
+
+### Fallback Behavior
+
+The transport layer handles failures gracefully:
+
+| Scenario | Behavior |
+|----------|----------|
+| `sseUrl` + `repliesUrl` provided, SSE works | Real-time delivery via SSE. No polling. |
+| `sseUrl` + `repliesUrl` provided, SSE fails | Automatic fallback to polling via `repliesUrl`. |
+| Only `repliesUrl` provided (no `sseUrl`) | Polling every 4 seconds. Same as v0.3.x. |
+| Neither provided | One-way only (no replies). |
+
+On brief SSE disconnects, `EventSource` auto-reconnects and the client performs a one-time catch-up fetch via `repliesUrl` to recover any missed messages.
+
+### Serverless Compatibility
+
+SSE requires a **long-lived server process** to maintain persistent connections. It is **not compatible** with serverless platforms that terminate connections after a short timeout:
+
+| Platform | SSE Support | Recommendation |
+|----------|-------------|----------------|
+| Node.js server (Express, Fastify, Hono) | Yes | Use SSE |
+| Docker / Railway / Render / Fly.io | Yes | Use SSE |
+| Next.js on Vercel (Node.js runtime) | Yes | Use SSE |
+| Vercel Edge Functions | No | Use polling (`repliesUrl` only) |
+| Cloudflare Workers | No | Use polling (`repliesUrl` only) |
+| AWS Lambda | No | Use polling (`repliesUrl` only) |
+
+When deploying to a serverless environment, omit the `sseUrl` prop and rely on `repliesUrl` for polling. The client handles this gracefully -- no code changes needed.
+
+> **Note:** SSE operates within a single server process. If you run multiple server instances behind a load balancer, each instance has its own emitter. In this scenario, use a sticky session or session-affinity configuration so that a client's SSE connection and its webhook handler route to the same instance.
+
 ## Configuration
 
 ### ChatBubble Props
@@ -414,7 +591,8 @@ const store = new SupabaseChatStore();
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `apiUrl` | `string` | (required) | URL of your support API endpoint |
-| `repliesUrl` | `string` | `undefined` | URL of the replies endpoint. Enables bidirectional chat. |
+| `repliesUrl` | `string` | `undefined` | URL of the replies endpoint. Enables bidirectional chat (polling). |
+| `sseUrl` | `string` | `undefined` | URL of the SSE endpoint. Enables real-time delivery. Falls back to `repliesUrl` polling on failure. |
 | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Bubble position |
 | `color` | `string` | `'#2563eb'` | Primary color (bubble, header, sent messages) |
 | `title` | `string` | `'Support'` | Chat panel header title |
@@ -432,6 +610,7 @@ const store = new SupabaseChatStore();
 | `botIcon` | `string` | Bot icon emoji (e.g., `:speech_balloon:`) |
 | `onMessage` | `(data) => void` | Callback on each message |
 | `store` | `SupportChatStore` | Pluggable storage backend (defaults to `InMemoryStore`) |
+| `emitter` | `ReplyEmitter` | Optional reply emitter for SSE broadcasting (see [Real-time Replies](#real-time-replies-sse)) |
 
 ## Identity Integration
 
@@ -492,7 +671,8 @@ The modal renders centered on desktop (max-width 500px) with a backdrop overlay,
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `apiUrl` | `string` | (required) | URL of your support API endpoint |
-| `repliesUrl` | `string` | `undefined` | URL of the replies endpoint. Enables bidirectional chat. |
+| `repliesUrl` | `string` | `undefined` | URL of the replies endpoint. Enables bidirectional chat (polling). |
+| `sseUrl` | `string` | `undefined` | URL of the SSE endpoint. Enables real-time delivery. Falls back to `repliesUrl` polling on failure. |
 | `isOpen` | `boolean` | (required) | Whether the modal is open |
 | `onClose` | `() => void` | (required) | Callback to close the modal |
 | `color` | `string` | `'#2563eb'` | Primary color |
@@ -552,6 +732,9 @@ The Express handler uses the same threading logic as the Web API handler. The re
 | `createExpressWebhookHandler(options)` | Returns an Express handler for Slack event webhooks |
 | `createRepliesHandler(options)` | Returns a Web API handler for the replies polling endpoint |
 | `createExpressRepliesHandler(options)` | Returns an Express handler for the replies polling endpoint |
+| `createSSEHandler(options)` | Returns a Web API handler for SSE streaming (real-time replies) |
+| `createExpressSSEHandler(options)` | Returns an Express handler for SSE streaming (real-time replies) |
+| `createReplyEmitter()` | Creates an in-process event emitter for SSE broadcasting |
 | `verifySlackSignature(secret, sig, ts, body)` | Verifies a Slack request signature |
 | `InMemoryStore` | Default in-memory implementation of `SupportChatStore` |
 | `validateSlackToken(token)` | Validates a Slack token via `auth.test` |
@@ -565,6 +748,7 @@ The Express handler uses the same threading logic as the Web API handler. The re
 | `SupportChatModal` | Modal-based chat React component |
 | `useSupportChat()` | Hook returning `{ open, close, toggle, isOpen }` |
 | `useChatEngine(options)` | Low-level hook for chat message state |
+| `useReplyTransport(options)` | Low-level hook for SSE/polling reply transport |
 | `collectAnonymousContext()` | Collects browser context (page URL, user agent, etc.) |
 | `getSessionId()` | Gets or creates a persistent anonymous session ID |
 
@@ -574,7 +758,15 @@ All TypeScript types are exported from both entry points:
 
 ```ts
 // Client types
-import type { ChatBubbleProps, ChatUser, SupportChatModalProps, ChatMessage } from "simple-support-chat";
+import type {
+  ChatBubbleProps,
+  ChatUser,
+  SupportChatModalProps,
+  ChatMessage,
+  TransportMode,
+  ReplyTransportOptions,
+  ReplyTransportState,
+} from "simple-support-chat";
 
 // Server types
 import type {
@@ -587,6 +779,8 @@ import type {
   WebhookHandlerOptions,
   RepliesHandlerOptions,
   RepliesResponse,
+  ReplyEmitter,
+  SSEHandlerOptions,
 } from "simple-support-chat/server";
 ```
 

package/dist/client/index.cjs

@@ -48,20 +48,180 @@ function collectAnonymousContext() {
     sessionId
   };
 }
+var POLL_INTERVAL = 4e3;
+function useReplyTransport({
+  sseUrl,
+  repliesUrl,
+  sessionId,
+  isActive
+}) {
+  const [replies, setReplies] = react.useState([]);
+  const [transport, setTransport] = react.useState("disconnected");
+  const knownReplyIdsRef = react.useRef(/* @__PURE__ */ new Set());
+  const lastReplyTimestampRef = react.useRef(null);
+  const sseFailedRef = react.useRef(false);
+  const eventSourceRef = react.useRef(null);
+  const pollIntervalRef = react.useRef(null);
+  const needsCatchUpRef = react.useRef(false);
+  const addReplies = react.useCallback(
+    (newReplies) => {
+      const deduplicated = newReplies.filter(
+        (r) => !knownReplyIdsRef.current.has(r.id)
+      );
+      if (deduplicated.length === 0) return;
+      for (const r of deduplicated) {
+        knownReplyIdsRef.current.add(r.id);
+      }
+      const latestTimestamp = deduplicated.reduce((latest, r) => {
+        return r.timestamp > latest ? r.timestamp : latest;
+      }, lastReplyTimestampRef.current ?? "");
+      lastReplyTimestampRef.current = latestTimestamp;
+      const replyMessages = deduplicated.map((r) => ({
+        id: r.id,
+        text: r.text,
+        sender: "received",
+        timestamp: new Date(r.timestamp).getTime()
+      }));
+      setReplies((prev) => [...prev, ...replyMessages]);
+    },
+    []
+  );
+  const fetchReplies = react.useCallback(async () => {
+    if (!repliesUrl) return;
+    try {
+      const params = new URLSearchParams({ sessionId });
+      if (lastReplyTimestampRef.current) {
+        params.set("since", lastReplyTimestampRef.current);
+      }
+      const response = await fetch(`${repliesUrl}?${params.toString()}`);
+      if (!response.ok) return;
+      const data = await response.json();
+      if (data.replies.length === 0) return;
+      addReplies(data.replies);
+    } catch {
+    }
+  }, [repliesUrl, sessionId, addReplies]);
+  const startPolling = react.useCallback(() => {
+    if (!repliesUrl) return;
+    if (pollIntervalRef.current !== null) {
+      clearInterval(pollIntervalRef.current);
+    }
+    setTransport("polling");
+    void fetchReplies();
+    pollIntervalRef.current = setInterval(
+      () => void fetchReplies(),
+      POLL_INTERVAL
+    );
+  }, [repliesUrl, fetchReplies]);
+  const stopPolling = react.useCallback(() => {
+    if (pollIntervalRef.current !== null) {
+      clearInterval(pollIntervalRef.current);
+      pollIntervalRef.current = null;
+    }
+  }, []);
+  const connectSSE = react.useCallback(() => {
+    if (!sseUrl || sseFailedRef.current) return;
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    const url = `${sseUrl}?sessionId=${encodeURIComponent(sessionId)}`;
+    const es = new EventSource(url);
+    eventSourceRef.current = es;
+    es.addEventListener("reply", (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        addReplies([data.reply]);
+      } catch {
+      }
+    });
+    es.addEventListener("heartbeat", () => {
+    });
+    es.onopen = () => {
+      setTransport("sse");
+      if (needsCatchUpRef.current) {
+        needsCatchUpRef.current = false;
+        void fetchReplies();
+      }
+    };
+    es.onerror = () => {
+      if (es.readyState === EventSource.CLOSED) {
+        sseFailedRef.current = true;
+        es.close();
+        eventSourceRef.current = null;
+        startPolling();
+      } else {
+        needsCatchUpRef.current = true;
+      }
+    };
+  }, [sseUrl, sessionId, addReplies, fetchReplies, startPolling]);
+  const disconnectSSE = react.useCallback(() => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+  }, []);
+  react.useEffect(() => {
+    if (!isActive) {
+      disconnectSSE();
+      stopPolling();
+      setTransport("disconnected");
+      return;
+    }
+    if (!sseUrl && !repliesUrl) {
+      setTransport("disconnected");
+      return;
+    }
+    if (sseUrl && !sseFailedRef.current) {
+      connectSSE();
+    } else if (repliesUrl) {
+      startPolling();
+    }
+    return () => {
+      disconnectSSE();
+      stopPolling();
+    };
+  }, [
+    isActive,
+    sseUrl,
+    repliesUrl,
+    connectSSE,
+    disconnectSSE,
+    startPolling,
+    stopPolling
+  ]);
+  react.useEffect(() => {
+    sseFailedRef.current = false;
+  }, [sseUrl]);
+  return { replies, transport };
+}
 
 // src/client/useChatEngine.ts
-var POLL_INTERVAL = 4e3;
 function useChatEngine({
   apiUrl,
   user,
   repliesUrl,
+  sseUrl,
   isOpen = true
 }) {
   const [messages, setMessages] = react.useState([]);
   const [input, setInput] = react.useState("");
   const [sending, setSending] = react.useState(false);
-  const lastReplyTimestampRef = react.useRef(null);
-  const knownReplyIdsRef = react.useRef(/* @__PURE__ */ new Set());
+  const sessionId = user?.id ?? getSessionId();
+  const { replies, transport } = useReplyTransport({
+    sseUrl,
+    repliesUrl,
+    sessionId,
+    isActive: isOpen
+  });
+  const processedReplyCountRef = react.useRef(0);
+  react.useEffect(() => {
+    if (replies.length > processedReplyCountRef.current) {
+      const newReplies = replies.slice(processedReplyCountRef.current);
+      processedReplyCountRef.current = replies.length;
+      setMessages((prev) => [...prev, ...newReplies]);
+    }
+  }, [replies]);
   const sendMessage = react.useCallback(async () => {
     const text = input.trim();
     if (!text || sending) return;
@@ -82,7 +242,7 @@ function useChatEngine({
         body: JSON.stringify({
           message: text,
           user: user ?? void 0,
-          sessionId: user?.id ?? getSessionId(),
+          sessionId,
           context
         })
       });
@@ -110,7 +270,7 @@ function useChatEngine({
     } finally {
       setSending(false);
     }
-  }, [input, sending, apiUrl, user]);
+  }, [input, sending, apiUrl, user, sessionId]);
   const handleKeyDown = react.useCallback(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
@@ -120,45 +280,7 @@ function useChatEngine({
     },
     [sendMessage]
   );
-  react.useEffect(() => {
-    if (!repliesUrl || !isOpen) return;
-    const sessionId = user?.id ?? getSessionId();
-    const fetchReplies = async () => {
-      try {
-        const params = new URLSearchParams({ sessionId });
-        if (lastReplyTimestampRef.current) {
-          params.set("since", lastReplyTimestampRef.current);
-        }
-        const response = await fetch(`${repliesUrl}?${params.toString()}`);
-        if (!response.ok) return;
-        const data = await response.json();
-        if (data.replies.length === 0) return;
-        const newReplies = data.replies.filter(
-          (r) => !knownReplyIdsRef.current.has(r.id)
-        );
-        if (newReplies.length === 0) return;
-        for (const r of newReplies) {
-          knownReplyIdsRef.current.add(r.id);
-        }
-        const latestTimestamp = newReplies.reduce((latest, r) => {
-          return r.timestamp > latest ? r.timestamp : latest;
-        }, lastReplyTimestampRef.current ?? "");
-        lastReplyTimestampRef.current = latestTimestamp;
-        const replyMessages = newReplies.map((r) => ({
-          id: r.id,
-          text: r.text,
-          sender: "received",
-          timestamp: new Date(r.timestamp).getTime()
-        }));
-        setMessages((prev) => [...prev, ...replyMessages]);
-      } catch {
-      }
-    };
-    void fetchReplies();
-    const intervalId = setInterval(() => void fetchReplies(), POLL_INTERVAL);
-    return () => clearInterval(intervalId);
-  }, [repliesUrl, isOpen, user]);
-  return { messages, input, setInput, sending, sendMessage, handleKeyDown };
+  return { messages, input, setInput, sending, sendMessage, handleKeyDown, transport };
 }
 function useColorScheme() {
   const [scheme, setScheme] = react.useState(() => {
@@ -233,6 +355,7 @@ function ChatBubble({
   show = true,
   user,
   repliesUrl,
+  sseUrl,
   isOpen: isOpenProp,
   onOpenChange,
   badgeColor = "#eab308",
@@ -255,7 +378,7 @@ function ChatBubble({
   );
   const colorScheme = useColorScheme();
   const theme = react.useMemo(() => getThemeTokens(colorScheme), [colorScheme]);
-  const { messages, input, setInput, sending, sendMessage, handleKeyDown } = useChatEngine({ apiUrl, user, repliesUrl, isOpen });
+  const { messages, input, setInput, sending, sendMessage, handleKeyDown } = useChatEngine({ apiUrl, user, repliesUrl, sseUrl, isOpen });
   const [panelState, setPanelState] = react.useState(
     "closed"
   );
@@ -625,9 +748,10 @@ function SupportChatModal({
   title = "Contact Us",
   placeholder = "Type a message...",
   user,
-  repliesUrl
+  repliesUrl,
+  sseUrl
 }) {
-  const { messages, input, setInput, sending, sendMessage, handleKeyDown } = useChatEngine({ apiUrl, user, repliesUrl, isOpen });
+  const { messages, input, setInput, sending, sendMessage, handleKeyDown } = useChatEngine({ apiUrl, user, repliesUrl, sseUrl, isOpen });
   const colorScheme = useColorScheme();
   const theme = react.useMemo(() => getThemeTokens(colorScheme), [colorScheme]);
   const modalRef = react.useRef(null);
@@ -910,86 +1034,45 @@ function useSupportChat() {
   const toggle = react.useCallback(() => setIsOpen((prev) => !prev), []);
   return { open, close, toggle, isOpen };
 }
-var POLL_INTERVAL2 = 4e3;
 function useUnreadCount({
+  sseUrl,
   repliesUrl,
   user,
   isOpen
 }) {
+  const sessionId = user?.id ?? getSessionId();
+  const { replies, transport } = useReplyTransport({
+    sseUrl,
+    repliesUrl,
+    sessionId,
+    isActive: true
+  });
+  const [unreadCount, setUnreadCount] = react.useState(0);
   const [pendingReplies, setPendingReplies] = react.useState([]);
-  const lastReplyTimestampRef = react.useRef(null);
-  const knownReplyIdsRef = react.useRef(/* @__PURE__ */ new Set());
-  const prevIsOpenRef = react.useRef(isOpen);
-  const baselineSetRef = react.useRef(false);
+  const countedReplyCountRef = react.useRef(0);
+  const wasOpenRef = react.useRef(isOpen);
   react.useEffect(() => {
-    if (isOpen && !prevIsOpenRef.current) {
+    if (isOpen && !wasOpenRef.current) {
+      setUnreadCount(0);
       setPendingReplies([]);
     }
-    prevIsOpenRef.current = isOpen;
+    wasOpenRef.current = isOpen;
   }, [isOpen]);
   const markAsRead = react.useCallback(() => {
+    setUnreadCount(0);
     setPendingReplies([]);
   }, []);
   react.useEffect(() => {
-    if (!repliesUrl || isOpen) return;
-    const sessionId = user?.id ?? getSessionId();
-    const fetchReplies = async () => {
-      try {
-        const params = new URLSearchParams({ sessionId });
-        if (lastReplyTimestampRef.current) {
-          params.set("since", lastReplyTimestampRef.current);
-        }
-        const response = await fetch(`${repliesUrl}?${params.toString()}`);
-        if (!response.ok) return;
-        const data = await response.json();
-        if (!baselineSetRef.current) {
-          baselineSetRef.current = true;
-          if (data.replies.length > 0) {
-            for (const r of data.replies) {
-              knownReplyIdsRef.current.add(r.id);
-            }
-            const latestTimestamp2 = data.replies.reduce((latest, r) => {
-              return r.timestamp > latest ? r.timestamp : latest;
-            }, "");
-            lastReplyTimestampRef.current = latestTimestamp2;
-          } else if (data.lastChecked) {
-            lastReplyTimestampRef.current = data.lastChecked;
-          }
-          return;
-        }
-        if (data.replies.length === 0) return;
-        const newReplies = data.replies.filter(
-          (r) => !knownReplyIdsRef.current.has(r.id)
-        );
-        if (newReplies.length === 0) return;
-        for (const r of newReplies) {
-          knownReplyIdsRef.current.add(r.id);
-        }
-        const latestTimestamp = newReplies.reduce((latest, r) => {
-          return r.timestamp > latest ? r.timestamp : latest;
-        }, lastReplyTimestampRef.current ?? "");
-        lastReplyTimestampRef.current = latestTimestamp;
-        const replyMessages = newReplies.map((r) => ({
-          id: r.id,
-          text: r.text,
-          sender: "received",
-          timestamp: new Date(r.timestamp).getTime()
-        }));
-        setPendingReplies((prev) => [...prev, ...replyMessages]);
-      } catch {
+    if (replies.length > countedReplyCountRef.current) {
+      const newReplies = replies.slice(countedReplyCountRef.current);
+      countedReplyCountRef.current = replies.length;
+      if (!isOpen) {
+        setUnreadCount((prev) => prev + newReplies.length);
+        setPendingReplies((prev) => [...prev, ...newReplies]);
       }
-    };
-    void fetchReplies();
-    const intervalId = setInterval(() => void fetchReplies(), POLL_INTERVAL2);
-    return () => clearInterval(intervalId);
-  }, [repliesUrl, isOpen, user]);
-  const unreadCount = pendingReplies.length;
-  return {
-    unreadCount,
-    hasUnread: unreadCount > 0,
-    pendingReplies,
-    markAsRead
-  };
+    }
+  }, [replies, isOpen]);
+  return { unreadCount, hasUnread: unreadCount > 0, pendingReplies, markAsRead, transport };
 }
 
 exports.ChatBubble = ChatBubble;
@@ -997,6 +1080,7 @@ exports.SupportChatModal = SupportChatModal;
 exports.collectAnonymousContext = collectAnonymousContext;
 exports.getSessionId = getSessionId;
 exports.useChatEngine = useChatEngine;
+exports.useReplyTransport = useReplyTransport;
 exports.useSupportChat = useSupportChat;
 exports.useUnreadCount = useUnreadCount;
 //# sourceMappingURL=index.cjs.map