@paymanai/payman-ask-sdk 1.2.21 → 1.2.23

package/dist/index.native.js

@@ -9,12 +9,32 @@ var Animated2 = require('react-native-reanimated');
 var Markdown = require('react-native-markdown-display');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var Sentry = require('@sentry/react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefault(React);
 var Animated2__default = /*#__PURE__*/_interopDefault(Animated2);
 var Markdown__default = /*#__PURE__*/_interopDefault(Markdown);
+var Sentry__namespace = /*#__PURE__*/_interopNamespace(Sentry);
 
 // src/components/PaymanChat/index.native.tsx
 var PaymanChatContext = React.createContext(void 0);
@@ -116,7 +136,8 @@ function ChatInput({
   recordingDurationSeconds = 0,
   onConfirmRecording,
   onCancelRecording,
-  transcribedText
+  transcribedText,
+  onInputFocus
 }) {
   const isInputDisabled = disabled || isWaitingForResponse;
   const showVoiceButton = enableVoice && onVoicePress != null;
@@ -223,6 +244,7 @@ function ChatInput({
                 ref: inputRef,
                 value,
                 onChangeText: onChange,
+                onFocus: onInputFocus,
                 onPress: onClick,
                 editable: !isInputDisabled,
                 placeholder: getPlaceholder(),
@@ -1124,6 +1146,32 @@ function formatDate(timestamp) {
     year: date.getFullYear() !== now.getFullYear() ? "numeric" : void 0
   });
 }
+function captureSentryError(error, context) {
+  if (!Sentry__namespace.getClient()) return;
+  const tags = {};
+  if (context.executionId) tags.executionId = context.executionId;
+  if (context.sessionId) tags.sessionId = context.sessionId;
+  if (context.route) tags.route = context.route;
+  if (context.cfRay) tags.cfRay = context.cfRay;
+  if (context.customerId) tags.customerId = context.customerId;
+  if (context.customerEmail) tags.customerEmail = context.customerEmail;
+  const contexts = {
+    chat_session: {
+      sessionId: context.sessionId ?? null,
+      sessionOwnerId: context.sessionOwnerId ?? null,
+      executionId: context.executionId ?? null,
+      workflowName: context.workflowName ?? null,
+      cfRay: context.cfRay ?? null,
+      customerId: context.customerId ?? null,
+      customerEmail: context.customerEmail ?? null
+    }
+  };
+  if (typeof error === "string") {
+    Sentry__namespace.captureMessage(error, { level: "error", tags, contexts });
+  } else {
+    Sentry__namespace.captureException(error, { tags, contexts });
+  }
+}
 function UserMessage({
   message,
   animated = false,
@@ -1296,16 +1344,57 @@ function MessageList({
   streamingStepsText,
   completedStepsText,
   onExecutionTraceClick,
-  className
+  className,
+  isWaitingForResponse = false,
+  scrollToEndHandleRef
 }) {
   const flatListRef = React.useRef(null);
+  const messagesRef = React.useRef(messages);
+  messagesRef.current = messages;
+  const prevWaitingRef = React.useRef(isWaitingForResponse);
+  const prevLastStreamingRef = React.useRef(void 0);
+  const scrollToEnd = React.useCallback(() => {
+    flatListRef.current?.scrollToEnd({ animated: true });
+  }, []);
+  const scrollToEndOnAssistantLayout = React.useCallback(() => {
+    const list = messagesRef.current;
+    const last = list[list.length - 1];
+    const shouldFollow = isWaitingForResponse || last?.role === "assistant" && last.isStreaming;
+    if (!shouldFollow) return;
+    const run = () => flatListRef.current?.scrollToEnd({ animated: false });
+    run();
+    requestAnimationFrame(run);
+    setTimeout(run, 16);
+    setTimeout(run, 48);
+  }, [isWaitingForResponse]);
+  React.useEffect(() => {
+    if (!scrollToEndHandleRef) return;
+    scrollToEndHandleRef.current = scrollToEnd;
+    return () => {
+      scrollToEndHandleRef.current = null;
+    };
+  }, [scrollToEndHandleRef, scrollToEnd]);
   React.useEffect(() => {
     if (messages.length > 0) {
       setTimeout(() => {
-        flatListRef.current?.scrollToEnd({ animated: true });
+        scrollToEnd();
       }, 100);
     }
-  }, [messages.length]);
+  }, [messages.length, scrollToEnd]);
+  React.useEffect(() => {
+    const last = messages[messages.length - 1];
+    const streaming = last?.isStreaming;
+    if (prevLastStreamingRef.current === true && streaming === false) {
+      setTimeout(() => scrollToEnd(), 0);
+    }
+    prevLastStreamingRef.current = streaming;
+  }, [messages, scrollToEnd]);
+  React.useEffect(() => {
+    if (prevWaitingRef.current === true && isWaitingForResponse === false) {
+      setTimeout(() => scrollToEnd(), 50);
+    }
+    prevWaitingRef.current = isWaitingForResponse;
+  }, [isWaitingForResponse, scrollToEnd]);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s5.container, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s5.skeletonContent, children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
       MessageRowSkeleton,
@@ -1332,8 +1421,11 @@ function MessageList({
     reactNative.FlatList,
     {
       ref: flatListRef,
+      style: s5.list,
       data: messages,
       keyExtractor: (item) => item.id,
+      keyboardShouldPersistTaps: "handled",
+      keyboardDismissMode: "interactive",
       renderItem: ({ item }) => /* @__PURE__ */ jsxRuntime.jsx(
         MessageRow,
         {
@@ -1356,11 +1448,15 @@ function MessageList({
         s5.listContent,
         layout === "centered" && s5.listContentCentered
       ],
+      ListFooterComponent: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s5.listFooterSpacer }),
+      onContentSizeChange: scrollToEndOnAssistantLayout,
       showsVerticalScrollIndicator: false
     }
   );
 }
 var s5 = reactNative.StyleSheet.create({
+  /** Fills space above the input so messages stay in the scroll region, not behind it. */
+  list: { flex: 1 },
   container: { flex: 1 },
   skeletonContent: { padding: 16, gap: 16 },
   emptyContainer: {
@@ -1393,8 +1489,17 @@ var s5 = reactNative.StyleSheet.create({
     textAlign: "center",
     lineHeight: 20
   },
-  listContent: { padding: 16, gap: 16 },
-  listContentCentered: { maxWidth: 672, alignSelf: "center", width: "100%" }
+  listContent: {
+    paddingTop: 16,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    gap: 16
+  },
+  listContentCentered: { maxWidth: 672, alignSelf: "center", width: "100%" },
+  /** Extra space below last message — thinking/stream text can wrap to multiple lines before scroll runs. */
+  listFooterSpacer: {
+    height: reactNative.Platform.select({ ios: 52, android: 60, default: 52 })
+  }
 });
 
 // src/assets/payman-mono-crop-blue.png
@@ -2057,6 +2162,7 @@ function PaymanChat({
   const recordingStartRef = React.useRef(null);
   const recordingIntervalRef = React.useRef(null);
   const prevInputValueRef = React.useRef(inputValue);
+  const scrollMessagesToEndRef = React.useRef(null);
   const chat = paymanTypescriptAskSdk.useChat(config, callbacks);
   const {
     messages,
@@ -2201,6 +2307,13 @@ function PaymanChat({
   const handleCancelRecording = React.useCallback(() => {
     stopRecording();
   }, [stopRecording]);
+  const handleInputFocus = React.useCallback(() => {
+    const run = () => scrollMessagesToEndRef.current?.();
+    run();
+    requestAnimationFrame(run);
+    setTimeout(run, 100);
+    setTimeout(run, 280);
+  }, []);
   if (isChatDisabled) {
     if (disabledComponent) {
       return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s8.container, style], children: [
@@ -2217,14 +2330,15 @@ function PaymanChat({
     reactNative.KeyboardAvoidingView,
     {
       style: [s8.container, style],
-      behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
+      behavior: "padding",
       keyboardVerticalOffset: reactNative.Platform.OS === "ios" ? 90 : 0,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s8.messageListWrap, children: /* @__PURE__ */ jsxRuntime.jsx(
           MessageList,
           {
             messages,
+            isWaitingForResponse,
             isLoading: false,
             emptyStateText,
             showEmptyStateIcon,
@@ -2241,10 +2355,11 @@ function PaymanChat({
             showStreamingDot,
             streamingStepsText,
             completedStepsText,
-            onExecutionTraceClick
+            onExecutionTraceClick,
+            scrollToEndHandleRef: scrollMessagesToEndRef
           }
-        ),
-        hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(
+        ) }),
+        hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s8.inputBarWrap, children: /* @__PURE__ */ jsxRuntime.jsx(
           ChatInput,
           {
             value: inputValue,
@@ -2265,9 +2380,10 @@ function PaymanChat({
             recordingDurationSeconds: recordingElapsedSeconds,
             onConfirmRecording: enableVoice ? handleConfirmRecording : void 0,
             onCancelRecording: enableVoice ? handleCancelRecording : void 0,
-            transcribedText: enableVoice && isRecording ? transcribedText : void 0
+            transcribedText: enableVoice && isRecording ? transcribedText : void 0,
+            onInputFocus: handleInputFocus
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           UserActionModal,
           {
@@ -2284,6 +2400,20 @@ function PaymanChat({
   ) });
 }
 var s8 = reactNative.StyleSheet.create({
+  /** Lets the message list shrink when the keyboard opens; pairs with FlatList flex:1. */
+  messageListWrap: { flex: 1, minHeight: 0, zIndex: 0 },
+  /**
+   * Keeps the composer above the message list when scrolling so rows (e.g. stream step toggles)
+   * do not paint over the input. Elevation applies on Android only.
+   */
+  inputBarWrap: {
+    width: "100%",
+    zIndex: 2,
+    ...reactNative.Platform.select({
+      android: { elevation: 8 },
+      default: {}
+    })
+  },
   container: {
     flex: 1,
     backgroundColor: "#FFFFFF",
@@ -2331,6 +2461,7 @@ Object.defineProperty(exports, "useVoice", {
 });
 exports.PaymanChat = PaymanChat;
 exports.PaymanChatContext = PaymanChatContext;
+exports.captureSentryError = captureSentryError;
 exports.cn = cn;
 exports.formatDate = formatDate;
 exports.usePaymanChat = usePaymanChat;