@paymanai/payman-ask-sdk 1.0.4 → 1.1.0

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import { createContext, useContext, useState, useMemo, useRef, useCallback, useEffect } from 'react';
 import { useChat } from '@paymanai/payman-typescript-ask-sdk';
-export { generateId, streamWorkflowEvents, useChat } from '@paymanai/payman-typescript-ask-sdk';
+export { cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat } from '@paymanai/payman-typescript-ask-sdk';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Bot, Pause, Send, User, Loader2, X, ChevronUp, ChevronDown, XCircle, Check, Binoculars } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { Bot, Pause, Send, ShieldCheck, Loader2, User, CheckCircle2, XCircle, X, ChevronUp, ChevronDown, Check, Binoculars } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
@@ -159,7 +159,6 @@ function AgentMessage({
   agentName = "Assistant",
   showAvatar = false,
   layout = "full-width",
-  showTimestamp = false,
   showExecutionSteps = false,
   showStreamingDot = false,
   streamingStepsText,
@@ -212,6 +211,13 @@ function AgentMessage({
       "min-w-0 flex flex-col",
       layout === "centered" ? "max-w-[85%]" : showAvatar ? "max-w-[85%]" : "max-w-[80%]"
     ), children: [
+      message.userActionResult && /* @__PURE__ */ jsx("div", { className: "mb-2", children: message.userActionResult === "approved" ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-700", children: [
+        /* @__PURE__ */ jsx(CheckCircle2, { className: "w-3 h-3" }),
+        " OTP Verified"
+      ] }) : /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-700", children: [
+        /* @__PURE__ */ jsx(XCircle, { className: "w-3 h-3" }),
+        " Rejected"
+      ] }) }),
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -319,7 +325,7 @@ function AgentMessage({
               layout === "centered" ? "text-neutral-500 hover:bg-neutral-50" : "text-muted-foreground hover:bg-muted/70"
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { children: getCompletedStepsText(isStepsExpanded) }),
+              /* @__PURE__ */ jsx("span", { children: getCompletedStepsText(!!isStepsExpanded) }),
               isStepsExpanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
             ]
           }
@@ -339,7 +345,7 @@ function AgentMessage({
                 step.status === "pending" && isCancelled && /* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3 text-muted-foreground shrink-0 mt-0.5" }),
                 step.status === "pending" && !isCancelled && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
                 step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
-                step.status === "completed" && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-primary shrink-0 mt-0.5" }),
+                step.status === "completed" && /* @__PURE__ */ jsx(Check, { className: cn("h-3 w-3 shrink-0 mt-0.5", step.eventType === "USER_ACTION_SUCCESS" ? "text-green-600" : "text-primary") }),
                 step.status === "error" && /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-destructive shrink-0 mt-0.5" }),
                 /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                   /* @__PURE__ */ jsx(
@@ -347,7 +353,8 @@ function AgentMessage({
                     {
                       className: cn(
                         "text-muted-foreground break-words",
-                        step.status === "error" && "text-destructive"
+                        step.status === "error" && "text-destructive",
+                        step.eventType === "USER_ACTION_SUCCESS" && "text-green-600"
                       ),
                       children: step.message
                     }
@@ -376,7 +383,7 @@ function AgentMessage({
               layout === "centered" ? "text-neutral-500 hover:bg-neutral-50" : "text-muted-foreground hover:bg-muted/70"
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { children: getStreamingStepsText(isStepsExpanded) }),
+              /* @__PURE__ */ jsx("span", { children: getStreamingStepsText(!!isStepsExpanded) }),
               isStepsExpanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
             ]
           }
@@ -396,7 +403,7 @@ function AgentMessage({
                 step.status === "pending" && isCancelled && /* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3 text-muted-foreground shrink-0 mt-0.5" }),
                 step.status === "pending" && !isCancelled && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
                 step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
-                step.status === "completed" && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-primary shrink-0 mt-0.5" }),
+                step.status === "completed" && /* @__PURE__ */ jsx(Check, { className: cn("h-3 w-3 shrink-0 mt-0.5", step.eventType === "USER_ACTION_SUCCESS" ? "text-green-600" : "text-primary") }),
                 step.status === "error" && /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-destructive shrink-0 mt-0.5" }),
                 /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                   /* @__PURE__ */ jsx(
@@ -404,7 +411,8 @@ function AgentMessage({
                     {
                       className: cn(
                         "text-muted-foreground break-words",
-                        step.status === "error" && "text-destructive"
+                        step.status === "error" && "text-destructive",
+                        step.eventType === "USER_ACTION_SUCCESS" && "text-green-600"
                       ),
                       children: step.message
                     }
@@ -429,7 +437,10 @@ function AgentMessage({
           tracingData: message.tracingData,
           executionId: message.executionId
         }),
-        className: "mt-0.5 p-2 bg-white/5 border border-white/20 rounded-lg shadow-sm hover:bg-white/10 hover:border-highlight transition-colors duration-200 flex-shrink-0",
+        className: cn(
+          "p-2 bg-white/5 border border-white/20 rounded-lg shadow-sm hover:bg-white/10 hover:border-highlight transition-colors duration-200 flex-shrink-0",
+          message.userActionResult ? "mt-8" : "mt-0.5"
+        ),
         title: "View execution trace",
         "aria-label": "View execution trace",
         children: /* @__PURE__ */ jsx(Binoculars, { className: "w-4 h-4 text-foreground" })
@@ -649,6 +660,466 @@ function MessageList({
     }
   );
 }
+var DEFAULT_MAX_LENGTH = 6;
+var MAX_SUPPORTED_LENGTH = 12;
+var AUTO_FOCUS_DELAY_MS = 250;
+function OtpInput({ value, onChange, maxLength, disabled = false }) {
+  const inputRefs = useRef([]);
+  const safeMaxLength = Number.isInteger(maxLength) && maxLength > 0 ? Math.min(maxLength, MAX_SUPPORTED_LENGTH) : DEFAULT_MAX_LENGTH;
+  const digits = value.split("").concat(Array(safeMaxLength).fill("")).slice(0, safeMaxLength);
+  useEffect(() => {
+    if (disabled) return;
+    const focusTimer = window.setTimeout(() => {
+      inputRefs.current[0]?.focus();
+    }, AUTO_FOCUS_DELAY_MS);
+    return () => window.clearTimeout(focusTimer);
+  }, [disabled]);
+  const focusInput = (index) => {
+    if (index >= 0 && index < safeMaxLength) {
+      inputRefs.current[index]?.focus();
+    }
+  };
+  const updateValue = (newDigits) => {
+    onChange(newDigits.join("").slice(0, safeMaxLength));
+  };
+  const handleChange = (index, char) => {
+    if (char && !/^\d$/.test(char)) return;
+    const newDigits = [...digits];
+    newDigits[index] = char;
+    updateValue(newDigits);
+    if (char && index < safeMaxLength - 1) {
+      focusInput(index + 1);
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      if (digits[index]) {
+        const newDigits = [...digits];
+        newDigits[index] = "";
+        updateValue(newDigits);
+      } else if (index > 0) {
+        const newDigits = [...digits];
+        newDigits[index - 1] = "";
+        updateValue(newDigits);
+        focusInput(index - 1);
+      }
+      return;
+    }
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focusInput(index - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusInput(index + 1);
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, safeMaxLength);
+    if (!pasted) return;
+    const newDigits = pasted.split("").concat(Array(safeMaxLength).fill("")).slice(0, safeMaxLength);
+    updateValue(newDigits);
+    focusInput(Math.min(pasted.length, safeMaxLength - 1));
+  };
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", justifyContent: "center" }, children: digits.map((digit, i) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: (el) => {
+        inputRefs.current[i] = el;
+      },
+      type: "text",
+      inputMode: "numeric",
+      maxLength: 1,
+      value: digit,
+      disabled,
+      onChange: (e) => handleChange(i, e.target.value.slice(-1)),
+      onKeyDown: (e) => handleKeyDown(i, e),
+      onPaste: handlePaste,
+      onFocus: (e) => e.target.select(),
+      "aria-label": `Digit ${i + 1}`,
+      style: {
+        width: "40px",
+        height: "48px",
+        textAlign: "center",
+        fontSize: "20px",
+        fontWeight: 600,
+        border: "1px solid var(--border, #E5E5E5)",
+        borderRadius: "8px",
+        outline: "none",
+        backgroundColor: disabled ? "var(--muted, #F5F5F5)" : "transparent",
+        color: "var(--foreground, #000)",
+        opacity: disabled ? 0.5 : 1
+      }
+    },
+    i
+  )) });
+}
+
+// src/components/UserActionModal/constants.ts
+var BUTTON_LABELS = {
+  APPROVE: "Verify",
+  REJECT: "Reject",
+  RESEND: "Resend OTP"
+};
+var RESEND_OTP_COOLDOWN_SECONDS = 30;
+var DEFAULT_OTP_MAX_LENGTH = 6;
+var MIN_OTP_MAX_LENGTH = 1;
+var MAX_OTP_MAX_LENGTH = 12;
+var ACTION_PENDING_TIMEOUT_MS = 15e3;
+var MODAL_CONTENT = {
+  TITLE: "Verification Required",
+  LOADING_APPROVE: "Verifying...",
+  LOADING_REJECT: "Rejecting...",
+  LOADING_RESEND: "Resending...",
+  RESEND_AVAILABLE_IN: "Resend OTP in"
+};
+
+// src/components/UserActionModal/utils.ts
+function getOtpSchemaFromRequest(schema) {
+  const properties = schema?.properties;
+  const otp = properties?.otp;
+  const maxLengthRaw = otp?.maxLength;
+  const parsedMaxLength = Number.isInteger(maxLengthRaw) ? Number(maxLengthRaw) : DEFAULT_OTP_MAX_LENGTH;
+  const clampedMaxLength = Math.min(
+    MAX_OTP_MAX_LENGTH,
+    Math.max(MIN_OTP_MAX_LENGTH, parsedMaxLength)
+  );
+  return {
+    maxLength: clampedMaxLength
+  };
+}
+function UserActionModal({
+  isOpen,
+  userActionRequest,
+  onApprove,
+  onReject,
+  onResend,
+  clearOtpTrigger
+}) {
+  const [otp, setOtp] = useState("");
+  const [actionType, setActionType] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [resendCooldownRemaining, setResendCooldownRemaining] = useState(0);
+  const dialogRef = useRef(null);
+  const previousFocusedRef = useRef(null);
+  const schema = getOtpSchemaFromRequest(userActionRequest?.requestedSchema);
+  const resetActionState = useCallback(() => {
+    setIsSubmitting(false);
+    setActionType(null);
+  }, []);
+  useEffect(() => {
+    if (isOpen) {
+      setResendCooldownRemaining(RESEND_OTP_COOLDOWN_SECONDS);
+    } else {
+      setOtp("");
+      resetActionState();
+      setResendCooldownRemaining(0);
+    }
+  }, [isOpen, resetActionState]);
+  useEffect(() => {
+    if (resendCooldownRemaining <= 0) return;
+    const timer = setTimeout(() => {
+      setResendCooldownRemaining((prev) => prev - 1);
+    }, 1e3);
+    return () => clearTimeout(timer);
+  }, [resendCooldownRemaining]);
+  useEffect(() => {
+    if (clearOtpTrigger > 0) {
+      setOtp("");
+      resetActionState();
+    }
+  }, [clearOtpTrigger, resetActionState]);
+  useEffect(() => {
+    if (!isOpen || !isSubmitting) return;
+    if (actionType !== "approve" && actionType !== "reject") return;
+    const timeout = setTimeout(() => {
+      resetActionState();
+    }, ACTION_PENDING_TIMEOUT_MS);
+    return () => clearTimeout(timeout);
+  }, [isOpen, isSubmitting, actionType, resetActionState]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    previousFocusedRef.current = document.activeElement;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const getFocusableElements = () => Array.from(
+      dialog.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((el) => !el.hasAttribute("disabled") && el.tabIndex !== -1);
+    const focusables = getFocusableElements();
+    (focusables[0] ?? dialog).focus();
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const currentFocusables = getFocusableElements();
+      if (currentFocusables.length === 0) {
+        event.preventDefault();
+        dialog.focus();
+        return;
+      }
+      const first = currentFocusables[0];
+      const last = currentFocusables[currentFocusables.length - 1];
+      const activeElement = document.activeElement;
+      const isInDialog = activeElement ? dialog.contains(activeElement) : false;
+      if (event.shiftKey) {
+        if (!isInDialog || activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        }
+        return;
+      }
+      if (!isInDialog || activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = originalOverflow;
+      previousFocusedRef.current?.focus();
+    };
+  }, [isOpen]);
+  const handleApprove = useCallback(async () => {
+    if (otp.length !== schema.maxLength || !/^\d+$/.test(otp)) return;
+    setIsSubmitting(true);
+    setActionType("approve");
+    try {
+      await onApprove(otp);
+    } catch {
+      resetActionState();
+    }
+  }, [otp, schema.maxLength, onApprove, resetActionState]);
+  const handleReject = useCallback(async () => {
+    setIsSubmitting(true);
+    setActionType("reject");
+    try {
+      await onReject();
+    } catch {
+      resetActionState();
+    }
+  }, [onReject, resetActionState]);
+  const handleResend = useCallback(async () => {
+    if (resendCooldownRemaining > 0) return;
+    setIsSubmitting(true);
+    setActionType("resend");
+    try {
+      await onResend();
+      setResendCooldownRemaining(RESEND_OTP_COOLDOWN_SECONDS);
+    } catch {
+    } finally {
+      setActionType(null);
+      setIsSubmitting(false);
+    }
+  }, [resendCooldownRemaining, onResend]);
+  if (!isOpen || !userActionRequest) return null;
+  const isOtpValid = otp.length === schema.maxLength && /^\d+$/.test(otp);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        zIndex: 1e4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          style: {
+            backgroundColor: "var(--card, #FFFFFF)",
+            borderRadius: "12px",
+            padding: "24px",
+            width: "100%",
+            maxWidth: "420px",
+            margin: "0 16px",
+            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
+          },
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: "16px" }, children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "48px",
+                    height: "48px",
+                    borderRadius: "50%",
+                    backgroundColor: "var(--muted, #F5F5F5)",
+                    marginBottom: "12px"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    ShieldCheck,
+                    {
+                      className: "text-primary",
+                      style: { width: "24px", height: "24px" }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  style: {
+                    fontSize: "18px",
+                    fontWeight: 600,
+                    color: "var(--foreground, #000)",
+                    margin: 0
+                  },
+                  children: MODAL_CONTENT.TITLE
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  fontSize: "14px",
+                  color: "var(--muted-foreground, #666)",
+                  textAlign: "center",
+                  margin: "0 0 24px 0",
+                  lineHeight: 1.5
+                },
+                children: userActionRequest.message
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { marginBottom: "24px" }, children: /* @__PURE__ */ jsx(
+              OtpInput,
+              {
+                value: otp,
+                onChange: setOtp,
+                maxLength: schema.maxLength,
+                disabled: isSubmitting
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "10px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: "8px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            onClick: handleReject,
+                            disabled: isSubmitting,
+                            className: cn(
+                              "py-2.5 px-4 rounded-lg text-sm font-medium transition-colors",
+                              "bg-destructive/10 text-destructive hover:bg-destructive/20 hover:text-destructive",
+                              "disabled:opacity-50 disabled:cursor-not-allowed"
+                            ),
+                            style: {
+                              flex: 1,
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              gap: "6px",
+                              whiteSpace: "nowrap",
+                              minWidth: 0
+                            },
+                            children: [
+                              actionType === "reject" && /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin", style: { flexShrink: 0 } }),
+                              actionType === "reject" ? MODAL_CONTENT.LOADING_REJECT : BUTTON_LABELS.REJECT
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            onClick: handleApprove,
+                            disabled: !isOtpValid || isSubmitting,
+                            className: cn(
+                              "py-2.5 px-4 rounded-lg text-sm font-medium transition-colors",
+                              "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+                              "disabled:opacity-50 disabled:cursor-not-allowed"
+                            ),
+                            style: {
+                              flex: 1,
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              gap: "6px",
+                              whiteSpace: "nowrap",
+                              minWidth: 0
+                            },
+                            children: [
+                              actionType === "approve" && /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin", style: { flexShrink: 0 } }),
+                              actionType === "approve" ? MODAL_CONTENT.LOADING_APPROVE : BUTTON_LABELS.APPROVE
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: handleResend,
+                      disabled: isSubmitting || resendCooldownRemaining > 0,
+                      className: cn(
+                        "py-2 px-4 rounded-lg text-xs font-medium transition-colors w-full",
+                        "text-muted-foreground hover:text-foreground",
+                        "disabled:opacity-50 disabled:cursor-not-allowed"
+                      ),
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: "6px",
+                        whiteSpace: "nowrap"
+                      },
+                      children: [
+                        actionType === "resend" && /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin", style: { flexShrink: 0 } }),
+                        actionType === "resend" ? MODAL_CONTENT.LOADING_RESEND : resendCooldownRemaining > 0 ? `${MODAL_CONTENT.RESEND_AVAILABLE_IN} ${resendCooldownRemaining}s` : BUTTON_LABELS.RESEND
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+var DEFAULT_USER_ACTION_STATE = {
+  request: null,
+  clearOtpTrigger: 0
+};
+var NOOP_ASYNC = async () => {
+};
 function PaymanChat({
   config,
   callbacks = {},
@@ -657,6 +1128,7 @@ function PaymanChat({
   children
 }) {
   const [inputValue, setInputValue] = useState("");
+  const chat = useChat(config, callbacks);
   const {
     messages,
     sendMessage,
@@ -666,7 +1138,12 @@ function PaymanChat({
     cancelStream,
     getSessionId,
     getMessages
-  } = useChat(config, callbacks);
+  } = chat;
+  const userActionState = chat.userActionState ?? DEFAULT_USER_ACTION_STATE;
+  const approveUserAction = chat.approveUserAction ?? NOOP_ASYNC;
+  const rejectUserAction = chat.rejectUserAction ?? NOOP_ASYNC;
+  const resendOtp = chat.resendOtp ?? NOOP_ASYNC;
+  const isUserActionSupported = typeof chat.approveUserAction === "function" && typeof chat.rejectUserAction === "function" && typeof chat.resendOtp === "function";
   const contextValue = useMemo(
     () => ({
       resetSession,
@@ -701,6 +1178,7 @@ function PaymanChat({
     agentName = "Assistant",
     showExecutionSteps = true,
     showStreamingDot = true,
+    inputStyle = "rounded",
     layout = "full-width",
     showTimestamps = false,
     animated = true,
@@ -795,7 +1273,20 @@ function PaymanChat({
             placeholder,
             isWaitingForResponse,
             hasSelectedSession: true,
-            isSessionParamsConfigured
+            isSessionParamsConfigured,
+            inputStyle,
+            layout
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          UserActionModal,
+          {
+            isOpen: isUserActionSupported && userActionState.request !== null,
+            userActionRequest: userActionState.request,
+            onApprove: approveUserAction,
+            onReject: rejectUserAction,
+            onResend: resendOtp,
+            clearOtpTrigger: userActionState.clearOtpTrigger
           }
         )
       ]