@paymanai/payman-ask-sdk 2.0.3 → 2.0.4

package/dist/index.native.js

@@ -60,9 +60,9 @@ var styles = reactNative.StyleSheet.create({
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-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;
@@ -281,10 +281,11 @@ function SessionHistorySidebar({
   options,
   activeSessionId,
   loadingSessionId,
-  streamingSessionIds,
   recentlyCompletedSessionIds,
   optimisticActivity,
   onSelectSession,
+  onNewSession,
+  newSessionDisabled = false,
   mobileOpen,
   onMobileOpenChange
 }) {
@@ -292,6 +293,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));
@@ -318,8 +320,10 @@ function SessionHistorySidebar({
           history,
           activeSessionId,
           loadingSessionId,
-          streamingSessionIds,
           recentlyCompletedSessionIds,
+          showNewSessionButton,
+          onNewSession,
+          newSessionDisabled,
           onSelectSession: (s3) => {
             onSelectSession(s3);
             onMobileOpenChange(false);
@@ -334,8 +338,10 @@ function SessionHistorySidebar({
       history,
       activeSessionId,
       loadingSessionId,
-      streamingSessionIds,
       recentlyCompletedSessionIds,
+      showNewSessionButton,
+      onNewSession,
+      newSessionDisabled,
       onSelectSession
     }
   );
@@ -344,11 +350,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);
@@ -380,25 +389,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,
@@ -409,17 +435,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
           }
@@ -457,26 +490,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 = () => {
@@ -505,22 +542,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)",
@@ -530,17 +574,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: (s3) => {
                     onSelectSession(s3);
@@ -549,8 +600,9 @@ function CollapsedButton({
                 }
               )
             ]
-          }
-        )
+          },
+          "payman-sidebar-hover-popover"
+        ) })
       ]
     }
   );
@@ -562,10 +614,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(
@@ -596,14 +654,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
                 }
@@ -616,12 +682,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",
       {
@@ -629,7 +731,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 })
       }
     )
   ] });
@@ -638,7 +741,6 @@ function SessionList({
   history,
   activeSessionId,
   loadingSessionId,
-  streamingSessionIds,
   recentlyCompletedSessionIds,
   onSelectSession
 }) {
@@ -675,7 +777,6 @@ function SessionList({
                   session: s3,
                   isActive: s3.sessionId === activeSessionId,
                   isLoading: s3.sessionId === loadingSessionId,
-                  isStreaming: streamingSessionIds?.has(s3.sessionId) ?? false,
                   isRecentlyCompleted: recentlyCompletedSessionIds?.has(s3.sessionId) ?? false,
                   onSelect: onSelectSession
                 },
@@ -708,26 +809,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",
       {
@@ -748,7 +835,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
@@ -837,10 +924,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(),
@@ -852,22 +946,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"
+      })
+    )
   };
 }
 function ChatHeader({