@paymanai/payman-ask-sdk 2.0.0 → 2.0.2

package/dist/index.d.mts

@@ -168,6 +168,7 @@ type MessageListV2Props = {
             payeeName?: string;
         };
         status: "pending" | "verifying" | "approved" | "rejected" | "error";
+        clearOtpTrigger?: number;
     } | null;
     onApproveAction?: (messageId: string, otp: string) => Promise<void>;
     onRejectAction?: (messageId: string) => Promise<void>;

package/dist/index.d.ts

@@ -168,6 +168,7 @@ type MessageListV2Props = {
             payeeName?: string;
         };
         status: "pending" | "verifying" | "approved" | "rejected" | "error";
+        clearOtpTrigger?: number;
     } | null;
     onApproveAction?: (messageId: string, otp: string) => Promise<void>;
     onRejectAction?: (messageId: string) => Promise<void>;

package/dist/index.js

@@ -483,7 +483,6 @@ function MarkdownImageV2({
     setIsLoaded(false);
     setHasError(false);
     setRetryCount(0);
-    setIsVisible(false);
   }, [src]);
   react.useEffect(() => {
     const el = sentinelRef.current;
@@ -507,7 +506,13 @@ function MarkdownImageV2({
       {
         className: cn("payman-v2-md-image", "payman-v2-md-image-resolving"),
         children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-md-image-resolving-inner", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payman-v2-md-image-loading", "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              style: { animation: "payman-v2-spin 0.7s linear infinite" },
+              "aria-hidden": true
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading image" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Reference image" })
         ] })
@@ -546,14 +551,14 @@ function MarkdownImageV2({
       "aria-busy": !isLoaded,
       style: {
         ...frameStyle,
-        ...!isLoaded ? { minHeight: "10rem" } : {}
+        minHeight: isLoaded ? 0 : "10rem"
       },
       children: [
-        !isLoaded && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-md-image-placeholder", children: [
+        !isLoaded && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-md-image-loading", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.Loader2,
             {
-              className: "payman-v2-md-image-loading",
+              style: { animation: "payman-v2-spin 0.7s linear infinite" },
               "aria-hidden": true
             }
           ),
@@ -897,26 +902,29 @@ function parseThinkingContent(content) {
   }
   return out;
 }
+function formatDuration(seconds) {
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return s > 0 ? `${m}m ${s}s` : `${m}m`;
+}
 function AnimatedSeconds({
   value,
   className,
   ariaLabel
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("payman-v2-thinking-seconds", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-thinking-seconds-track", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.span,
-      {
-        className: "payman-v2-thinking-seconds-value",
-        initial: { opacity: 0, y: 6, filter: "blur(2px)" },
-        animate: { opacity: 1, y: 0, filter: "blur(0px)" },
-        exit: { opacity: 0, y: -6, filter: "blur(2px)" },
-        transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
-        children: value
-      },
-      value
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-thinking-seconds-suffix", "aria-hidden": "true", children: "s" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("payman-v2-thinking-seconds", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-thinking-seconds-track", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.span,
+    {
+      className: "payman-v2-thinking-seconds-value",
+      initial: { opacity: 0, y: 6, filter: "blur(2px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: { opacity: 0, y: -6, filter: "blur(2px)" },
+      transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
+      children: formatDuration(value)
+    },
+    value
+  ) }) }) });
 }
 function ThinkingBlockV2({
   content,
@@ -927,8 +935,14 @@ function ThinkingBlockV2({
   const [open, setOpen] = react.useState(true);
   const [cursorIdx, setCursorIdx] = react.useState(0);
   const [elapsedSec, setElapsedSec] = react.useState(
-    () => startedAt ? Math.max(0, Math.floor((Date.now() - startedAt) / 1e3)) : 0
+    () => (
+      // Only seed from startedAt when actively streaming — otherwise (e.g.
+      // after a hot-reload on a completed message) Date.now()-startedAt would
+      // be the time since completion, not the actual thinking duration.
+      isStreaming && startedAt ? Math.max(0, Math.floor((Date.now() - startedAt) / 1e3)) : 0
+    )
   );
+  const elapsedSecRef = react.useRef(elapsedSec);
   const frozenSecRef = react.useRef(null);
   const prevStreaming = react.useRef(isStreaming);
   const parsed = react.useMemo(() => parseThinkingContent(content), [content]);
@@ -941,25 +955,25 @@ function ThinkingBlockV2({
   react.useEffect(() => {
     if (prevStreaming.current && !isStreaming) {
       setOpen(false);
-      if (startedAt) {
-        frozenSecRef.current = Math.max(
-          0,
-          Math.floor((Date.now() - startedAt) / 1e3)
-        );
-      }
+      frozenSecRef.current = elapsedSecRef.current;
     }
     prevStreaming.current = isStreaming;
   }, [isStreaming, startedAt]);
   react.useEffect(() => {
     if (!isStreaming || !startedAt) return;
+    let active = true;
     const tick = () => {
-      setElapsedSec(
-        Math.max(0, Math.floor((Date.now() - startedAt) / 1e3))
-      );
+      if (!active) return;
+      const val = Math.max(0, Math.floor((Date.now() - startedAt) / 1e3));
+      elapsedSecRef.current = val;
+      setElapsedSec(val);
     };
     tick();
     const id = window.setInterval(tick, 1e3);
-    return () => window.clearInterval(id);
+    return () => {
+      active = false;
+      window.clearInterval(id);
+    };
   }, [isStreaming, startedAt]);
   react.useEffect(() => {
     if (!isStreaming || isFinalizingPhase) return;
@@ -970,10 +984,11 @@ function ThinkingBlockV2({
   }, [isStreaming, isFinalizingPhase]);
   const justStoppedSec = !isStreaming && prevStreaming.current && startedAt ? Math.max(0, Math.floor((Date.now() - startedAt) / 1e3)) : void 0;
   const finalSec = getMaxDuration(
-    durationSec,
     frozenSecRef.current,
     justStoppedSec,
-    !isStreaming ? elapsedSec : void 0
+    // Only fall back to durationSec when the timer never ran this session
+    // (i.e. the message was already complete when this component mounted).
+    frozenSecRef.current == null && !prevStreaming.current ? durationSec : void 0
   );
   const headerLabel = isStreaming ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-thinking-header-label", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-thinking-shimmer", children: "Working on it\u2026" }),
@@ -981,11 +996,11 @@ function ThinkingBlockV2({
       AnimatedSeconds,
       {
         className: "payman-v2-thinking-timer",
-        ariaLabel: `Elapsed ${elapsedSec} seconds`,
+        ariaLabel: `Elapsed ${formatDuration(elapsedSec)}`,
         value: elapsedSec
       }
     )
-  ] }) : finalSec !== null && finalSec !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-thinking-header-label", children: [
+  ] }) : finalSec != null && finalSec > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-thinking-header-label", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Thought for" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AnimatedSeconds,
@@ -994,7 +1009,7 @@ function ThinkingBlockV2({
           "payman-v2-thinking-timer",
           "payman-v2-thinking-duration"
         ),
-        ariaLabel: `Thought for ${finalSec} seconds`,
+        ariaLabel: `Thought for ${formatDuration(finalSec)}`,
         value: finalSec
       }
     )
@@ -1116,6 +1131,7 @@ function charDelay(char, speed) {
     return speed.punctuation[0] + Math.random() * speed.punctuation[1];
   return speed.normal[0] + Math.random() * speed.normal[1];
 }
+var MARKDOWN_IMAGE_REGEX = /^!\[[^\]]*\]\([^)]*\)/;
 var typingProgressCache = /* @__PURE__ */ new Map();
 function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDisplayedText, cacheKey) {
   const cached = cacheKey ? typingProgressCache.get(cacheKey) : void 0;
@@ -1153,6 +1169,11 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
       }
       return;
     }
+    if (displayedRef.current && !targetRef.current.startsWith(displayedRef.current)) {
+      displayedRef.current = "";
+      setDisplayedText("");
+      if (cacheKeyRef.current) typingProgressCache.delete(cacheKeyRef.current);
+    }
     if (displayedRef.current.length === 0 && initialDisplayedRef.current && targetRef.current.startsWith(initialDisplayedRef.current)) {
       writeDisplayed(initialDisplayedRef.current);
     }
@@ -1163,8 +1184,41 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
         runningRef.current = false;
         return;
       }
+      if (displayedRef.current && !targetRef.current.startsWith(displayedRef.current)) {
+        let divergeAt = 0;
+        const minLen = Math.min(displayedRef.current.length, targetRef.current.length);
+        while (divergeAt < minLen && displayedRef.current[divergeAt] === targetRef.current[divergeAt]) {
+          divergeAt++;
+        }
+        const imgStart = targetRef.current.slice(0, divergeAt).lastIndexOf("![");
+        if (imgStart >= 0) {
+          const newImgMatch = MARKDOWN_IMAGE_REGEX.exec(targetRef.current.slice(imgStart));
+          const oldImgMatch = MARKDOWN_IMAGE_REGEX.exec(displayedRef.current.slice(imgStart));
+          if (newImgMatch && oldImgMatch) {
+            const oldImgEnd = imgStart + oldImgMatch[0].length;
+            const newImgEnd = imgStart + newImgMatch[0].length;
+            const newCursor = Math.min(
+              Math.max(displayedRef.current.length + (newImgEnd - oldImgEnd), newImgEnd),
+              targetRef.current.length
+            );
+            writeDisplayed(targetRef.current.slice(0, newCursor));
+            timerRef.current = setTimeout(tick, 0);
+            return;
+          }
+        }
+        writeDisplayed(targetRef.current.slice(0, imgStart >= 0 ? imgStart : divergeAt));
+        timerRef.current = setTimeout(tick, 0);
+        return;
+      }
       if (displayedRef.current.length < targetRef.current.length) {
-        const nextChar = targetRef.current[displayedRef.current.length];
+        const remaining = targetRef.current.slice(displayedRef.current.length);
+        const imgMatch = MARKDOWN_IMAGE_REGEX.exec(remaining);
+        if (imgMatch) {
+          writeDisplayed(displayedRef.current + imgMatch[0]);
+          timerRef.current = setTimeout(tick, 0);
+          return;
+        }
+        const nextChar = remaining[0];
         writeDisplayed(displayedRef.current + nextChar);
         const delay = charDelay(nextChar, speed);
         timerRef.current = setTimeout(tick, delay);
@@ -1404,7 +1458,7 @@ function AssistantMessageV2({
         {
           content: thinkingContent,
           isStreaming: isThinkingStreaming,
-          durationSec: thinkingDuration,
+          durationSec: message.thinkingDurationSec ?? thinkingDuration,
           startedAt: requestStartedAt
         }
       ),
@@ -1563,6 +1617,7 @@ function VerificationCardV2({
   messageId,
   action,
   status,
+  clearOtpTrigger = 0,
   onApprove,
   onReject,
   onResend
@@ -1570,33 +1625,41 @@ function VerificationCardV2({
   const [otp, setOtp] = react.useState("");
   const [otpErrored, setOtpErrored] = react.useState(false);
   const [resendSec, setResendSec] = react.useState(0);
+  const [localPending, setLocalPending] = react.useState(false);
   const lastSubmittedRef = react.useRef(null);
   const resendTimerRef = react.useRef(void 0);
   react.useEffect(() => {
-    if (status !== "error") {
-      setOtpErrored(false);
-      return;
-    }
+    if (clearOtpTrigger <= 0) return;
     setOtpErrored(true);
     const t = window.setTimeout(() => {
       setOtp("");
       setOtpErrored(false);
+      setLocalPending(false);
       lastSubmittedRef.current = null;
     }, 600);
     return () => window.clearTimeout(t);
-  }, [status]);
+  }, [clearOtpTrigger]);
   react.useEffect(() => {
     if (otp.length < OTP_LEN) {
       lastSubmittedRef.current = null;
     }
   }, [otp]);
+  react.useEffect(() => {
+    if (status !== "pending") {
+      setLocalPending(false);
+    }
+  }, [status]);
   react.useEffect(() => {
     if (otp.length !== OTP_LEN || !/^\d+$/.test(otp) || status !== "pending") {
       return;
     }
     if (lastSubmittedRef.current === otp) return;
     lastSubmittedRef.current = otp;
-    void onApprove(messageId, otp);
+    setLocalPending(true);
+    void onApprove(messageId, otp).catch(() => {
+      lastSubmittedRef.current = null;
+      setLocalPending(false);
+    });
   }, [messageId, onApprove, otp, status]);
   react.useEffect(() => {
     return () => {
@@ -1624,23 +1687,25 @@ function VerificationCardV2({
     }, 1e3);
   }, []);
   const handleResend = react.useCallback(async () => {
-    if (resendSec > 0 || status === "verifying") return;
-    await onResend(messageId);
-    startResendCooldown();
-  }, [messageId, onResend, resendSec, startResendCooldown, status]);
+    if (resendSec > 0 || status === "verifying" || localPending) return;
+    setLocalPending(true);
+    try {
+      await onResend(messageId);
+      startResendCooldown();
+    } finally {
+      setLocalPending(false);
+    }
+  }, [localPending, messageId, onResend, resendSec, startResendCooldown, status]);
   const handleCancel = react.useCallback(async () => {
-    await onReject(messageId);
-  }, [messageId, onReject]);
-  react.useCallback(async () => {
-    if (otp.length !== OTP_LEN || !/^\d+$/.test(otp) || status !== "pending") {
-      return;
+    if (status === "verifying" || localPending) return;
+    setLocalPending(true);
+    try {
+      await onReject(messageId);
+    } finally {
+      setLocalPending(false);
     }
-    if (lastSubmittedRef.current === otp) return;
-    lastSubmittedRef.current = otp;
-    await onApprove(messageId, otp);
-  }, [messageId, onApprove, otp, status]);
-  const busy = status === "verifying";
-  status === "pending" && otp.length === OTP_LEN && /^\d+$/.test(otp);
+  }, [localPending, messageId, onReject, status]);
+  const busy = status === "verifying" || localPending;
   if (status === "approved" || status === "rejected") {
     return null;
   }
@@ -1652,61 +1717,53 @@ function VerificationCardV2({
       animate: { opacity: 1, y: 0 },
       transition: { type: "spring", stiffness: 320, damping: 28 },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-verification-card", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-verification-header", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-verification-header-row", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                lucideReact.ShieldCheck,
-                {
-                  className: "payman-v2-verification-icon",
-                  size: 18,
-                  strokeWidth: 1.75,
-                  "aria-hidden": true
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payman-v2-verification-title", children: "Verify" }),
-              action.amount != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-verification-amount", children: action.amount }) : action.payeeName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-verification-payee", children: action.payeeName }) : null
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payman-v2-verification-description", children: "Enter the 6-digit code sent to your phone" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              OtpInputV2,
-              {
-                value: otp,
-                onChange: setOtp,
-                maxLength: OTP_LEN,
-                disabled: busy,
-                error: otpErrored
-              }
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "payman-v2-verification-card",
+              busy && "payman-v2-verification-card-busy"
             ),
-            busy ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-verification-submitting", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.span,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-verification-header", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-verification-header-row", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.ShieldCheck,
+                    {
+                      className: "payman-v2-verification-icon",
+                      size: 18,
+                      strokeWidth: 1.75,
+                      "aria-hidden": true
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payman-v2-verification-title", children: "Verify" }),
+                  action.amount != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-verification-amount", children: action.amount }) : action.payeeName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-verification-payee", children: action.payeeName }) : null
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payman-v2-verification-description", children: "Enter the 6-digit code sent to your phone" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  OtpInputV2,
+                  {
+                    value: otp,
+                    onChange: setOtp,
+                    maxLength: OTP_LEN,
+                    disabled: busy,
+                    error: otpErrored
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-verification-actions", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
                 {
-                  "aria-hidden": true,
-                  style: { display: "inline-flex" },
-                  animate: { rotate: 360 },
-                  transition: {
-                    repeat: Infinity,
-                    duration: 0.7,
-                    ease: "linear"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, strokeWidth: 2 })
+                  type: "button",
+                  className: "payman-v2-verification-cancel-btn",
+                  disabled: busy,
+                  onClick: () => void handleCancel(),
+                  children: "Cancel"
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-verification-submitting-text", children: "Verifying..." })
-            ] }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-verification-actions", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: "payman-v2-verification-cancel-btn",
-              disabled: busy,
-              onClick: () => void handleCancel(),
-              children: "Cancel"
-            }
-          ) })
-        ] }),
+              ) })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -1899,6 +1956,7 @@ var MessageListV2 = react.forwardRef(
                     messageId: userAction.messageId,
                     action: userAction.action,
                     status: userAction.status,
+                    clearOtpTrigger: userAction.clearOtpTrigger,
                     onApprove: onApproveAction ?? (async () => {
                     }),
                     onReject: onRejectAction ?? (async () => {
@@ -3051,17 +3109,7 @@ function SessionList({
     [sessions, formattedNow]
   );
   if (!isReady) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-sidebar-notice", children: [
-      "Pass ",
-      /* @__PURE__ */ jsxRuntime.jsx(InlineCode, { children: "workflow.id" }),
-      " (or",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(InlineCode, { children: "workflow.name" }),
-      ") and",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(InlineCode, { children: "session.owner.id" }),
-      " in your chat config to view recent sessions."
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-notice-shell", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-notice", children: "Configure the chat settings." }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -3228,9 +3276,6 @@ function Spinner({ size = 12 }) {
     }
   );
 }
-function InlineCode({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("code", { className: "payman-sidebar-inline-code", children });
-}
 function groupSessionsByDate(sessions, now) {
   const groups = /* @__PURE__ */ new Map();
   const orderedGroups = [];
@@ -3707,6 +3752,14 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
     }),
     [performResetSession, clearMessages, cancelStream, getSessionId, getMessages, loadSession]
   );
+  const [v2VerificationPending, setV2VerificationPending] = react.useState(false);
+  react.useEffect(() => {
+    setV2VerificationPending(false);
+  }, [
+    userActionState.request?.userActionId,
+    userActionState.clearOtpTrigger,
+    userActionState.result
+  ]);
   if (availability.state === "disabled") {
     return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -3729,7 +3782,8 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
     if (!userActionState.request) return null;
     const req = userActionState.request;
     let status = "pending";
-    if (userActionState.result === "approved") status = "approved";
+    if (v2VerificationPending) status = "verifying";
+    else if (userActionState.result === "approved") status = "approved";
     else if (userActionState.result === "rejected") status = "rejected";
     return {
       messageId: `ua-${req.userActionId || Date.now()}`,
@@ -3739,9 +3793,15 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
         amount: req.metadata?.amount,
         payeeName: req.metadata?.payeeName
       },
-      status
+      status,
+      clearOtpTrigger: userActionState.clearOtpTrigger
     };
-  }, [userActionState.request, userActionState.result]);
+  }, [
+    userActionState.request,
+    userActionState.result,
+    userActionState.clearOtpTrigger,
+    v2VerificationPending
+  ]);
   const hideV2SendDuringVerification = v2UserAction != null && v2UserAction.status !== "approved" && v2UserAction.status !== "rejected";
   const handleV2Send = (text) => {
     if (isRecording) stopRecording();
@@ -3877,7 +3937,8 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
                     alignItems: "center",
                     justifyContent: "center",
                     width: "100%",
-                    minHeight: 0
+                    minHeight: 0,
+                    marginTop: "1.5rem"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     EmptyState2,
@@ -3903,10 +3964,22 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
                   retryDisabled: isWaitingForResponse,
                   userAction: v2UserAction,
                   onApproveAction: async (_id, otp) => {
-                    await approveUserAction(otp);
+                    setV2VerificationPending(true);
+                    try {
+                      await approveUserAction(otp);
+                    } catch (error) {
+                      setV2VerificationPending(false);
+                      throw error;
+                    }
                   },
                   onRejectAction: async () => {
-                    await rejectUserAction();
+                    setV2VerificationPending(true);
+                    try {
+                      await rejectUserAction();
+                    } catch (error) {
+                      setV2VerificationPending(false);
+                      throw error;
+                    }
                   },
                   onResendAction: async () => {
                     await resendOtp();