@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/cx-chat/components/SsrSidebarChats.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, DisclosureHeader } from "@ai-matrx/design-system/controls";
 import { useState, useEffect, useRef, useMemo } from "react";
 import {
@@ -74,46 +75,57 @@ function ConversationItem({
     }
     onSelect();
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `relative group rounded-md transition-all duration-150 ${isActive ? "bg-accent/70 dark:bg-accent/50" : "hover:bg-accent/40 dark:hover:bg-accent/20"} ${isPending ? "opacity-60" : ""}`
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
-      "button",
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        onClick: handleSelect,
-        className: "flex-1 min-w-0 px-2.5 py-1 text-left cursor-pointer"
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `text-[11px] truncate leading-relaxed ${isActive ? "text-foreground font-medium" : "text-foreground/70"}`
-        },
-        item.title || "Untitled Chat"
-      )
-    ), /* @__PURE__ */ React.createElement("div", { className: "flex-shrink-0 pr-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150" }, /* @__PURE__ */ React.createElement(DropdownMenu, null, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(MoreHorizontal, null), "aria-label": "Chat options", onClick: (e) => e.stopPropagation() })), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", className: "w-32", sideOffset: 4 }, /* @__PURE__ */ React.createElement(
-      DropdownMenuItem,
+        className: `relative group rounded-md transition-all duration-150 ${isActive ? "bg-accent/70 dark:bg-accent/50" : "hover:bg-accent/40 dark:hover:bg-accent/20"} ${isPending ? "opacity-60" : ""}`,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleSelect,
+              className: "flex-1 min-w-0 px-2.5 py-1 text-left cursor-pointer",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `text-[11px] truncate leading-relaxed ${isActive ? "text-foreground font-medium" : "text-foreground/70"}`,
+                  children: item.title || "Untitled Chat"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 pr-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}), "aria-label": "Chat options", onClick: (e) => e.stopPropagation() }) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-32", sideOffset: 4, children: /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setIsShareOpen(true);
+                },
+                className: "text-[11px] py-1.5",
+                children: [
+                  /* @__PURE__ */ jsx(Share2, { className: "h-3 w-3 mr-2" }),
+                  "Share"
+                ]
+              }
+            ) })
+          ] }) })
+        ] })
+      }
+    ),
+    isShareOpen && /* @__PURE__ */ jsx(
+      ShareModal,
       {
-        onClick: (e) => {
-          e.stopPropagation();
-          setIsShareOpen(true);
-        },
-        className: "text-[11px] py-1.5"
-      },
-      /* @__PURE__ */ React.createElement(Share2, { className: "h-3 w-3 mr-2" }),
-      "Share"
-    )))))
-  ), isShareOpen && /* @__PURE__ */ React.createElement(
-    ShareModal,
-    {
-      isOpen: isShareOpen,
-      onClose: () => setIsShareOpen(false),
-      resourceType: "conversation",
-      resourceId: item.id,
-      resourceName: item.title || "Untitled Chat"
-    }
-  ));
+        isOpen: isShareOpen,
+        onClose: () => setIsShareOpen(false),
+        resourceType: "conversation",
+        resourceId: item.id,
+        resourceName: item.title || "Untitled Chat"
+      }
+    )
+  ] });
 }
 function SharedConversationItem({
   item,
@@ -130,26 +142,33 @@ function SharedConversationItem({
     }
     onSelect();
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `relative group rounded-md transition-all duration-150 ${isActive ? "bg-accent/70 dark:bg-accent/50" : "hover:bg-accent/40 dark:hover:bg-accent/20"}`
-    },
-    /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        onClick: handleSelect,
-        className: "w-full px-2.5 py-1 text-left cursor-pointer"
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
+      className: `relative group rounded-md transition-all duration-150 ${isActive ? "bg-accent/70 dark:bg-accent/50" : "hover:bg-accent/40 dark:hover:bg-accent/20"}`,
+      children: /* @__PURE__ */ jsxs(
+        "button",
         {
-          className: `text-[11px] truncate leading-relaxed ${isActive ? "text-foreground font-medium" : "text-foreground/70"}`
-        },
-        item.title || "Untitled Chat"
-      ),
-      /* @__PURE__ */ React.createElement("div", { className: "text-[9px] text-muted-foreground truncate" }, item.owner_email ? item.owner_email.split("@")[0] : "Unknown", " \xB7", " ", levelLabel)
-    )
+          onClick: handleSelect,
+          className: "w-full px-2.5 py-1 text-left cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `text-[11px] truncate leading-relaxed ${isActive ? "text-foreground font-medium" : "text-foreground/70"}`,
+                children: item.title || "Untitled Chat"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "text-[9px] text-muted-foreground truncate", children: [
+              item.owner_email ? item.owner_email.split("@")[0] : "Unknown",
+              " \xB7",
+              " ",
+              levelLabel
+            ] })
+          ]
+        }
+      )
+    }
   );
 }
 function SharedChatsSection({
@@ -202,36 +221,47 @@ function SharedChatsSection({
       (c) => c.title?.toLowerCase().includes(q) || c.owner_email?.toLowerCase().includes(q) || idMatchesQuery(c, q)
     );
   }, [sharedChats, searchQuery]);
-  return /* @__PURE__ */ React.createElement("div", { className: "px-1 py-1 border-t border-border/50 mt-1" }, /* @__PURE__ */ React.createElement(
-    DisclosureHeader,
-    {
-      className: "w-full",
-      open: isOpen,
-      onClick: () => setIsOpen((prev) => !prev),
-      variant: "label",
-      icon: /* @__PURE__ */ React.createElement(Users, null),
-      title: "Shared with Me",
-      meta: hasFetched && loadError == null && sharedChats.length > 0 ? sharedChats.length : void 0
-    }
-  ), isOpen && /* @__PURE__ */ React.createElement("div", { className: "mt-0.5" }, isLoading && /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center py-4" }, /* @__PURE__ */ React.createElement("div", { className: "w-3.5 h-3.5 border-2 border-muted-foreground/30 border-t-secondary rounded-full animate-spin" })), !isLoading && loadError != null && /* @__PURE__ */ React.createElement(
-    ReadFailure,
-    {
-      error: loadError,
-      what: "chats shared with you",
-      onRetry: () => setHasFetched(false)
-    }
-  ), !isLoading && loadError == null && filtered.length === 0 && hasFetched && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center py-4 px-2 text-center" }, /* @__PURE__ */ React.createElement(Users, { className: "h-4 w-4 text-muted-foreground/30 mb-1" }), /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground" }, searchQuery ? "No shared chats match your search" : "No chats shared with you")), /* @__PURE__ */ React.createElement("div", { className: "space-y-0.5" }, filtered.map((item) => /* @__PURE__ */ React.createElement(
-    SharedConversationItem,
-    {
-      key: item.id,
-      item,
-      isActive: activeRequestId === item.id,
-      onSelect: () => {
-        onSelectChat(item.id);
-        onCloseSidebar?.();
+  return /* @__PURE__ */ jsxs("div", { className: "px-1 py-1 border-t border-border/50 mt-1", children: [
+    /* @__PURE__ */ jsx(
+      DisclosureHeader,
+      {
+        className: "w-full",
+        open: isOpen,
+        onClick: () => setIsOpen((prev) => !prev),
+        variant: "label",
+        icon: /* @__PURE__ */ jsx(Users, {}),
+        title: "Shared with Me",
+        meta: hasFetched && loadError == null && sharedChats.length > 0 ? sharedChats.length : void 0
       }
-    }
-  )))));
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: "mt-0.5", children: [
+      isLoading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx("div", { className: "w-3.5 h-3.5 border-2 border-muted-foreground/30 border-t-secondary rounded-full animate-spin" }) }),
+      !isLoading && loadError != null && /* @__PURE__ */ jsx(
+        ReadFailure,
+        {
+          error: loadError,
+          what: "chats shared with you",
+          onRetry: () => setHasFetched(false)
+        }
+      ),
+      !isLoading && loadError == null && filtered.length === 0 && hasFetched && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-4 px-2 text-center", children: [
+        /* @__PURE__ */ jsx(Users, { className: "h-4 w-4 text-muted-foreground/30 mb-1" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: searchQuery ? "No shared chats match your search" : "No chats shared with you" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: filtered.map((item) => /* @__PURE__ */ jsx(
+        SharedConversationItem,
+        {
+          item,
+          isActive: activeRequestId === item.id,
+          onSelect: () => {
+            onSelectChat(item.id);
+            onCloseSidebar?.();
+          }
+        },
+        item.id
+      )) })
+    ] })
+  ] });
 }
 function SsrSidebarChats({
   activeRequestId,
@@ -291,34 +321,58 @@ function SsrSidebarChats({
     return () => observer.disconnect();
   }, [dispatch, hasMore, isLoading, items.length, searchQuery]);
   if (!isAuthenticated) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center px-4 py-8 text-center" }, /* @__PURE__ */ React.createElement(MessageSquare, { className: "h-6 w-6 text-muted-foreground/30 mb-2" }), /* @__PURE__ */ React.createElement("p", { className: "text-[11px] text-muted-foreground" }, "Sign in to save chats"));
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-8 text-center", children: [
+      /* @__PURE__ */ jsx(MessageSquare, { className: "h-6 w-6 text-muted-foreground/30 mb-2" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: "Sign in to save chats" })
+    ] });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "px-1 py-1" }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wider select-none" }, "Chats"), isLoading && items.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center py-6 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "w-4 h-4 border-2 border-muted-foreground/30 border-t-primary rounded-full animate-spin mb-2" }), /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground" }, "Loading...")), listStatus === "failed" && items.length === 0 && /* @__PURE__ */ React.createElement(ReadFailure, { error: listError ?? true, what: "your conversations", onRetry: reload }), listStatus === "succeeded" && filtered.length === 0 && !searchQuery && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center py-6 px-2 text-center" }, /* @__PURE__ */ React.createElement(MessageSquare, { className: "h-5 w-5 text-muted-foreground/30 mb-1.5" }), /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground" }, "No conversations yet")), listStatus === "succeeded" && filtered.length === 0 && searchQuery && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center py-6 px-2 text-center" }, /* @__PURE__ */ React.createElement(Search, { className: "h-4 w-4 text-muted-foreground/30 mb-1.5" }), /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground" }, "No results")), GROUP_ORDER.filter((g) => grouped[g]?.length).map((section) => /* @__PURE__ */ React.createElement("div", { key: section, className: "mb-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-0.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider select-none" }, section), /* @__PURE__ */ React.createElement("div", { className: "space-y-0.5" }, grouped[section].map((item) => /* @__PURE__ */ React.createElement(
-    ConversationItemWrapper,
-    {
-      key: item.id,
-      item,
-      isActive: activeRequestId === item.id,
-      onSelect: () => {
-        onSelectChat(item.id);
-        onCloseSidebar?.();
+  return /* @__PURE__ */ jsxs("div", { className: "px-1 py-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wider select-none", children: "Chats" }),
+    isLoading && items.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-6 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-muted-foreground/30 border-t-primary rounded-full animate-spin mb-2" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: "Loading..." })
+    ] }),
+    listStatus === "failed" && items.length === 0 && /* @__PURE__ */ jsx(ReadFailure, { error: listError ?? true, what: "your conversations", onRetry: reload }),
+    listStatus === "succeeded" && filtered.length === 0 && !searchQuery && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-2 text-center", children: [
+      /* @__PURE__ */ jsx(MessageSquare, { className: "h-5 w-5 text-muted-foreground/30 mb-1.5" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: "No conversations yet" })
+    ] }),
+    listStatus === "succeeded" && filtered.length === 0 && searchQuery && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-2 text-center", children: [
+      /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-muted-foreground/30 mb-1.5" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: "No results" })
+    ] }),
+    GROUP_ORDER.filter((g) => grouped[g]?.length).map((section) => /* @__PURE__ */ jsxs("div", { className: "mb-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-2 py-0.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider select-none", children: section }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: grouped[section].map((item) => /* @__PURE__ */ jsx(
+        ConversationItemWrapper,
+        {
+          item,
+          isActive: activeRequestId === item.id,
+          onSelect: () => {
+            onSelectChat(item.id);
+            onCloseSidebar?.();
+          }
+        },
+        item.id
+      )) })
+    ] }, section)),
+    hasMore && /* @__PURE__ */ jsx("div", { ref: bottomRef, className: "h-4" }),
+    /* @__PURE__ */ jsx(
+      SharedChatsSection,
+      {
+        activeRequestId,
+        onSelectChat,
+        onCloseSidebar,
+        searchQuery
       }
-    }
-  ))))), hasMore && /* @__PURE__ */ React.createElement("div", { ref: bottomRef, className: "h-4" }), /* @__PURE__ */ React.createElement(
-    SharedChatsSection,
-    {
-      activeRequestId,
-      onSelectChat,
-      onCloseSidebar,
-      searchQuery
-    }
-  ));
+    )
+  ] });
 }
 function ConversationItemWrapper(props) {
   const isPending = useAppSelector(
     selectConversationIsPending(props.item.id)
   );
-  return /* @__PURE__ */ React.createElement(ConversationItem, { ...props, isPending });
+  return /* @__PURE__ */ jsx(ConversationItem, { ...props, isPending });
 }
 export {
   SsrSidebarChats

package/dist/cx-chat/components/agent/AgentPickerSheet.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { toast } from "../../../host/notify.js";
 import { useIsMobile } from "@ai-matrx/kit/media-query";
 import { useAppStore } from "../../../store/hooks.js";
@@ -43,7 +44,7 @@ function AgentPickerSheet({
     });
     onOpenChange(false);
   };
-  const picker = /* @__PURE__ */ React.createElement(
+  const picker = /* @__PURE__ */ jsx(
     AgentListInlinePicker,
     {
       consumerId: CX_CHAT_PICKER_CONSUMER_ID,
@@ -53,9 +54,21 @@ function AgentPickerSheet({
     }
   );
   if (isMobile) {
-    return /* @__PURE__ */ React.createElement(Drawer, { open, onOpenChange }, /* @__PURE__ */ React.createElement(DrawerContent, { className: "h-[85dvh]" }, /* @__PURE__ */ React.createElement(DrawerHeader, { className: "shrink-0 border-b border-border text-left" }, /* @__PURE__ */ React.createElement(DrawerTitle, null, "Choose an agent"), /* @__PURE__ */ React.createElement(DrawerDescription, null, "Search, filter, sort, and preview every available agent.")), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-hidden" }, picker)));
+    return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DrawerContent, { className: "h-[85dvh]", children: [
+      /* @__PURE__ */ jsxs(DrawerHeader, { className: "shrink-0 border-b border-border text-left", children: [
+        /* @__PURE__ */ jsx(DrawerTitle, { children: "Choose an agent" }),
+        /* @__PURE__ */ jsx(DrawerDescription, { children: "Search, filter, sort, and preview every available agent." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: picker })
+    ] }) });
   }
-  return /* @__PURE__ */ React.createElement(Dialog, { open, onOpenChange }, /* @__PURE__ */ React.createElement(DialogContent, { className: "flex h-[min(680px,80dvh)] max-w-2xl flex-col overflow-hidden p-0" }, /* @__PURE__ */ React.createElement(DialogHeader, { className: "shrink-0 border-b border-border px-5 py-4 text-left" }, /* @__PURE__ */ React.createElement(DialogTitle, null, "Choose an agent"), /* @__PURE__ */ React.createElement(DialogDescription, null, "Search, filter, sort, and preview every available agent.")), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-hidden" }, picker)));
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex h-[min(680px,80dvh)] max-w-2xl flex-col overflow-hidden p-0", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "shrink-0 border-b border-border px-5 py-4 text-left", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Choose an agent" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Search, filter, sort, and preview every available agent." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: picker })
+  ] }) });
 }
 var AgentPickerSheet_default = AgentPickerSheet;
 export {

package/dist/cx-chat/components/core/ChatConversationClient.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useCallback, useState } from "react";
 import { useRouter } from "../../../host/navigation.js";
 import { AgentPickerSheet } from "../../../ui/lazy/AgentPickerSheet.js";
@@ -117,39 +118,53 @@ function ChatConversationClient({
   const handleNewChat = useCallback(() => {
     pushAppHref(router, `/demos/chat/a/${agentId}`);
   }, [router, agentId]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    AgentPickerSheet,
-    {
-      open: isPickerOpen,
-      onOpenChange: setIsPickerOpen,
-      selectedAgent: null,
-      onSelect: (agent) => pushAppHref(router, `/demos/chat/a/${agent.promptId}`)
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-h-0 flex flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 min-h-0" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref: scrollRef,
-      onScroll: handleScroll,
-      className: "h-full overflow-y-auto overscroll-contain"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "max-w-[800px] mx-auto w-full" }, /* @__PURE__ */ React.createElement(AgentConversationDisplay, { conversationId }))
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "pointer-events-none absolute bottom-0 left-0 right-0 h-3",
-      style: {
-        background: "linear-gradient(to bottom, transparent, var(--background))"
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AgentPickerSheet,
+      {
+        open: isPickerOpen,
+        onOpenChange: setIsPickerOpen,
+        selectedAgent: null,
+        onSelect: (agent) => pushAppHref(router, `/demos/chat/a/${agent.promptId}`)
       }
-    }
-  ), showScrollDown && /* @__PURE__ */ React.createElement("div", { className: "absolute bottom-4 left-0 right-0 z-10 pointer-events-none flex justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-[800px] flex justify-end px-4" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ArrowDown, null), onClick: scrollToBottom, title: "Scroll to bottom", "aria-label": "Scroll to bottom" })))), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 p-2 pb-safe" }, /* @__PURE__ */ React.createElement("div", { className: "max-w-[800px] mx-auto" }, /* @__PURE__ */ React.createElement(ServerOperationBanner, { conversationId }), /* @__PURE__ */ React.createElement(ProposedDirectivesZone, { conversationId }), /* @__PURE__ */ React.createElement(
-    SmartAgentInput,
-    {
-      conversationId,
-      surfaceKey: `cx-chat:${agentId}`,
-      composer: { size: "page", mode: composerMode },
-      enablePasteImages: isAuthenticated
-    }
-  )))));
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-h-0", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            onScroll: handleScroll,
+            className: "h-full overflow-y-auto overscroll-contain",
+            children: /* @__PURE__ */ jsx("div", { className: "max-w-[800px] mx-auto w-full", children: /* @__PURE__ */ jsx(AgentConversationDisplay, { conversationId }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute bottom-0 left-0 right-0 h-3",
+            style: {
+              background: "linear-gradient(to bottom, transparent, var(--background))"
+            }
+          }
+        ),
+        showScrollDown && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-0 right-0 z-10 pointer-events-none flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-[800px] flex justify-end px-4", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ArrowDown, {}), onClick: scrollToBottom, title: "Scroll to bottom", "aria-label": "Scroll to bottom" }) }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "shrink-0 p-2 pb-safe", children: /* @__PURE__ */ jsxs("div", { className: "max-w-[800px] mx-auto", children: [
+        /* @__PURE__ */ jsx(ServerOperationBanner, { conversationId }),
+        /* @__PURE__ */ jsx(ProposedDirectivesZone, { conversationId }),
+        /* @__PURE__ */ jsx(
+          SmartAgentInput,
+          {
+            conversationId,
+            surfaceKey: `cx-chat:${agentId}`,
+            composer: { size: "page", mode: composerMode },
+            enablePasteImages: isAuthenticated
+          }
+        )
+      ] }) })
+    ] })
+  ] });
 }
 export {
   ChatConversationClient as default

package/dist/cx-chat/components/messages/MessageErrorBoundary.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { TriangleAlert } from "lucide-react";
 import { captureReactRenderError } from "../../../host/diagnostics.js";
@@ -21,7 +22,13 @@ class MessageErrorBoundary extends React.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2 p-3 rounded-lg bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800" }, /* @__PURE__ */ React.createElement(TriangleAlert, { className: "h-4 w-4 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-amber-700 dark:text-amber-300" }, "This message could not be displayed. The data may be in an unexpected format.", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, null)));
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3 rounded-lg bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800", children: [
+        /* @__PURE__ */ jsx(TriangleAlert, { className: "h-4 w-4 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-amber-700 dark:text-amber-300", children: [
+          "This message could not be displayed. The data may be in an unexpected format.",
+          /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+        ] })
+      ] });
     }
     return this.props.children;
   }