@paymanai/payman-ask-sdk 1.2.11 → 1.2.13

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

@@ -31,7 +31,7 @@ type MessageDisplay = {
     content: string;
     timestamp: string;
     isError?: boolean;
-    /** When set to "WORKFLOW_FAILED" or "STREAM_NOT_STARTED", the UI shows the friendly "Oops, something went wrong" message. Other errors (e.g. subintent failures) do not show it. */
+    /** "WORKFLOW_FAILED" and "STREAM_NOT_STARTED" show the friendly fallback; HTTP 409 conflicts render the backend message from the error payload. */
     errorDetails?: string;
     chunks?: ChunkDisplay[];
     tracingData?: unknown;
@@ -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 */
@@ -171,6 +179,8 @@ type ChatInputProps = {
     onChange: (value: string) => void;
     /** On send handler */
     onSend: () => void;
+    /** On pause/cancel handler */
+    onPause?: () => void;
     /** Disabled state */
     disabled?: boolean;
     /** Placeholder text */
@@ -249,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 */
@@ -337,7 +353,7 @@ type StreamingMessageProps = {
     currentMessage?: string;
     /** Stream progress */
     streamProgress: StreamProgress;
-    /** When set to "WORKFLOW_FAILED" or "STREAM_NOT_STARTED", the UI shows the friendly error message. Other errors do not. */
+    /** "WORKFLOW_FAILED" and "STREAM_NOT_STARTED" show the friendly fallback; HTTP 409 conflicts render the backend message from the error payload. */
     error?: string;
     /** Streaming steps */
     steps?: StreamingStep[];
@@ -393,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 {
     /**
@@ -404,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

@@ -31,7 +31,7 @@ type MessageDisplay = {
     content: string;
     timestamp: string;
     isError?: boolean;
-    /** When set to "WORKFLOW_FAILED" or "STREAM_NOT_STARTED", the UI shows the friendly "Oops, something went wrong" message. Other errors (e.g. subintent failures) do not show it. */
+    /** "WORKFLOW_FAILED" and "STREAM_NOT_STARTED" show the friendly fallback; HTTP 409 conflicts render the backend message from the error payload. */
     errorDetails?: string;
     chunks?: ChunkDisplay[];
     tracingData?: unknown;
@@ -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 */
@@ -171,6 +179,8 @@ type ChatInputProps = {
     onChange: (value: string) => void;
     /** On send handler */
     onSend: () => void;
+    /** On pause/cancel handler */
+    onPause?: () => void;
     /** Disabled state */
     disabled?: boolean;
     /** Placeholder text */
@@ -249,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 */
@@ -337,7 +353,7 @@ type StreamingMessageProps = {
     currentMessage?: string;
     /** Stream progress */
     streamProgress: StreamProgress;
-    /** When set to "WORKFLOW_FAILED" or "STREAM_NOT_STARTED", the UI shows the friendly error message. Other errors do not. */
+    /** "WORKFLOW_FAILED" and "STREAM_NOT_STARTED" show the friendly fallback; HTTP 409 conflicts render the backend message from the error payload. */
     error?: string;
     /** Streaming steps */
     steps?: StreamingStep[];
@@ -393,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 {
     /**
@@ -404,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

@@ -62,6 +62,7 @@ function ChatInput({
   value,
   onChange,
   onSend,
+  onPause,
   disabled = false,
   placeholder = "Type your message...",
   isWaitingForResponse = false,
@@ -93,6 +94,7 @@ function ChatInput({
     }
   };
   const isInputDisabled = disabled || isWaitingForResponse;
+  const showPauseButton = isWaitingForResponse && onPause;
   const showVoiceButton = enableVoice && onVoicePress != null;
   const isVoiceButtonDisabled = isWaitingForResponse || !voiceAvailable || !isSessionParamsConfigured;
   const canSend = !isInputDisabled && !!value.trim();
@@ -173,7 +175,22 @@ function ChatInput({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              showPauseButton ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onPause,
+                  className: cn(
+                    "flex items-center justify-center",
+                    "w-8 h-8 rounded-full",
+                    "payman-chat-input-btn-pause",
+                    "hover:opacity-90 active:scale-95",
+                    "transition-all duration-150"
+                  ),
+                  "aria-label": "Stop response",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, { className: "w-3.5 h-3.5", fill: "currentColor" })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
@@ -197,6 +214,48 @@ function ChatInput({
     }
   );
 }
+
+// src/utils/errorMessages.ts
+var WORKFLOW_FAILED = "WORKFLOW_FAILED";
+var STREAM_NOT_STARTED = "STREAM_NOT_STARTED";
+var HTTP_ERROR_PREFIX = /^HTTP\s+(\d+)\s*:\s*([\s\S]+)$/;
+function isFriendlyWorkflowError(errorDetails) {
+  if (!errorDetails) return false;
+  return errorDetails === WORKFLOW_FAILED || errorDetails === STREAM_NOT_STARTED || errorDetails.includes(WORKFLOW_FAILED);
+}
+function parseErrorPayload(payload) {
+  try {
+    const parsed = JSON.parse(payload);
+    if (typeof parsed === "string") {
+      return { message: parsed.trim() || void 0 };
+    }
+    if (typeof parsed === "object" && parsed !== null) {
+      const record = parsed;
+      return {
+        status: typeof record.status === "number" ? record.status : void 0,
+        message: typeof record.message === "string" && record.message.trim() ? record.message.trim() : void 0
+      };
+    }
+  } catch {
+  }
+  return {};
+}
+function getConflictErrorMessage(errorDetails) {
+  if (!errorDetails) return void 0;
+  const trimmedError = errorDetails.trim();
+  const httpMatch = trimmedError.match(HTTP_ERROR_PREFIX);
+  const httpStatus = httpMatch ? Number(httpMatch[1]) : void 0;
+  const rawPayload = (httpMatch ? httpMatch[2] : trimmedError).trim();
+  const payload = parseErrorPayload(rawPayload);
+  const status = payload.status ?? httpStatus;
+  if (status !== 409) {
+    return void 0;
+  }
+  if (payload.message) {
+    return payload.message;
+  }
+  return rawPayload || void 0;
+}
 function ThinkingBlock({ text }) {
   const [isOpen, setIsOpen] = react.useState(false);
   const hasContent = typeof text === "string" && text.trim().length > 0;
@@ -238,12 +297,6 @@ function ThinkingBlock({ text }) {
   ] });
 }
 var FRIENDLY_ERROR_MESSAGE = "Oops, something went wrong. Please try again.";
-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);
@@ -283,7 +336,8 @@ function AgentMessage({
   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 conflictErrorMessage = getConflictErrorMessage(message.errorDetails);
+  const isError = !!conflictErrorMessage || (isFriendlyWorkflowError(message.errorDetails) || looksLikeRawError(content)) && !hasMeaningfulContent || completedWithNoContent;
   const activeThinkingText = message.activeThinkingText;
   const allThinkingText = message.allThinkingText;
   const currentStep = react.useMemo(
@@ -480,7 +534,7 @@ function AgentMessage({
                             {
                               remarkPlugins: [remarkGfm__default.default],
                               components: markdownComponents(),
-                              children: isError ? FRIENDLY_ERROR_MESSAGE : content || (isStreaming ? "Thinking..." : isCancelled ? "Request was stopped." : "")
+                              children: isError ? conflictErrorMessage ?? FRIENDLY_ERROR_MESSAGE : content || (isStreaming ? "Thinking..." : isCancelled ? "Request was stopped." : "")
                             }
                           )
                         }
@@ -717,6 +771,7 @@ function MessageRowSkeleton({
   );
 }
 var SCROLL_THRESHOLD = 150;
+var LOAD_MORE_THRESHOLD = 80;
 function MessageList({
   messages,
   isLoading = false,
@@ -736,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;
@@ -753,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;
@@ -868,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(
@@ -1375,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);
@@ -1386,6 +1468,7 @@ function PaymanChat({
     isWaitingForResponse,
     resetSession,
     clearMessages,
+    prependMessages,
     cancelStream,
     getSessionId,
     getMessages
@@ -1422,6 +1505,7 @@ function PaymanChat({
     () => ({
       resetSession,
       clearMessages,
+      prependMessages,
       cancelStream,
       getSessionId,
       getMessages,
@@ -1430,6 +1514,7 @@ function PaymanChat({
     [
       resetSession,
       clearMessages,
+      prependMessages,
       cancelStream,
       getSessionId,
       getMessages,
@@ -1547,7 +1632,10 @@ function PaymanChat({
             showStreamingDot,
             streamingStepsText,
             completedStepsText,
-            onExecutionTraceClick
+            onExecutionTraceClick,
+            onLoadMoreMessages,
+            isLoadingMoreMessages,
+            hasMoreMessages
           }
         ),
         hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1556,6 +1644,7 @@ function PaymanChat({
             value: inputValue,
             onChange: setInputValue,
             onSend: handleSend,
+            onPause: cancelStream,
             disabled: isInputDisabled,
             placeholder: isRecording ? "Listening..." : placeholder,
             isWaitingForResponse,