@eshal-bot/chat-widget 0.2.35 → 0.2.37

package/dist/chat-widget-markdown-chunk.js

@@ -88734,6 +88734,360 @@
     };
   }
 
+  // Kept in its own tiny module (not A2uiBlock.jsx): MessageList imports it
+  // eagerly, and A2uiBlock/MarkdownRenderer are lazy-loaded to keep charts and
+  // react-markdown out of the widget's initial bundle.
+
+  // 2026-09-26 (P1, double-booking risk): the delivered user turn that
+  // followed the message carrying a card, derived from conversation history by
+  // MessageList. `undefined` = not answered yet. One-shot cards (confirmation,
+  // form) render locked once answered, so a reload cannot re-arm an answered
+  // "Confirm booking". Context rather than a prop so it does not have to be
+  // threaded through MessageBubble -> StreamingMarkdown -> MarkdownRenderer.
+  const A2uiAnsweredContext = /*#__PURE__*/React.createContext(undefined);
+
+  const VerificationContext = /*#__PURE__*/React.createContext(null);
+  const BRAND_BLUE$1 = '#2563eb';
+  function fill(text, values) {
+    return Object.entries(values).reduce((s, [k, v]) => s.replace(`{${k}}`, String(v)), String(text));
+  }
+  function boxStyle(isDark) {
+    return {
+      border: `1px solid ${BRAND_BLUE$1}`,
+      borderRadius: 10,
+      padding: 12,
+      marginTop: 8,
+      background: isDark ? '#111827' : '#ffffff',
+      color: isDark ? '#f3f4f6' : '#111827',
+      display: 'grid',
+      gap: 8,
+      fontSize: 13
+    };
+  }
+  function inputStyle(isDark) {
+    return {
+      width: '100%',
+      boxSizing: 'border-box',
+      padding: '7px 10px',
+      borderRadius: 6,
+      border: `1px solid ${isDark ? '#374151' : '#d1d5db'}`,
+      background: isDark ? '#1f2937' : '#f9fafb',
+      color: 'inherit',
+      fontSize: 14
+    };
+  }
+  function buttonStyle(disabled) {
+    return {
+      padding: '7px 12px',
+      borderRadius: 6,
+      border: 'none',
+      background: BRAND_BLUE$1,
+      color: '#ffffff',
+      fontWeight: 600,
+      fontSize: 13,
+      cursor: disabled ? 'default' : 'pointer',
+      opacity: disabled ? 0.5 : 1,
+      justifySelf: 'start'
+    };
+  }
+  const linkStyle = {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    color: BRAND_BLUE$1,
+    fontSize: 12,
+    cursor: 'pointer',
+    justifySelf: 'start'
+  };
+
+  /**
+   * The verification code card, rendered from an `eshal-ui` fence of type
+   * "verification" (spec: { mode: 'email'|'sms', tool_call_id?, invocation_id? }).
+   * The address and the code go straight to main-backend through the context;
+   * the code is never sent as a chat message. When the code checks out, the
+   * card sends one resume message carrying `verificationComplete` so the held
+   * tool can run.
+   */
+  function VerifyCard({
+    spec,
+    isDark,
+    onButtonClick
+  }) {
+    const ctx = React.useContext(VerificationContext);
+    const mode = spec?.mode === 'sms' ? 'sms' : 'email';
+    const t = ctx?.t ?? (k => k);
+    const [step, setStep] = React.useState('address'); // address | code | done
+    const [address, setAddress] = React.useState(() => (mode === 'sms' ? ctx?.prefillPhone : ctx?.prefillEmail) || '');
+    const [code, setCode] = React.useState('');
+    const [masked, setMasked] = React.useState('');
+    const [busy, setBusy] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [resendIn, setResendIn] = React.useState(0);
+    const [cancelled, setCancelled] = React.useState(false);
+    const resumedRef = React.useRef(false);
+    const pendingKey = React.useRef(Symbol('verify-card'));
+    // A card the conversation already moved past (a later visitor turn exists,
+    // e.g. after a reload) is not waiting for anything.
+    const answered = React.useContext(A2uiAnsweredContext) !== undefined;
+    const waiting = Boolean(ctx) && !answered && !cancelled && step !== 'done';
+
+    // While this card waits for its code, the chat input is blocked so the code
+    // is entered here and never typed into the conversation.
+    React.useEffect(() => {
+      if (!waiting || !ctx?.setPending) return undefined;
+      const key = pendingKey.current;
+      ctx.setPending(key, true);
+      return () => ctx.setPending(key, false);
+    }, [waiting, ctx]);
+
+    // SMS only: ask for the delivery report a few times while waiting for the
+    // code, so a number that cannot receive it is said rather than waited on.
+    React.useEffect(() => {
+      if (mode !== 'sms' || step !== 'code' || !ctx?.status) return undefined;
+      let tries = 0;
+      let stopped = false;
+      const id = setInterval(async () => {
+        tries += 1;
+        if (stopped || tries > 12) {
+          clearInterval(id);
+          return;
+        }
+        try {
+          const res = await ctx.status();
+          const delivery = res?.body?.delivery;
+          if (delivery === 'failed') {
+            setError(t('verifyNotDelivered'));
+            setResendIn(0);
+            clearInterval(id);
+          } else if (delivery === 'delivered' || delivery === null) {
+            clearInterval(id);
+          }
+        } catch {
+          // A missed check only means no early warning.
+        }
+      }, 5000);
+      return () => {
+        stopped = true;
+        clearInterval(id);
+      };
+    }, [mode, step, ctx, t]);
+    React.useEffect(() => {
+      if (resendIn <= 0) return undefined;
+      const id = setTimeout(() => setResendIn(s => s - 1), 1000);
+      return () => clearTimeout(id);
+    }, [resendIn]);
+    if (!ctx) return null;
+    if (cancelled || answered && step !== 'done') {
+      return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        style: {
+          ...boxStyle(isDark),
+          borderColor: isDark ? '#374151' : '#d1d5db'
+        },
+        "data-testid": "verify-card",
+        children: /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          style: {
+            fontSize: 12,
+            opacity: 0.7
+          },
+          children: cancelled ? t('verifyCancelled') : t('verifyTitle')
+        })
+      });
+    }
+    const send = async () => {
+      if (busy || !address.trim()) return;
+      setBusy(true);
+      setError(null);
+      try {
+        const res = await ctx.start({
+          method: mode,
+          ...(mode === 'sms' ? {
+            phone: address.trim()
+          } : {
+            email: address.trim()
+          })
+        });
+        if (res.ok) {
+          setMasked(res.body?.masked || address.trim());
+          setResendIn(Number(res.body?.resend_after_s) || 60);
+          setCode('');
+          setStep('code');
+        } else {
+          setError(res.body?.error || t('verifyGenericError'));
+          if (res.body?.resendAfterS) setResendIn(Number(res.body.resendAfterS));
+        }
+      } catch {
+        setError(t('verifyGenericError'));
+      } finally {
+        setBusy(false);
+      }
+    };
+    const confirm = async () => {
+      const digits = code.replace(/\D/g, '');
+      if (busy || digits.length !== 6) return;
+      setBusy(true);
+      setError(null);
+      try {
+        const res = await ctx.verify({
+          code: digits
+        });
+        if (res.ok) {
+          setMasked(res.body?.masked || masked);
+          setStep('done');
+          if (!resumedRef.current && onButtonClick) {
+            resumedRef.current = true;
+            const text = t('verifyResumeMessage');
+            onButtonClick(text, text, {
+              verificationComplete: {
+                ...(spec?.tool_call_id ? {
+                  tool_call_id: String(spec.tool_call_id)
+                } : {}),
+                ...(spec?.invocation_id ? {
+                  invocation_id: String(spec.invocation_id)
+                } : {})
+              }
+            });
+          }
+        } else if (res.body?.code === 'wrong_code' && typeof res.body?.triesLeft === 'number') {
+          setError(fill(t('verifyTriesLeft'), {
+            count: res.body.triesLeft
+          }));
+          setCode('');
+        } else {
+          setError(res.body?.error || t('verifyGenericError'));
+          if (res.body?.code === 'expired' || res.body?.code === 'locked') setStep('address');
+        }
+      } catch {
+        setError(t('verifyGenericError'));
+      } finally {
+        setBusy(false);
+      }
+    };
+    if (step === 'done') {
+      return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        style: boxStyle(isDark),
+        "data-testid": "verify-card",
+        children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+          style: {
+            color: '#13703a',
+            fontWeight: 600
+          },
+          children: ["\u2713 ", fill(t('verifyDone'), {
+            target: masked
+          })]
+        })
+      });
+    }
+    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      style: boxStyle(isDark),
+      "data-testid": "verify-card",
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        style: {
+          fontWeight: 600
+        },
+        children: t('verifyTitle')
+      }), step === 'address' ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+        children: [/*#__PURE__*/jsxRuntimeExports.jsxs("label", {
+          style: {
+            display: 'grid',
+            gap: 4
+          },
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+            style: {
+              fontSize: 12,
+              opacity: 0.8
+            },
+            children: mode === 'sms' ? t('verifyPhoneLabel') : t('verifyEmailLabel')
+          }), /*#__PURE__*/jsxRuntimeExports.jsx("input", {
+            style: inputStyle(isDark),
+            type: mode === 'sms' ? 'tel' : 'email',
+            autoComplete: mode === 'sms' ? 'tel' : 'email',
+            inputMode: mode === 'sms' ? 'tel' : 'email',
+            placeholder: mode === 'sms' ? '+971 50 123 4567' : 'name@example.com',
+            value: address,
+            onChange: e => setAddress(e.target.value),
+            onKeyDown: e => {
+              if (e.key === 'Enter') send();
+            }
+          })]
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+          type: "button",
+          style: buttonStyle(busy || !address.trim() || resendIn > 0),
+          disabled: busy || !address.trim() || resendIn > 0,
+          onClick: send,
+          children: busy ? t('verifySending') : resendIn > 0 ? fill(t('verifyResendIn'), {
+            seconds: resendIn
+          }) : t('verifySendCode')
+        })]
+      }) : /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+          children: fill(t('verifyEnterCode'), {
+            target: masked
+          })
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("input", {
+          style: {
+            ...inputStyle(isDark),
+            letterSpacing: '0.3em',
+            fontFamily: 'monospace',
+            fontSize: 18
+          },
+          "aria-label": t('verifyCodeLabel'),
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          maxLength: 6,
+          value: code,
+          onChange: e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6)),
+          onKeyDown: e => {
+            if (e.key === 'Enter') confirm();
+          }
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+          type: "button",
+          style: buttonStyle(busy || code.length !== 6),
+          disabled: busy || code.length !== 6,
+          onClick: confirm,
+          children: t('verifyConfirm')
+        }), resendIn > 0 ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+          style: {
+            fontSize: 12,
+            opacity: 0.7
+          },
+          children: fill(t('verifyResendIn'), {
+            seconds: resendIn
+          })
+        }) : /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+          type: "button",
+          style: linkStyle,
+          onClick: send,
+          disabled: busy,
+          children: t('verifyResend')
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+          type: "button",
+          style: linkStyle,
+          onClick: () => {
+            setStep('address');
+            setError(null);
+          },
+          children: t('verifyDifferent')
+        })]
+      }), error && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        role: "alert",
+        style: {
+          color: '#b42318',
+          fontSize: 12
+        },
+        children: error
+      }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+        type: "button",
+        style: {
+          ...linkStyle,
+          color: isDark ? '#9ca3af' : '#6b7280'
+        },
+        onClick: () => setCancelled(true),
+        disabled: busy,
+        children: t('verifyCancel')
+      })]
+    });
+  }
+
   /**
    * Table-cell and label formatting shared by the three A2UI renderers - the
    * agent-sdk, the widget and the frontend Testing Lab (EV-4798 MERN-19). Each
@@ -88875,18 +89229,6 @@
     }, key++) : seg.value);
   }
 
-  // Kept in its own tiny module (not A2uiBlock.jsx): MessageList imports it
-  // eagerly, and A2uiBlock/MarkdownRenderer are lazy-loaded to keep charts and
-  // react-markdown out of the widget's initial bundle.
-
-  // 2026-09-26 (P1, double-booking risk): the delivered user turn that
-  // followed the message carrying a card, derived from conversation history by
-  // MessageList. `undefined` = not answered yet. One-shot cards (confirmation,
-  // form) render locked once answered, so a reload cannot re-arm an answered
-  // "Confirm booking". Context rather than a prop so it does not have to be
-  // threaded through MessageBubble -> StreamingMarkdown -> MarkdownRenderer.
-  const A2uiAnsweredContext = /*#__PURE__*/React.createContext(undefined);
-
   /**
    * A2uiBlock - render `eshal-ui` / `eshal-chart` / `chart` fence JSON as a
    * real visual block inside the embedded chat widget.
@@ -89026,6 +89368,13 @@
       isDark: isDark,
       onButtonClick: onButtonClick
     });
+    // Verification code card: the runtime holds a personal tool until the
+    // visitor proves their email or phone. The code never travels as chat.
+    if (t === 'verification') return /*#__PURE__*/jsxRuntimeExports.jsx(VerifyCard, {
+      spec: spec,
+      isDark: isDark,
+      onButtonClick: onButtonClick
+    });
     // Cross-industry primitives (14-08-2026) - mirrors
     // packages/frontend/src/components/charts/A2uiBlock.tsx's menu/profile/
     // timeline/rating/comparison/gallery additions.