@eshal-bot/chat-widget 0.2.10 → 0.2.12

package/dist/chat-widget.esm.js

@@ -1 +1 @@
-export{S as default}from"./chat-widget-index-CJ4b6TSc.esm.js";import"react";import"react-dom/client";import"react/jsx-runtime";import"react-dom";
+export{S as default}from"./chat-widget-index-DqpnMEPr.esm.js";import"react";import"react-dom/client";import"react/jsx-runtime";import"react-dom";

package/dist/chat-widget.js

@@ -11945,6 +11945,11 @@
   };
   const useChatState = ({
     welcomeMessage,
+    // The org's configured fallback. Shown in place of the generic
+    // t("connectionError") when a turn dies before producing a token, so a
+    // branded assistant fails in its own words. Undefined / empty keeps the
+    // localised connection-error copy, so an unconfigured org is unchanged.
+    fallbackMessage,
     quickQuestions = [],
     apiBaseUrl,
     wsBaseUrl,
@@ -12179,6 +12184,90 @@
     // Null when the SDK's IP/geo resolver is blocked - conversations from
     // those visitors fall into the "Other" bucket on the analytics dashboard.
     const visitorProfileRef = reactExports.useRef(null);
+
+    // EV-4047: high-water mark of the newest agent message we have already
+    // merged, as an ISO timestamp. Seeded from the history fetch and advanced by
+    // every SSE frame and every backfill, so a reconnect asks the server only
+    // for what it actually missed.
+    const lastAgentMessageAtRef = reactExports.useRef(null);
+    const noteAgentMessageAt = reactExports.useCallback(createdAt => {
+      if (!createdAt) return;
+      const t = new Date(createdAt).getTime();
+      if (!Number.isFinite(t)) return;
+      const current = lastAgentMessageAtRef.current ? new Date(lastAgentMessageAtRef.current).getTime() : -Infinity;
+      if (t > current) lastAgentMessageAtRef.current = new Date(t).toISOString();
+    }, []);
+
+    // Merge a batch of server-side agent messages into the transcript, deduped
+    // by id and re-sorted by timestamp. Shared by the mount-time history fetch
+    // and the SSE backfill so both agree on ordering and on what counts as an
+    // agent message.
+    const mergeAgentMessages = reactExports.useCallback(agentMsgs => {
+      if (!Array.isArray(agentMsgs) || agentMsgs.length === 0) return;
+      for (const m of agentMsgs) noteAgentMessageAt(m?.createdAt);
+      setMessages(prev => {
+        const seen = new Set(prev.map(m => m.id));
+        const additions = agentMsgs.filter(m => m && m.id && !seen.has(m.id)).map(m => ({
+          ...createMessage({
+            id: m.id,
+            role: m.role || 'assistant',
+            content: m.content,
+            isProcessing: false,
+            metadata: {
+              senderName: m.senderName
+            }
+          }),
+          timestamp: m.createdAt ? new Date(m.createdAt) : new Date()
+        }));
+        if (additions.length === 0) return prev;
+        const tsMs = m => {
+          const t = m.timestamp instanceof Date ? m.timestamp.getTime() : new Date(m.timestamp).getTime();
+          return Number.isFinite(t) ? t : 0;
+        };
+        const merged = [...prev, ...additions];
+        merged.sort((a, b) => tsMs(a) - tsMs(b));
+        return merged;
+      });
+    }, [noteAgentMessageAt]);
+
+    /**
+     * EV-4047 - backfill agent messages published while we had no live stream.
+     *
+     * `deliverWidgetMessageLocal` (backend) drops a push when the conversation
+     * has no registered SSE connection: "nobody is listening" and "this replica
+     * holds no connection" are the same early return. So any human-agent message
+     * published in the window between the takeover and our EventSource actually
+     * being registered server-side is gone for good - which is exactly the
+     * reported symptom, the agent's FIRST reply missing while the second and
+     * later ones arrive.
+     *
+     * Run on every `onopen`, which covers both the initial subscribe and the
+     * browser's own silent EventSource auto-reconnect (our `onerror` never tore
+     * the stream down, so a dropped stream previously lost everything sent
+     * during the gap with nothing to notice it had happened).
+     */
+    const backfillAgentMessages = reactExports.useCallback(async () => {
+      if (!apiBaseUrl || !bidiSessionId) return;
+      try {
+        const headers = {};
+        if (typeof getAuthToken === 'function') {
+          const token = await getAuthToken();
+          if (token) headers['Authorization'] = `Bearer ${token}`;
+        }
+        const since = lastAgentMessageAtRef.current;
+        const url = `${apiBaseUrl.replace(/\/$/, '')}/api/v1/widget/history/${encodeURIComponent(bidiSessionId)}` + (since ? `?since=${encodeURIComponent(since)}` : '');
+        const res = await fetch(url, {
+          headers,
+          credentials: 'include'
+        });
+        if (!res.ok) return;
+        const data = await res.json();
+        const serverMsgs = Array.isArray(data?.messages) ? data.messages : [];
+        mergeAgentMessages(serverMsgs.filter(m => m?.contentType === 'human_reply' || m?.contentType === 'handoff_ack'));
+      } catch {
+        /* network/parse failure - the live stream still carries new messages */
+      }
+    }, [apiBaseUrl, bidiSessionId, getAuthToken, mergeAgentMessages]);
     const startHandoffEventSource = reactExports.useCallback(async onConnected => {
       if (handoffEventSourceRef.current) {
         if (onConnected) onConnected();
@@ -12208,6 +12297,9 @@
         try {
           const data = JSON.parse(event.data);
           if (data.type === 'message_created' && data.message) {
+            // Advance the backfill watermark so a later reconnect doesn't
+            // re-request everything we have already rendered live.
+            noteAgentMessageAt(data.message.createdAt);
             setMessages(prev => {
               if (prev.some(m => m.id === data.message.id)) return prev;
               return [...prev, createMessage({
@@ -12224,11 +12316,19 @@
         } catch {}
       };
       es.onopen = () => {
+        // EV-4047: close the delivery gap BEFORE anything else. This fires on
+        // the first subscribe and again on every browser-driven reconnect, and
+        // messages published while we were not registered server-side were
+        // dropped outright - the backfill is the only thing that recovers them.
+        void backfillAgentMessages();
         if (onConnected) onConnected();
       };
+      // Left empty deliberately: EventSource reconnects on its own and will fire
+      // `onopen` again, which re-runs the backfill above. Closing the stream here
+      // would disable that recovery.
       es.onerror = () => {};
       handoffEventSourceRef.current = es;
-    }, [apiBaseUrl, bidiSessionId, getAuthToken]);
+    }, [apiBaseUrl, bidiSessionId, getAuthToken, backfillAgentMessages]);
     reactExports.useEffect(() => {
       return () => {
         if (handoffEventSourceRef.current) {
@@ -12480,28 +12580,12 @@
           const agentMsgs = serverMsgs.filter(m => m?.contentType === 'human_reply' || m?.contentType === 'handoff_ack');
 
           // Merge past human-agent replies into the transcript (regardless of
-          // current responder - they're real history worth showing).
-          if (!cancelled && agentMsgs.length > 0) {
-            setMessages(prev => {
-              const seen = new Set(prev.map(m => m.id));
-              const additions = agentMsgs.filter(m => !seen.has(m.id)).map(m => ({
-                ...createMessage({
-                  id: m.id,
-                  role: m.role || 'assistant',
-                  content: m.content,
-                  isProcessing: false
-                }),
-                timestamp: m.createdAt ? new Date(m.createdAt) : new Date()
-              }));
-              if (additions.length === 0) return prev;
-              const tsMs = m => {
-                const t = m.timestamp instanceof Date ? m.timestamp.getTime() : new Date(m.timestamp).getTime();
-                return Number.isFinite(t) ? t : 0;
-              };
-              const merged = [...prev, ...additions];
-              merged.sort((a, b) => tsMs(a) - tsMs(b));
-              return merged;
-            });
+          // current responder - they're real history worth showing). Shares
+          // mergeAgentMessages with the EV-4047 SSE backfill, which also seeds
+          // the `since` watermark from what we just merged so the stream's first
+          // `onopen` only asks for genuinely newer messages.
+          if (!cancelled) {
+            mergeAgentMessages(agentMsgs);
           }
 
           // Suppress the AI loader + open the live SSE ONLY when a human agent
@@ -12519,7 +12603,7 @@
       return () => {
         cancelled = true;
       };
-    }, [apiBaseUrl, organizationId, bidiSessionId, getAuthToken, startHandoffEventSource, markHandedOff]);
+    }, [apiBaseUrl, organizationId, bidiSessionId, getAuthToken, startHandoffEventSource, markHandedOff, mergeAgentMessages]);
 
     // Persist prompt suggestions to localStorage so they survive page refresh
     reactExports.useEffect(() => {
@@ -13015,13 +13099,19 @@
           // apology bubble alone did not say WHICH message was lost, and the
           // user bubble kept looking exactly like a delivered one.
           setUserMessageStatus(sentUserMessageId, "failed");
+          // Keep the diagnostic on the console REGARDLESS of what the customer
+          // is shown: the org fallback reads as "I don't know that", so once it
+          // is on screen an outage and a knowledge gap are indistinguishable to
+          // whoever is looking at the widget. Support needs to tell them apart.
+          console.error("[widget] send failed before any token; showing the org fallback. " + "This is a FAILED TURN, not a knowledge gap.");
           setMessages(prev => {
             const filtered = (prev || []).filter(msg => !msg.isProcessing);
             const errorMessage = createMessage({
               id: getNextMessageId(),
               role: "assistant",
-              content: t("connectionError"),
+              content: fallbackMessage?.trim() || t("connectionError"),
               isProcessing: false,
+              // Still an error for styling / analytics: only the COPY changes.
               isError: true
             });
             return [...filtered, errorMessage];
@@ -14051,7 +14141,7 @@
         throw error;
       }
     }, [handleRecorderAudio]);
-    const connectWebsocket = reactExports.useCallback(() => {
+    const connectWebsocket = reactExports.useCallback(async () => {
       if (typeof window === "undefined" || !websocketUrl) {
         return;
       }
@@ -14060,8 +14150,46 @@
       }
       setVoiceStatus("connecting");
       setVoiceError(null);
+
+      // EV-4119: the voice socket now requires a ticket minted by the backend
+      // behind verified widget auth. Previously the org id in the URL path WAS
+      // the credential - and org ids are public, since this widget ships one
+      // into the host page - so anyone could hold a voice session as any org.
+      //
+      // A browser cannot set headers on a WebSocket handshake (the same reason
+      // the SSE route above takes `?token=`), so the ticket travels in the
+      // query string. It is short-lived and bound to this session id, so it is
+      // fetched per connect rather than cached.
+      let voiceTicket;
+      try {
+        const hdrs = {
+          'Content-Type': 'application/json'
+        };
+        if (typeof getAuthToken === 'function') {
+          const token = await getAuthToken();
+          if (token) hdrs['Authorization'] = `Bearer ${token}`;
+        }
+        const res = await fetch(`${apiBaseUrl.replace(/\/$/, '')}/api/v1/widget/voice-ticket`, {
+          method: 'POST',
+          headers: hdrs,
+          credentials: 'include',
+          body: JSON.stringify({
+            sessionId: bidiSessionId
+          })
+        });
+        if (!res.ok) throw new Error(`voice-ticket ${res.status}`);
+        voiceTicket = (await res.json())?.ticket;
+        if (!voiceTicket) throw new Error('voice-ticket returned no ticket');
+      } catch (err) {
+        // Surface through the existing voice error taxonomy rather than
+        // half-opening a socket the server is going to refuse anyway.
+        console.error('[BIDI] could not obtain a voice session ticket', err);
+        setVoiceStatus('error');
+        setVoiceError(voiceErrorCode(err));
+        return;
+      }
       try {
-        const ws = new WebSocket(websocketUrl);
+        const ws = new WebSocket(`${websocketUrl}?ticket=${encodeURIComponent(voiceTicket)}`);
         websocketRef.current = ws;
         ws.onopen = () => {
           setVoiceStatus("connected");
@@ -14110,7 +14238,7 @@
         setVoiceStatus("error");
         setVoiceError(voiceErrorCode(error));
       }
-    }, [handleBidiEvent, websocketUrl]);
+    }, [handleBidiEvent, websocketUrl, apiBaseUrl, bidiSessionId, getAuthToken]);
     const startVoiceSession = reactExports.useCallback(async () => {
       if (!enableVoiceInteraction || !organizationId) {
         return;
@@ -14262,6 +14390,10 @@
       isHandedOffRef.current = false;
       setIsHandedOff(false);
       serverHistoryFetchedRef.current = null;
+      // EV-4047: the backfill watermark belongs to the OLD conversation. Left
+      // set, the new session's first `onopen` would ask for messages after a
+      // timestamp from a conversation it has nothing to do with.
+      lastAgentMessageAtRef.current = null;
       if (handoffEventSourceRef.current) {
         handoffEventSourceRef.current.close();
         handoffEventSourceRef.current = null;
@@ -18270,7 +18402,14 @@
     const handleKeyPress = event => {
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
-        if (isVoiceSessionActive && onBidiSubmit) {
+        // EV-4179: the voice WS only carries text, so a file attached during a
+        // live voice session can't ride it. When there's a ready attachment we
+        // fall through to the normal text send (sendWithAttachments) instead,
+        // which POSTs to /support with the SAME conversationId as the voice
+        // session - so the file is ingested into the shared session store and
+        // answered, and later spoken turns in the same session see it too. A
+        // plain voice turn (no attachment) still goes over the WS.
+        if (isVoiceSessionActive && onBidiSubmit && !hasReadyAttachment) {
           onBidiSubmit();
           return;
         }
@@ -18652,7 +18791,7 @@
             fill: "currentColor"
           })
         }) : /*#__PURE__*/jsxRuntimeExports.jsx("button", {
-          onClick: isVoiceSessionActive && onBidiSubmit ? onBidiSubmit : sendWithAttachments,
+          onClick: isVoiceSessionActive && onBidiSubmit && !hasReadyAttachment ? onBidiSubmit : sendWithAttachments,
           disabled: csatVisible || isDisabled || isVoiceSessionActive && voiceStatus !== "connected",
           className: `h-10 w-10 flex-shrink-0 rounded-xl transition-all duration-200 flex items-center justify-center shadow-md disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none ${inputValue.trim() ? "scale-100" : "scale-95"}`,
           style: {
@@ -20990,7 +21129,7 @@
    * value by its own test (that constant sat at 0.1.113 while this package was
    * at 0.2.2 precisely because nothing enforced it - EV-2431).
    */
-  const WIDGET_VERSION = '0.2.10';
+  const WIDGET_VERSION = '0.2.12';
 
   /**
    * API utility functions
@@ -21209,6 +21348,12 @@
       const enBundle = messages.bundles?.["en"] ?? {};
       const bundle = {
         welcome: localeBundle.welcome || enBundle.welcome,
+        // Same per-field English fallback as `welcome` above, for the same
+        // reason. Read so useChatState can show the org's own words when a turn
+        // dies before producing a token, instead of the generic connection
+        // error: the customer is looking at a branded assistant, and that
+        // sentence is the one thing on screen that is not theirs.
+        fallback: localeBundle.fallback || enBundle.fallback,
         quickQuestions: Array.isArray(localeBundle.quickQuestions) && localeBundle.quickQuestions.length > 0 ? localeBundle.quickQuestions : enBundle.quickQuestions
       };
 
@@ -21225,6 +21370,10 @@
         chatbotAvatarEnabled: branding.chatbotAvatarEnabled ?? false,
         chatbotAvatar: branding.chatbotAvatar ?? null,
         welcomeMessage: welcomeMessage ?? bundle.welcome ?? "Hi! How can we help?",
+        // No literal default: an org that has not configured a fallback keeps
+        // the widget's localised connection-error copy (t("connectionError")),
+        // which is the pre-existing behaviour.
+        fallbackMessage: bundle.fallback,
         quickQuestions: quickQuestions ?? bundle.quickQuestions ?? [],
         quickQuestionsEnabled: quickQuestionsEnabled ?? messages.quickQuestionsEnabled,
         textColor: textColor ?? "#000000",
@@ -21364,6 +21513,9 @@
       addAssistantMessage
     } = useChatState(widgetConfig ? {
       welcomeMessage: widgetConfig.welcomeMessage,
+      // Per the EV-3813 note below, this hook produces customer-facing
+      // failure copy, so it gets the org's configured fallback too.
+      fallbackMessage: widgetConfig.fallbackMessage,
       quickQuestions: widgetConfig.quickQuestions,
       apiBaseUrl,
       wsBaseUrl: wsBaseUrl ?? agentConfig?.wsBaseUrl,