@eshal-bot/chat-widget 0.1.61 → 0.1.63

package/dist/chat-widget.js

@@ -8011,14 +8011,18 @@
    * @param {object} request - Chat request object
    * @param {string} apiBaseUrl - Base URL for the API
    */
-  const sendStreamingRequest = async (request, apiBaseUrl, organizationId) => {
+  const sendStreamingRequest = async (request, apiBaseUrl, organizationId, secretKey) => {
     const headers = {
       'Content-Type': 'application/json',
       Accept: 'text/event-stream'
     };
 
-    // Add organization ID header if provided
-    if (organizationId) {
+    // Mode A — secret key (direct embed): key replaces orgId in the header
+    // Mode B — proxy (@eshal-bot/server): no header from widget; proxy injects x-eshal-sig + x-eshal-org
+    // Mode C — legacy: orgId sent directly
+    if (secretKey) {
+      headers['x-eshal-key'] = secretKey;
+    } else if (organizationId) {
       headers['x-eshal-org'] = organizationId;
     }
     const response = await fetch("".concat(apiBaseUrl.replace(/\/$/, ''), "/api/v1/support"), {
@@ -9129,6 +9133,7 @@
       apiBaseUrl,
       apiKey,
       organizationId,
+      secretKey,
       autoOpen,
       openDelay,
       darkMode,
@@ -9765,7 +9770,7 @@
         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 stream = await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId, secretKey);
           const reader = stream.getReader();
           const decoder = new TextDecoder();
           while (true) {
@@ -9784,7 +9789,7 @@
           let lastErr;
           for (let attempt = 0; attempt <= STREAM_RETRY_DELAYS_MS.length; attempt += 1) {
             try {
-              const stream = await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId);
+              const stream = await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId, secretKey);
               await processStream(stream, setMessages);
               updateActivity(organizationId);
               return {
@@ -91749,6 +91754,31 @@
     return String(n);
   }
 
+  // ── Currency-aware value formatting ──────────────────────────────────────
+  // A2UI chart data is normalized to `{ label, value }` by A2uiBlock's
+  // numericData(), which drops the original Y-column key. A2uiBlock now threads
+  // that key through as `props.yKey` so these renderers can decide whether the
+  // axis / tooltip values are money. Heuristic mirrors the frontend's
+  // chartShared.tsx `isCurrencyKey` — keep the keyword list in lockstep.
+  // `(^|[_\W])` (not `\b`) so "average_salary" / "total_expenses" still match —
+  // JS `\b` doesn't fire next to `_`.
+  const CURRENCY_KEY_RE$1 = /(^|[_\W])(price|salary|cost|amount|revenue|expense|total|value|budget|spend|income|sale|balance)/i;
+  function isCurrencyKey$1(key) {
+    return typeof key === 'string' && CURRENCY_KEY_RE$1.test(key);
+  }
+
+  // Compact currency for axis ticks → "$120.0k". Full currency for tooltips →
+  // "$87,600" (comma-grouped, up to 2 decimals, no forced trailing zeros so a
+  // whole-dollar salary reads "$81,200" not "$81,200.00").
+  function formatCurrencyCompact(v) {
+    return "$".concat(formatCompactNumber(v));
+  }
+  function formatCurrencyFull(v) {
+    return "$".concat(Number(v).toLocaleString('en-US', {
+      maximumFractionDigits: 2
+    }));
+  }
+
   /**
    * Recharts bar chart — mirrors agent-sdk's eshalRenderers.BarChart.
    *
@@ -91761,6 +91791,11 @@
       isDark = false
     } = _ref;
     const data = Array.isArray(props.data) ? props.data : [];
+    // Whether the Y values are money — drives the `$` on axis ticks + tooltip.
+    const currency = isCurrencyKey$1(props.yKey);
+    // Human series name for the tooltip ("Average Salary"), so it no longer
+    // reads the generic dataKey "value".
+    const seriesName = props.valueLabel || undefined;
     const borderColor = isDark ? '#374151' : '#e2e8f0';
     const bgColor = isDark ? '#1f2937' : '#ffffff';
     const labelColor = isDark ? '#9ca3af' : '#64748b';
@@ -91835,6 +91870,9 @@
                 fontSize: 11,
                 fill: labelColor
               },
+              angle: 0,
+              textAnchor: "middle",
+              interval: 0,
               label: props.xAxisLabel ? {
                 value: props.xAxisLabel,
                 position: 'insideBottom',
@@ -91855,9 +91893,9 @@
                 fontSize: 11,
                 fill: labelColor
               } : undefined,
-              tickFormatter: v => props.unit ? "".concat(formatCompactNumber(v), " ").concat(props.unit) : formatCompactNumber(v)
+              tickFormatter: v => currency ? formatCurrencyCompact(v) : props.unit ? "".concat(formatCompactNumber(v), " ").concat(props.unit) : formatCompactNumber(v)
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
-              formatter: v => props.unit ? "".concat(Number(v).toLocaleString(), " ").concat(props.unit) : Number(v).toLocaleString(),
+              formatter: v => currency ? formatCurrencyFull(v) : props.unit ? "".concat(Number(v).toLocaleString(), " ").concat(props.unit) : Number(v).toLocaleString(),
               contentStyle: {
                 background: tooltipBg,
                 border: "1px solid ".concat(borderColor),
@@ -91867,6 +91905,7 @@
               }
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Bar, {
               dataKey: "value",
+              name: seriesName,
               fill: "#3b82f6",
               radius: [2, 2, 0, 0]
             })]
@@ -91950,6 +91989,7 @@
       donut = false
     } = _ref3;
     const data = Array.isArray(props.data) ? props.data : [];
+    const currency = isCurrencyKey$1(props.yKey);
     const borderColor = isDark ? '#374151' : '#e2e8f0';
     const bgColor = isDark ? '#1f2937' : '#ffffff';
     const titleColor = isDark ? '#f3f4f6' : '#0f172a';
@@ -92000,7 +92040,7 @@
                 fill: PIE_COLORS[i % PIE_COLORS.length]
               }, i))
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
-              formatter: v => Number(v).toLocaleString(),
+              formatter: v => currency ? formatCurrencyFull(v) : Number(v).toLocaleString(),
               contentStyle: {
                 background: tooltipBg,
                 border: "1px solid ".concat(borderColor),
@@ -92034,6 +92074,8 @@
       area = false
     } = _ref4;
     const data = Array.isArray(props.data) ? props.data : [];
+    const currency = isCurrencyKey$1(props.yKey);
+    const seriesName = props.valueLabel || undefined;
     const borderColor = isDark ? '#374151' : '#e2e8f0';
     const bgColor = isDark ? '#1f2937' : '#ffffff';
     const labelColor = isDark ? '#9ca3af' : '#64748b';
@@ -92109,6 +92151,9 @@
                 fontSize: 11,
                 fill: labelColor
               },
+              angle: 0,
+              textAnchor: "middle",
+              interval: 0,
               label: props.xAxisLabel ? {
                 value: props.xAxisLabel,
                 position: 'insideBottom',
@@ -92122,9 +92167,9 @@
                 fontSize: 11,
                 fill: labelColor
               },
-              tickFormatter: v => props.unit ? "".concat(formatCompactNumber(v), " ").concat(props.unit) : formatCompactNumber(v)
+              tickFormatter: v => currency ? formatCurrencyCompact(v) : props.unit ? "".concat(formatCompactNumber(v), " ").concat(props.unit) : formatCompactNumber(v)
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
-              formatter: v => props.unit ? "".concat(Number(v).toLocaleString(), " ").concat(props.unit) : Number(v).toLocaleString(),
+              formatter: v => currency ? formatCurrencyFull(v) : props.unit ? "".concat(Number(v).toLocaleString(), " ").concat(props.unit) : Number(v).toLocaleString(),
               contentStyle: {
                 background: tooltipBg,
                 border: "1px solid ".concat(borderColor),
@@ -92135,6 +92180,7 @@
             }), area ? /*#__PURE__*/jsxRuntimeExports.jsx(Area, {
               type: "monotone",
               dataKey: "value",
+              name: seriesName,
               stroke: "#3b82f6",
               fill: "#3b82f6",
               fillOpacity: 0.15,
@@ -92146,6 +92192,7 @@
             }) : /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
               type: "monotone",
               dataKey: "value",
+              name: seriesName,
               stroke: "#3b82f6",
               strokeWidth: 2,
               dot: {
@@ -92343,7 +92390,14 @@
       data: rows,
       unit: spec.unit,
       xAxisLabel: spec.xAxisLabel,
-      yAxisLabel: spec.yAxisLabel
+      yAxisLabel: spec.yAxisLabel,
+      // numericData() collapses the rows to { label, value }, dropping the
+      // original Y-column key. Pass it through so the renderer can detect a
+      // currency column (→ "$" on the Y-axis + tooltip) and label the tooltip
+      // series with the human column name ("Average Salary") instead of the
+      // generic dataKey "value".
+      yKey: y,
+      valueLabel: prettifyLabel(y)
     };
     if (t === 'pie') return /*#__PURE__*/jsxRuntimeExports.jsx(PieChartRenderer, {
       props: chartProps,
@@ -92670,10 +92724,12 @@
 
   // 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|$)/;
+  // (`DATE_TRUNC('month', col)` → `YYYY-MM-DD`, or `to_char(..,'YYYY-MM')`
+  // → `YYYY-MM`). Used by formatAxisTick below so a chart of monthly
+  // expenses shows "Jan '26" / "Feb '26" horizontally instead of
+  // "2026 01 01" or "2026 01" slanted (EV-1187 follow-up + 2026-06-24
+  // day-less variant fix).
+  const ISO_DATE_RE = /^(\d{4})-(\d{2})(?:-\d{2})?(?:[T\s]|$)/;
   function formatIsoDateAsMonthTick(value) {
     if (typeof value !== 'string') return null;
     const m = value.match(ISO_DATE_RE);
@@ -92716,6 +92772,14 @@
     if (!SNAKE_CASE_CATEGORY_RE.test(value)) return value;
     return prettifyLabel(value);
   }
+
+  // Numeric string under a money column, e.g. "81,200" / "105444" / "-1,250.50".
+  // Markdown tables (the common concierge path) arrive as text cells, so a
+  // salary value is the STRING "81,200" — not a number — and skips the
+  // USD_FORMATTER branch below. We prefix "$" while keeping the source's own
+  // grouping/decimals so it reads "$81,200" (not "$81,200.00"). A leading "$"
+  // already present makes the regex miss, so we never double-prefix.
+  const _NUMERIC_STRING_RE = /^-?\d[\d,]*(\.\d+)?$/;
   function formatCell(v, columnKey) {
     if (v == null) return '';
     if (typeof v === 'number') {
@@ -92725,6 +92789,11 @@
       return Number.isInteger(v) ? String(v) : v.toFixed(2);
     }
     if (typeof v === 'object') return JSON.stringify(v);
+    // Numeric string under a money-named column → prefix "$" (Bug: concierge
+    // salary table showed "81,200" with no currency symbol).
+    if (isCurrencyKey(columnKey) && _NUMERIC_STRING_RE.test(String(v).trim())) {
+      return "$".concat(String(v).trim());
+    }
     // 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.
@@ -96163,7 +96232,18 @@
     copyChat: "Copy Chat",
     startChat: "Start Chat",
     startingVoiceSession: "Starting voice session...",
-    allowMicAccess: "Allow microphone access"
+    allowMicAccess: "Allow microphone access",
+    // Onboarding-form validation messages. These are the English fallback for
+    // every locale (translate() falls back to EN[key]); without them the form
+    // rendered the raw key strings ("emailInvalid", etc.). `fieldRequiredSuffix`
+    // is appended after a field label: `${label} ${fieldRequiredSuffix}`.
+    emailRequired: "Please enter your email address",
+    nameRequired: "Please enter your name",
+    phoneRequired: "Please enter your phone number",
+    fieldRequiredSuffix: "is required",
+    emailInvalid: "Please enter a valid email address",
+    nameInvalid: "Please enter a valid name",
+    phoneInvalid: "Please enter a valid phone number"
   };
   const DICTIONARIES = {
     en: EN,
@@ -99553,6 +99633,7 @@
       apiBaseUrl,
       apiKey,
       organizationId,
+      secretKey,
       conversationId,
       conciergeId,
       onboardingQuestions = [],
@@ -100349,6 +100430,7 @@
   /**
    * @param {string|undefined|null} apiBaseUrl
    * @param {string|undefined|null} orgId
+   * @param {string|undefined|null} secretKey  — Mode A/B: orgId resolved server-side
    * @returns {{
    *   categories: Array<{id:string,label:string,count:number,tags:string[]}>,
    *   loading: boolean,
@@ -100356,14 +100438,17 @@
    *   hasFilters: boolean,
    * }}
    */
-  function useFilterCatalog(apiBaseUrl, orgId) {
+  function useFilterCatalog(apiBaseUrl, orgId, secretKey) {
+    // Mode A: secretKey present, orgId null → key-based endpoint
+    // Mode C: orgId present (legacy) → orgId-in-path endpoint
+    const hasAuth = !!(apiBaseUrl && (orgId || secretKey));
     const [state, setState] = reactExports.useState({
       categories: [],
-      loading: !!(apiBaseUrl && orgId),
+      loading: hasAuth,
       error: null
     });
     reactExports.useEffect(() => {
-      if (!apiBaseUrl || !orgId) {
+      if (!apiBaseUrl || !orgId && !secretKey) {
         setState({
           categories: [],
           loading: false,
@@ -100371,8 +100456,8 @@
         });
         return;
       }
-      const key = "".concat(apiBaseUrl, "|").concat(orgId);
-      const cached = _PROCESS_CACHE.get(key);
+      const cacheKey = secretKey ? "".concat(apiBaseUrl, "|__key__") : "".concat(apiBaseUrl, "|").concat(orgId);
+      const cached = _PROCESS_CACHE.get(cacheKey);
       if (cached) {
         setState({
           categories: cached,
@@ -100386,12 +100471,15 @@
         loading: true,
         error: null
       }));
-      const url = "".concat(apiBaseUrl.replace(/\/$/, ""), "/api/v1/widget/filters/").concat(encodeURIComponent(orgId));
+      const base = apiBaseUrl.replace(/\/$/, "");
+      const url = secretKey ? "".concat(base, "/api/v1/widget/filters") : "".concat(base, "/api/v1/widget/filters/").concat(encodeURIComponent(orgId));
+      const headers = {
+        Accept: "application/json"
+      };
+      if (secretKey) headers["x-eshal-key"] = secretKey;
       fetch(url, {
         method: "GET",
-        headers: {
-          Accept: "application/json"
-        }
+        headers
       }).then(async res => {
         if (!res.ok) {
           throw new Error("filter catalog HTTP ".concat(res.status));
@@ -100400,7 +100488,7 @@
         return Array.isArray(body === null || body === void 0 ? void 0 : body.categories) ? body.categories : [];
       }).then(categories => {
         if (cancelled) return;
-        _PROCESS_CACHE.set(key, categories);
+        _PROCESS_CACHE.set(cacheKey, categories);
         setState({
           categories,
           loading: false,
@@ -100422,7 +100510,7 @@
       return () => {
         cancelled = true;
       };
-    }, [apiBaseUrl, orgId]);
+    }, [apiBaseUrl, orgId, secretKey]);
     const hasFilters = reactExports.useMemo(() => Array.isArray(state.categories) && state.categories.length > 0, [state.categories]);
     return _objectSpread2(_objectSpread2({}, state), {}, {
       hasFilters
@@ -100504,17 +100592,25 @@
    * @param {string} orgId - Organization ID
    * @returns {Promise<object>} Agent configuration object
    */
-  const fetchAgentConfig = async (apiBaseUrl, orgId) => {
-    if (!apiBaseUrl || !orgId) {
-      throw new Error("apiBaseUrl and orgId are required");
+  const fetchAgentConfig = async (apiBaseUrl, orgId, secretKey) => {
+    if (!apiBaseUrl) {
+      throw new Error("apiBaseUrl is required");
+    }
+    if (!secretKey && !orgId) {
+      throw new Error("secretKey or orgId is required");
     }
     try {
-      const url = "".concat(apiBaseUrl.replace(/\/$/, ''), "/api/v1/deploy-agent/").concat(orgId);
+      const base = apiBaseUrl.replace(/\/$/, '');
+      // Mode A/B: no orgId in URL — backend resolves org from x-eshal-key or HMAC sig
+      // Mode C legacy: orgId in URL path, no header needed
+      const url = secretKey ? "".concat(base, "/api/v1/deploy-agent") : "".concat(base, "/api/v1/deploy-agent/").concat(orgId);
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (secretKey) headers['x-eshal-key'] = secretKey;
       const response = await fetch(url, {
         method: "GET",
-        headers: {
-          "Content-Type": "application/json"
-        },
+        headers,
         credentials: "include"
       });
       if (!response.ok) {
@@ -100531,8 +100627,11 @@
   const ChatWidget = _ref => {
     var _agentConfig$concierg;
     let {
-      // Required props for dynamic config
+      // Auth — at least one of secretKey (Mode A/B) or orgId (Mode C legacy) is needed.
+      secretKey,
+      // sk_live_... from ChatWidget.init({ secretKey, apiBaseUrl })
       orgId,
+      // legacy — kept for backward compatibility
       apiBaseUrl,
       // Optional override props (will override fetched config if provided)
       darkMode,
@@ -100583,14 +100682,21 @@
     // Fetch agent configuration on mount
     reactExports.useEffect(() => {
       const loadAgentConfig = async () => {
-        if (!orgId || !apiBaseUrl) {
-          setConfigError("orgId and apiBaseUrl are required");
+        if (!apiBaseUrl) {
+          setConfigError("apiBaseUrl is required");
+          setIsLoadingConfig(false);
+          return;
+        }
+        if (!secretKey && !orgId) {
+          setConfigError("secretKey or orgId is required");
           setIsLoadingConfig(false);
           return;
         }
         try {
           setIsLoadingConfig(true);
-          const config = await fetchAgentConfig(apiBaseUrl, orgId);
+          // Pass secretKey for Mode A/B — fetchAgentConfig will send it as a
+          // header and omit the orgId path segment. Pass orgId for Mode C legacy.
+          const config = await fetchAgentConfig(apiBaseUrl, orgId, secretKey);
           setAgentConfig(config);
           setConfigError(null);
         } catch (error) {
@@ -100601,7 +100707,7 @@
         }
       };
       loadAgentConfig();
-    }, [orgId, apiBaseUrl]);
+    }, [orgId, secretKey, apiBaseUrl]);
 
     // Map API response to widget props (use props as overrides if provided)
     const widgetConfig = reactExports.useMemo(() => {
@@ -100779,6 +100885,7 @@
       // knowledge-api LoadBalancer.
       apiKey,
       organizationId: widgetConfig.organizationId,
+      secretKey,
       autoOpen,
       openDelay,
       darkMode: widgetConfig.darkMode,
@@ -100805,14 +100912,15 @@
       // navigation (but not a page refresh — feedback is not written to
       // localStorage so it resets on reload as intended).
       updateMessageFeedback(messageContent, feedback);
-      if (!orgId || !conversationId || !apiBaseUrl) return;
+      if (!orgId && !secretKey || !conversationId || !apiBaseUrl) return;
       const base = apiBaseUrl.replace(/\/$/, "");
+      const feedbackHeaders = {
+        "Content-Type": "application/json"
+      };
+      if (secretKey) feedbackHeaders['x-eshal-key'] = secretKey;else if (orgId) feedbackHeaders['x-eshal-org'] = orgId;
       fetch("".concat(base, "/api/v1/support/feedback"), {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "x-eshal-org": orgId
-        },
+        headers: feedbackHeaders,
         credentials: "include",
         body: JSON.stringify({
           messageContent,
@@ -100838,7 +100946,7 @@
     const {
       categories: filterCategories,
       hasFilters: showFilterStep
-    } = useFilterCatalog(apiBaseUrl, orgId);
+    } = useFilterCatalog(apiBaseUrl, orgId, secretKey);
 
     // Copy chat handler — copy all messages to clipboard
     const handleCopyChat = reactExports.useCallback(() => {
@@ -100944,6 +101052,7 @@
           apiBaseUrl: apiBaseUrl,
           apiKey: apiKey,
           organizationId: widgetConfig.organizationId,
+          secretKey: secretKey,
           conversationId: conversationId,
           conciergeId: (_agentConfig$concierg = agentConfig === null || agentConfig === void 0 ? void 0 : agentConfig.conciergeId) !== null && _agentConfig$concierg !== void 0 ? _agentConfig$concierg : agentConfig === null || agentConfig === void 0 ? void 0 : agentConfig.id,
           onboardingQuestions: widgetConfig.onboardingQuestions,
@@ -101091,11 +101200,14 @@
         }
 
         // Render component
-        // If orgId and apiBaseUrl are provided, use dynamic config
-        // Otherwise, use the old static config approach for backward compatibility
-        const widgetProps = config.orgId && config.apiBaseUrl ? _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
-          // Required props
-          orgId: config.orgId,
+        // Mode A/B: secretKey present — orgId derived server-side from the key
+        // Mode C legacy: orgId in config — backward compatible
+        // Both: apiBaseUrl required
+        const hasNewAuth = (config.secretKey || config.orgId) && config.apiBaseUrl;
+        const widgetProps = hasNewAuth ? _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+          // Auth props — secretKey replaces orgId in Mode A/B
+          secretKey: config.secretKey || null,
+          orgId: config.orgId || null,
           apiBaseUrl: config.apiBaseUrl
         }, options.wsBaseUrl !== undefined && {
           wsBaseUrl: config.wsBaseUrl