@paymanai/payman-ask-sdk 2.0.2 → 2.0.4

package/dist/index.js

@@ -371,6 +371,7 @@ function UserMessageV2({
               "payman-v2-toast-inner",
               toast.tone === "success" ? "payman-v2-toast-success" : "payman-v2-toast-error"
             ),
+            style: { borderRadius: 9999 },
             children: [
               toast.tone === "success" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4", style: { color: "#059669" } }) : /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.AlertCircle,
@@ -1428,6 +1429,7 @@ function AssistantMessageV2({
               "payman-v2-toast-inner",
               toast.tone === "success" ? "payman-v2-toast-success" : "payman-v2-toast-error"
             ),
+            style: { borderRadius: 9999 },
             children: [
               toast.tone === "success" ? /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.Check,
@@ -2106,6 +2108,7 @@ var ChatInputV2 = react.forwardRef(
         if (textareaRef.current) {
           textareaRef.current.style.height = "auto";
           textareaRef.current.focus();
+          textareaRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
         }
       });
     }, [value, disabled, onClearEditing, onSend]);
@@ -2193,6 +2196,7 @@ var ChatInputV2 = react.forwardRef(
                 "textarea",
                 {
                   ref: textareaRef,
+                  autoFocus: true,
                   value,
                   onChange: (e) => {
                     if (isRecording) return;
@@ -2519,9 +2523,9 @@ function ImageLightboxV2({ src, alt, onClose }) {
     document.body
   );
 }
-var DEFAULT_WIDTH = 280;
-var DEFAULT_MIN_WIDTH = 240;
-var DEFAULT_MAX_WIDTH = 480;
+var DEFAULT_WIDTH = 260;
+var DEFAULT_MIN_WIDTH = 220;
+var DEFAULT_MAX_WIDTH = 440;
 var DEFAULT_PAGE_SIZE = 20;
 function getPersistKey(config, opts) {
   if (opts.persistKey) return opts.persistKey;
@@ -2740,10 +2744,11 @@ function SessionHistorySidebar({
   options,
   activeSessionId,
   loadingSessionId,
-  streamingSessionIds,
   recentlyCompletedSessionIds,
   optimisticActivity,
   onSelectSession,
+  onNewSession,
+  newSessionDisabled = false,
   mobileOpen,
   onMobileOpenChange
 }) {
@@ -2751,6 +2756,7 @@ function SessionHistorySidebar({
   const mobileThemeSourceRef = react.useRef(null);
   const [mobilePortalThemeStyle, setMobilePortalThemeStyle] = react.useState({});
   const history = useSessionHistory(config, options, optimisticActivity);
+  const showNewSessionButton = options.showNewSessionButton === true;
   react.useEffect(() => {
     if (!isMobile) return;
     setMobilePortalThemeStyle(readPortalThemeStyle(mobileThemeSourceRef.current));
@@ -2777,8 +2783,10 @@ function SessionHistorySidebar({
           history,
           activeSessionId,
           loadingSessionId,
-          streamingSessionIds,
           recentlyCompletedSessionIds,
+          showNewSessionButton,
+          onNewSession,
+          newSessionDisabled,
           onSelectSession: (s) => {
             onSelectSession(s);
             onMobileOpenChange(false);
@@ -2793,8 +2801,10 @@ function SessionHistorySidebar({
       history,
       activeSessionId,
       loadingSessionId,
-      streamingSessionIds,
       recentlyCompletedSessionIds,
+      showNewSessionButton,
+      onNewSession,
+      newSessionDisabled,
       onSelectSession
     }
   );
@@ -2803,11 +2813,14 @@ function DesktopSidebar({
   history,
   activeSessionId,
   loadingSessionId,
-  streamingSessionIds,
   recentlyCompletedSessionIds,
+  showNewSessionButton,
+  onNewSession,
+  newSessionDisabled,
   onSelectSession
 }) {
   const { width, setWidth, collapsed, setCollapsed, minWidth, maxWidth } = history;
+  const reduceMotion = framerMotion.useReducedMotion();
   const dragStateRef = react.useRef(null);
   const [isDragging, setIsDragging] = react.useState(false);
   const [handleHover, setHandleHover] = react.useState(false);
@@ -2839,25 +2852,42 @@ function DesktopSidebar({
       window.removeEventListener("pointercancel", onEnd);
     };
   }, [isDragging, setWidth]);
+  const handleActive = handleHover || isDragging;
+  const sidebarEnter = reduceMotion ? { duration: 0.1, ease: "easeOut" } : { duration: 0.16, ease: [0.25, 0.46, 0.45, 0.94] };
   if (collapsed) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      CollapsedButton,
+      framerMotion.motion.div,
       {
-        onExpand: () => setCollapsed(false),
-        history,
-        activeSessionId,
-        loadingSessionId,
-        streamingSessionIds,
-        recentlyCompletedSessionIds,
-        onSelectSession
-      }
+        className: "payman-sidebar-collapsed-mount",
+        initial: reduceMotion ? false : { opacity: 0, scale: 0.96 },
+        animate: { opacity: 1, scale: 1 },
+        transition: sidebarEnter,
+        style: { alignSelf: "flex-start" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          CollapsedButton,
+          {
+            onExpand: () => setCollapsed(false),
+            history,
+            activeSessionId,
+            loadingSessionId,
+            recentlyCompletedSessionIds,
+            showNewSessionButton,
+            onNewSession,
+            newSessionDisabled,
+            onSelectSession
+          }
+        )
+      },
+      "payman-sidebar-desktop-collapsed"
     );
   }
-  const handleActive = handleHover || isDragging;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "aside",
+    framerMotion.motion.aside,
     {
       className: "payman-sidebar payman-sidebar-desktop",
+      initial: reduceMotion ? false : { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: sidebarEnter,
       style: {
         width,
         minWidth,
@@ -2868,17 +2898,24 @@ function DesktopSidebar({
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
-        transition: isDragging ? "none" : "width 140ms ease"
+        transition: isDragging ? "none" : "width 100ms ease"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, { onCollapse: () => setCollapsed(true) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarTopBar,
+          {
+            onCollapse: () => setCollapsed(true),
+            showNewSessionButton,
+            onNewSession,
+            newSessionDisabled
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           SessionList,
           {
             history,
             activeSessionId,
             loadingSessionId,
-            streamingSessionIds,
             recentlyCompletedSessionIds,
             onSelectSession
           }
@@ -2916,26 +2953,30 @@ function DesktopSidebar({
                   borderRadius: 999,
                   background: handleActive ? "var(--payman-v2-text-3)" : "transparent",
                   opacity: handleActive ? 1 : 0,
-                  transition: "opacity 140ms ease, background 140ms ease"
+                  transition: "opacity 100ms ease, background 100ms ease"
                 }
               }
             )
           }
         )
       ]
-    }
+    },
+    "payman-sidebar-desktop-expanded"
   );
 }
-var POPOVER_LEAVE_DELAY_MS = 200;
+var POPOVER_LEAVE_DELAY_MS = 220;
 function CollapsedButton({
   onExpand,
   history,
   activeSessionId,
   loadingSessionId,
-  streamingSessionIds,
   recentlyCompletedSessionIds,
+  showNewSessionButton,
+  onNewSession,
+  newSessionDisabled,
   onSelectSession
 }) {
+  const reduceMotion = framerMotion.useReducedMotion();
   const [hoverOpen, setHoverOpen] = react.useState(false);
   const leaveTimerRef = react.useRef(null);
   const openPopover = () => {
@@ -2964,22 +3005,29 @@ function CollapsedButton({
       style: { position: "relative", alignSelf: "flex-start" },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          framerMotion.motion.button,
           {
             type: "button",
             "aria-label": "Expand sidebar",
             title: "Expand sidebar",
             onClick: onExpand,
             className: "payman-sidebar-collapsed-button",
+            whileHover: reduceMotion ? void 0 : { scale: 1.04 },
+            whileTap: reduceMotion ? void 0 : { scale: 0.97 },
+            transition: { type: "spring", stiffness: 620, damping: 32 },
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { size: 16 })
           }
         ),
-        hoverOpen && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hoverOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
           {
             className: "payman-sidebar-popover",
             onMouseEnter: openPopover,
             onMouseLeave: schedulePopoverClose,
+            initial: reduceMotion ? { opacity: 0 } : { opacity: 0, x: -6, scale: 0.98 },
+            animate: reduceMotion ? { opacity: 1 } : { opacity: 1, x: 0, scale: 1 },
+            exit: reduceMotion ? { opacity: 0 } : { opacity: 0, x: -4, scale: 0.99 },
+            transition: reduceMotion ? { duration: 0.08 } : { duration: 0.14, ease: [0.25, 0.46, 0.45, 0.94] },
             style: {
               position: "absolute",
               left: "calc(100% + 6px)",
@@ -2989,17 +3037,24 @@ function CollapsedButton({
               zIndex: 50,
               display: "flex",
               flexDirection: "column",
-              overflow: "hidden"
+              overflow: "hidden",
+              transformOrigin: "left center"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarTopBar,
+                {
+                  showNewSessionButton,
+                  onNewSession,
+                  newSessionDisabled
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 SessionList,
                 {
                   history,
                   activeSessionId,
                   loadingSessionId,
-                  streamingSessionIds,
                   recentlyCompletedSessionIds,
                   onSelectSession: (s) => {
                     onSelectSession(s);
@@ -3008,8 +3063,9 @@ function CollapsedButton({
                 }
               )
             ]
-          }
-        )
+          },
+          "payman-sidebar-hover-popover"
+        ) })
       ]
     }
   );
@@ -3021,10 +3077,16 @@ function MobileDrawer({
   history,
   activeSessionId,
   loadingSessionId,
-  streamingSessionIds,
   recentlyCompletedSessionIds,
+  showNewSessionButton,
+  onNewSession,
+  newSessionDisabled,
   onSelectSession
 }) {
+  const handleNewSession = onNewSession ? () => {
+    onOpenChange(false);
+    onNewSession();
+  } : void 0;
   if (!open || typeof document === "undefined") return null;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3055,14 +3117,22 @@ function MobileDrawer({
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-sheet-grabber", "aria-hidden": true }),
-              /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, { onCollapse: () => onOpenChange(false), mobile: true }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarTopBar,
+                {
+                  onCollapse: () => onOpenChange(false),
+                  mobile: true,
+                  showNewSessionButton,
+                  onNewSession: handleNewSession,
+                  newSessionDisabled
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 SessionList,
                 {
                   history,
                   activeSessionId,
                   loadingSessionId,
-                  streamingSessionIds,
                   recentlyCompletedSessionIds,
                   onSelectSession
                 }
@@ -3075,12 +3145,48 @@ function MobileDrawer({
     document.body
   );
 }
+function SidebarTopBar({
+  onCollapse,
+  mobile = false,
+  showNewSessionButton = false,
+  onNewSession,
+  newSessionDisabled = false
+}) {
+  const shouldShowNewSession = showNewSessionButton && onNewSession != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "payman-sidebar-topbar",
+        shouldShowNewSession && "has-new-session"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, { onCollapse, mobile }),
+        shouldShowNewSession && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-new-session-wrap", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "payman-sidebar-new-session-button",
+            onClick: onNewSession,
+            disabled: newSessionDisabled,
+            "aria-label": "New Session",
+            title: "New Session",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 13, strokeWidth: 2.4 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New Session" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
 function SidebarHeader({
   onCollapse,
   mobile = false
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-sidebar-header", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Recent sessions" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-sidebar-header-title", children: "Recent sessions" }),
     onCollapse && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -3088,7 +3194,8 @@ function SidebarHeader({
         "aria-label": mobile ? "Close recent sessions" : "Collapse sidebar",
         title: mobile ? "Close recent sessions" : "Collapse sidebar",
         onClick: onCollapse,
-        children: mobile ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 14 })
+        className: "payman-sidebar-header-icon-button",
+        children: mobile ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 15 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 13 })
       }
     )
   ] });
@@ -3097,7 +3204,6 @@ function SessionList({
   history,
   activeSessionId,
   loadingSessionId,
-  streamingSessionIds,
   recentlyCompletedSessionIds,
   onSelectSession
 }) {
@@ -3134,7 +3240,6 @@ function SessionList({
                   session: s,
                   isActive: s.sessionId === activeSessionId,
                   isLoading: s.sessionId === loadingSessionId,
-                  isStreaming: streamingSessionIds?.has(s.sessionId) ?? false,
                   isRecentlyCompleted: recentlyCompletedSessionIds?.has(s.sessionId) ?? false,
                   onSelect: onSelectSession
                 },
@@ -3167,26 +3272,12 @@ function SessionRow({
   session,
   isActive,
   isLoading,
-  isStreaming,
   isRecentlyCompleted,
   onSelect
 }) {
   let statusNode = null;
   let statusLabel;
-  if (isStreaming) {
-    statusNode = /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
-      {
-        className: "payman-sidebar-row-status payman-sidebar-row-status-live",
-        "aria-hidden": true,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-sidebar-row-live-dot" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-sidebar-row-live-track" })
-        ]
-      }
-    );
-    statusLabel = "Running";
-  } else if (isRecentlyCompleted) {
+  if (isRecentlyCompleted) {
     statusNode = /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -3207,7 +3298,7 @@ function SessionRow({
       onClick: () => onSelect(session),
       className: cn("payman-sidebar-row", isActive && "is-active"),
       title: statusLabel ? `${session.sessionTitle || "Untitled session"} \u2014 ${statusLabel}` : session.sessionTitle,
-      "aria-busy": isLoading || isStreaming || void 0,
+      "aria-busy": isLoading || void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-sidebar-row-main", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-sidebar-row-title", children: session.sessionTitle || "Untitled session" }),
         statusNode
@@ -3296,10 +3387,17 @@ function groupSessionsByDate(sessions, now) {
   }
   return orderedGroups;
 }
+function titleCaseDateHeading(label) {
+  return label.replace(/[\p{L}\p{M}]+/gu, (word) => {
+    const lower = word.toLocaleLowerCase(void 0);
+    const first = lower.charAt(0).toLocaleUpperCase(void 0);
+    return first + lower.slice(1);
+  });
+}
 function getSessionDateBucket(iso, now) {
   const date = new Date(iso);
   if (Number.isNaN(date.getTime())) {
-    return { key: "older", label: "Older" };
+    return { key: "older", label: titleCaseDateHeading("Older") };
   }
   const dayKey = [
     date.getFullYear(),
@@ -3311,22 +3409,26 @@ function getSessionDateBucket(iso, now) {
   const dayDiff = Math.round(
     (today.getTime() - sessionDay.getTime()) / 864e5
   );
-  if (dayDiff <= 0) return { key: dayKey, label: "Today" };
-  if (dayDiff === 1) return { key: dayKey, label: "Yesterday" };
+  if (dayDiff <= 0) return { key: dayKey, label: titleCaseDateHeading("Today") };
+  if (dayDiff === 1) return { key: dayKey, label: titleCaseDateHeading("Yesterday") };
   if (dayDiff < 7) {
     return {
       key: dayKey,
-      label: date.toLocaleDateString(void 0, { weekday: "long" })
+      label: titleCaseDateHeading(
+        date.toLocaleDateString(void 0, { weekday: "long" })
+      )
     };
   }
   const sameYear = date.getFullYear() === now.getFullYear();
   return {
     key: dayKey,
-    label: date.toLocaleDateString(void 0, {
-      month: "short",
-      day: "numeric",
-      year: sameYear ? void 0 : "numeric"
-    })
+    label: titleCaseDateHeading(
+      date.toLocaleDateString(void 0, {
+        month: "long",
+        day: "numeric",
+        year: sameYear ? void 0 : "numeric"
+      })
+    )
   };
 }
 var DEFAULT_PLACEHOLDER = "Type your message...";
@@ -3460,19 +3562,12 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
   const [isResetSessionConfirmOpen, setIsResetSessionConfirmOpen] = react.useState(false);
   const [mobileSidebarOpen, setMobileSidebarOpen] = react.useState(false);
   const [optimisticSessionActivity, setOptimisticSessionActivity] = react.useState(null);
-  const [streamingSessionIds, setStreamingSessionIds] = react.useState(() => /* @__PURE__ */ new Set());
   const [recentlyCompletedSessionIds, setRecentlyCompletedSessionIds] = react.useState(() => /* @__PURE__ */ new Set());
   const recentlyCompletedTimersRef = react.useRef(
     /* @__PURE__ */ new Map()
   );
   const RECENTLY_COMPLETED_DURATION_MS = 4e3;
-  const markSessionStreaming = react.useCallback((sessionId) => {
-    setStreamingSessionIds((prev) => {
-      if (prev.has(sessionId)) return prev;
-      const next = new Set(prev);
-      next.add(sessionId);
-      return next;
-    });
+  const clearRecentlyCompletedForSession = react.useCallback((sessionId) => {
     setRecentlyCompletedSessionIds((prev) => {
       if (!prev.has(sessionId)) return prev;
       const next = new Set(prev);
@@ -3486,12 +3581,6 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
     }
   }, []);
   const markSessionCompleted = react.useCallback((sessionId) => {
-    setStreamingSessionIds((prev) => {
-      if (!prev.has(sessionId)) return prev;
-      const next = new Set(prev);
-      next.delete(sessionId);
-      return next;
-    });
     setRecentlyCompletedSessionIds((prev) => {
       const next = new Set(prev);
       next.add(sessionId);
@@ -3540,7 +3629,7 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
         const sessionId = latestSessionIdRef.current;
         if (!sessionId) return;
         lastOptimisticSessionIdRef.current = sessionId;
-        markSessionStreaming(sessionId);
+        clearRecentlyCompletedForSession(sessionId);
         setOptimisticSessionActivity({
           key: `message:${sessionId}:${Date.now()}`,
           sessionId,
@@ -3552,15 +3641,6 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
         const previousSessionId = latestSessionIdRef.current;
         latestSessionIdRef.current = sessionId;
         sentryCallbacks.onSessionIdChange?.(sessionId);
-        if (previousSessionId && previousSessionId !== sessionId) {
-          setStreamingSessionIds((prev) => {
-            if (!prev.has(previousSessionId)) return prev;
-            const next = new Set(prev);
-            next.delete(previousSessionId);
-            next.add(sessionId);
-            return next;
-          });
-        }
         if (previousSessionId && previousSessionId !== sessionId && lastOptimisticSessionIdRef.current === previousSessionId) {
           lastOptimisticSessionIdRef.current = sessionId;
           setOptimisticSessionActivity(
@@ -3587,20 +3667,12 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
       },
       onError: (error) => {
         sentryCallbacks.onError?.(error);
-        const sessionId = latestSessionIdRef.current;
-        if (!sessionId) return;
-        setStreamingSessionIds((prev) => {
-          if (!prev.has(sessionId)) return prev;
-          const next = new Set(prev);
-          next.delete(sessionId);
-          return next;
-        });
       }
     }),
     [
       buildOptimisticSessionTitle,
+      clearRecentlyCompletedForSession,
       markSessionCompleted,
-      markSessionStreaming,
       sentryCallbacks
     ]
   );
@@ -3894,10 +3966,11 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
       options: sessionHistory.options,
       activeSessionId: currentSessionId,
       loadingSessionId,
-      streamingSessionIds,
       recentlyCompletedSessionIds,
       optimisticActivity: optimisticSessionActivity,
       onSelectSession: handleSelectSession,
+      onNewSession: requestResetSession,
+      newSessionDisabled: isWaitingForResponse || isRecording,
       mobileOpen: mobileSidebarOpen,
       onMobileOpenChange: setMobileSidebarOpen
     }
@@ -3914,7 +3987,7 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
       },
       children: [
         sidebarElement,
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
@@ -3924,32 +3997,48 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
               display: "flex",
               flexDirection: "column",
               overflow: "hidden",
-              alignItems: showEmptyShell ? "center" : "stretch",
-              justifyContent: showEmptyShell ? "center" : "flex-start"
+              alignItems: "stretch",
+              justifyContent: "flex-start"
             },
-            children: [
-              showEmptyShell ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "100%",
-                    minHeight: 0,
-                    marginTop: "1.5rem"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: showEmptyShell ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  flex: "1 1 0%",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "100%",
+                  minHeight: 0,
+                  gap: "1.25rem",
+                  padding: "0 1rem 1rem",
+                  boxSizing: "border-box"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     EmptyState2,
                     {
                       text: emptyStateText,
                       content: emptyStateComponent,
                       showIcon: showEmptyStateIcon
                     }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        width: "100%",
+                        maxWidth: "var(--payman-v2-max-content-width, 42rem)",
+                        flexShrink: 0
+                      },
+                      children: inputElement
+                    }
                   )
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
                 MessageListV2,
                 {
                   ref: messageListV2Ref,
@@ -3996,7 +4085,7 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
                   children: inputElement
                 }
               )
-            ]
+            ] })
           }
         )
       ]
@@ -4052,10 +4141,9 @@ function EmptyState2({
         alignItems: "center",
         justifyContent: "center",
         textAlign: "center",
-        padding: "24px 16px",
+        padding: "8px 8px 0",
         gap: 12,
-        flex: 1,
-        minHeight: 0
+        flex: "0 0 auto"
       },
       children: [
         content,