@paymanai/payman-ask-sdk 1.2.12 → 1.2.13

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
 export { cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
-import { createContext, useContext, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { createContext, useContext, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -765,6 +765,7 @@ function MessageRowSkeleton({
   );
 }
 var SCROLL_THRESHOLD = 150;
+var LOAD_MORE_THRESHOLD = 80;
 function MessageList({
   messages,
   isLoading = false,
@@ -784,12 +785,17 @@ function MessageList({
   streamingStepsText,
   completedStepsText,
   onExecutionTraceClick,
-  className
+  className,
+  onLoadMoreMessages,
+  isLoadingMoreMessages = false,
+  hasMoreMessages = false
 }) {
   const scrollRef = useRef(null);
   const isNearBottomRef = useRef(true);
   const [showScrollBtn, setShowScrollBtn] = useState(false);
   const prevMessageCountRef = useRef(messages.length);
+  const scrollHeightBeforePrependRef = useRef(null);
+  const firstMessageIdRef = useRef(messages[0]?.id);
   const getDistanceFromBottom = useCallback(() => {
     const el = scrollRef.current;
     if (!el) return 0;
@@ -801,11 +807,27 @@ function MessageList({
     el.scrollTo({ top: el.scrollHeight, behavior });
   }, []);
   const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
     const distance = getDistanceFromBottom();
     const nearBottom = distance <= SCROLL_THRESHOLD;
     isNearBottomRef.current = nearBottom;
     setShowScrollBtn(!nearBottom);
-  }, [getDistanceFromBottom]);
+    if (el.scrollTop <= LOAD_MORE_THRESHOLD && hasMoreMessages && !isLoadingMoreMessages && onLoadMoreMessages) {
+      scrollHeightBeforePrependRef.current = el.scrollHeight;
+      onLoadMoreMessages();
+    }
+  }, [getDistanceFromBottom, hasMoreMessages, isLoadingMoreMessages, onLoadMoreMessages]);
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    const prevHeight = scrollHeightBeforePrependRef.current;
+    const newFirstId = messages[0]?.id;
+    if (el && prevHeight !== null && newFirstId !== firstMessageIdRef.current) {
+      el.scrollTop = el.scrollHeight - prevHeight;
+      scrollHeightBeforePrependRef.current = null;
+    }
+    firstMessageIdRef.current = newFirstId;
+  }, [messages]);
   useEffect(() => {
     const prevCount = prevMessageCountRef.current;
     prevMessageCountRef.current = messages.length;
@@ -916,34 +938,37 @@ function MessageList({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
               "space-y-4",
               layout === "centered" ? "max-w-2xl mx-auto px-4 py-6" : "p-4"
             ),
-            children: messages.map((message) => /* @__PURE__ */ jsx(
-              MessageRow,
-              {
-                message,
-                stage,
-                animated,
-                showAgentName,
-                agentName,
-                showAvatars,
-                showUserAvatar,
-                showAssistantAvatar,
-                layout,
-                showTimestamps,
-                showExecutionSteps,
-                showStreamingDot,
-                streamingStepsText,
-                completedStepsText,
-                onExecutionTraceClick
-              },
-              message.id
-            ))
+            children: [
+              isLoadingMoreMessages && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full border-2 border-muted-foreground/30 border-t-muted-foreground animate-spin" }) }),
+              messages.map((message) => /* @__PURE__ */ jsx(
+                MessageRow,
+                {
+                  message,
+                  stage,
+                  animated,
+                  showAgentName,
+                  agentName,
+                  showAvatars,
+                  showUserAvatar,
+                  showAssistantAvatar,
+                  layout,
+                  showTimestamps,
+                  showExecutionSteps,
+                  showStreamingDot,
+                  streamingStepsText,
+                  completedStepsText,
+                  onExecutionTraceClick
+                },
+                message.id
+              ))
+            ]
           }
         ),
         showScrollBtn && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-20 flex justify-center pb-3 -mt-11", children: /* @__PURE__ */ jsx(
@@ -1423,7 +1448,10 @@ function PaymanChat({
   callbacks = {},
   className,
   style,
-  children
+  children,
+  onLoadMoreMessages,
+  isLoadingMoreMessages = false,
+  hasMoreMessages = false
 }) {
   const [inputValue, setInputValue] = useState("");
   const prevInputValueRef = useRef(inputValue);
@@ -1434,6 +1462,7 @@ function PaymanChat({
     isWaitingForResponse,
     resetSession,
     clearMessages,
+    prependMessages,
     cancelStream,
     getSessionId,
     getMessages
@@ -1470,6 +1499,7 @@ function PaymanChat({
     () => ({
       resetSession,
       clearMessages,
+      prependMessages,
       cancelStream,
       getSessionId,
       getMessages,
@@ -1478,6 +1508,7 @@ function PaymanChat({
     [
       resetSession,
       clearMessages,
+      prependMessages,
       cancelStream,
       getSessionId,
       getMessages,
@@ -1595,7 +1626,10 @@ function PaymanChat({
             showStreamingDot,
             streamingStepsText,
             completedStepsText,
-            onExecutionTraceClick
+            onExecutionTraceClick,
+            onLoadMoreMessages,
+            isLoadingMoreMessages,
+            hasMoreMessages
           }
         ),
         hasAskPermission && /* @__PURE__ */ jsx(