@paymanai/payman-ask-sdk 1.2.12 → 1.2.14

package/README.md

@@ -41,6 +41,7 @@ function MyApp() {
           streamEndpoint: "/api/playground/ask/stream", // Important!
         },
         workflowName: "my-workflow",
+        userId: "user-123", // Required for chatStore and activeStreamStore
         workflowVersion: 1,
         stage: "DEV",
         sessionParams: {
@@ -66,6 +67,7 @@ function MyApp() {
       authToken: "your-api-key", // API key with stage configured
     },
     workflowName: "my-workflow",
+    userId: "user-123", // Required for chatStore and activeStreamStore
     stage: "PROD",
     sessionParams: {
       id: "user-123",
@@ -109,6 +111,7 @@ function MyApp() {
 |----------|------|----------|-------------|
 | `api` | `APIConfig` | ✅ | API configuration |
 | `workflowName` | `string` | ✅ | Workflow name |
+| `userId` | `string` | ✅ | User ID for chatStore and activeStreamStore (context store messages management) |
 | `workflowVersion` | `number` | | Workflow version (default: 1) |
 | `stage` | `WorkflowStage` | | Stage (DEV/SANDBOX/PROD) |
 | `sessionParams` | `SessionParams` | | User session info |

package/dist/index.d.mts

@@ -71,6 +71,8 @@ type ChatConfig = {
     api: APIConfig;
     /** Workflow name */
     workflowName: string;
+    /** User ID for chatStore and activeStreamStore — required for context store messages management */
+    userId?: string;
     /** Workflow version */
     workflowVersion?: number;
     /** Stage/Environment */
@@ -163,6 +165,12 @@ type PaymanChatProps = {
     style?: React__default.CSSProperties;
     /** Custom children to render (e.g., header) */
     children?: React__default.ReactNode;
+    /** Called when the user scrolls to the top — use to load older messages */
+    onLoadMoreMessages?: () => void;
+    /** Show a loading spinner at the top of the list while fetching older messages */
+    isLoadingMoreMessages?: boolean;
+    /** Whether there are more messages to load (hides the spinner/trigger when false) */
+    hasMoreMessages?: boolean;
 };
 type ChatInputProps = {
     /** Input value */
@@ -251,6 +259,12 @@ type MessageListProps = {
     }) => void;
     /** Custom class name */
     className?: string;
+    /** Called when the user scrolls to the top — use to load older messages */
+    onLoadMoreMessages?: () => void;
+    /** Show a loading spinner at the top while fetching older messages */
+    isLoadingMoreMessages?: boolean;
+    /** Whether there are more messages to load */
+    hasMoreMessages?: boolean;
 };
 type MessageRowProps = {
     /** Message to display */
@@ -395,7 +409,7 @@ type UserActionModalProps = {
     clearOtpTrigger: number;
 };
 
-declare function PaymanChat({ config, callbacks, className, style, children, }: PaymanChatProps): react_jsx_runtime.JSX.Element;
+declare function PaymanChat({ config, callbacks, className, style, children, onLoadMoreMessages, isLoadingMoreMessages, hasMoreMessages, }: PaymanChatProps): react_jsx_runtime.JSX.Element;
 
 interface PaymanChatContextValue {
     /**
@@ -406,6 +420,10 @@ interface PaymanChatContextValue {
      * Clear all messages without resetting session ID
      */
     clearMessages: () => void;
+    /**
+     * Prepend older messages to the top of the list (e.g. from history pagination)
+     */
+    prependMessages: (messages: MessageDisplay[]) => void;
     /**
      * Cancel current streaming operation
      */

package/dist/index.d.ts

@@ -71,6 +71,8 @@ type ChatConfig = {
     api: APIConfig;
     /** Workflow name */
     workflowName: string;
+    /** User ID for chatStore and activeStreamStore — required for context store messages management */
+    userId?: string;
     /** Workflow version */
     workflowVersion?: number;
     /** Stage/Environment */
@@ -163,6 +165,12 @@ type PaymanChatProps = {
     style?: React__default.CSSProperties;
     /** Custom children to render (e.g., header) */
     children?: React__default.ReactNode;
+    /** Called when the user scrolls to the top — use to load older messages */
+    onLoadMoreMessages?: () => void;
+    /** Show a loading spinner at the top of the list while fetching older messages */
+    isLoadingMoreMessages?: boolean;
+    /** Whether there are more messages to load (hides the spinner/trigger when false) */
+    hasMoreMessages?: boolean;
 };
 type ChatInputProps = {
     /** Input value */
@@ -251,6 +259,12 @@ type MessageListProps = {
     }) => void;
     /** Custom class name */
     className?: string;
+    /** Called when the user scrolls to the top — use to load older messages */
+    onLoadMoreMessages?: () => void;
+    /** Show a loading spinner at the top while fetching older messages */
+    isLoadingMoreMessages?: boolean;
+    /** Whether there are more messages to load */
+    hasMoreMessages?: boolean;
 };
 type MessageRowProps = {
     /** Message to display */
@@ -395,7 +409,7 @@ type UserActionModalProps = {
     clearOtpTrigger: number;
 };
 
-declare function PaymanChat({ config, callbacks, className, style, children, }: PaymanChatProps): react_jsx_runtime.JSX.Element;
+declare function PaymanChat({ config, callbacks, className, style, children, onLoadMoreMessages, isLoadingMoreMessages, hasMoreMessages, }: PaymanChatProps): react_jsx_runtime.JSX.Element;
 
 interface PaymanChatContextValue {
     /**
@@ -406,6 +420,10 @@ interface PaymanChatContextValue {
      * Clear all messages without resetting session ID
      */
     clearMessages: () => void;
+    /**
+     * Prepend older messages to the top of the list (e.g. from history pagination)
+     */
+    prependMessages: (messages: MessageDisplay[]) => void;
     /**
      * Cancel current streaming operation
      */

package/dist/index.js

@@ -771,6 +771,7 @@ function MessageRowSkeleton({
   );
 }
 var SCROLL_THRESHOLD = 150;
+var LOAD_MORE_THRESHOLD = 80;
 function MessageList({
   messages,
   isLoading = false,
@@ -790,12 +791,17 @@ function MessageList({
   streamingStepsText,
   completedStepsText,
   onExecutionTraceClick,
-  className
+  className,
+  onLoadMoreMessages,
+  isLoadingMoreMessages = false,
+  hasMoreMessages = false
 }) {
   const scrollRef = react.useRef(null);
   const isNearBottomRef = react.useRef(true);
   const [showScrollBtn, setShowScrollBtn] = react.useState(false);
   const prevMessageCountRef = react.useRef(messages.length);
+  const scrollHeightBeforePrependRef = react.useRef(null);
+  const firstMessageIdRef = react.useRef(messages[0]?.id);
   const getDistanceFromBottom = react.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return 0;
@@ -807,11 +813,27 @@ function MessageList({
     el.scrollTo({ top: el.scrollHeight, behavior });
   }, []);
   const handleScroll = react.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]);
+  react.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]);
   react.useEffect(() => {
     const prevCount = prevMessageCountRef.current;
     prevMessageCountRef.current = messages.length;
@@ -922,34 +944,37 @@ function MessageList({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              MessageRow,
-              {
-                message,
-                stage,
-                animated,
-                showAgentName,
-                agentName,
-                showAvatars,
-                showUserAvatar,
-                showAssistantAvatar,
-                layout,
-                showTimestamps,
-                showExecutionSteps,
-                showStreamingDot,
-                streamingStepsText,
-                completedStepsText,
-                onExecutionTraceClick
-              },
-              message.id
-            ))
+            children: [
+              isLoadingMoreMessages && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                MessageRow,
+                {
+                  message,
+                  stage,
+                  animated,
+                  showAgentName,
+                  agentName,
+                  showAvatars,
+                  showUserAvatar,
+                  showAssistantAvatar,
+                  layout,
+                  showTimestamps,
+                  showExecutionSteps,
+                  showStreamingDot,
+                  streamingStepsText,
+                  completedStepsText,
+                  onExecutionTraceClick
+                },
+                message.id
+              ))
+            ]
           }
         ),
         showScrollBtn && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 z-20 flex justify-center pb-3 -mt-11", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1429,7 +1454,10 @@ function PaymanChat({
   callbacks = {},
   className,
   style,
-  children
+  children,
+  onLoadMoreMessages,
+  isLoadingMoreMessages = false,
+  hasMoreMessages = false
 }) {
   const [inputValue, setInputValue] = react.useState("");
   const prevInputValueRef = react.useRef(inputValue);
@@ -1440,6 +1468,7 @@ function PaymanChat({
     isWaitingForResponse,
     resetSession,
     clearMessages,
+    prependMessages,
     cancelStream,
     getSessionId,
     getMessages
@@ -1476,6 +1505,7 @@ function PaymanChat({
     () => ({
       resetSession,
       clearMessages,
+      prependMessages,
       cancelStream,
       getSessionId,
       getMessages,
@@ -1484,6 +1514,7 @@ function PaymanChat({
     [
       resetSession,
       clearMessages,
+      prependMessages,
       cancelStream,
       getSessionId,
       getMessages,
@@ -1601,7 +1632,10 @@ function PaymanChat({
             showStreamingDot,
             streamingStepsText,
             completedStepsText,
-            onExecutionTraceClick
+            onExecutionTraceClick,
+            onLoadMoreMessages,
+            isLoadingMoreMessages,
+            hasMoreMessages
           }
         ),
         hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(