@paymanai/payman-ask-sdk 1.2.20 → 1.2.22

package/dist/index.native.js

@@ -116,7 +116,8 @@ function ChatInput({
   recordingDurationSeconds = 0,
   onConfirmRecording,
   onCancelRecording,
-  transcribedText
+  transcribedText,
+  onInputFocus
 }) {
   const isInputDisabled = disabled || isWaitingForResponse;
   const showVoiceButton = enableVoice && onVoicePress != null;
@@ -223,6 +224,7 @@ function ChatInput({
                 ref: inputRef,
                 value,
                 onChangeText: onChange,
+                onFocus: onInputFocus,
                 onPress: onClick,
                 editable: !isInputDisabled,
                 placeholder: getPlaceholder(),
@@ -1296,16 +1298,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 +1375,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 +1402,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 +1443,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 +2116,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 +2261,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 +2284,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 +2309,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 +2334,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 +2354,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",