@paymanai/payman-ask-sdk 1.2.16 → 1.2.18

package/dist/index.mjs

@@ -1,10 +1,10 @@
 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, forwardRef, useState, useRef, useMemo, useImperativeHandle, useEffect, useCallback, useLayoutEffect, useContext } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { createContext, forwardRef, useState, useRef, useEffect, useMemo, useImperativeHandle, useCallback, useLayoutEffect, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { motion, AnimatePresence } from 'framer-motion';
-import { MessageCircle, ArrowDown, Square, Mic, ArrowUp, ShieldCheck, Loader2, X, Check, RefreshCw, User, Clock, Sparkles, Binoculars, ChevronDown, ChevronRight } from 'lucide-react';
+import { Check, RotateCcw, Mic, ArrowUp, ArrowDown, ShieldCheck, Loader2, X, RefreshCw, User, Clock, Sparkles, Binoculars, ChevronDown, ChevronRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -52,6 +52,7 @@ function formatElapsedTime(ms) {
   if (ms < 1e3) return `${ms}ms`;
   return `${(ms / 1e3).toFixed(1)}s`;
 }
+var AI_DISCLAIMER_TEXT = "AI can make mistakes. Please double-check responses.";
 function ChatInput({
   value,
   onChange,
@@ -67,20 +68,25 @@ function ChatInput({
   enableVoice = false,
   onVoicePress,
   voiceAvailable = false,
-  isRecording = false
+  isRecording = false,
+  transcribedText = "",
+  onCancelRecording,
+  onConfirmRecording,
+  showResetSession = false,
+  onResetSession
 }) {
   const textareaRef = useRef(null);
   const containerRef = useRef(null);
   const prevWaitingRef = useRef(isWaitingForResponse);
+  const [recordingSeconds, setRecordingSeconds] = useState(0);
+  const recordingTimerRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
       const scrollHeight = textareaRef.current.scrollHeight;
       const maxHeight = 160;
-      textareaRef.current.style.height = `${Math.min(
-        scrollHeight,
-        maxHeight
-      )}px`;
+      textareaRef.current.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
     }
   }, [value]);
   useEffect(() => {
@@ -98,6 +104,25 @@ function ChatInput({
       });
     }
   }, [isWaitingForResponse]);
+  useEffect(() => {
+    if (isRecording) {
+      setRecordingSeconds(0);
+      recordingTimerRef.current = setInterval(() => {
+        setRecordingSeconds((s) => s + 1);
+      }, 1e3);
+    } else {
+      if (recordingTimerRef.current) {
+        clearInterval(recordingTimerRef.current);
+        recordingTimerRef.current = null;
+      }
+      setRecordingSeconds(0);
+    }
+    return () => {
+      if (recordingTimerRef.current) {
+        clearInterval(recordingTimerRef.current);
+      }
+    };
+  }, [isRecording]);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -113,100 +138,180 @@ function ChatInput({
     if (!isSessionParamsConfigured) return "Configure session params to begin";
     return placeholder;
   };
+  const formatTime = useCallback((seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+  }, []);
+  const handleCancel = () => {
+    if (onCancelRecording) {
+      onCancelRecording();
+    } else if (onVoicePress) {
+      onVoicePress();
+    }
+  };
+  const handleConfirm = () => {
+    if (onConfirmRecording) {
+      onConfirmRecording();
+    } else if (onVoicePress) {
+      onVoicePress();
+    }
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
-      className: cn("flex-shrink-0 w-full", className),
-      style: { flexShrink: 0 },
-      children: /* @__PURE__ */ jsx("div", { className: "px-3 pb-3 pt-1.5 w-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full max-w-2xl mx-auto", children: /* @__PURE__ */ jsxs(
-        motion.div,
-        {
-          initial: false,
-          className: cn(
-            "flex items-end overflow-hidden",
-            "payman-chat-input"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              "textarea",
-              {
-                ref: textareaRef,
-                value,
-                onChange: (e) => onChange(e.target.value),
-                onKeyDown: handleKeyDown,
-                onClick,
-                disabled: isInputDisabled,
-                placeholder: getPlaceholder(),
-                className: cn(
-                  "payman-chat-input-field",
-                  "focus:outline-none resize-none overflow-y-auto",
-                  "flex-1 min-w-0 py-3"
-                ),
-                style: {
-                  minHeight: "44px",
-                  maxHeight: "160px",
-                  paddingLeft: "18px",
-                  paddingRight: "8px"
-                },
-                rows: 1
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 p-2", children: [
-              showVoiceButton && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: onVoicePress,
-                  disabled: isVoiceButtonDisabled,
-                  className: cn(
-                    "relative flex items-center justify-center",
-                    "w-8 h-8 rounded-full transition-all duration-200",
-                    "payman-chat-input-btn-voice",
-                    isRecording && "recording"
+      className: cn("payman-chat-input-wrapper", className),
+      children: /* @__PURE__ */ jsx("div", { className: "payman-chat-input-container", children: /* @__PURE__ */ jsxs("div", { className: "payman-chat-input-inner", children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isRecording ? (
+          /* ======== Recording State ======== */
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 6 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: 6 },
+              transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
+              className: "payman-chat-input payman-chat-input--recording",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "payman-recording-transcript-area", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: transcribedText ? /* @__PURE__ */ jsxs(
+                  motion.p,
+                  {
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                    transition: { duration: 0.15 },
+                    className: "payman-recording-transcript-text",
+                    children: [
+                      transcribedText,
+                      /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "payman-recording-cursor",
+                          animate: { opacity: [1, 0] },
+                          transition: { duration: 0.8, repeat: Infinity, repeatType: "reverse" }
+                        }
+                      )
+                    ]
+                  },
+                  "text"
+                ) : /* @__PURE__ */ jsx(
+                  motion.p,
+                  {
+                    initial: { opacity: 0 },
+                    animate: { opacity: 0.5 },
+                    className: "payman-recording-transcript-placeholder",
+                    children: "Listening..."
+                  },
+                  "placeholder"
+                ) }) }),
+                /* @__PURE__ */ jsxs("div", { className: "payman-recording-bar", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCancel,
+                      className: "payman-recording-btn-cancel",
+                      "aria-label": "Cancel recording",
+                      children: "Cancel"
+                    }
                   ),
-                  "aria-label": isRecording ? "Stop recording" : "Voice input",
-                  children: [
-                    isRecording && /* @__PURE__ */ jsx(
-                      "span",
+                  /* @__PURE__ */ jsxs("div", { className: "payman-recording-indicator", children: [
+                    /* @__PURE__ */ jsx("span", { className: "payman-recording-dot" }),
+                    /* @__PURE__ */ jsx("span", { className: "payman-recording-timer", children: formatTime(recordingSeconds) })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleConfirm,
+                      className: "payman-recording-btn-confirm",
+                      "aria-label": "Confirm recording",
+                      children: /* @__PURE__ */ jsx(Check, { className: "w-4 h-4", strokeWidth: 2.5 })
+                    }
+                  )
+                ] })
+              ]
+            },
+            "recording"
+          )
+        ) : (
+          /* ======== Normal Input State ======== */
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: false,
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: 6 },
+              transition: { duration: 0.2 },
+              className: cn(
+                "payman-chat-input",
+                isFocused && "payman-chat-input--focused"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    ref: textareaRef,
+                    value,
+                    onChange: (e) => onChange(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    onFocus: () => setIsFocused(true),
+                    onBlur: () => setIsFocused(false),
+                    onClick,
+                    disabled: isInputDisabled,
+                    placeholder: getPlaceholder(),
+                    className: "payman-chat-input-field",
+                    rows: 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "payman-chat-input-bottom", children: [
+                  /* @__PURE__ */ jsx("div", { className: "payman-chat-input-actions-left", children: showResetSession && onResetSession && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onResetSession,
+                      disabled: isWaitingForResponse,
+                      className: "payman-chat-input-btn-reset",
+                      "aria-label": "New Session",
+                      children: [
+                        /* @__PURE__ */ jsx(RotateCcw, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }),
+                        /* @__PURE__ */ jsx("span", { className: "payman-chat-input-btn-reset-tooltip", children: "New Session" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "payman-chat-input-actions", children: [
+                    showVoiceButton && /* @__PURE__ */ jsx(
+                      "button",
                       {
-                        className: "absolute inset-0 rounded-full border-2 animate-ping opacity-40",
-                        style: {
-                          borderColor: "var(--payman-input-btn-voice-recording-ring)"
-                        }
+                        type: "button",
+                        onClick: onVoicePress,
+                        disabled: isVoiceButtonDisabled,
+                        className: "payman-chat-input-btn-voice",
+                        "aria-label": "Voice input",
+                        children: /* @__PURE__ */ jsx(Mic, { className: "w-[18px] h-[18px]" })
                       }
                     ),
-                    isRecording ? /* @__PURE__ */ jsx(
-                      Square,
+                    /* @__PURE__ */ jsx(
+                      "button",
                       {
-                        className: "w-3 h-3 relative z-10",
-                        fill: "currentColor"
+                        type: "button",
+                        onClick: onSend,
+                        disabled: !canSend,
+                        className: "payman-chat-input-btn-send",
+                        "aria-label": "Send message",
+                        children: /* @__PURE__ */ jsx(ArrowUp, { className: "w-4 h-4", strokeWidth: 2.5 })
                       }
-                    ) : /* @__PURE__ */ jsx(Mic, { className: "w-4 h-4" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onSend,
-                  disabled: !canSend,
-                  className: cn(
-                    "flex items-center justify-center",
-                    "w-8 h-8 rounded-full",
-                    "payman-chat-input-btn-send",
-                    "hover:opacity-90 active:scale-95",
-                    "transition-all duration-150"
-                  ),
-                  "aria-label": "Send message",
-                  children: /* @__PURE__ */ jsx(ArrowUp, { className: "w-4 h-4", strokeWidth: 2.5 })
-                }
-              )
-            ] })
-          ]
-        }
-      ) }) })
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            "input"
+          )
+        ) }),
+        /* @__PURE__ */ jsx("p", { className: "payman-chat-input-disclaimer", children: AI_DISCLAIMER_TEXT })
+      ] }) })
     }
   );
 }
@@ -773,6 +878,7 @@ function MessageList({
   isLoading = false,
   emptyStateText = "What can I help with?",
   showEmptyStateIcon = true,
+  emptyStateComponent,
   layout = "full-width",
   showTimestamps = false,
   stage = "DEV",
@@ -897,7 +1003,7 @@ function MessageList({
   }
   if (messages.length === 0) {
     const lines = emptyStateText.split("\n").map((l) => l.trim()).filter(Boolean);
-    return /* @__PURE__ */ jsx("div", { className: cn("payman-empty-root p-8", className), children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: cn("payman-empty-root", className), children: /* @__PURE__ */ jsxs(
       motion.div,
       {
         initial: { opacity: 0, y: 20 },
@@ -905,17 +1011,17 @@ function MessageList({
         transition: { duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] },
         className: "payman-empty-content",
         children: [
-          showEmptyStateIcon && /* @__PURE__ */ jsx(
+          emptyStateComponent && /* @__PURE__ */ jsx(
             motion.div,
             {
-              initial: { scale: 0.85, opacity: 0 },
+              initial: { scale: 0.9, opacity: 0 },
               animate: { scale: 1, opacity: 1 },
-              transition: { delay: 0.08, duration: 0.45, ease: [0.25, 0.46, 0.45, 0.94] },
-              className: "payman-empty-icon-wrap",
-              children: /* @__PURE__ */ jsx(MessageCircle, { className: "h-7 w-7 payman-empty-icon", strokeWidth: 1.5 })
+              transition: { delay: 0.05, duration: 0.45, ease: [0.25, 0.46, 0.45, 0.94] },
+              className: "payman-empty-custom-component",
+              children: emptyStateComponent
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: lines.map((line, i) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "payman-empty-text-group", children: lines.map((line, i) => /* @__PURE__ */ jsx(
             motion.p,
             {
               initial: { opacity: 0, y: 6 },
@@ -1457,6 +1563,7 @@ var PaymanChat = forwardRef(function PaymanChat2({
 }, ref) {
   const [inputValue, setInputValue] = useState("");
   const prevInputValueRef = useRef(inputValue);
+  const [hasEverSentMessage, setHasEverSentMessage] = useState(false);
   const chat = useChat(config, callbacks);
   const {
     messages,
@@ -1469,6 +1576,11 @@ var PaymanChat = forwardRef(function PaymanChat2({
     getSessionId,
     getMessages
   } = chat;
+  useEffect(() => {
+    if (messages.length > 0 && !hasEverSentMessage) {
+      setHasEverSentMessage(true);
+    }
+  }, [messages.length, hasEverSentMessage]);
   const userActionState = chat.userActionState ?? DEFAULT_USER_ACTION_STATE;
   const approveUserAction = chat.approveUserAction ?? NOOP_ASYNC;
   const rejectUserAction = chat.rejectUserAction ?? NOOP_ASYNC;
@@ -1517,14 +1629,17 @@ var PaymanChat = forwardRef(function PaymanChat2({
       isWaitingForResponse
     ]
   );
+  const { onExecutionTraceClick, onResetSession } = callbacks;
   useImperativeHandle(ref, () => ({
-    resetSession,
+    resetSession: () => {
+      resetSession();
+      onResetSession?.();
+    },
     clearMessages,
     cancelStream,
     getSessionId,
     getMessages
-  }), [resetSession, clearMessages, cancelStream, getSessionId, getMessages]);
-  const { onExecutionTraceClick } = callbacks;
+  }), [resetSession, clearMessages, cancelStream, getSessionId, getMessages, onResetSession]);
   const {
     placeholder = "Type your message...",
     emptyStateText = "What can I help with?",
@@ -1546,7 +1661,9 @@ var PaymanChat = forwardRef(function PaymanChat2({
     animated = true,
     isChatDisabled = false,
     disabledComponent,
-    showEmptyStateIcon = true
+    showEmptyStateIcon = true,
+    emptyStateComponent,
+    showResetSession = false
   } = config;
   const isSessionParamsConfigured = useMemo(() => {
     if (!sessionParams) return false;
@@ -1554,9 +1671,9 @@ var PaymanChat = forwardRef(function PaymanChat2({
   }, [sessionParams?.id, sessionParams?.name]);
   useEffect(() => {
     const wasEmpty = prevInputValueRef.current.trim() === "";
-    const isEmpty = inputValue.trim() === "";
+    const isEmpty2 = inputValue.trim() === "";
     prevInputValueRef.current = inputValue;
-    if (!wasEmpty && isEmpty) {
+    if (!wasEmpty && isEmpty2) {
       clearTranscript();
       if (isRecording) {
         stopRecording();
@@ -1572,14 +1689,23 @@ var PaymanChat = forwardRef(function PaymanChat2({
       setInputValue("");
     }
   };
+  const handleCancelRecording = () => {
+    stopRecording();
+    clearTranscript();
+    setInputValue("");
+  };
+  const handleConfirmRecording = () => {
+    stopRecording();
+  };
   const isInputDisabled = isWaitingForResponse || !isSessionParamsConfigured || disableInput;
+  const isEmpty = messages.length === 0;
   if (isChatDisabled) {
     if (disabledComponent) {
       return /* @__PURE__ */ jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "bg-card overflow-hidden flex flex-col flex-[4]",
+            "bg-background overflow-hidden flex flex-col flex-[4]",
             className
           ),
           style,
@@ -1594,7 +1720,7 @@ var PaymanChat = forwardRef(function PaymanChat2({
       "div",
       {
         className: cn(
-          "bg-card overflow-hidden flex flex-col flex-[4]",
+          "bg-background overflow-hidden flex flex-col flex-[4]",
           className
         ),
         style,
@@ -1605,62 +1731,138 @@ var PaymanChat = forwardRef(function PaymanChat2({
       }
     ) });
   }
+  const inputElement = hasAskPermission && /* @__PURE__ */ jsx(
+    ChatInput,
+    {
+      value: inputValue,
+      onChange: setInputValue,
+      onSend: handleSend,
+      onPause: cancelStream,
+      disabled: isInputDisabled,
+      placeholder: isRecording ? "Listening..." : placeholder,
+      isWaitingForResponse,
+      hasSelectedSession: true,
+      isSessionParamsConfigured,
+      enableVoice: config.enableVoice === true,
+      onVoicePress: isRecording ? stopRecording : startRecording,
+      voiceAvailable: config.enableVoice === true && voiceAvailable,
+      isRecording,
+      transcribedText: inputValue,
+      onCancelRecording: handleCancelRecording,
+      onConfirmRecording: handleConfirmRecording,
+      inputStyle,
+      layout,
+      showResetSession,
+      onResetSession: () => {
+        resetSession();
+        onResetSession?.();
+      }
+    }
+  );
   return /* @__PURE__ */ jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "bg-card overflow-hidden flex flex-col flex-[4]",
+        "bg-background overflow-hidden flex flex-col flex-[4]",
         className
       ),
       style,
       children: [
         children,
-        /* @__PURE__ */ jsx(
-          MessageList,
-          {
-            messages,
-            isLoading: false,
-            emptyStateText,
-            showEmptyStateIcon,
-            layout,
-            showTimestamps,
-            stage: config.stage || "DEV",
-            animated,
-            showAgentName,
-            agentName,
-            showAvatars,
-            showUserAvatar,
-            showAssistantAvatar,
-            showExecutionSteps,
-            showStreamingDot,
-            streamingStepsText,
-            completedStepsText,
-            onExecutionTraceClick,
-            onLoadMoreMessages,
-            isLoadingMoreMessages,
-            hasMoreMessages
-          }
-        ),
-        hasAskPermission && /* @__PURE__ */ jsx(
-          ChatInput,
-          {
-            value: inputValue,
-            onChange: setInputValue,
-            onSend: handleSend,
-            onPause: cancelStream,
-            disabled: isInputDisabled,
-            placeholder: isRecording ? "Listening..." : placeholder,
-            isWaitingForResponse,
-            hasSelectedSession: true,
-            isSessionParamsConfigured,
-            enableVoice: config.enableVoice === true,
-            onVoicePress: isRecording ? stopRecording : startRecording,
-            voiceAvailable: config.enableVoice === true && voiceAvailable,
-            isRecording,
-            inputStyle,
-            layout
-          }
-        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isEmpty && !hasEverSentMessage ? (
+          /* ---- Centered empty state with input ---- */
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.3 },
+              className: "payman-empty-centered-layout",
+              children: /* @__PURE__ */ jsxs("div", { className: "payman-empty-centered-inner", children: [
+                /* @__PURE__ */ jsx(
+                  MessageList,
+                  {
+                    messages,
+                    isLoading: false,
+                    emptyStateText,
+                    showEmptyStateIcon,
+                    emptyStateComponent,
+                    layout,
+                    showTimestamps,
+                    stage: config.stage || "DEV",
+                    animated,
+                    showAgentName,
+                    agentName,
+                    showAvatars,
+                    showUserAvatar,
+                    showAssistantAvatar,
+                    showExecutionSteps,
+                    showStreamingDot,
+                    streamingStepsText,
+                    completedStepsText,
+                    onExecutionTraceClick,
+                    onLoadMoreMessages,
+                    isLoadingMoreMessages,
+                    hasMoreMessages
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0, y: 12 },
+                    animate: { opacity: 1, y: 0 },
+                    transition: { delay: 0.2, duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] },
+                    className: "payman-empty-centered-input",
+                    children: inputElement
+                  }
+                )
+              ] })
+            },
+            "empty-centered"
+          )
+        ) : (
+          /* ---- Normal chat layout ---- */
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: hasEverSentMessage ? { opacity: 0 } : false,
+              animate: { opacity: 1 },
+              transition: { duration: 0.3 },
+              className: "flex flex-col flex-1 min-h-0",
+              children: [
+                /* @__PURE__ */ jsx(
+                  MessageList,
+                  {
+                    messages,
+                    isLoading: false,
+                    emptyStateText,
+                    showEmptyStateIcon,
+                    emptyStateComponent,
+                    layout,
+                    showTimestamps,
+                    stage: config.stage || "DEV",
+                    animated,
+                    showAgentName,
+                    agentName,
+                    showAvatars,
+                    showUserAvatar,
+                    showAssistantAvatar,
+                    showExecutionSteps,
+                    showStreamingDot,
+                    streamingStepsText,
+                    completedStepsText,
+                    onExecutionTraceClick,
+                    onLoadMoreMessages,
+                    isLoadingMoreMessages,
+                    hasMoreMessages
+                  }
+                ),
+                inputElement
+              ]
+            },
+            "chat-layout"
+          )
+        ) }),
         /* @__PURE__ */ jsx(
           UserActionModal,
           {