@paymanai/payman-ask-sdk 1.2.8 → 1.2.10

package/dist/index.native.js

@@ -576,6 +576,16 @@ function ThinkingBlock({ text }) {
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: ts.thinkingContent, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: ts.thinkingContentText, children: text }) })
   ] });
 }
+var WORKFLOW_FAILED = "WORKFLOW_FAILED";
+var STREAM_NOT_STARTED = "STREAM_NOT_STARTED";
+function isFriendlyError(errorDetails) {
+  if (!errorDetails) return false;
+  return errorDetails === WORKFLOW_FAILED || errorDetails === STREAM_NOT_STARTED || errorDetails.includes(WORKFLOW_FAILED);
+}
+function looksLikeRawError(text) {
+  if (!text || text.length < 10) return false;
+  return text.includes("errorType=") || /failed:\s*\{/.test(text);
+}
 function AgentMessage({
   message,
   animated = false,
@@ -593,7 +603,6 @@ function AgentMessage({
   const isStreaming = message.isStreaming ?? false;
   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;
   const currentExecutingStepId = message.currentExecutingStepId;
   const [isStepsExpanded, setIsStepsExpanded] = React.useState(
@@ -609,6 +618,9 @@ function AgentMessage({
   const currentMessage = message.currentMessage;
   const rawContent = message.streamingContent || message.content || "";
   const content = rawContent.replace(/\\n/g, "\n");
+  const hasMeaningfulContent = content.length > 0 && !looksLikeRawError(content);
+  const completedWithNoContent = !isStreaming && !isCancelled && content.length === 0 && (message.streamProgress === "completed" || message.streamProgress === "error");
+  const isError = (isFriendlyError(message.errorDetails) || looksLikeRawError(content)) && !hasMeaningfulContent || completedWithNoContent;
   const activeThinkingText = message.activeThinkingText;
   const allThinkingText = message.allThinkingText;
   const currentStep = React.useMemo(
@@ -816,8 +828,9 @@ var s2 = reactNative.StyleSheet.create({
     alignItems: "center"
   },
   // Bubble column
-  bubbleCol: { minWidth: 0, maxWidth: "80%", flexShrink: 1 },
-  bubbleColCentered: { maxWidth: "85%" },
+  // Bubble column — flex: 1 so it fills available width on mobile (still capped by maxWidth)
+  bubbleCol: { flex: 1, minWidth: 0, maxWidth: "92%", flexShrink: 1 },
+  bubbleColCentered: { maxWidth: "95%" },
   // Badge
   badgeWrap: { marginBottom: 6 },
   badge: {
@@ -1409,21 +1422,27 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
     i
   )) });
 }
+var PAYMAN_OTP = {
+  bg: "#FFFFFF",
+  border: "rgba(0,0,0,0.1)",
+  fg: "#18181b",
+  disabledBg: "rgba(0,0,0,0.03)"
+};
 var s6 = reactNative.StyleSheet.create({
-  container: { flexDirection: "row", gap: 8, justifyContent: "center" },
+  container: { flexDirection: "row", gap: 6, justifyContent: "center" },
   input: {
-    width: 42,
-    height: 50,
+    width: 40,
+    height: 44,
     textAlign: "center",
-    fontSize: 20,
+    fontSize: 18,
     fontWeight: "600",
     borderWidth: 1,
-    borderColor: "rgba(0,0,0,0.1)",
+    borderColor: PAYMAN_OTP.border,
     borderRadius: 10,
-    color: "#1F2937",
-    backgroundColor: "#FFFFFF"
+    color: PAYMAN_OTP.fg,
+    backgroundColor: PAYMAN_OTP.bg
   },
-  inputDisabled: { backgroundColor: "rgba(0,0,0,0.03)", opacity: 0.5 }
+  inputDisabled: { backgroundColor: PAYMAN_OTP.disabledBg, opacity: 0.5 }
 });
 
 // src/components/UserActionModal/constants.ts
@@ -1459,6 +1478,32 @@ function getOtpSchemaFromRequest(schema) {
     maxLength: clampedMaxLength
   };
 }
+var PAYMAN = {
+  // Keep primary aligned with native user bubble color in UserMessage.
+  primary: "#00858d",
+  foreground: "#18181b",
+  mutedForeground: "#71717a",
+  border: "#e4e4e7",
+  card: "#ffffff",
+  modalBackdrop: "rgba(0,0,0,0.4)",
+  modalIconBg: "rgba(0,133,141,0.12)",
+  modalIconBorder: "rgba(0,133,141,0.28)",
+  // payman-modal-btn-reject: visible light red bg + red text
+  rejectBtnBg: "#fef2f2",
+  rejectBtnFg: "#dc2626",
+  rejectBtnBorder: "#fecaca",
+  // payman-modal-btn-approve: solid dark bg + white text
+  approveBtnBg: "#00858d",
+  approveBtnFg: "#ffffff",
+  // payman-modal-btn-resend: bordered with primary tint
+  resendBtnBg: "#f0f9f9",
+  resendBorder: "rgba(0,133,141,0.35)",
+  resendFg: "#00858d"
+};
+var { width: SCREEN_WIDTH } = reactNative.Dimensions.get("window");
+var DIALOG_MAX_WIDTH = Math.min(400, SCREEN_WIDTH * 0.9);
+var DIALOG_PADDING = 20;
+var BUTTON_MIN_HEIGHT = 44;
 function UserActionModal({
   isOpen,
   userActionRequest,
@@ -1471,7 +1516,22 @@ function UserActionModal({
   const [actionType, setActionType] = React.useState(null);
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [resendCooldownRemaining, setResendCooldownRemaining] = React.useState(0);
+  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
   const schema = getOtpSchemaFromRequest(userActionRequest?.requestedSchema);
+  React.useEffect(() => {
+    const show = reactNative.Keyboard.addListener(
+      reactNative.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
+      () => setKeyboardVisible(true)
+    );
+    const hide = reactNative.Keyboard.addListener(
+      reactNative.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
+      () => setKeyboardVisible(false)
+    );
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
   const resetActionState = React.useCallback(() => {
     setIsSubmitting(false);
     setActionType(null);
@@ -1548,6 +1608,7 @@ function UserActionModal({
       return `${MODAL_CONTENT.RESEND_AVAILABLE_IN} ${resendCooldownRemaining}s`;
     return BUTTON_LABELS.RESEND;
   };
+  const modalPosition = keyboardVisible ? "flex-end" : "center";
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Modal,
     {
@@ -1556,154 +1617,254 @@ function UserActionModal({
       animationType: "fade",
       onRequestClose: () => {
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s7.backdrop, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.dialog, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s7.titleWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.title, children: MODAL_CONTENT.TITLE }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.description, children: userActionRequest.message }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s7.otpWrap, children: /* @__PURE__ */ jsxRuntime.jsx(
-          OtpInput,
-          {
-            value: otp,
-            onChange: setOtp,
-            maxLength: schema.maxLength,
-            disabled: isSubmitting
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.buttonsCol, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.primaryRow, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              reactNative.Pressable,
-              {
-                onPress: handleReject,
-                disabled: isSubmitting,
-                style: ({ pressed }) => [
-                  s7.rejectBtn,
-                  isSubmitting && s7.btnDisabled,
-                  pressed && { opacity: 0.7 }
-                ],
-                children: [
-                  actionType === "reject" && /* @__PURE__ */ jsxRuntime.jsx(
-                    reactNative.ActivityIndicator,
-                    {
-                      size: "small",
-                      color: "#DC2626",
-                      style: s7.spinner
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.rejectBtnText, children: actionType === "reject" ? MODAL_CONTENT.LOADING_REJECT : BUTTON_LABELS.REJECT })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              reactNative.Pressable,
-              {
-                onPress: handleApprove,
-                disabled: !isOtpValid || isSubmitting,
-                style: ({ pressed }) => [
-                  s7.approveBtn,
-                  (!isOtpValid || isSubmitting) && s7.btnDisabled,
-                  pressed && { opacity: 0.85 }
-                ],
-                children: [
-                  actionType === "approve" && /* @__PURE__ */ jsxRuntime.jsx(
-                    reactNative.ActivityIndicator,
-                    {
-                      size: "small",
-                      color: "#FFF",
-                      style: s7.spinner
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.approveBtnText, children: actionType === "approve" ? MODAL_CONTENT.LOADING_APPROVE : BUTTON_LABELS.APPROVE })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.Pressable,
+      statusBarTranslucent: reactNative.Platform.OS === "android",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.KeyboardAvoidingView,
+        {
+          style: [s7.keyboardAvoid, { justifyContent: modalPosition }],
+          behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
+          keyboardVerticalOffset: reactNative.Platform.OS === "ios" ? 0 : 20,
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [s7.modalOverlay, { justifyContent: modalPosition }], children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.ScrollView,
             {
-              onPress: handleResend,
-              disabled: isSubmitting || resendCooldownRemaining > 0,
-              style: ({ pressed }) => [
-                s7.resendBtn,
-                (isSubmitting || resendCooldownRemaining > 0) && s7.btnDisabled,
-                pressed && { opacity: 0.7 }
+              contentContainerStyle: [
+                s7.scrollContent,
+                { justifyContent: modalPosition }
               ],
-              children: [
-                actionType === "resend" && /* @__PURE__ */ jsxRuntime.jsx(
-                  reactNative.ActivityIndicator,
+              showsVerticalScrollIndicator: false,
+              keyboardShouldPersistTaps: "handled",
+              children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s7.dialog, { width: DIALOG_MAX_WIDTH }], children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.titleWrap, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s7.iconWrap, accessibilityLabel: "payman-modal-icon-wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReactNative.ShieldCheck,
+                    {
+                      size: 22,
+                      color: PAYMAN.primary,
+                      strokeWidth: 2
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.title, accessibilityLabel: "payman-modal-title", children: MODAL_CONTENT.TITLE })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.description, accessibilityLabel: "payman-modal-desc", children: userActionRequest.message }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s7.otpWrap, accessibilityLabel: "payman-otp-wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  OtpInput,
                   {
-                    size: "small",
-                    color: "#6B7280",
-                    style: s7.spinner
+                    value: otp,
+                    onChange: setOtp,
+                    maxLength: schema.maxLength,
+                    disabled: isSubmitting
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.resendBtnText, children: getResendLabel() })
-              ]
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.buttonsCol, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.primaryRow, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      reactNative.Pressable,
+                      {
+                        onPress: handleReject,
+                        disabled: isSubmitting,
+                        accessibilityLabel: "payman-modal-btn-reject",
+                        testID: "payman-modal-btn-reject",
+                        style: [
+                          s7.rejectBtn,
+                          isSubmitting && s7.btnDisabled
+                        ],
+                        children: [
+                          actionType === "reject" ? /* @__PURE__ */ jsxRuntime.jsx(
+                            reactNative.ActivityIndicator,
+                            {
+                              size: "small",
+                              color: PAYMAN.rejectBtnFg,
+                              style: s7.spinner
+                            }
+                          ) : /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 16, color: PAYMAN.rejectBtnFg, strokeWidth: 2.5, style: s7.btnIcon }),
+                          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.rejectBtnText, children: actionType === "reject" ? MODAL_CONTENT.LOADING_REJECT : BUTTON_LABELS.REJECT })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      reactNative.Pressable,
+                      {
+                        onPress: handleApprove,
+                        disabled: !isOtpValid || isSubmitting,
+                        accessibilityLabel: "payman-modal-btn-approve",
+                        testID: "payman-modal-btn-approve",
+                        style: [
+                          s7.approveBtn,
+                          (!isOtpValid || isSubmitting) && s7.btnDisabled
+                        ],
+                        children: [
+                          actionType === "approve" ? /* @__PURE__ */ jsxRuntime.jsx(
+                            reactNative.ActivityIndicator,
+                            {
+                              size: "small",
+                              color: PAYMAN.approveBtnFg,
+                              style: s7.spinner
+                            }
+                          ) : /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Check, { size: 16, color: PAYMAN.approveBtnFg, strokeWidth: 2.5, style: s7.btnIcon }),
+                          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.approveBtnText, children: actionType === "approve" ? MODAL_CONTENT.LOADING_APPROVE : BUTTON_LABELS.APPROVE })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactNative.Pressable,
+                    {
+                      onPress: handleResend,
+                      disabled: isSubmitting || resendCooldownRemaining > 0,
+                      accessibilityLabel: "payman-modal-btn-resend",
+                      testID: "payman-modal-btn-resend",
+                      style: [
+                        s7.resendBtn,
+                        (isSubmitting || resendCooldownRemaining > 0) && s7.btnDisabled
+                      ],
+                      children: [
+                        actionType === "resend" ? /* @__PURE__ */ jsxRuntime.jsx(
+                          reactNative.ActivityIndicator,
+                          {
+                            size: "small",
+                            color: PAYMAN.resendFg,
+                            style: s7.spinner
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.RefreshCw, { size: 16, color: PAYMAN.resendFg, strokeWidth: 2.5, style: s7.btnIcon }),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.resendBtnText, children: getResendLabel() })
+                      ]
+                    }
+                  )
+                ] })
+              ] })
             }
-          )
-        ] })
-      ] }) })
+          ) })
+        }
+      )
     }
   );
 }
 var s7 = reactNative.StyleSheet.create({
-  backdrop: {
+  keyboardAvoid: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.4)",
-    justifyContent: "center",
-    alignItems: "center"
+    width: "100%"
+  },
+  modalOverlay: {
+    flex: 1,
+    width: "100%",
+    backgroundColor: PAYMAN.modalBackdrop,
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingBottom: 24
+  },
+  scrollContent: {
+    flexGrow: 1,
+    width: "100%",
+    alignItems: "center",
+    paddingBottom: 8
   },
   dialog: {
-    backgroundColor: "#FFF",
+    backgroundColor: PAYMAN.card,
     borderRadius: 20,
-    padding: 24,
-    width: "90%",
-    maxWidth: 400
+    padding: DIALOG_PADDING,
+    borderWidth: 1,
+    borderColor: PAYMAN.border
+  },
+  titleWrap: {
+    alignItems: "center",
+    marginBottom: 12
+  },
+  iconWrap: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    backgroundColor: PAYMAN.modalIconBg,
+    borderWidth: 1,
+    borderColor: PAYMAN.modalIconBorder,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 10
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: "600",
+    color: PAYMAN.foreground
   },
-  titleWrap: { alignItems: "center", marginBottom: 14 },
-  title: { fontSize: 16, fontWeight: "600", color: "#1F2937" },
   description: {
     fontSize: 14,
-    lineHeight: 21,
-    color: "#6B7280",
+    lineHeight: 20,
+    color: PAYMAN.mutedForeground,
     textAlign: "center",
-    marginBottom: 20
+    marginBottom: 16
+  },
+  otpWrap: {
+    marginBottom: 16
+  },
+  buttonsCol: {
+    gap: 10
+  },
+  primaryRow: {
+    flexDirection: "row",
+    gap: 8
   },
-  otpWrap: { marginBottom: 24 },
-  buttonsCol: { gap: 10 },
-  primaryRow: { flexDirection: "row", gap: 8 },
   rejectBtn: {
     flex: 1,
+    minHeight: BUTTON_MIN_HEIGHT,
     borderRadius: 12,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    backgroundColor: "rgba(220,38,38,0.08)",
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    backgroundColor: PAYMAN.rejectBtnBg,
+    borderWidth: 1.5,
+    borderColor: PAYMAN.rejectBtnBorder,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center"
   },
-  rejectBtnText: { color: "#DC2626", fontSize: 14, fontWeight: "500" },
+  rejectBtnText: {
+    color: PAYMAN.rejectBtnFg,
+    fontSize: 15,
+    fontWeight: "600"
+  },
   approveBtn: {
     flex: 1,
+    minHeight: BUTTON_MIN_HEIGHT,
     borderRadius: 12,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    backgroundColor: "#007AFF",
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    backgroundColor: PAYMAN.approveBtnBg,
+    borderWidth: 1.5,
+    borderColor: PAYMAN.approveBtnBg,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center"
   },
-  approveBtnText: { color: "#FFF", fontSize: 14, fontWeight: "600" },
+  approveBtnText: {
+    color: PAYMAN.approveBtnFg,
+    fontSize: 15,
+    fontWeight: "600"
+  },
   resendBtn: {
-    borderRadius: 10,
-    paddingVertical: 8,
-    paddingHorizontal: 16,
+    minHeight: BUTTON_MIN_HEIGHT,
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    borderWidth: 1.5,
+    borderColor: PAYMAN.resendBorder,
+    backgroundColor: PAYMAN.resendBtnBg,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center"
   },
-  resendBtnText: { color: "#6B7280", fontSize: 14, lineHeight: 21, fontWeight: "500" },
-  btnDisabled: { opacity: 0.4 },
-  spinner: { marginRight: 8 }
+  resendBtnText: {
+    color: PAYMAN.resendFg,
+    fontSize: 15,
+    lineHeight: 22,
+    fontWeight: "500"
+  },
+  btnDisabled: {
+    opacity: 0.4
+  },
+  spinner: {
+    marginRight: 8
+  },
+  btnIcon: {
+    marginRight: 8
+  }
 });
 var DEFAULT_USER_ACTION_STATE = {
   request: null,
@@ -1738,7 +1899,7 @@ function PaymanChat({
   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";
+  typeof chat.approveUserAction === "function" && typeof chat.rejectUserAction === "function" && typeof chat.resendOtp === "function";
   const {
     voiceState,
     transcribedText,
@@ -1937,7 +2098,7 @@ function PaymanChat({
         /* @__PURE__ */ jsxRuntime.jsx(
           UserActionModal,
           {
-            isOpen: isUserActionSupported && userActionState.request !== null,
+            isOpen: true,
             userActionRequest: userActionState.request,
             onApprove: approveUserAction,
             onReject: rejectUserAction,