@eshal-bot/chat-widget 0.2.17 → 0.2.19

package/dist/chat-widget.esm.js

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

package/dist/chat-widget.js

@@ -8798,9 +8798,21 @@
         this.buffer = new Float32Array(this.bufferSize);
         this.writeIndex = 0;
         this.readIndex = 0;
+        // Paused while the caller may be speaking over the reply (lib/audio/bargeIn.js).
+        this.paused = false;
         this.port.onmessage = (event) => {
-          if (event.data?.command === 'endOfAudio') {
+          const command = event.data?.command;
+          if (command === 'endOfAudio') {
             this.readIndex = this.writeIndex;
+            this.paused = false;
+            return;
+          }
+          if (command === 'pause') {
+            this.paused = true;
+            return;
+          }
+          if (command === 'resume') {
+            this.paused = false;
             return;
           }
           const int16Samples = new Int16Array(event.data);
@@ -8823,11 +8835,14 @@
         const output = outputs[0];
         const framesPerBlock = output[0].length;
         for (let frame = 0; frame < framesPerBlock; frame += 1) {
-          output[0][frame] = this.buffer[this.readIndex];
+          // Silence when paused or with nothing buffered.
+          const playing = !this.paused && this.readIndex !== this.writeIndex;
+          const sample = playing ? this.buffer[this.readIndex] : 0;
+          output[0][frame] = sample;
           if (output.length > 1) {
-            output[1][frame] = this.buffer[this.readIndex];
+            output[1][frame] = sample;
           }
-          if (this.readIndex !== this.writeIndex) {
+          if (playing) {
             this.readIndex = (this.readIndex + 1) % this.bufferSize;
           }
         }
@@ -8884,9 +8899,16 @@
 
     // Clean up the Blob URL after the worklet is loaded
     URL.revokeObjectURL(workletUrl);
+
+    // The reply plays through the speakers while the mic is open: without echo
+    // cancellation it comes back in, and the voice gate takes it for the caller
+    // barging in (dev, 16 Oct 2026).
     const micStream = await navigator.mediaDevices.getUserMedia({
       audio: {
-        channelCount: 1
+        channelCount: 1,
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true
       }
     });
     const source = audioRecorderContext.createMediaStreamSource(micStream);
@@ -9059,6 +9081,34 @@
     };
   }
 
+  /**
+   * What becomes of a reply's audio when the caller may be speaking over it.
+   *
+   * The voice gate hears sound over a reply (the caller, a cough, the reply
+   * itself through the speakers). It used to empty the player at once, so
+   * everything already buffered was lost; the server sends audio faster than it
+   * plays, so that was most of the reply. Dev, 16 Oct 2026 (Greenleaf voice): a
+   * noise during the checkout reply cut it off, and the server, finding no
+   * speech, sent only the audio it had still been holding.
+   *
+   * Now the player pauses, and the server's verdict on what it heard decides:
+   * an empty transcription is no speech (resume), the caller's words or
+   * `interrupted` are a real barge-in (discard). With no verdict at all the
+   * reply resumes BARGE_IN_RESUME_AFTER_MS after the sound ends.
+   * Mirrors packages/frontend/src/lib/audio/bargeIn.ts.
+   */
+  const BARGE_IN_RESUME_AFTER_MS = 4000;
+
+  /** "resume" | "discard" | null (the event says nothing about the sound). */
+  function bargeInVerdict(event) {
+    if (!event) return null;
+    if (event.interrupted) return 'discard';
+    const heard = event.inputTranscription;
+    if (!heard) return null;
+    if (String(heard.text ?? '').trim()) return 'discard';
+    return heard.finished ? 'resume' : null;
+  }
+
   // Lightweight i18n for the embeddable chat widget.
   // Translations are bundled so the widget stays dependency-free.
   // Locale is resolved from `defaultLanguage` (e.g. "zh", "ar") configured
@@ -11392,6 +11442,31 @@
     return "voiceUnavailable";
   }
 
+  /**
+   * Replies the widget never streamed itself.
+   *
+   * The widget holds its own copy of every /support turn, under its own ids, so
+   * on reload (and on the event stream's backfill) it merges from the server
+   * only what reached the conversation another way: what a person sent from the
+   * Inbox (contentType human_reply, handoff_ack) and a Skill's reply to a staff
+   * turn (staffTurn: Instruct Skill, or a hand-back that resumes the Skill;
+   * backend services/staffTurn.ts). Dev, 15 Oct 2026: a Skill reply sent while
+   * the Testing lab was closed never showed there, because only a person's
+   * replies were merged. Mirrors packages/frontend/src/lib/messages/repliedOutsideStream.ts.
+   */
+  function isRepliedOutsideStream(m) {
+    return m?.contentType === 'human_reply' || m?.contentType === 'handoff_ack' || m?.staffTurn === true;
+  }
+
+  /**
+   * Who owns the conversation once a pushed message is out, or null when the
+   * message does not change that. A staff turn's reply says: the AI answers
+   * again, or a person still has it when the Skill handed off again.
+   */
+  function responderAfterPush(m) {
+    return m?.responder === 'ai' || m?.responder === 'human' ? m.responder : null;
+  }
+
   /**
    * Clean CJK (Chinese, Japanese, Korean) spaces
    */
@@ -12182,11 +12257,31 @@
       isHandedOffRef.current = true;
       setIsHandedOff(true);
     }, []);
+    // The AI owns the conversation again: a Skill replied to an Instruct Skill.
+    // Left handed off, the customer's next message was sent and the AI's
+    // answer to it drained and dropped below.
+    const markAiOwned = reactExports.useCallback(() => {
+      isHandedOffRef.current = false;
+      setIsHandedOff(false);
+    }, []);
 
     // Bidi refs
     const websocketRef = reactExports.useRef(null);
     const audioPlayerNodeRef = reactExports.useRef(null);
     const audioPlayerContextRef = reactExports.useRef(null);
+    // Sound over a reply pauses its audio until the server says what it heard
+    // (lib/audio/bargeIn.js); the timer resumes it when no verdict comes.
+    const bargeInPendingRef = reactExports.useRef(false);
+    const bargeInTimerRef = reactExports.useRef(null);
+    const settleBargeIn = reactExports.useCallback(verdict => {
+      if (bargeInTimerRef.current) clearTimeout(bargeInTimerRef.current);
+      bargeInTimerRef.current = null;
+      if (!bargeInPendingRef.current) return;
+      bargeInPendingRef.current = false;
+      audioPlayerNodeRef.current?.port.postMessage({
+        command: verdict === "resume" ? "resume" : "endOfAudio"
+      });
+    }, []);
     const audioRecorderNodeRef = reactExports.useRef(null);
     const audioRecorderContextRef = reactExports.useRef(null);
     const micStreamRef = reactExports.useRef(null);
@@ -12321,7 +12416,7 @@
         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'));
+        mergeAgentMessages(serverMsgs.filter(isRepliedOutsideStream));
       } catch {
         /* network/parse failure - the live stream still carries new messages */
       }
@@ -12358,6 +12453,8 @@
             // Advance the backfill watermark so a later reconnect doesn't
             // re-request everything we have already rendered live.
             noteAgentMessageAt(data.message.createdAt);
+            const owner = responderAfterPush(data.message);
+            if (owner === 'ai') markAiOwned();else if (owner === 'human') markHandedOff();
             setMessages(prev => {
               if (prev.some(m => m.id === data.message.id)) return prev;
               return [...prev, createMessage({
@@ -12386,7 +12483,7 @@
       // would disable that recovery.
       es.onerror = () => {};
       handoffEventSourceRef.current = es;
-    }, [apiBaseUrl, bidiSessionId, getAuthToken, backfillAgentMessages]);
+    }, [apiBaseUrl, bidiSessionId, getAuthToken, backfillAgentMessages, markAiOwned, markHandedOff]);
     reactExports.useEffect(() => {
       return () => {
         if (handoffEventSourceRef.current) {
@@ -12635,7 +12732,7 @@
           if (!res.ok || cancelled) return;
           const data = await res.json();
           const serverMsgs = Array.isArray(data?.messages) ? data.messages : [];
-          const agentMsgs = serverMsgs.filter(m => m?.contentType === 'human_reply' || m?.contentType === 'handoff_ack');
+          const agentMsgs = serverMsgs.filter(isRepliedOutsideStream);
 
           // Merge past human-agent replies into the transcript (regardless of
           // current responder - they're real history worth showing). Shares
@@ -13902,6 +13999,9 @@
       // Reset userHasSpoken flag when stopping session
       userHasSpokenRef.current = false;
       pendingVoiceSourcesRef.current = null;
+      if (bargeInTimerRef.current) clearTimeout(bargeInTimerRef.current);
+      bargeInTimerRef.current = null;
+      bargeInPendingRef.current = false;
 
       // Cancel a pending reconnect, drop the ref FIRST (so this socket's own
       // onclose sees it is no longer current), then close it in any state.
@@ -13958,6 +14058,11 @@
         setVoiceError("voiceUnavailable");
       }
 
+      // The backend's verdict on the sound that paused the reply: play on, or
+      // drop what is left of it (lib/audio/bargeIn.js).
+      const bargeIn = bargeInVerdict(event);
+      if (bargeIn) settleBargeIn(bargeIn);
+
       // Handle conversation conclusion for voice (bidi) sessions
       const conclusionDetected = event.conclusion_detected ?? event.conclusionDetected;
       if (typeof conclusionDetected === "boolean" && conclusionDetected) {
@@ -14152,7 +14257,7 @@
       if (!event.interrupted && !event.inputTranscription && !event.outputTranscription && !event.content && !event.prompts) {
         console.warn("[BIDI] handleBidiEvent: event had no recognized fields", event);
       }
-    }, [appendAssistantContent, appendUserTranscription, handleContentParts, handleInterrupted, handleTurnComplete, stopVoiceSession]);
+    }, [appendAssistantContent, appendUserTranscription, handleContentParts, handleInterrupted, handleTurnComplete, stopVoiceSession, settleBargeIn]);
     const handleRecorderAudio = reactExports.useCallback(pcmData => {
       if (!isVoiceSessionActiveRef.current) {
         return;
@@ -14194,17 +14299,18 @@
         speechGateRef.current = createSpeechGate({
           sampleRate: 16000
         }, {
-          // Barge-in: the instant the user starts talking, stop any assistant
-          // TTS still playing so we don't talk over them. endOfAudio drops the
-          // player's buffered audio immediately (readIndex → writeIndex). No-op
-          // when nothing is playing (e.g. the user's first utterance).
+          // Barge-in: the instant the user may be talking, pause any assistant
+          // TTS still playing so we don't talk over them, and tell the backend
+          // to hold the in-flight reply. The backend's verdict on what it heard
+          // then resumes the audio or drops it (lib/audio/bargeIn.js): emptying
+          // the player here lost the rest of a reply to a cough (dev, 16 Oct).
           onSpeechStart: () => {
-            // Barge-in: user started talking → (1) stop assistant TTS already
-            // buffered locally, and (2) tell the backend to cancel the in-flight
-            // reply so its remaining TTS doesn't clobber the next turn's audio.
             audioPlayerNodeRef.current?.port.postMessage({
-              command: "endOfAudio"
+              command: "pause"
             });
+            bargeInPendingRef.current = true;
+            if (bargeInTimerRef.current) clearTimeout(bargeInTimerRef.current);
+            bargeInTimerRef.current = null;
             const ws = websocketRef.current;
             if (ws && ws.readyState === WebSocket.OPEN) {
               ws.send(JSON.stringify({
@@ -14220,6 +14326,11 @@
                 type: "audio_end"
               }));
             }
+            // no verdict on the sound: the reply plays on
+            if (bargeInPendingRef.current) {
+              if (bargeInTimerRef.current) clearTimeout(bargeInTimerRef.current);
+              bargeInTimerRef.current = setTimeout(() => settleBargeIn("resume"), BARGE_IN_RESUME_AFTER_MS);
+            }
           }
         });
         const [recorderNode, recorderContext, micStream] = await startAudioRecorderWorklet(handleRecorderAudio);
@@ -14232,7 +14343,7 @@
         console.error("Failed to initialize audio pipeline", error);
         throw error;
       }
-    }, [handleRecorderAudio]);
+    }, [handleRecorderAudio, settleBargeIn]);
     const connectWebsocket = reactExports.useCallback(async () => {
       if (typeof window === "undefined" || !websocketUrl) {
         return;
@@ -16889,6 +17000,10 @@
     isRtl = false,
     questionTextColor,
     questionBoxColor,
+    // User bubble colours, same props ChatInput's follow-up chips take.
+    resolvedUserMessageColor,
+    userMessageBoxColor,
+    userTextColor,
     // Optional localized heading rendered above the vertical pill list,
     // styled to match the inline category picker's helper-text heading.
     headingLabel
@@ -16918,9 +17033,14 @@
       });
     }
 
-    // Vertical pills: the text takes the agent bubble's own text colour (same
-    // fallback chain MessageBubble uses), the border keeps the header colour.
-    const chipTextColor = questionTextColor ?? textColor ?? (isDark ? "#f3f4f6" : "#1A1A1A");
+    // Vertical pills take their fill and text colour from the user bubble, with
+    // the same fallback chains as the follow-up chips (ChatInput's
+    // PromptSuggestionsRow): a click sends the question as the user's own
+    // message. The agent bubble's text colour sat on a white pill, so a white
+    // assistant text colour made the questions vanish. No border, like the
+    // follow-up chips.
+    const chipBackground = resolvedUserMessageColor ?? userMessageBoxColor ?? primaryColor ?? "#2563eb";
+    const chipTextColor = userTextColor ?? textColor ?? "#FFFFFF";
 
     // Vertical layout (default) - pill style matching chat-preview
     return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
@@ -16947,8 +17067,8 @@
               fontFamily,
               fontSize,
               color: chipTextColor,
-              backgroundColor: isDark ? "transparent" : "#ffffff",
-              border: `1.5px solid ${primaryColor}`,
+              backgroundColor: chipBackground,
+              border: "none",
               borderRadius: "9999px",
               padding: "5px 14px",
               fontWeight: 500,
@@ -16956,12 +17076,6 @@
               whiteSpace: "normal",
               textAlign: questionIsRtl ? "right" : "left"
             },
-            onMouseEnter: e => {
-              e.currentTarget.style.backgroundColor = `${primaryColor}14`;
-            },
-            onMouseLeave: e => {
-              e.currentTarget.style.backgroundColor = isDark ? "transparent" : "#ffffff";
-            },
             children: question
           }, index);
         })
@@ -17763,6 +17877,9 @@
           isRtl: isRtl,
           questionTextColor: assistantTextColor,
           questionBoxColor: agentMessageBubbleColor,
+          resolvedUserMessageColor: resolvedUserMessageColor,
+          userMessageBoxColor: userMessageBoxColor,
+          userTextColor: userTextColor,
           headingLabel: quickQuestionsHeadingLabel
         })
       }), isVoiceSessionActive && voiceStatus === "connected" && !isLoading && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
@@ -21656,7 +21773,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.17';
+  const WIDGET_VERSION = '0.2.19';
 
   /**
    * API utility functions