@paymanai/payman-ask-sdk 2.0.0 → 2.0.2

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import * as Sentry from '@sentry/react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ArrowDown, Pencil, X, RotateCcw, Plus, ImagePlus, Paperclip, Mic, ArrowUp, Check, AlertCircle, Copy, WifiOff, SearchCode, ShieldCheck, Loader2, PanelBottomOpen, Download, ChevronRight, PanelLeftClose, PanelLeftOpen, ImageOff, Eye, MessageSquare, Menu, MessageCircle, ChevronDown } from 'lucide-react';
+import { ArrowDown, Pencil, X, RotateCcw, Plus, ImagePlus, Paperclip, Mic, ArrowUp, Check, AlertCircle, Copy, WifiOff, SearchCode, ShieldCheck, PanelBottomOpen, Download, Loader2, ChevronRight, PanelLeftClose, PanelLeftOpen, ImageOff, Eye, MessageSquare, Menu, MessageCircle, ChevronDown } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -458,7 +458,6 @@ function MarkdownImageV2({
     setIsLoaded(false);
     setHasError(false);
     setRetryCount(0);
-    setIsVisible(false);
   }, [src]);
   useEffect(() => {
     const el = sentinelRef.current;
@@ -482,7 +481,13 @@ function MarkdownImageV2({
       {
         className: cn("payman-v2-md-image", "payman-v2-md-image-resolving"),
         children: /* @__PURE__ */ jsxs("span", { className: "payman-v2-md-image-resolving-inner", children: [
-          /* @__PURE__ */ jsx(Loader2, { className: "payman-v2-md-image-loading", "aria-hidden": true }),
+          /* @__PURE__ */ jsx(
+            Loader2,
+            {
+              style: { animation: "payman-v2-spin 0.7s linear infinite" },
+              "aria-hidden": true
+            }
+          ),
           /* @__PURE__ */ jsx("span", { children: "Loading image" }),
           /* @__PURE__ */ jsx("span", { children: "Reference image" })
         ] })
@@ -521,14 +526,14 @@ function MarkdownImageV2({
       "aria-busy": !isLoaded,
       style: {
         ...frameStyle,
-        ...!isLoaded ? { minHeight: "10rem" } : {}
+        minHeight: isLoaded ? 0 : "10rem"
       },
       children: [
-        !isLoaded && /* @__PURE__ */ jsxs("span", { className: "payman-v2-md-image-placeholder", children: [
+        !isLoaded && /* @__PURE__ */ jsxs("span", { className: "payman-v2-md-image-loading", children: [
           /* @__PURE__ */ jsx(
             Loader2,
             {
-              className: "payman-v2-md-image-loading",
+              style: { animation: "payman-v2-spin 0.7s linear infinite" },
               "aria-hidden": true
             }
           ),
@@ -872,26 +877,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__ */ jsxs("span", { className: cn("payman-v2-thinking-seconds", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsx("span", { className: "payman-v2-thinking-seconds-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
-      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__ */ jsx("span", { className: "payman-v2-thinking-seconds-suffix", "aria-hidden": "true", children: "s" })
-  ] });
+  return /* @__PURE__ */ jsx("span", { className: cn("payman-v2-thinking-seconds", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("span", { className: "payman-v2-thinking-seconds-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
+    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,
@@ -902,8 +910,14 @@ function ThinkingBlockV2({
   const [open, setOpen] = useState(true);
   const [cursorIdx, setCursorIdx] = useState(0);
   const [elapsedSec, setElapsedSec] = 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 = useRef(elapsedSec);
   const frozenSecRef = useRef(null);
   const prevStreaming = useRef(isStreaming);
   const parsed = useMemo(() => parseThinkingContent(content), [content]);
@@ -916,25 +930,25 @@ function ThinkingBlockV2({
   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]);
   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]);
   useEffect(() => {
     if (!isStreaming || isFinalizingPhase) return;
@@ -945,10 +959,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__ */ jsxs("span", { className: "payman-v2-thinking-header-label", children: [
     /* @__PURE__ */ jsx("span", { className: "payman-v2-thinking-shimmer", children: "Working on it\u2026" }),
@@ -956,11 +971,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__ */ jsxs("span", { className: "payman-v2-thinking-header-label", children: [
+  ] }) : finalSec != null && finalSec > 0 ? /* @__PURE__ */ jsxs("span", { className: "payman-v2-thinking-header-label", children: [
     /* @__PURE__ */ jsx("span", { children: "Thought for" }),
     /* @__PURE__ */ jsx(
       AnimatedSeconds,
@@ -969,7 +984,7 @@ function ThinkingBlockV2({
           "payman-v2-thinking-timer",
           "payman-v2-thinking-duration"
         ),
-        ariaLabel: `Thought for ${finalSec} seconds`,
+        ariaLabel: `Thought for ${formatDuration(finalSec)}`,
         value: finalSec
       }
     )
@@ -1091,6 +1106,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;
@@ -1128,6 +1144,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);
     }
@@ -1138,8 +1159,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);
@@ -1379,7 +1433,7 @@ function AssistantMessageV2({
         {
           content: thinkingContent,
           isStreaming: isThinkingStreaming,
-          durationSec: thinkingDuration,
+          durationSec: message.thinkingDurationSec ?? thinkingDuration,
           startedAt: requestStartedAt
         }
       ),
@@ -1538,6 +1592,7 @@ function VerificationCardV2({
   messageId,
   action,
   status,
+  clearOtpTrigger = 0,
   onApprove,
   onReject,
   onResend
@@ -1545,33 +1600,41 @@ function VerificationCardV2({
   const [otp, setOtp] = useState("");
   const [otpErrored, setOtpErrored] = useState(false);
   const [resendSec, setResendSec] = useState(0);
+  const [localPending, setLocalPending] = useState(false);
   const lastSubmittedRef = useRef(null);
   const resendTimerRef = useRef(void 0);
   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]);
   useEffect(() => {
     if (otp.length < OTP_LEN) {
       lastSubmittedRef.current = null;
     }
   }, [otp]);
+  useEffect(() => {
+    if (status !== "pending") {
+      setLocalPending(false);
+    }
+  }, [status]);
   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]);
   useEffect(() => {
     return () => {
@@ -1599,23 +1662,25 @@ function VerificationCardV2({
     }, 1e3);
   }, []);
   const handleResend = 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 = useCallback(async () => {
-    await onReject(messageId);
-  }, [messageId, onReject]);
-  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;
   }
@@ -1627,61 +1692,53 @@ function VerificationCardV2({
       animate: { opacity: 1, y: 0 },
       transition: { type: "spring", stiffness: 320, damping: 28 },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-card", children: [
-          /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-header", children: [
-            /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-header-row", children: [
-              /* @__PURE__ */ jsx(
-                ShieldCheck,
-                {
-                  className: "payman-v2-verification-icon",
-                  size: 18,
-                  strokeWidth: 1.75,
-                  "aria-hidden": true
-                }
-              ),
-              /* @__PURE__ */ jsx("p", { className: "payman-v2-verification-title", children: "Verify" }),
-              action.amount != null ? /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-amount", children: action.amount }) : action.payeeName ? /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-payee", children: action.payeeName }) : null
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "payman-v2-verification-description", children: "Enter the 6-digit code sent to your phone" }),
-            /* @__PURE__ */ jsx(
-              OtpInputV2,
-              {
-                value: otp,
-                onChange: setOtp,
-                maxLength: OTP_LEN,
-                disabled: busy,
-                error: otpErrored
-              }
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "payman-v2-verification-card",
+              busy && "payman-v2-verification-card-busy"
             ),
-            busy ? /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-submitting", children: [
-              /* @__PURE__ */ jsx(
-                motion.span,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-header", children: [
+                /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-header-row", children: [
+                  /* @__PURE__ */ jsx(
+                    ShieldCheck,
+                    {
+                      className: "payman-v2-verification-icon",
+                      size: 18,
+                      strokeWidth: 1.75,
+                      "aria-hidden": true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { className: "payman-v2-verification-title", children: "Verify" }),
+                  action.amount != null ? /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-amount", children: action.amount }) : action.payeeName ? /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-payee", children: action.payeeName }) : null
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "payman-v2-verification-description", children: "Enter the 6-digit code sent to your phone" }),
+                /* @__PURE__ */ jsx(
+                  OtpInputV2,
+                  {
+                    value: otp,
+                    onChange: setOtp,
+                    maxLength: OTP_LEN,
+                    disabled: busy,
+                    error: otpErrored
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "payman-v2-verification-actions", children: /* @__PURE__ */ jsx(
+                "button",
                 {
-                  "aria-hidden": true,
-                  style: { display: "inline-flex" },
-                  animate: { rotate: 360 },
-                  transition: {
-                    repeat: Infinity,
-                    duration: 0.7,
-                    ease: "linear"
-                  },
-                  children: /* @__PURE__ */ jsx(Loader2, { size: 14, strokeWidth: 2 })
+                  type: "button",
+                  className: "payman-v2-verification-cancel-btn",
+                  disabled: busy,
+                  onClick: () => void handleCancel(),
+                  children: "Cancel"
                 }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-submitting-text", children: "Verifying..." })
-            ] }) : null
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "payman-v2-verification-actions", children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "payman-v2-verification-cancel-btn",
-              disabled: busy,
-              onClick: () => void handleCancel(),
-              children: "Cancel"
-            }
-          ) })
-        ] }),
+              ) })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -1874,6 +1931,7 @@ var MessageListV2 = forwardRef(
                     messageId: userAction.messageId,
                     action: userAction.action,
                     status: userAction.status,
+                    clearOtpTrigger: userAction.clearOtpTrigger,
                     onApprove: onApproveAction ?? (async () => {
                     }),
                     onReject: onRejectAction ?? (async () => {
@@ -3026,17 +3084,7 @@ function SessionList({
     [sessions, formattedNow]
   );
   if (!isReady) {
-    return /* @__PURE__ */ jsxs("div", { className: "payman-sidebar-notice", children: [
-      "Pass ",
-      /* @__PURE__ */ jsx(InlineCode, { children: "workflow.id" }),
-      " (or",
-      " ",
-      /* @__PURE__ */ jsx(InlineCode, { children: "workflow.name" }),
-      ") and",
-      " ",
-      /* @__PURE__ */ jsx(InlineCode, { children: "session.owner.id" }),
-      " in your chat config to view recent sessions."
-    ] });
+    return /* @__PURE__ */ jsx("div", { className: "payman-sidebar-notice-shell", children: /* @__PURE__ */ jsx("div", { className: "payman-sidebar-notice", children: "Configure the chat settings." }) });
   }
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3203,9 +3251,6 @@ function Spinner({ size = 12 }) {
     }
   );
 }
-function InlineCode({ children }) {
-  return /* @__PURE__ */ jsx("code", { className: "payman-sidebar-inline-code", children });
-}
 function groupSessionsByDate(sessions, now) {
   const groups = /* @__PURE__ */ new Map();
   const orderedGroups = [];
@@ -3682,6 +3727,14 @@ var PaymanChat = forwardRef(function PaymanChat2({
     }),
     [performResetSession, clearMessages, cancelStream, getSessionId, getMessages, loadSession]
   );
+  const [v2VerificationPending, setV2VerificationPending] = useState(false);
+  useEffect(() => {
+    setV2VerificationPending(false);
+  }, [
+    userActionState.request?.userActionId,
+    userActionState.clearOtpTrigger,
+    userActionState.result
+  ]);
   if (availability.state === "disabled") {
     return /* @__PURE__ */ jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
       "div",
@@ -3704,7 +3757,8 @@ var PaymanChat = 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()}`,
@@ -3714,9 +3768,15 @@ var PaymanChat = 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();
@@ -3852,7 +3912,8 @@ var PaymanChat = forwardRef(function PaymanChat2({
                     alignItems: "center",
                     justifyContent: "center",
                     width: "100%",
-                    minHeight: 0
+                    minHeight: 0,
+                    marginTop: "1.5rem"
                   },
                   children: /* @__PURE__ */ jsx(
                     EmptyState2,
@@ -3878,10 +3939,22 @@ var PaymanChat = 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();