@agents24/chat-react 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -23,7 +33,15 @@ __export(index_exports, {
   DEFAULT_THREAD_PAGE_SIZE: () => DEFAULT_THREAD_PAGE_SIZE,
   DefaultChatPart: () => DefaultChatPart,
   DefaultToolPart: () => DefaultToolPart,
-  LatestThreadViewport: () => LatestThreadViewport,
+  LatestThreadScroller: () => LatestThreadScroller,
+  LatestThreadScrollerButton: () => LatestThreadScrollerButton,
+  LatestThreadScrollerContent: () => LatestThreadScrollerContent,
+  LatestThreadScrollerItem: () => LatestThreadScrollerItem,
+  LatestThreadScrollerOutline: () => LatestThreadScrollerOutline,
+  LatestThreadScrollerProvider: () => LatestThreadScrollerProvider,
+  LatestThreadScrollerRoot: () => LatestThreadScrollerRoot,
+  LatestThreadScrollerViewport: () => LatestThreadScrollerViewport,
+  MessageScroller: () => import_message_scroller2.MessageScroller,
   activeRunIdFromThread: () => activeRunIdFromThread,
   activeRunIdFromThreadDetail: () => activeRunIdFromThreadDetail,
   assistantTextFromParts: () => assistantTextFromParts,
@@ -33,27 +51,20 @@ __export(index_exports, {
   createChatId: () => createChatId,
   createFetchChatTransport: () => createFetchChatTransport,
   getActiveStreamingTextPartId: () => getActiveStreamingTextPartId,
-  getLatestScrollTop: () => getLatestScrollTop,
   hasStaleUnfinishedAssistantCache: () => hasStaleUnfinishedAssistantCache,
   hasUnfinishedAssistantMessage: () => hasUnfinishedAssistantMessage,
   isActiveStreamingTextPart: () => isActiveStreamingTextPart,
-  isAtTimelineLatestEdge: () => isAtTimelineLatestEdge,
   isRunningThreadStatus: () => isRunningThreadStatus,
-  isScrollable: () => isScrollable,
-  isUserScrollIntentAwayFromLatest: () => isUserScrollIntentAwayFromLatest,
   latestContextWindowFromThread: () => latestContextWindowFromThread,
   mergeContextWindow: () => mergeContextWindow,
   mergeContextWindowUpdate: () => mergeContextWindowUpdate,
   mergeReasoningSteps: () => mergeReasoningSteps,
-  nextLatestFollowStateOnScroll: () => nextLatestFollowStateOnScroll,
   normalizeContextCompression: () => normalizeContextCompression,
   normalizeContextWindow: () => normalizeContextWindow,
   parseSseBlock: () => parseSseBlock,
   partsFromResponseBlocks: () => partsFromResponseBlocks,
   reasoningStepsFromParts: () => reasoningStepsFromParts,
   renderChatPart: () => renderChatPart,
-  shouldPrefetchOlder: () => shouldPrefetchOlder,
-  shouldUseTopOriginTimeline: () => shouldUseTopOriginTimeline,
   textFromFinalOutput: () => textFromFinalOutput,
   threadActivityDate: () => threadActivityDate,
   threadDetailToMessages: () => threadDetailToMessages,
@@ -61,7 +72,9 @@ __export(index_exports, {
   titleFromMessage: () => titleFromMessage,
   toolStateFromStatus: () => toolStateFromStatus,
   useAgents24ChatController: () => useAgents24ChatController,
-  useLatestThreadViewport: () => useLatestThreadViewport,
+  useMessageScroller: () => import_message_scroller2.useMessageScroller,
+  useMessageScrollerScrollable: () => import_message_scroller2.useMessageScrollerScrollable,
+  useMessageScrollerVisibility: () => import_message_scroller2.useMessageScrollerVisibility,
   useStreamingText: () => useStreamingText
 });
 module.exports = __toCommonJS(index_exports);
@@ -1228,14 +1241,357 @@ function useAgents24ChatController({
   ]);
 }
 
-// src/renderers.tsx
+// src/latest-thread-scroller.tsx
+var React = __toESM(require("react"), 1);
+var import_message_scroller = require("@shadcn/react/message-scroller");
 var import_jsx_runtime = require("react/jsx-runtime");
+var cx = (...values) => values.filter(Boolean).join(" ");
+var LatestThreadScrollerLayoutContext = React.createContext(null);
+var useLatestThreadScrollerLayout = () => React.useContext(LatestThreadScrollerLayoutContext);
+function LatestThreadScrollerProvider({
+  autoScroll = true,
+  defaultScrollPosition = "last-anchor",
+  scrollPreviousItemPeek = 64,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Provider,
+    {
+      autoScroll,
+      defaultScrollPosition,
+      scrollPreviousItemPeek,
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerRoot({
+  className,
+  ref,
+  ...props
+}) {
+  const [rootElement, setRootElement] = React.useState(null);
+  const [contentElement, setContentElement] = React.useState(null);
+  const layoutContext = React.useMemo(
+    () => ({
+      contentElement,
+      rootElement,
+      setContentElement,
+      setRootElement
+    }),
+    [contentElement, rootElement]
+  );
+  const setRef = React.useCallback(
+    (node) => {
+      setRootElement(node);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LatestThreadScrollerLayoutContext.Provider, { value: layoutContext, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Root,
+    {
+      ref: setRef,
+      className: cx(
+        "relative flex size-full min-h-0 flex-1 flex-col overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function LatestThreadScrollerViewport({
+  className,
+  onViewportChange,
+  preserveScrollOnPrepend = true,
+  ref,
+  ...props
+}) {
+  const setRef = React.useCallback(
+    (node) => {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+      onViewportChange?.(node);
+    },
+    [onViewportChange, ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Viewport,
+    {
+      ref: setRef,
+      className: cx(
+        "size-full min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain",
+        className
+      ),
+      preserveScrollOnPrepend,
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerContent({
+  className,
+  ref,
+  ...props
+}) {
+  const layout = useLatestThreadScrollerLayout();
+  const setRef = React.useCallback(
+    (node) => {
+      layout?.setContentElement(node);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [layout, ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Content,
+    {
+      ref: setRef,
+      "data-agents24-latest-thread-content": "",
+      className: cx("flex h-max min-h-full flex-col gap-8 p-4", className),
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerItem({
+  className,
+  messageId,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Item,
+    {
+      className: cx(
+        "min-w-0 shrink-0 overflow-visible",
+        className
+      ),
+      messageId,
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerButton({
+  children,
+  className,
+  direction = "end",
+  render,
+  ...props
+}) {
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_message_scroller.MessageScroller.Button,
+      {
+        direction,
+        render,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Button,
+    {
+      direction,
+      render: (buttonProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          ...buttonProps,
+          "aria-label": direction === "end" ? "Scroll to latest message" : "Scroll to first message",
+          className: cx(
+            "absolute bottom-4 left-1/2 z-50 flex size-9 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-md transition-all duration-200 data-[active=false]:pointer-events-none data-[active=false]:translate-y-2 data-[active=false]:opacity-0 data-[active=true]:translate-y-0 data-[active=true]:opacity-100",
+            className
+          ),
+          type: "button",
+          children: children ?? (direction === "end" ? "\u2193" : "\u2191")
+        }
+      ),
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerOutline({
+  cardClassName,
+  className,
+  contentMaxWidth = 768,
+  dir = "ltr",
+  items,
+  minContainerWidthForRail = 0,
+  minSideGutterForRail = 48,
+  side
+}) {
+  const navRef = React.useRef(null);
+  const layout = useLatestThreadScrollerLayout();
+  const [hasSideRoom, setHasSideRoom] = React.useState(false);
+  const [hoveredIndex, setHoveredIndex] = React.useState(null);
+  const { scrollToMessage } = (0, import_message_scroller.useMessageScroller)();
+  const { currentAnchorId, visibleMessageIds } = (0, import_message_scroller.useMessageScrollerVisibility)();
+  const visibleMessageIdSet = React.useMemo(
+    () => new Set(visibleMessageIds),
+    [visibleMessageIds]
+  );
+  const focusIndex = hoveredIndex ?? -1;
+  const railSide = side ?? (dir === "rtl" ? "right" : "left");
+  React.useEffect(() => {
+    const root = layout?.rootElement ?? navRef.current?.parentElement;
+    if (!root) return;
+    const updateSideRoom = () => {
+      const rootRect = root.getBoundingClientRect();
+      const rootWidth = rootRect.width;
+      const content2 = layout?.contentElement;
+      const sideGutter = content2 ? Math.max(
+        0,
+        railSide === "left" ? content2.getBoundingClientRect().left - rootRect.left : rootRect.right - content2.getBoundingClientRect().right
+      ) : Math.max(0, (rootWidth - contentMaxWidth) / 2);
+      const nextHasSideRoom = rootWidth >= minContainerWidthForRail && sideGutter >= minSideGutterForRail;
+      setHasSideRoom(
+        (current) => current === nextHasSideRoom ? current : nextHasSideRoom
+      );
+    };
+    updateSideRoom();
+    const resizeObserver = new ResizeObserver(updateSideRoom);
+    resizeObserver.observe(root);
+    const content = layout?.contentElement;
+    if (content) {
+      resizeObserver.observe(content);
+    }
+    return () => resizeObserver.disconnect();
+  }, [
+    contentMaxWidth,
+    layout?.contentElement,
+    layout?.rootElement,
+    minContainerWidthForRail,
+    minSideGutterForRail,
+    railSide
+  ]);
+  if (items.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      ref: navRef,
+      "aria-label": "Transcript outline",
+      className: cx(
+        "pointer-events-none absolute top-[46%] z-10 max-h-[min(18rem,calc(100%-10rem))] w-16 -translate-y-1/2 overflow-visible",
+        hasSideRoom ? "hidden md:block" : "hidden",
+        railSide === "left" ? "left-1" : "right-1",
+        className
+      ),
+      dir,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-auto flex flex-col gap-0 py-1", children: items.map((item, index) => {
+        const itemMessageIds = item.messageIds && item.messageIds.length > 0 ? item.messageIds : [item.id];
+        const active = itemMessageIds.some(
+          (messageId) => visibleMessageIdSet.has(messageId) || messageId === currentAnchorId
+        );
+        const distance = focusIndex >= 0 ? Math.abs(index - focusIndex) : Number.POSITIVE_INFINITY;
+        const isFocused = distance === 0;
+        const isNear = distance === 1;
+        const isNextNear = distance === 2;
+        const barWidth = isFocused ? 50 : isNear ? 36 : isNextNear ? 23 : 10;
+        const barOpacity = isFocused ? 1 : isNear ? 0.78 : isNextNear ? 0.58 : 0.36;
+        const fallbackLabel = `Turn ${index + 1}`;
+        const previewLabel = item.label && item.label !== fallbackLabel ? item.label : "";
+        const responsePreview = (item.responsePreview || "").trim();
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            "data-active": active,
+            dir: "ltr",
+            className: cx(
+              "group relative flex h-2 w-16 items-center rounded-sm outline-none",
+              railSide === "left" ? "justify-start" : "justify-end"
+            ),
+            "aria-label": `Jump to ${item.label || fallbackLabel}`,
+            onBlur: () => setHoveredIndex(null),
+            onFocus: () => setHoveredIndex(index),
+            onMouseEnter: () => setHoveredIndex(index),
+            onMouseLeave: () => setHoveredIndex(null),
+            onClick: () => scrollToMessage(item.id, {
+              align: "start",
+              behavior: "smooth"
+            }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "h-0.5 rounded-full bg-muted-foreground/55 transition-[width,background-color,opacity] duration-150 ease-out group-hover:bg-foreground group-focus-visible:bg-foreground group-data-[active=true]:bg-foreground",
+                  style: {
+                    opacity: barOpacity,
+                    width: barWidth
+                  }
+                }
+              ),
+              previewLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  dir,
+                  className: cx(
+                    "pointer-events-none absolute top-1/2 z-20 max-h-32 w-64 -translate-y-1/2 overflow-hidden rounded-lg border border-border/80 bg-background p-3 text-start opacity-0 shadow-lg transition-all duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-visible:pointer-events-auto group-focus-visible:opacity-100",
+                    railSide === "left" ? "left-full ml-2 -translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0" : "right-full mr-2 translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0",
+                    cardClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: "block overflow-hidden text-sm leading-5 text-foreground",
+                        style: {
+                          display: "-webkit-box",
+                          WebkitBoxOrient: "vertical",
+                          WebkitLineClamp: responsePreview ? 2 : 4
+                        },
+                        children: previewLabel
+                      }
+                    ),
+                    responsePreview ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: "mt-1 block overflow-hidden text-sm leading-5 text-muted-foreground",
+                        style: {
+                          display: "-webkit-box",
+                          WebkitBoxOrient: "vertical",
+                          WebkitLineClamp: 2
+                        },
+                        children: responsePreview
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null
+            ]
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+}
+var LatestThreadScroller = {
+  Provider: LatestThreadScrollerProvider,
+  Root: LatestThreadScrollerRoot,
+  Viewport: LatestThreadScrollerViewport,
+  Content: LatestThreadScrollerContent,
+  Item: LatestThreadScrollerItem,
+  Button: LatestThreadScrollerButton,
+  Outline: LatestThreadScrollerOutline
+};
+
+// src/renderers.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var DefaultToolPart = ({ part }) => {
   const label = typeof part.presentation?.activity === "string" ? part.presentation.activity : typeof part.presentation?.title === "string" ? part.presentation.title : part.toolName;
   const detail = typeof part.presentation?.detail === "string" ? part.presentation.detail : part.errorText || part.state;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
-    detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: detail }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: label }),
+    detail ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: detail }) : null
   ] });
 };
 var DefaultChatPart = ({
@@ -1244,28 +1600,28 @@ var DefaultChatPart = ({
   renderOptions
 }) => {
   if (renderOptions?.renderPart) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderOptions.renderPart(part, message) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderOptions.renderPart(part, message) });
   }
-  if (part.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: part.text });
+  if (part.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: part.text });
   if (part.kind === "tool") {
     const ToolRenderer = renderOptions?.toolRenderers?.[part.type] || renderOptions?.fallbackToolRenderer || DefaultToolPart;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ToolRenderer({ part, message }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: ToolRenderer({ part, message }) });
   }
   if (part.kind === "reasoning") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-reasoning-part": true, children: part.text || part.label });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-reasoning-part": true, children: part.text || part.label });
   }
   if (part.kind === "ui-blocks") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-ui-blocks-part": true, "data-state": part.state });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-ui-blocks-part": true, "data-state": part.state });
   }
   if (part.kind === "approval") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-approval-part": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-approval-part": true });
   }
   if (part.kind === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-error-part": true, children: part.errorText });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-error-part": true, children: part.errorText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-data-part": part.name });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-data-part": part.name });
 };
-var renderChatPart = (part, message, renderOptions) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var renderChatPart = (part, message, renderOptions) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   DefaultChatPart,
   {
     part,
@@ -1531,295 +1887,22 @@ var createFetchChatTransport = ({
   };
 };
 
-// src/viewport.tsx
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var LATEST_EDGE_THRESHOLD_PX = 2;
-var MIN_OLDER_PREFETCH_PX = 320;
-var MAX_OLDER_PREFETCH_PX = 900;
-var isScrollable = (element) => element.scrollHeight - element.clientHeight > LATEST_EDGE_THRESHOLD_PX;
-var isAtTimelineLatestEdge = (element, isTopOrigin) => {
-  if (!isScrollable(element)) return true;
-  return isTopOrigin ? element.scrollHeight - element.clientHeight - element.scrollTop <= LATEST_EDGE_THRESHOLD_PX : Math.abs(element.scrollTop) <= LATEST_EDGE_THRESHOLD_PX;
-};
-var shouldPrefetchOlder = (element) => Math.abs(element.scrollTop) + element.clientHeight >= element.scrollHeight - Math.min(MAX_OLDER_PREFETCH_PX, Math.max(MIN_OLDER_PREFETCH_PX, element.clientHeight * 0.75));
-var getLatestScrollTop = (element, isTopOrigin) => isTopOrigin ? Math.max(0, element.scrollHeight - element.clientHeight) : 0;
-var shouldUseTopOriginTimeline = ({
-  hasOlder,
-  itemCount,
-  topOriginMaxItems = 4
-}) => !hasOlder && itemCount > 0 && itemCount <= topOriginMaxItems;
-var nextLatestFollowStateOnScroll = ({
-  atLatest,
-  current,
-  isProgrammatic
-}) => {
-  if (isProgrammatic) return current;
-  return atLatest ? "following" : "detached";
-};
-var isUserScrollIntentAwayFromLatest = (intent) => {
-  if (!intent) return false;
-  if ("deltaY" in intent && typeof intent.deltaY === "number") {
-    return intent.deltaY < 0;
-  }
-  if ("key" in intent && typeof intent.key === "string") {
-    if (intent.key === "ArrowUp" || intent.key === "PageUp" || intent.key === "Home") return true;
-    if ((intent.key === " " || intent.key === "Spacebar") && intent.shiftKey) return true;
-    return false;
-  }
-  return "touches" in intent;
-};
-function useLatestThreadViewport({
-  itemCount,
-  hasOlder,
-  isLoadingOlder,
-  onLoadOlder,
-  activeStreamKey,
-  shouldAutoFollow = true,
-  topOriginMaxItems = 4
-}) {
-  const scrollContainerRef = (0, import_react3.useRef)(null);
-  const olderPagePreserveRef = (0, import_react3.useRef)(null);
-  const olderPageRequestInFlightRef = (0, import_react3.useRef)(false);
-  const intrinsicResizePreserveRef = (0, import_react3.useRef)(null);
-  const followStateRef = (0, import_react3.useRef)("following");
-  const programmaticScrollRef = (0, import_react3.useRef)(false);
-  const programmaticScrollTimeoutRef = (0, import_react3.useRef)(null);
-  const activeStreamKeyRef = (0, import_react3.useRef)(null);
-  const observedScrollHeightRef = (0, import_react3.useRef)(null);
-  const [isAtLatest, setIsAtLatest] = (0, import_react3.useState)(true);
-  const [followState, setFollowState] = (0, import_react3.useState)("following");
-  const isTopOrigin = shouldUseTopOriginTimeline({ hasOlder, itemCount, topOriginMaxItems });
-  const setLatestFollowState = (0, import_react3.useCallback)((next) => {
-    if (followStateRef.current === next) return;
-    followStateRef.current = next;
-    setFollowState(next);
-  }, []);
-  const markProgrammaticScroll = (0, import_react3.useCallback)(() => {
-    programmaticScrollRef.current = true;
-    if (programmaticScrollTimeoutRef.current) clearTimeout(programmaticScrollTimeoutRef.current);
-    programmaticScrollTimeoutRef.current = setTimeout(() => {
-      programmaticScrollRef.current = false;
-      programmaticScrollTimeoutRef.current = null;
-    }, 80);
-  }, []);
-  const scrollToLatest = (0, import_react3.useCallback)((options) => {
-    const element = scrollContainerRef.current;
-    if (!element) return;
-    if (options?.reattach !== false) setLatestFollowState("following");
-    markProgrammaticScroll();
-    element.scrollTop = getLatestScrollTop(element, isTopOrigin);
-    setIsAtLatest(true);
-    observedScrollHeightRef.current = element.scrollHeight;
-  }, [isTopOrigin, markProgrammaticScroll, setLatestFollowState]);
-  const detachFromLatest = (0, import_react3.useCallback)(() => {
-    setLatestFollowState("detached");
-  }, [setLatestFollowState]);
-  const reattachToLatest = (0, import_react3.useCallback)(() => {
-    scrollToLatest({ reattach: true });
-  }, [scrollToLatest]);
-  const handleUserScrollIntent = (0, import_react3.useCallback)((intent) => {
-    const element = scrollContainerRef.current;
-    if (!activeStreamKey || !element) return;
-    const atLatest = isAtTimelineLatestEdge(element, isTopOrigin);
-    if (!atLatest || isUserScrollIntentAwayFromLatest(intent)) detachFromLatest();
-  }, [activeStreamKey, detachFromLatest, isTopOrigin]);
-  (0, import_react3.useEffect)(() => {
-    return () => {
-      if (programmaticScrollTimeoutRef.current) clearTimeout(programmaticScrollTimeoutRef.current);
-      const preserve = intrinsicResizePreserveRef.current;
-      if (preserve?.frame !== null && preserve?.frame !== void 0) cancelAnimationFrame(preserve.frame);
-    };
-  }, []);
-  (0, import_react3.useLayoutEffect)(() => {
-    const element = scrollContainerRef.current;
-    const preserve = olderPagePreserveRef.current;
-    if (!element) return;
-    observedScrollHeightRef.current = element.scrollHeight;
-    if (!preserve) {
-      setIsAtLatest(isAtTimelineLatestEdge(element, isTopOrigin));
-      return;
-    }
-    const addedHeight = element.scrollHeight - preserve.previousHeight;
-    markProgrammaticScroll();
-    element.scrollTop = preserve.previousTop - addedHeight;
-    olderPagePreserveRef.current = null;
-    olderPageRequestInFlightRef.current = false;
-    setIsAtLatest(isAtTimelineLatestEdge(element, isTopOrigin));
-  }, [isTopOrigin, itemCount, markProgrammaticScroll]);
-  const handleScroll = (0, import_react3.useCallback)(
-    (event) => {
-      const element = event.currentTarget;
-      const atLatest = isAtTimelineLatestEdge(element, isTopOrigin);
-      setIsAtLatest(atLatest);
-      setLatestFollowState(
-        nextLatestFollowStateOnScroll({
-          atLatest,
-          current: followStateRef.current,
-          isProgrammatic: programmaticScrollRef.current
-        })
-      );
-      if (isTopOrigin || !hasOlder || isLoadingOlder || olderPageRequestInFlightRef.current || !shouldPrefetchOlder(element)) {
-        return;
-      }
-      olderPageRequestInFlightRef.current = true;
-      olderPagePreserveRef.current = {
-        previousHeight: element.scrollHeight,
-        previousTop: element.scrollTop
-      };
-      void Promise.resolve(onLoadOlder()).finally(() => {
-        requestAnimationFrame(() => {
-          if (!olderPagePreserveRef.current) return;
-          olderPagePreserveRef.current = null;
-          olderPageRequestInFlightRef.current = false;
-        });
-      });
-    },
-    [hasOlder, isLoadingOlder, isTopOrigin, onLoadOlder, setLatestFollowState]
-  );
-  const preserveIntrinsicResize = (0, import_react3.useCallback)(() => {
-    const element = scrollContainerRef.current;
-    if (!element || isTopOrigin) return;
-    const active = intrinsicResizePreserveRef.current;
-    if (active?.frame !== null && active?.frame !== void 0) cancelAnimationFrame(active.frame);
-    intrinsicResizePreserveRef.current = {
-      lastHeight: element.scrollHeight,
-      endAt: Date.now() + 260,
-      frame: null
-    };
-    const preserveFrame = () => {
-      const nextElement = scrollContainerRef.current;
-      const preserve = intrinsicResizePreserveRef.current;
-      if (!nextElement || !preserve) return;
-      const heightDelta = nextElement.scrollHeight - preserve.lastHeight;
-      if (Math.abs(heightDelta) >= 1) {
-        markProgrammaticScroll();
-        nextElement.scrollTop -= heightDelta;
-        preserve.lastHeight = nextElement.scrollHeight;
-        setIsAtLatest(isAtTimelineLatestEdge(nextElement, isTopOrigin));
-      }
-      if (Date.now() < preserve.endAt) {
-        preserve.frame = requestAnimationFrame(preserveFrame);
-      } else {
-        intrinsicResizePreserveRef.current = null;
-      }
-    };
-    intrinsicResizePreserveRef.current.frame = requestAnimationFrame(preserveFrame);
-  }, [isTopOrigin, markProgrammaticScroll]);
-  (0, import_react3.useLayoutEffect)(() => {
-    const key = activeStreamKey || null;
-    const previousKey = activeStreamKeyRef.current;
-    if (!key) {
-      activeStreamKeyRef.current = null;
-      if (previousKey && shouldAutoFollow && followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-        const frame2 = requestAnimationFrame(() => {
-          if (followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-            scrollToLatest({ reattach: false });
-          }
-        });
-        return () => cancelAnimationFrame(frame2);
-      }
-      return;
-    }
-    if (previousKey === key) {
-      activeStreamKeyRef.current = key;
-      return;
-    }
-    setLatestFollowState("following");
-    const frame = requestAnimationFrame(() => scrollToLatest());
-    activeStreamKeyRef.current = key;
-    return () => cancelAnimationFrame(frame);
-  }, [activeStreamKey, isLoadingOlder, scrollToLatest, setLatestFollowState, shouldAutoFollow]);
-  (0, import_react3.useLayoutEffect)(() => {
-    if (!activeStreamKey || !shouldAutoFollow || followStateRef.current !== "following") return;
-    if (isLoadingOlder || olderPageRequestInFlightRef.current) return;
-    const frame = requestAnimationFrame(() => {
-      if (followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-        scrollToLatest({ reattach: false });
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [activeStreamKey, isLoadingOlder, itemCount, scrollToLatest, shouldAutoFollow]);
-  (0, import_react3.useEffect)(() => {
-    if (!activeStreamKey) {
-      observedScrollHeightRef.current = scrollContainerRef.current?.scrollHeight ?? null;
-      return;
-    }
-    let frame = null;
-    const watchStreamResize = () => {
-      const element = scrollContainerRef.current;
-      if (!element) return;
-      const previousHeight = observedScrollHeightRef.current;
-      const nextHeight = element.scrollHeight;
-      observedScrollHeightRef.current = nextHeight;
-      if (previousHeight !== null && Math.abs(nextHeight - previousHeight) >= 1 && shouldAutoFollow && followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-        scrollToLatest({ reattach: false });
-      }
-      frame = requestAnimationFrame(watchStreamResize);
-    };
-    frame = requestAnimationFrame(watchStreamResize);
-    return () => {
-      if (frame !== null) cancelAnimationFrame(frame);
-    };
-  }, [activeStreamKey, isLoadingOlder, scrollToLatest, shouldAutoFollow]);
-  return {
-    scrollContainerRef,
-    isAtLatest,
-    isFollowingLatest: followState === "following",
-    isTopOrigin,
-    shouldShowLatestButton: !isAtLatest,
-    handleScroll,
-    handleUserScrollIntent,
-    scrollToLatest,
-    detachFromLatest,
-    reattachToLatest,
-    preserveIntrinsicResize
-  };
-}
-function LatestThreadViewport({
-  items,
-  hasOlder,
-  isLoadingOlder,
-  onLoadOlder,
-  activeStreamKey,
-  className,
-  latestSpacer,
-  trailingSpacer,
-  renderItem
-}) {
-  const viewport = useLatestThreadViewport({
-    itemCount: items.length,
-    hasOlder,
-    isLoadingOlder,
-    onLoadOlder,
-    activeStreamKey
-  });
-  const timelineItems = (0, import_react3.useMemo)(() => viewport.isTopOrigin ? items : [...items].reverse(), [items, viewport.isTopOrigin]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
-    {
-      ref: viewport.scrollContainerRef,
-      className,
-      onKeyDownCapture: viewport.handleUserScrollIntent,
-      onScroll: viewport.handleScroll,
-      onTouchMoveCapture: viewport.handleUserScrollIntent,
-      onWheelCapture: viewport.handleUserScrollIntent,
-      role: "log",
-      style: { overflowAnchor: "none" },
-      children: [
-        !viewport.isTopOrigin && (latestSpacer ?? null),
-        timelineItems.map((item) => renderItem(item, viewport)),
-        viewport.isTopOrigin && (trailingSpacer ?? latestSpacer ?? null)
-      ]
-    }
-  );
-}
+// src/viewport.ts
+var import_message_scroller2 = require("@shadcn/react/message-scroller");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_THREAD_PAGE_SIZE,
   DefaultChatPart,
   DefaultToolPart,
-  LatestThreadViewport,
+  LatestThreadScroller,
+  LatestThreadScrollerButton,
+  LatestThreadScrollerContent,
+  LatestThreadScrollerItem,
+  LatestThreadScrollerOutline,
+  LatestThreadScrollerProvider,
+  LatestThreadScrollerRoot,
+  LatestThreadScrollerViewport,
+  MessageScroller,
   activeRunIdFromThread,
   activeRunIdFromThreadDetail,
   assistantTextFromParts,
@@ -1829,27 +1912,20 @@ function LatestThreadViewport({
   createChatId,
   createFetchChatTransport,
   getActiveStreamingTextPartId,
-  getLatestScrollTop,
   hasStaleUnfinishedAssistantCache,
   hasUnfinishedAssistantMessage,
   isActiveStreamingTextPart,
-  isAtTimelineLatestEdge,
   isRunningThreadStatus,
-  isScrollable,
-  isUserScrollIntentAwayFromLatest,
   latestContextWindowFromThread,
   mergeContextWindow,
   mergeContextWindowUpdate,
   mergeReasoningSteps,
-  nextLatestFollowStateOnScroll,
   normalizeContextCompression,
   normalizeContextWindow,
   parseSseBlock,
   partsFromResponseBlocks,
   reasoningStepsFromParts,
   renderChatPart,
-  shouldPrefetchOlder,
-  shouldUseTopOriginTimeline,
   textFromFinalOutput,
   threadActivityDate,
   threadDetailToMessages,
@@ -1857,7 +1933,9 @@ function LatestThreadViewport({
   titleFromMessage,
   toolStateFromStatus,
   useAgents24ChatController,
-  useLatestThreadViewport,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
   useStreamingText
 });
 //# sourceMappingURL=index.cjs.map