keystone-design-bootstrap 1.0.85 → 1.0.86

package/dist/index.js

@@ -19917,8 +19917,108 @@ async function submitLeadFormAction(formData) {
 }
 
 // src/design_system/components/ChatWidget.tsx
-import React63, { useState as useState33, useEffect as useEffect13, useRef as useRef19, useCallback as useCallback11 } from "react";
+import React63, { useState as useState33, useEffect as useEffect14, useRef as useRef20, useCallback as useCallback12 } from "react";
 import { X, MessageChatSquare } from "@untitledui/icons";
+
+// src/design_system/chat/useRealtimeReplyOrchestrator.ts
+import { useCallback as useCallback11, useEffect as useEffect13, useRef as useRef19 } from "react";
+import { createConsumer } from "@rails/actioncable";
+function useRealtimeReplyOrchestrator({
+  debugLabel,
+  fetchRealtimeData,
+  loadLatestHasReply,
+  onReplyResolved,
+  onAgentThinking
+}) {
+  const cableRef = useRef19(null);
+  const subscriptionRef = useRef19(null);
+  const subscribedContactRef = useRef19(null);
+  const clearRealtime = useCallback11(() => {
+    if (subscriptionRef.current) {
+      subscriptionRef.current.unsubscribe();
+      subscriptionRef.current = null;
+    }
+    if (cableRef.current) {
+      cableRef.current.disconnect();
+      cableRef.current = null;
+    }
+    subscribedContactRef.current = null;
+  }, []);
+  const resolveReply = useCallback11(() => {
+    onReplyResolved();
+  }, [onReplyResolved]);
+  const subscribeRealtime = useCallback11((realtime) => {
+    const token = realtime.token;
+    const contactIdForStream = realtime.contact_id;
+    const cableUrl = realtime.cable_url;
+    if (!token || !contactIdForStream || !cableUrl) return;
+    if (subscribedContactRef.current === contactIdForStream && subscriptionRef.current && cableRef.current) {
+      return;
+    }
+    clearRealtime();
+    const cable = createConsumer(`${cableUrl}?token=${encodeURIComponent(token)}`);
+    cableRef.current = cable;
+    subscribedContactRef.current = contactIdForStream;
+    subscriptionRef.current = cable.subscriptions.create(
+      { channel: "ContactCommunicationsChannel", contact_id: String(contactIdForStream) },
+      {
+        connected: () => {
+          console.info(`[${debugLabel}] realtime connected contact_id=${contactIdForStream}`);
+        },
+        disconnected: () => {
+          console.warn(`[${debugLabel}] realtime disconnected contact_id=${contactIdForStream}`);
+        },
+        rejected: () => {
+          console.warn(`[${debugLabel}] realtime rejected contact_id=${contactIdForStream}`);
+        },
+        received: async (data) => {
+          var _a;
+          console.info(`[${debugLabel}] realtime received type=${(_a = data == null ? void 0 : data.type) != null ? _a : "unknown"} contact_id=${contactIdForStream}`);
+          if ((data == null ? void 0 : data.type) === "agent_thinking") {
+            onAgentThinking == null ? void 0 : onAgentThinking();
+            return;
+          }
+          if ((data == null ? void 0 : data.type) !== "new_communication") return;
+          try {
+            const hasReply = await loadLatestHasReply();
+            if (hasReply) {
+              resolveReply();
+            }
+          } catch (error) {
+            console.error(`[${debugLabel}] realtime receive handling error`, error);
+          }
+        }
+      }
+    );
+  }, [clearRealtime, debugLabel, loadLatestHasReply, onAgentThinking, resolveReply]);
+  const ensureRealtimeSubscription = useCallback11(async () => {
+    try {
+      const realtime = await fetchRealtimeData();
+      if (!realtime) return;
+      subscribeRealtime(realtime);
+    } catch (e) {
+    }
+  }, [fetchRealtimeData, subscribeRealtime]);
+  const beginReplyWait = useCallback11((options) => {
+    if (options == null ? void 0 : options.realtimeData) {
+      subscribeRealtime(options.realtimeData);
+    } else {
+      void ensureRealtimeSubscription();
+    }
+  }, [ensureRealtimeSubscription, subscribeRealtime]);
+  useEffect13(() => {
+    return () => {
+      clearRealtime();
+    };
+  }, [clearRealtime]);
+  return {
+    ensureRealtimeSubscription,
+    subscribeRealtime,
+    beginReplyWait
+  };
+}
+
+// src/design_system/components/ChatWidget.tsx
 var formatTime = (isoString) => {
   const date = new Date(isoString);
   const now2 = /* @__PURE__ */ new Date();
@@ -19948,8 +20048,8 @@ function ChatWidget({
   const [isLoading, setIsLoading] = useState33(false);
   const [sessionId, setSessionId] = useState33("");
   const [waitingForReply, setWaitingForReply] = useState33(false);
-  const messagesEndRef = useRef19(null);
-  useEffect13(() => {
+  const messagesEndRef = useRef20(null);
+  useEffect14(() => {
     if (contactId) return;
     if (providedSessionId) {
       setSessionId(providedSessionId);
@@ -19964,7 +20064,7 @@ function ChatWidget({
       }
     }
   }, [contactId, providedSessionId]);
-  const loadMessages = useCallback11(async () => {
+  const loadMessages = useCallback12(async () => {
     if (!contactId && !sessionId) return [];
     try {
       const query = contactId ? `contact_id=${encodeURIComponent(contactId)}` : `identifier=${encodeURIComponent(sessionId)}`;
@@ -19980,46 +20080,55 @@ function ChatWidget({
     }
     return [];
   }, [contactId, sessionId]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (isOpen && (contactId || sessionId)) {
       loadMessages();
     }
   }, [isOpen, contactId, sessionId, loadMessages]);
-  useEffect13(() => {
+  useEffect14(() => {
     var _a;
     (_a = messagesEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  const pollIntervalRef = useRef19(null);
-  useEffect13(() => {
-    return () => {
-      if (pollIntervalRef.current !== null) {
-        clearInterval(pollIntervalRef.current);
-      }
-    };
+  const hasAgentReplyWithBody = useCallback12((list) => {
+    const latest = list[list.length - 1];
+    return (latest == null ? void 0 : latest.sender_type) === "agent" && (latest == null ? void 0 : latest.body) != null && String(latest.body).trim() !== "";
   }, []);
-  const pollForAgentReply = () => {
-    setWaitingForReply(true);
-    let attempts = 0;
-    const maxAttempts = 30;
-    pollIntervalRef.current = setInterval(async () => {
-      attempts++;
-      try {
-        const newMessages = await loadMessages();
-        const latest = newMessages[newMessages.length - 1];
-        const hasAgentReplyWithBody = (latest == null ? void 0 : latest.sender_type) === "agent" && (latest == null ? void 0 : latest.body) != null && String(latest.body).trim() !== "";
-        if (hasAgentReplyWithBody || attempts >= maxAttempts) {
-          clearInterval(pollIntervalRef.current);
-          pollIntervalRef.current = null;
-          setWaitingForReply(false);
-          setIsLoading(false);
-        }
-      } catch (error) {
-        console.error("[ChatWidget] Error polling for messages:", error);
-      }
-    }, 1e3);
-  };
-  const sendMessage = async () => {
+  const fetchRealtimeData = useCallback12(async () => {
     var _a, _b, _c;
+    if (!contactId && !sessionId) return null;
+    const query = contactId ? `contact_id=${encodeURIComponent(contactId)}` : `identifier=${encodeURIComponent(sessionId)}`;
+    const response = await fetch(`/api/chat/?action=realtime_token&${query}`);
+    if (!response.ok) return null;
+    const result = await response.json();
+    const token = (_a = result == null ? void 0 : result.data) == null ? void 0 : _a.token;
+    const contactIdForStream = (_b = result == null ? void 0 : result.data) == null ? void 0 : _b.contact_id;
+    const cableUrl = (_c = result == null ? void 0 : result.data) == null ? void 0 : _c.cable_url;
+    if (!token || !contactIdForStream || !cableUrl) return null;
+    return { token, contact_id: contactIdForStream, cable_url: cableUrl };
+  }, [contactId, sessionId]);
+  const {
+    beginReplyWait,
+    ensureRealtimeSubscription
+  } = useRealtimeReplyOrchestrator({
+    debugLabel: "ChatWidget",
+    fetchRealtimeData,
+    loadLatestHasReply: async () => hasAgentReplyWithBody(await loadMessages()),
+    onReplyResolved: () => {
+      setWaitingForReply(false);
+      setIsLoading(false);
+    },
+    onAgentThinking: () => {
+      setWaitingForReply(true);
+    }
+  });
+  const hasPersistedMessages = messages.some((message) => !String(message.id).startsWith("temp_"));
+  useEffect14(() => {
+    if (!isOpen || !contactId && !sessionId) return;
+    if (!contactId && !hasPersistedMessages) return;
+    ensureRealtimeSubscription();
+  }, [contactId, ensureRealtimeSubscription, hasPersistedMessages, isOpen, sessionId]);
+  const sendMessage = async () => {
+    var _a, _b, _c, _d, _e, _f;
     if (!inputValue.trim() || !contactId && !sessionId) return;
     const messageText = inputValue.trim();
     setInputValue("");
@@ -20044,24 +20153,34 @@ function ChatWidget({
         const result = await response.json();
         captureEvent("chat_message_sent", { is_authenticated: Boolean(contactId) });
         if ((_a = result.data) == null ? void 0 : _a.job_id) {
-          pollForAgentReply();
-        } else if (((_b = result.data) == null ? void 0 : _b.status) === "agent_unavailable" || ((_c = result.data) == null ? void 0 : _c.status) === "no_auto_reply") {
+          setWaitingForReply(true);
+          const realtimeFromSend = ((_b = result.data) == null ? void 0 : _b.realtime_token) && ((_c = result.data) == null ? void 0 : _c.contact_id) && ((_d = result.data) == null ? void 0 : _d.cable_url) ? {
+            token: result.data.realtime_token,
+            contact_id: result.data.contact_id,
+            cable_url: result.data.cable_url
+          } : null;
+          beginReplyWait({ realtimeData: realtimeFromSend });
+        } else if (((_e = result.data) == null ? void 0 : _e.status) === "agent_unavailable" || ((_f = result.data) == null ? void 0 : _f.status) === "no_auto_reply") {
           setIsLoading(false);
+          setWaitingForReply(false);
         } else {
           await loadMessages();
           setIsLoading(false);
+          setWaitingForReply(false);
         }
       } else {
         setMessages((prev) => prev.filter((m) => m.id !== tempMessage.id));
         captureEvent("chat_message_failed", { error: "send_failed" });
         console.error("Failed to send message");
         setIsLoading(false);
+        setWaitingForReply(false);
       }
     } catch (error) {
       setMessages((prev) => prev.filter((m) => m.id !== tempMessage.id));
       captureEvent("chat_message_failed", { error: "network_error" });
       console.error("Failed to send message:", error);
       setIsLoading(false);
+      setWaitingForReply(false);
     }
   };
   const handleKeyDown = (e) => {