@paymanai/payman-ask-sdk 1.2.11 → 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';
@@ -56,6 +56,7 @@ function ChatInput({
   value,
   onChange,
   onSend,
+  onPause,
   disabled = false,
   placeholder = "Type your message...",
   isWaitingForResponse = false,
@@ -87,6 +88,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();
@@ -167,7 +169,22 @@ function ChatInput({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(
+              showPauseButton ? /* @__PURE__ */ 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__ */ jsx(Square, { className: "w-3.5 h-3.5", fill: "currentColor" })
+                }
+              ) : /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -191,6 +208,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] = useState(false);
   const hasContent = typeof text === "string" && text.trim().length > 0;
@@ -232,12 +291,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);
@@ -277,7 +330,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 = useMemo(
@@ -474,7 +528,7 @@ function AgentMessage({
                             {
                               remarkPlugins: [remarkGfm],
                               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." : "")
                             }
                           )
                         }
@@ -711,6 +765,7 @@ function MessageRowSkeleton({
   );
 }
 var SCROLL_THRESHOLD = 150;
+var LOAD_MORE_THRESHOLD = 80;
 function MessageList({
   messages,
   isLoading = false,
@@ -730,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;
@@ -747,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;
@@ -862,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(
@@ -1369,7 +1448,10 @@ function PaymanChat({
   callbacks = {},
   className,
   style,
-  children
+  children,
+  onLoadMoreMessages,
+  isLoadingMoreMessages = false,
+  hasMoreMessages = false
 }) {
   const [inputValue, setInputValue] = useState("");
   const prevInputValueRef = useRef(inputValue);
@@ -1380,6 +1462,7 @@ function PaymanChat({
     isWaitingForResponse,
     resetSession,
     clearMessages,
+    prependMessages,
     cancelStream,
     getSessionId,
     getMessages
@@ -1416,6 +1499,7 @@ function PaymanChat({
     () => ({
       resetSession,
       clearMessages,
+      prependMessages,
       cancelStream,
       getSessionId,
       getMessages,
@@ -1424,6 +1508,7 @@ function PaymanChat({
     [
       resetSession,
       clearMessages,
+      prependMessages,
       cancelStream,
       getSessionId,
       getMessages,
@@ -1541,7 +1626,10 @@ function PaymanChat({
             showStreamingDot,
             streamingStepsText,
             completedStepsText,
-            onExecutionTraceClick
+            onExecutionTraceClick,
+            onLoadMoreMessages,
+            isLoadingMoreMessages,
+            hasMoreMessages
           }
         ),
         hasAskPermission && /* @__PURE__ */ jsx(
@@ -1550,6 +1638,7 @@ function PaymanChat({
             value: inputValue,
             onChange: setInputValue,
             onSend: handleSend,
+            onPause: cancelStream,
             disabled: isInputDisabled,
             placeholder: isRecording ? "Listening..." : placeholder,
             isWaitingForResponse,