@paymanai/payman-ask-sdk 1.0.4 → 1.1.0

package/dist/index.native.js

@@ -178,7 +178,7 @@ function AgentMessage({
   agentName = "Assistant",
   showAvatar = false,
   layout = "full-width",
-  showTimestamp = false,
+  showTimestamp: _showTimestamp = false,
   showExecutionSteps = false,
   showStreamingDot = false,
   streamingStepsText,
@@ -186,7 +186,7 @@ function AgentMessage({
   onExecutionTraceClick
 }) {
   const isStreaming = message.isStreaming ?? false;
-  const hasSteps = message.steps && message.steps.length > 0;
+  const hasSteps = !!message.steps && message.steps.length > 0;
   const hasTraceData = !!(message.tracingData || message.executionId) && !isStreaming;
   const isError = message.isError ?? (message.streamProgress === "error" || !!message.errorDetails);
   const isCancelled = message.isCancelled ?? false;
@@ -236,6 +236,13 @@ function AgentMessage({
           layout === "centered" && styles2.messageContainerCentered
         ],
         children: [
+          message.userActionResult && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.badgeContainer, children: message.userActionResult === "approved" ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles2.badge, styles2.badgeApproved], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.CheckCircle2, { size: 12, color: "#15803d" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.badgeApprovedText, children: "OTP Verified" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles2.badge, styles2.badgeRejected], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.XCircle, { size: 12, color: "#b91c1c" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.badgeRejectedText, children: "Rejected" })
+          ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             reactNative.View,
             {
@@ -278,7 +285,7 @@ function AgentMessage({
                     onPress: () => setIsStepsExpanded(!isStepsExpanded),
                     style: styles2.stepsButton,
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.stepsButtonText, children: getCompletedStepsText(isStepsExpanded) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.stepsButtonText, children: getCompletedStepsText(!!isStepsExpanded) }),
                       isStepsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronUp, { size: 12, color: "#666" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronDown, { size: 12, color: "#666" })
                     ]
                   }
@@ -302,7 +309,13 @@ function AgentMessage({
                             step.status === "pending" && isCancelled && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.XCircle, { size: 12, color: "#666" }),
                             step.status === "pending" && !isCancelled && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
                             step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
-                            step.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Check, { size: 12, color: "#007AFF" }),
+                            step.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx(
+                              lucideReactNative.Check,
+                              {
+                                size: 12,
+                                color: step.eventType === "USER_ACTION_SUCCESS" ? "#16a34a" : "#007AFF"
+                              }
+                            ),
                             step.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 12, color: "#FF3B30" }),
                             /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.stepContent, children: [
                               /* @__PURE__ */ jsxRuntime.jsx(
@@ -310,7 +323,8 @@ function AgentMessage({
                                 {
                                   style: [
                                     styles2.stepText,
-                                    step.status === "error" && styles2.stepTextError
+                                    step.status === "error" && styles2.stepTextError,
+                                    step.eventType === "USER_ACTION_SUCCESS" && styles2.stepTextSuccess
                                   ],
                                   children: step.message
                                 }
@@ -346,7 +360,7 @@ function AgentMessage({
                     onPress: () => setIsStepsExpanded(!isStepsExpanded),
                     style: styles2.stepsButton,
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.stepsButtonText, children: getStreamingStepsText(isStepsExpanded) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.stepsButtonText, children: getStreamingStepsText(!!isStepsExpanded) }),
                       isStepsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronUp, { size: 12, color: "#666" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronDown, { size: 12, color: "#666" })
                     ]
                   }
@@ -370,7 +384,13 @@ function AgentMessage({
                             step.status === "pending" && isCancelled && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.XCircle, { size: 12, color: "#666" }),
                             step.status === "pending" && !isCancelled && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
                             step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
-                            step.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Check, { size: 12, color: "#007AFF" }),
+                            step.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx(
+                              lucideReactNative.Check,
+                              {
+                                size: 12,
+                                color: step.eventType === "USER_ACTION_SUCCESS" ? "#16a34a" : "#007AFF"
+                              }
+                            ),
                             step.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 12, color: "#FF3B30" }),
                             /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.stepContent, children: [
                               /* @__PURE__ */ jsxRuntime.jsx(
@@ -378,7 +398,8 @@ function AgentMessage({
                                 {
                                   style: [
                                     styles2.stepText,
-                                    step.status === "error" && styles2.stepTextError
+                                    step.status === "error" && styles2.stepTextError,
+                                    step.eventType === "USER_ACTION_SUCCESS" && styles2.stepTextSuccess
                                   ],
                                   children: step.message
                                 }
@@ -410,7 +431,10 @@ function AgentMessage({
           tracingData: message.tracingData,
           executionId: message.executionId
         }),
-        style: styles2.traceButton,
+        style: [
+          styles2.traceButton,
+          message.userActionResult ? styles2.traceButtonWithBadge : void 0
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Binoculars, { size: 16, color: "#007AFF" })
       }
     )
@@ -560,6 +584,9 @@ var styles2 = reactNative.StyleSheet.create({
   stepTextError: {
     color: "#FF3B30"
   },
+  stepTextSuccess: {
+    color: "#16a34a"
+  },
   stepTime: {
     fontSize: 10,
     opacity: 0.5,
@@ -572,6 +599,37 @@ var styles2 = reactNative.StyleSheet.create({
     borderWidth: 1,
     borderColor: "rgba(255,255,255,0.2)",
     borderRadius: 8
+  },
+  traceButtonWithBadge: {
+    marginTop: 32
+  },
+  badgeContainer: {
+    marginBottom: 8
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+    alignSelf: "flex-start"
+  },
+  badgeApproved: {
+    backgroundColor: "#dcfce7"
+  },
+  badgeApprovedText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: "#15803d"
+  },
+  badgeRejected: {
+    backgroundColor: "#fee2e2"
+  },
+  badgeRejectedText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: "#b91c1c"
   }
 });
 var markdownStyles = {
@@ -1001,6 +1059,400 @@ var styles5 = reactNative.StyleSheet.create({
     width: "100%"
   }
 });
+var DEFAULT_MAX_LENGTH = 6;
+var MAX_SUPPORTED_LENGTH = 12;
+function OtpInput({ value, onChange, maxLength, disabled = false }) {
+  const inputRefs = React.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);
+  React.useEffect(() => {
+    if (!disabled) {
+      inputRefs.current[0]?.focus();
+    }
+  }, [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, text) => {
+    const cleaned = text.replace(/\D/g, "");
+    if (cleaned.length > 1) {
+      const pasted = cleaned.slice(0, safeMaxLength);
+      const newDigits2 = pasted.split("").concat(Array(safeMaxLength).fill("")).slice(0, safeMaxLength);
+      updateValue(newDigits2);
+      focusInput(Math.min(pasted.length, safeMaxLength - 1));
+      return;
+    }
+    const char = cleaned.slice(-1);
+    const newDigits = [...digits];
+    newDigits[index] = char;
+    updateValue(newDigits);
+    if (char && index < safeMaxLength - 1) {
+      focusInput(index + 1);
+    }
+  };
+  const handleKeyPress = (index, key) => {
+    if (key === "Backspace") {
+      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 /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.container, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.TextInput,
+    {
+      ref: (el) => {
+        inputRefs.current[i] = el;
+      },
+      value: digit,
+      editable: !disabled,
+      keyboardType: "number-pad",
+      maxLength: 1,
+      onChangeText: (text) => handleChange(i, text),
+      onKeyPress: ({ nativeEvent }) => handleKeyPress(i, nativeEvent.key),
+      onFocus: () => inputRefs.current[i]?.setNativeProps({ selection: { start: 0, end: 1 } }),
+      style: [styles6.input, disabled && styles6.inputDisabled],
+      accessibilityLabel: `Digit ${i + 1}`
+    },
+    i
+  )) });
+}
+var styles6 = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 8,
+    justifyContent: "center"
+  },
+  input: {
+    width: 40,
+    height: 48,
+    textAlign: "center",
+    fontSize: 20,
+    fontWeight: "600",
+    borderWidth: 1,
+    borderColor: "#E5E5E5",
+    borderRadius: 8,
+    color: "#000"
+  },
+  inputDisabled: {
+    backgroundColor: "#F5F5F5",
+    opacity: 0.5
+  }
+});
+
+// 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] = React.useState("");
+  const [actionType, setActionType] = React.useState(null);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [resendCooldownRemaining, setResendCooldownRemaining] = React.useState(0);
+  const schema = getOtpSchemaFromRequest(userActionRequest?.requestedSchema);
+  const resetActionState = React.useCallback(() => {
+    setIsSubmitting(false);
+    setActionType(null);
+  }, []);
+  React.useEffect(() => {
+    if (isOpen) {
+      setResendCooldownRemaining(RESEND_OTP_COOLDOWN_SECONDS);
+    } else {
+      setOtp("");
+      resetActionState();
+      setResendCooldownRemaining(0);
+    }
+  }, [isOpen, resetActionState]);
+  React.useEffect(() => {
+    if (resendCooldownRemaining <= 0) return;
+    const timer = setTimeout(() => {
+      setResendCooldownRemaining((prev) => prev - 1);
+    }, 1e3);
+    return () => clearTimeout(timer);
+  }, [resendCooldownRemaining]);
+  React.useEffect(() => {
+    if (clearOtpTrigger > 0) {
+      setOtp("");
+      resetActionState();
+    }
+  }, [clearOtpTrigger, resetActionState]);
+  React.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]);
+  const handleApprove = React.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 = React.useCallback(async () => {
+    setIsSubmitting(true);
+    setActionType("reject");
+    try {
+      await onReject();
+    } catch {
+      resetActionState();
+    }
+  }, [onReject, resetActionState]);
+  const handleResend = React.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 (!userActionRequest) return null;
+  const isOtpValid = otp.length === schema.maxLength && /^\d+$/.test(otp);
+  const getResendLabel = () => {
+    if (actionType === "resend") return MODAL_CONTENT.LOADING_RESEND;
+    if (resendCooldownRemaining > 0)
+      return `${MODAL_CONTENT.RESEND_AVAILABLE_IN} ${resendCooldownRemaining}s`;
+    return BUTTON_LABELS.RESEND;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Modal,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: () => {
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.backdrop, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.dialog, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.title, children: MODAL_CONTENT.TITLE }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.description, children: userActionRequest.message }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.otpContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          OtpInput,
+          {
+            value: otp,
+            onChange: setOtp,
+            maxLength: schema.maxLength,
+            disabled: isSubmitting
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.buttonsColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.primaryButtonsRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              reactNative.Pressable,
+              {
+                onPress: handleReject,
+                disabled: isSubmitting,
+                style: ({ pressed }) => [
+                  styles7.rejectButton,
+                  isSubmitting && styles7.buttonDisabled,
+                  pressed && styles7.rejectButtonPressed
+                ],
+                children: [
+                  actionType === "reject" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#DC2626", style: styles7.spinner }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.rejectButtonText, children: actionType === "reject" ? MODAL_CONTENT.LOADING_REJECT : BUTTON_LABELS.REJECT })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              reactNative.Pressable,
+              {
+                onPress: handleApprove,
+                disabled: !isOtpValid || isSubmitting,
+                style: ({ pressed }) => [
+                  styles7.approveButton,
+                  (!isOtpValid || isSubmitting) && styles7.buttonDisabled,
+                  pressed && styles7.approveButtonPressed
+                ],
+                children: [
+                  actionType === "approve" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#FFF", style: styles7.spinner }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.approveButtonText, children: actionType === "approve" ? MODAL_CONTENT.LOADING_APPROVE : BUTTON_LABELS.APPROVE })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.Pressable,
+            {
+              onPress: handleResend,
+              disabled: isSubmitting || resendCooldownRemaining > 0,
+              style: ({ pressed }) => [
+                styles7.resendButton,
+                (isSubmitting || resendCooldownRemaining > 0) && styles7.buttonDisabled,
+                pressed && styles7.resendButtonPressed
+              ],
+              children: [
+                actionType === "resend" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#666", style: styles7.spinner }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.resendButtonText, children: getResendLabel() })
+              ]
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}
+var styles7 = reactNative.StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  dialog: {
+    backgroundColor: "#FFF",
+    borderRadius: 12,
+    padding: 24,
+    width: "90%",
+    maxWidth: 420
+  },
+  titleContainer: {
+    alignItems: "center",
+    marginBottom: 16
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#000"
+  },
+  description: {
+    fontSize: 14,
+    color: "#666",
+    textAlign: "center",
+    marginBottom: 24,
+    lineHeight: 21
+  },
+  otpContainer: {
+    marginBottom: 24
+  },
+  buttonsColumn: {
+    gap: 10
+  },
+  primaryButtonsRow: {
+    flexDirection: "row",
+    gap: 8
+  },
+  resendButton: {
+    borderRadius: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  resendButtonPressed: {
+    opacity: 0.7
+  },
+  resendButtonText: {
+    color: "#666",
+    fontSize: 12,
+    fontWeight: "500"
+  },
+  rejectButton: {
+    flex: 1,
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "rgba(220, 38, 38, 0.1)",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  rejectButtonPressed: {
+    backgroundColor: "rgba(220, 38, 38, 0.2)"
+  },
+  rejectButtonText: {
+    color: "#DC2626",
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  approveButton: {
+    flex: 1,
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "#007AFF",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  approveButtonPressed: {
+    backgroundColor: "#0066D6",
+    opacity: 1
+  },
+  approveButtonText: {
+    color: "#FFF",
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  buttonDisabled: {
+    opacity: 0.5
+  },
+  spinner: {
+    marginRight: 8
+  }
+});
+var DEFAULT_USER_ACTION_STATE = {
+  request: null,
+  clearOtpTrigger: 0
+};
+var NOOP_ASYNC = async () => {
+};
 function PaymanChat({
   config,
   callbacks = {},
@@ -1009,6 +1461,7 @@ function PaymanChat({
   children
 }) {
   const [inputValue, setInputValue] = React.useState("");
+  const chat = paymanTypescriptAskSdk.useChat(config, callbacks);
   const {
     messages,
     sendMessage,
@@ -1018,7 +1471,12 @@ function PaymanChat({
     cancelStream,
     getSessionId,
     getMessages
-  } = paymanTypescriptAskSdk.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 = React.useMemo(
     () => ({
       resetSession,
@@ -1074,20 +1532,20 @@ function PaymanChat({
   const isInputDisabled = isWaitingForResponse || !isSessionParamsConfigured || disableInput;
   if (isChatDisabled) {
     if (disabledComponent) {
-      return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.container, style], children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.container, style], children: [
         children,
         disabledComponent
       ] }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.container, style], children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.container, style], children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.disabledContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.disabledText, children: "Chat is currently disabled" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.disabledContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.disabledText, children: "Chat is currently disabled" }) })
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.KeyboardAvoidingView,
     {
-      style: [styles6.container, style],
+      style: [styles8.container, style],
       behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
       keyboardVerticalOffset: reactNative.Platform.OS === "ios" ? 90 : 0,
       children: [
@@ -1130,12 +1588,23 @@ function PaymanChat({
             inputStyle,
             layout
           }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          UserActionModal,
+          {
+            isOpen: isUserActionSupported && userActionState.request !== null,
+            userActionRequest: userActionState.request,
+            onApprove: approveUserAction,
+            onReject: rejectUserAction,
+            onResend: resendOtp,
+            clearOtpTrigger: userActionState.clearOtpTrigger
+          }
         )
       ]
     }
   ) });
 }
-var styles6 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "#FFF",
@@ -1157,14 +1626,26 @@ var styles6 = reactNative.StyleSheet.create({
   }
 });
 
+Object.defineProperty(exports, "cancelUserAction", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.cancelUserAction; }
+});
 Object.defineProperty(exports, "generateId", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.generateId; }
 });
+Object.defineProperty(exports, "resendUserAction", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.resendUserAction; }
+});
 Object.defineProperty(exports, "streamWorkflowEvents", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.streamWorkflowEvents; }
 });
+Object.defineProperty(exports, "submitUserAction", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.submitUserAction; }
+});
 Object.defineProperty(exports, "useChat", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.useChat; }