@eshal-bot/chat-widget 0.1.60 → 0.1.61

package/dist/chat-widget.js

@@ -7986,6 +7986,22 @@
    * @typedef {function(string): void} MessageUpdater
    */
 
+  /**
+   * Thrown when the SSE stream's HTTP body closes without ever emitting a
+   * terminal event (`complete` / `finish_reason`). The chat widget used to
+   * silently return in this case, leaving the assistant bubble stuck in
+   * isProcessing with whatever partial text had arrived. The caller catches
+   * this specifically so it can either retry the request or surface a clear
+   * "connection dropped" message to the user (UX-M08).
+   */
+  class IncompleteStreamError extends Error {
+    constructor() {
+      let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'SSE stream ended before completion';
+      super(message);
+      this.name = 'IncompleteStreamError';
+    }
+  }
+
   // ============================================================================
   // NETWORK
   // ============================================================================
@@ -8273,6 +8289,11 @@
     const hasReceivedFirstChunk = {
       current: false
     };
+    // UX-M08: tracks whether the stream emitted any terminal event
+    // (`complete` event or a finish_reason chunk). If the HTTP body
+    // closes without one, the connection dropped mid-response and we
+    // throw IncompleteStreamError so the caller can retry.
+    let streamCompleted = false;
     try {
       while (true) {
         const {
@@ -8345,6 +8366,7 @@
             // Handle complete events
             if (parsed.type === 'complete') {
               var _ref2, _parsed$Sources, _parsed$choices2;
+              streamCompleted = true;
               // Normalize Sources from stream (API may send "Sources" or "sources")
               const rawSources = (_ref2 = (_parsed$Sources = parsed.Sources) !== null && _parsed$Sources !== void 0 ? _parsed$Sources : parsed.sources) !== null && _ref2 !== void 0 ? _ref2 : [];
               const sources = Array.isArray(rawSources) ? rawSources.map(s => {
@@ -8442,6 +8464,7 @@
 
           // Handle finish_reason (stream complete)
           if ((_parsed$choices4 = parsed.choices) !== null && _parsed$choices4 !== void 0 && (_parsed$choices4 = _parsed$choices4[0]) !== null && _parsed$choices4 !== void 0 && _parsed$choices4.finish_reason && parsed.choices[0].finish_reason !== null) {
+            streamCompleted = true;
             const metadata = {
               prompts: parsed.prompts
             };
@@ -8452,6 +8475,15 @@
     } finally {
       reader.releaseLock();
     }
+
+    // UX-M08: HTTP body closed cleanly but no terminal event arrived —
+    // treat as a dropped stream so the caller can retry. The `complete`
+    // and finish_reason branches above are the only successful exits;
+    // anything else means the network dropped or the server hung up
+    // before sending the terminal event.
+    if (!streamCompleted) {
+      throw new IncompleteStreamError(accumulatedText.current ? 'Stream ended mid-response — partial content received' : 'Stream ended before any content was received');
+    }
   };
 
   /**
@@ -9199,6 +9231,15 @@
     const [onboardingAnswers, setOnboardingAnswers] = reactExports.useState({});
     const pendingIntentProcessedRef = reactExports.useRef(false);
 
+    // UX-M09: ref-based concurrency guard for sendMessage. The isLoading
+    // state alone is not sufficient — setState is batched async, so two
+    // rapid calls (e.g. the send button + an `onDirectSend` chip-click in
+    // the same microtask) can both read isLoading=false and start two
+    // overlapping SSE streams that interleave content into the same
+    // assistant bubble. A ref flips synchronously and blocks the second
+    // call before any state mutation runs.
+    const isSendingRef = reactExports.useRef(false);
+
     // Bidi/Voice state
     const [isConversationLoading, setIsConversationLoading] = reactExports.useState(false);
     const [isVoiceSessionActive, setIsVoiceSessionActive] = reactExports.useState(false);
@@ -9572,6 +9613,17 @@
         };
       }
 
+      // UX-M09: synchronous concurrency guard. See isSendingRef declaration
+      // above for the full rationale — covers send-button, onDirectSend
+      // chip clicks, and any other call site routed through sendMessage.
+      if (isSendingRef.current) {
+        return {
+          success: false,
+          error: 'A message is already being sent'
+        };
+      }
+      isSendingRef.current = true;
+
       // PR-I + PR-P: cache the user's question so handleDecision can
       // re-send it after a routing-clarification chip pick. Update
       // BOTH the ref (synchronously, for the setTimeout closure) and
@@ -9581,6 +9633,7 @@
         setPendingRoutingQuestion(trimmed);
       }
       if (!apiBaseUrl) {
+        isSendingRef.current = false;
         setMessages(prev => {
           const errorMessage = createMessage({
             id: getNextMessageId(),
@@ -9699,11 +9752,20 @@
           })
         });
 
-        // Send streaming request
-        const stream = await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId);
+        // UX-M08: retry the stream up to MAX_STREAM_RETRIES times if the
+        // server hangs up mid-response (IncompleteStreamError). Each retry
+        // re-issues the POST and re-runs processStream. The skeleton
+        // bubble is cleared between attempts so a partial assistant
+        // message from the dropped attempt doesn't accumulate alongside
+        // the retried one. Retry only applies to chat-message types —
+        // onboarding-field sends don't need it (they consume the body
+        // raw and don't surface partial state to the user).
+        const STREAM_RETRY_DELAYS_MS = [500, 1500]; // → 2 retries total
 
-        // For onboarding fields, just consume the stream without processing
         if (apiType === 'userName' || apiType === 'email' || apiType === 'phone') {
+          // For onboarding fields, just consume the stream without processing.
+          // Single attempt — no retry, no user-visible partial state to clean up.
+          const stream = await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId);
           const reader = stream.getReader();
           const decoder = new TextDecoder();
           while (true) {
@@ -9718,15 +9780,39 @@
             success: true
           };
         }
-
-        // For regular messages, process the stream
         if (apiType === 'inquiry' || apiType === 'complaint' || apiType === 'technical') {
-          await processStream(stream, setMessages);
-          updateActivity(organizationId);
-          return {
-            success: true
-          };
+          let lastErr;
+          for (let attempt = 0; attempt <= STREAM_RETRY_DELAYS_MS.length; attempt += 1) {
+            try {
+              const stream = await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId);
+              await processStream(stream, setMessages);
+              updateActivity(organizationId);
+              return {
+                success: true
+              };
+            } catch (err) {
+              lastErr = err;
+              if (err instanceof IncompleteStreamError && attempt < STREAM_RETRY_DELAYS_MS.length) {
+                // Drop the half-rendered assistant bubble before retrying so
+                // the next attempt doesn't paint into a stale skeleton.
+                setMessages(prev => (prev || []).filter(msg => !msg.isProcessing));
+                const delay = STREAM_RETRY_DELAYS_MS[attempt];
+                console.warn("[chat] stream dropped (attempt ".concat(attempt + 1, "); retrying in ").concat(delay, "ms \u2014 ").concat(err.message));
+                await new Promise(r => setTimeout(r, delay));
+                continue;
+              }
+              throw err;
+            }
+          }
+          // Unreachable under normal flow — the loop either returns
+          // success, throws, or continues. Throw the last seen error
+          // defensively so we never fall through silently.
+          throw lastErr;
         }
+
+        // Non-chat, non-onboarding apiType (shouldn't currently happen):
+        // fire and forget, single attempt.
+        await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId);
         updateActivity(organizationId);
         return {
           success: true
@@ -9751,9 +9837,16 @@
           error: error instanceof Error ? error.message : 'Failed to send message'
         };
       } finally {
-        if (apiType === 'inquiry' || apiType === 'complaint' || apiType === 'technical') {
-          setIsLoading(false);
-        }
+        // Reset isLoading unconditionally — onboarding field sends
+        // (userName/email/phone) used to skip this branch, so any ambient
+        // loading state set elsewhere (voice flow, parent loop) was left
+        // stuck true after the onboarding step resolved and blocked further
+        // input until the next regular message ran. setIsLoading(false) is
+        // a no-op when it's already false, so widening the condition can't
+        // regress the inquiry/complaint/technical path.
+        setIsLoading(false);
+        // UX-M09: release the concurrency guard so the next send can proceed.
+        isSendingRef.current = false;
       }
     }, [apiBaseUrl, apiKey, getNextMessageId, organizationId, messages, bidiSessionId, routingChoice, widgetFilter, provideCitations]);
     const handleOnboardingFormSubmit = reactExports.useCallback(async answers => {
@@ -91638,16 +91731,16 @@
     formatAxisMap: formatAxisMap
   });
 
-  /**
-   * Widget A2UI catalog — Recharts-based BarChart and KPICard renderers.
-   *
-   * Mirrors the agent-sdk's catalog.tsx renderers (ported to plain JS +
-   * dark-mode aware). These are called directly from A2uiBlock's dispatch
-   * for bar/kpi types, replacing the hand-rolled SVG implementations.
-   *
-   * The renderers accept the same `{ props }` interface as CopilotKit's
-   * catalog convention so they remain drop-in compatible if we ever wire up
-   * the full A2UIProvider pipeline here.
+  /**
+   * Widget A2UI catalog — Recharts-based BarChart and KPICard renderers.
+   *
+   * Mirrors the agent-sdk's catalog.tsx renderers (ported to plain JS +
+   * dark-mode aware). These are called directly from A2uiBlock's dispatch
+   * for bar/kpi types, replacing the hand-rolled SVG implementations.
+   *
+   * The renderers accept the same `{ props }` interface as CopilotKit's
+   * catalog convention so they remain drop-in compatible if we ever wire up
+   * the full A2UIProvider pipeline here.
    */
 
   function formatCompactNumber(n) {
@@ -91656,11 +91749,11 @@
     return String(n);
   }
 
-  /**
-   * Recharts bar chart — mirrors agent-sdk's eshalRenderers.BarChart.
-   *
-   * Expects `props.data` to be an array of `{ label, value }` objects
-   * (already normalized by A2uiBlock's numericData helper).
+  /**
+   * Recharts bar chart — mirrors agent-sdk's eshalRenderers.BarChart.
+   *
+   * Expects `props.data` to be an array of `{ label, value }` objects
+   * (already normalized by A2uiBlock's numericData helper).
    */
   function BarChartRenderer(_ref) {
     let {
@@ -91730,7 +91823,7 @@
             margin: {
               top: 8,
               right: 12,
-              left: 4,
+              left: 12,
               bottom: 20
             },
             children: [/*#__PURE__*/jsxRuntimeExports.jsx(CartesianGrid, {
@@ -91750,6 +91843,7 @@
                 fill: labelColor
               } : undefined
             }), /*#__PURE__*/jsxRuntimeExports.jsx(YAxis, {
+              width: 72,
               tick: {
                 fontSize: 11,
                 fill: labelColor
@@ -91782,9 +91876,9 @@
     });
   }
 
-  /**
-   * KPI card — mirrors agent-sdk's eshalRenderers.KPICard.
-   * Dark-mode aware.
+  /**
+   * KPI card — mirrors agent-sdk's eshalRenderers.KPICard.
+   * Dark-mode aware.
    */
   function KPICardRenderer(_ref2) {
     let {
@@ -91844,10 +91938,10 @@
   }
   const PIE_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6', '#f97316', '#6366f1', '#84cc16', '#06b6d4', '#a855f7'];
 
-  /**
-   * Recharts pie / donut chart — replaces hand-rolled PieSvg.
-   * `props.data` must be an array of `{ label, value }` objects.
-   * Set `donut={true}` for a donut chart (innerRadius > 0).
+  /**
+   * Recharts pie / donut chart — replaces hand-rolled PieSvg.
+   * `props.data` must be an array of `{ label, value }` objects.
+   * Set `donut={true}` for a donut chart (innerRadius > 0).
    */
   function PieChartRenderer(_ref3) {
     let {
@@ -91928,10 +92022,10 @@
     });
   }
 
-  /**
-   * Recharts line / area chart — replaces hand-rolled LineSvg.
-   * `props.data` must be an array of `{ label, value }` objects.
-   * Set `area={true}` to fill under the line.
+  /**
+   * Recharts line / area chart — replaces hand-rolled LineSvg.
+   * `props.data` must be an array of `{ label, value }` objects.
+   * Set `area={true}` to fill under the line.
    */
   function LineChartRenderer(_ref4) {
     let {
@@ -92003,7 +92097,7 @@
             margin: {
               top: 8,
               right: 12,
-              left: 4,
+              left: 12,
               bottom: 20
             },
             children: [/*#__PURE__*/jsxRuntimeExports.jsx(CartesianGrid, {
@@ -92023,6 +92117,7 @@
                 fill: labelColor
               } : undefined
             }), /*#__PURE__*/jsxRuntimeExports.jsx(YAxis, {
+              width: 72,
               tick: {
                 fontSize: 11,
                 fill: labelColor
@@ -92573,14 +92668,52 @@
     return typeof key === 'string' && CURRENCY_KEY_RE.test(key);
   }
 
+  // ISO date / datetime prefix — matches the typical SQL output the
+  // agent's tools produce when GROUP BY-ing by month
+  // (`DATE_TRUNC('month', col)` → `YYYY-MM-DD`). Used by formatAxisTick
+  // below so a chart of monthly expenses shows "Jan '26" / "Feb '26"
+  // horizontally instead of "2026 01 01" slanted (EV-1187 follow-up).
+  const ISO_DATE_RE = /^(\d{4})-(\d{2})-(\d{2})(?:T|$)/;
+  function formatIsoDateAsMonthTick(value) {
+    if (typeof value !== 'string') return null;
+    const m = value.match(ISO_DATE_RE);
+    if (!m) return null;
+    const year = parseInt(m[1], 10);
+    const month = parseInt(m[2], 10);
+    if (!Number.isInteger(month) || month < 1 || month > 12) return null;
+    return "".concat(MONTH_NAMES[month - 1], " '").concat(String(year).slice(-2));
+  }
+
   // Axis-tick formatter: month-number columns (column matches /month/i,
-  // value 1..12) render as 3-letter month names; everything else gets
+  // value 1..12) render as 3-letter month names; ISO date strings
+  // (`2026-01-01`) render as "Jan '26"; everything else gets
   // prettifyLabel applied so "office_supplies" reads "Office Supplies".
   function formatAxisTick(value, dataKey) {
     if (typeof dataKey === 'string' && MONTH_KEY_RE.test(dataKey)) {
       const n = typeof value === 'number' ? value : Number(value);
       if (Number.isInteger(n) && n >= 1 && n <= 12) return MONTH_NAMES[n - 1];
     }
+    const dateMonth = formatIsoDateAsMonthTick(value);
+    if (dateMonth) return dateMonth;
+    return prettifyLabel(value);
+  }
+
+  // Conservative snake_case detector for table cell category labels
+  // (2026-06-19, EV-1187 follow-up). Mirrors the admin UI's
+  // `prettifyCategoryCell` in `packages/frontend/.../chartShared.tsx` and
+  // the SDK's copy. Self-contained because the widget can't reach across
+  // package boundaries.
+  //
+  // Goal: when a category column shows `office_supplies` next to a chart
+  // whose X-axis (via prettifyLabel) already renders "Office Supplies",
+  // the table should agree. Conservative — only lowercase ASCII tokens
+  // joined by underscores (≤ 40 chars) qualify, so IDs/paths/emails/
+  // slugs/camelCase pass through verbatim.
+  const SNAKE_CASE_CATEGORY_RE = /^[a-z]+(_[a-z]+)+$/;
+  function prettifyCategoryCell(value) {
+    if (typeof value !== 'string') return String(value !== null && value !== void 0 ? value : '');
+    if (value.length > 40) return value;
+    if (!SNAKE_CASE_CATEGORY_RE.test(value)) return value;
     return prettifyLabel(value);
   }
   function formatCell(v, columnKey) {
@@ -92592,7 +92725,12 @@
       return Number.isInteger(v) ? String(v) : v.toFixed(2);
     }
     if (typeof v === 'object') return JSON.stringify(v);
-    return String(v);
+    // String cells: prettify snake_case category labels (e.g.
+    // `office_supplies` → "Office Supplies") so the table reads
+    // consistently with the chart's X-axis ticks on the same data.
+    // Conservative: anything not a clean lowercase_underscore token is
+    // returned verbatim, so paths/IDs/emails/slugs are preserved.
+    return prettifyCategoryCell(v);
   }
 
   // ─────────────────────────────────────────────────────────────────────────
@@ -93626,8 +93764,22 @@
   // When streaming, hide trailing table lines that haven't formed a complete
   // table yet (no separator row). Without this, partial `| col |` lines flash
   // as raw pipe text before ReactMarkdown can recognise the block as a table.
+  // Also hides incomplete A2UI fences (```eshal-ui / ```eshal-chart / ```chart)
+  // that haven't received their closing ``` yet — prevents raw JSON flash.
   function sanitizeStreamingContent(text, isStreaming) {
     if (!isStreaming) return text;
+
+    // A2UI fence guard: if an opening fence exists without a matching closing
+    // ```, suppress everything from that opening onwards so the partial JSON/
+    // code never flashes as raw text in the bubble.
+    const openMatch = /^```(?:eshal-ui|eshal-chart|chart)\b/m.exec(text);
+    if (openMatch) {
+      const rest = text.slice(openMatch.index + openMatch[0].length);
+      const hasClose = rest.split('\n').some(l => l.trim() === '```');
+      if (!hasClose) {
+        return text.slice(0, openMatch.index).trimEnd();
+      }
+    }
     const lines = text.split('\n');
     // Find last non-empty line index
     let last = lines.length - 1;