@agents24/chat-react 0.1.7 → 0.1.8

package/README.md

@@ -1,16 +1,19 @@
 # Agents24 Chat React
 
-Last Updated: 2026-06-17
+Last Updated: 2026-06-29
 
 Headless React primitives for Agents24 chat surfaces.
 
-The package owns thread hydration, older-page pagination, stream/reattach state, active run cancellation, normalized message parts, and latest-thread viewport behavior. Hosts provide transport routes, cache storage, product rendering, source handling, and styling.
+The package owns thread hydration, older-page pagination, stream/reattach state, active run cancellation, normalized message parts, and shadcn MessageScroller primitives for latest-thread chat surfaces. Hosts provide transport routes, cache storage, product rendering, source handling, pagination triggers, and styling.
 
 ## Public API
 
 - `useAgents24ChatController(options)`
-- `useLatestThreadViewport(options)`
-- `LatestThreadViewport`
+- `MessageScroller`
+- `LatestThreadScroller`
+- `useMessageScroller()`
+- `useMessageScrollerScrollable()`
+- `useMessageScrollerVisibility()`
 - `useStreamingText(options)`
 - `getActiveStreamingTextPartId(message, streamingMessageId)`
 - `isActiveStreamingTextPart(message, part, streamingMessageId)`
@@ -19,6 +22,8 @@ The package owns thread hydration, older-page pagination, stream/reattach state,
 - normalized chat message, part, transport, and storage types
 - `partsFromResponseBlocks(blocks, fallbackText)`
 - `renderChatPart(part, message, renderOptions)`
+- `@agents24/chat-react/ui` for shared shadcn-derived `Message`, `Bubble`, `Attachment`, `Marker`, `MessageResponse`, and Agents24 message/attachment adapters
+- `@agents24/chat-react/templates` for the slot-based `AgentChatShell` starter shell
 
 `useAgents24ChatController` exposes reactive `threads`, `activeThreadId`, `activeThread`, `activeRunId`, `isRefreshingThreads`, `loadThreadById(threadId)`, and `startNewThread()` in addition to message and stream state. It hydrates selected threads, detects active runs from `active_run`/`last_run_status`, attaches through the host transport, detaches local SSE streams on navigation, and refreshes history after terminal events.
 
@@ -30,14 +35,22 @@ Hosts can pass `onRuntimeEvent(event, context)` and `onThreadDetailLoaded(detail
 
 Network access is always injected by the host. This browser package never requires platform API keys.
 
-## Latest Viewport Behavior
+## MessageScroller Behavior
 
-The package owns the standard streaming scroll policy:
+The package re-exports shadcn `@shadcn/react/message-scroller` and provides `LatestThreadScroller`, a thin native preset around the official primitives. Host chat shells should prefer:
 
-- a new active stream starts in latest-follow mode
-- streaming text growth stays pinned to latest while the user remains there
-- user scrolling away detaches latest-follow mode
-- manually reaching latest again, or clicking the latest button, reattaches follow mode
-- older-page prepends preserve the visible viewport instead of snapping to latest
+- `LatestThreadScroller.Provider`
+- `LatestThreadScroller.Root`
+- `LatestThreadScroller.Viewport`
+- `LatestThreadScroller.Content`
+- `LatestThreadScroller.Item`
+- `LatestThreadScroller.Button`
+- `LatestThreadScroller.Outline`
 
-Hosts should wire `handleScroll` and `scrollToLatest` from `useLatestThreadViewport`, or use `LatestThreadViewport` directly. `handleUserScrollIntent` is available for hosts that need to mark wheel, touch, or keyboard intent before a scroll event lands.
+The preset defaults to `autoScroll`, `defaultScrollPosition="last-anchor"`, `scrollPreviousItemPeek={64}`, and `preserveScrollOnPrepend`. Each item requires a stable `messageId`; callers set `scrollAnchor` on turn-start rows. MessageScroller owns anchoring, stream follow, detach/reattach, resize handling, visibility, outline jumping, and the latest button state. Hosts keep only product pagination triggers for loading older data and product message rendering.
+
+## Shared UI Subpaths
+
+`@agents24/chat-react/ui` contains package-owned source adapted from the shadcn CLI `message`, `bubble`, `attachment`, and `marker` components. Base primitive names stay close to shadcn, while Agents24-specific compatibility adapters sit beside them as `Message`, `MessageContent`, `MessageActions`, `MessageAction`, `MessageAttachments`, `MessageAttachment`, and `MessageResponse`.
+
+`@agents24/chat-react/templates` exposes `AgentChatShell`, a convenience shell that composes `LatestThreadScroller`, the outline rail, latest button, composer overlay spacing, older-history trigger, and message slots. Product apps still own transport, citations, TTS, source panes, artifact actions, and row-specific rendering.

package/dist/chunk-E3TJ3I6G.js

@@ -0,0 +1,358 @@
+// src/latest-thread-scroller.tsx
+import * as React from "react";
+import {
+  MessageScroller,
+  useMessageScroller,
+  useMessageScrollerVisibility
+} from "@shadcn/react/message-scroller";
+import { jsx, jsxs } from "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__ */ jsx(
+    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__ */ jsx(LatestThreadScrollerLayoutContext.Provider, { value: layoutContext, children: /* @__PURE__ */ jsx(
+    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__ */ jsx(
+    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__ */ jsx(
+    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__ */ jsx(
+    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__ */ jsx(
+      MessageScroller.Button,
+      {
+        direction,
+        render,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MessageScroller.Button,
+    {
+      direction,
+      render: (buttonProps) => /* @__PURE__ */ 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 } = useMessageScroller();
+  const { currentAnchorId, visibleMessageIds } = 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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
+};
+
+export {
+  LatestThreadScrollerProvider,
+  LatestThreadScrollerRoot,
+  LatestThreadScrollerViewport,
+  LatestThreadScrollerContent,
+  LatestThreadScrollerItem,
+  LatestThreadScrollerButton,
+  LatestThreadScrollerOutline,
+  LatestThreadScroller
+};
+//# sourceMappingURL=chunk-E3TJ3I6G.js.map

package/dist/chunk-E3TJ3I6G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/latest-thread-scroller.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  MessageScroller,\n  useMessageScroller,\n  useMessageScrollerVisibility,\n} from \"@shadcn/react/message-scroller\";\n\nconst cx = (...values: Array<string | false | null | undefined>) =>\n  values.filter(Boolean).join(\" \");\n\ntype MessageScrollerProviderProps = React.ComponentProps<\n  typeof MessageScroller.Provider\n>;\ntype MessageScrollerRootProps = React.ComponentProps<typeof MessageScroller.Root>;\ntype MessageScrollerViewportProps = React.ComponentProps<\n  typeof MessageScroller.Viewport\n>;\ntype MessageScrollerContentProps = React.ComponentProps<\n  typeof MessageScroller.Content\n>;\ntype MessageScrollerItemProps = React.ComponentProps<typeof MessageScroller.Item>;\ntype MessageScrollerButtonProps = React.ComponentProps<typeof MessageScroller.Button>;\n\ntype LatestThreadScrollerLayoutContextValue = {\n  contentElement: HTMLElement | null;\n  rootElement: HTMLElement | null;\n  setContentElement: (node: HTMLElement | null) => void;\n  setRootElement: (node: HTMLElement | null) => void;\n};\n\nconst LatestThreadScrollerLayoutContext =\n  React.createContext<LatestThreadScrollerLayoutContextValue | null>(null);\n\nconst useLatestThreadScrollerLayout = () =>\n  React.useContext(LatestThreadScrollerLayoutContext);\n\nexport type LatestThreadScrollerProviderProps = MessageScrollerProviderProps;\n\nexport function LatestThreadScrollerProvider({\n  autoScroll = true,\n  defaultScrollPosition = \"last-anchor\",\n  scrollPreviousItemPeek = 64,\n  ...props\n}: LatestThreadScrollerProviderProps) {\n  return (\n    <MessageScroller.Provider\n      autoScroll={autoScroll}\n      defaultScrollPosition={defaultScrollPosition}\n      scrollPreviousItemPeek={scrollPreviousItemPeek}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerRootProps = MessageScrollerRootProps;\n\nexport function LatestThreadScrollerRoot({\n  className,\n  ref,\n  ...props\n}: LatestThreadScrollerRootProps) {\n  const [rootElement, setRootElement] = React.useState<HTMLElement | null>(null);\n  const [contentElement, setContentElement] =\n    React.useState<HTMLElement | null>(null);\n  const layoutContext = React.useMemo<LatestThreadScrollerLayoutContextValue>(\n    () => ({\n      contentElement,\n      rootElement,\n      setContentElement,\n      setRootElement,\n    }),\n    [contentElement, rootElement]\n  );\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setRootElement(node);\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n\n  return (\n    <LatestThreadScrollerLayoutContext.Provider value={layoutContext}>\n      <MessageScroller.Root\n        ref={setRef}\n        className={cx(\n          \"relative flex size-full min-h-0 flex-1 flex-col overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </LatestThreadScrollerLayoutContext.Provider>\n  );\n}\n\nexport type LatestThreadScrollerViewportProps =\n  MessageScrollerViewportProps & {\n    onViewportChange?: (node: HTMLElement | null) => void;\n  };\n\nexport function LatestThreadScrollerViewport({\n  className,\n  onViewportChange,\n  preserveScrollOnPrepend = true,\n  ref,\n  ...props\n}: LatestThreadScrollerViewportProps) {\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n      onViewportChange?.(node);\n    },\n    [onViewportChange, ref]\n  );\n\n  return (\n    <MessageScroller.Viewport\n      ref={setRef}\n      className={cx(\n        \"size-full min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      preserveScrollOnPrepend={preserveScrollOnPrepend}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerContentProps = MessageScrollerContentProps;\n\nexport function LatestThreadScrollerContent({\n  className,\n  ref,\n  ...props\n}: LatestThreadScrollerContentProps) {\n  const layout = useLatestThreadScrollerLayout();\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      layout?.setContentElement(node);\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [layout, ref]\n  );\n\n  return (\n    <MessageScroller.Content\n      ref={setRef}\n      data-agents24-latest-thread-content=\"\"\n      className={cx(\"flex h-max min-h-full flex-col gap-8 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerItemProps = Omit<\n  MessageScrollerItemProps,\n  \"messageId\"\n> & {\n  messageId: string;\n};\n\nexport function LatestThreadScrollerItem({\n  className,\n  messageId,\n  ...props\n}: LatestThreadScrollerItemProps) {\n  return (\n    <MessageScroller.Item\n      className={cx(\n        \"min-w-0 shrink-0 overflow-visible\",\n        className\n      )}\n      messageId={messageId}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerButtonProps = Omit<\n  MessageScrollerButtonProps,\n  \"render\"\n> & {\n  className?: string;\n  render?: MessageScrollerButtonProps[\"render\"];\n};\n\nexport function LatestThreadScrollerButton({\n  children,\n  className,\n  direction = \"end\",\n  render,\n  ...props\n}: LatestThreadScrollerButtonProps) {\n  if (render) {\n    return (\n      <MessageScroller.Button\n        direction={direction}\n        render={render}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <MessageScroller.Button\n      direction={direction}\n      render={(buttonProps) => (\n        <button\n          {...(buttonProps as Record<string, unknown>)}\n          aria-label={\n            direction === \"end\"\n              ? \"Scroll to latest message\"\n              : \"Scroll to first message\"\n          }\n          className={cx(\n            \"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\",\n            className\n          )}\n          type=\"button\"\n        >\n          {children ?? (direction === \"end\" ? \"↓\" : \"↑\")}\n        </button>\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerOutlineItem = {\n  id: string;\n  label: string;\n  messageIds?: string[];\n  responsePreview?: string;\n};\n\nexport type LatestThreadScrollerOutlineProps = {\n  cardClassName?: string;\n  className?: string;\n  contentMaxWidth?: number;\n  dir?: \"ltr\" | \"rtl\";\n  items: LatestThreadScrollerOutlineItem[];\n  minContainerWidthForRail?: number;\n  minSideGutterForRail?: number;\n  side?: \"left\" | \"right\";\n};\n\nexport function LatestThreadScrollerOutline({\n  cardClassName,\n  className,\n  contentMaxWidth = 768,\n  dir = \"ltr\",\n  items,\n  minContainerWidthForRail = 0,\n  minSideGutterForRail = 48,\n  side,\n}: LatestThreadScrollerOutlineProps) {\n  const navRef = React.useRef<HTMLElement | null>(null);\n  const layout = useLatestThreadScrollerLayout();\n  const [hasSideRoom, setHasSideRoom] = React.useState(false);\n  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);\n  const { scrollToMessage } = useMessageScroller();\n  const { currentAnchorId, visibleMessageIds } = useMessageScrollerVisibility();\n  const visibleMessageIdSet = React.useMemo(\n    () => new Set(visibleMessageIds),\n    [visibleMessageIds]\n  );\n  const focusIndex = hoveredIndex ?? -1;\n  const railSide = side ?? (dir === \"rtl\" ? \"right\" : \"left\");\n\n  React.useEffect(() => {\n    const root = layout?.rootElement ?? navRef.current?.parentElement;\n    if (!root) return;\n\n    const updateSideRoom = () => {\n      const rootRect = root.getBoundingClientRect();\n      const rootWidth = rootRect.width;\n      const content = layout?.contentElement;\n      const sideGutter = content\n        ? Math.max(\n            0,\n            railSide === \"left\"\n              ? content.getBoundingClientRect().left - rootRect.left\n              : rootRect.right - content.getBoundingClientRect().right\n          )\n        : Math.max(0, (rootWidth - contentMaxWidth) / 2);\n      const nextHasSideRoom =\n        rootWidth >= minContainerWidthForRail &&\n        sideGutter >= minSideGutterForRail;\n      setHasSideRoom((current) =>\n        current === nextHasSideRoom ? current : nextHasSideRoom\n      );\n    };\n\n    updateSideRoom();\n    const resizeObserver = new ResizeObserver(updateSideRoom);\n    resizeObserver.observe(root);\n    const content = layout?.contentElement;\n    if (content) {\n      resizeObserver.observe(content);\n    }\n    return () => resizeObserver.disconnect();\n  }, [\n    contentMaxWidth,\n    layout?.contentElement,\n    layout?.rootElement,\n    minContainerWidthForRail,\n    minSideGutterForRail,\n    railSide,\n  ]);\n\n  if (items.length < 2) {\n    return null;\n  }\n\n  return (\n    <nav\n      ref={navRef}\n      aria-label=\"Transcript outline\"\n      className={cx(\n        \"pointer-events-none absolute top-[46%] z-10 max-h-[min(18rem,calc(100%-10rem))] w-16 -translate-y-1/2 overflow-visible\",\n        hasSideRoom ? \"hidden md:block\" : \"hidden\",\n        railSide === \"left\" ? \"left-1\" : \"right-1\",\n        className\n      )}\n      dir={dir}\n    >\n      <div className=\"pointer-events-auto flex flex-col gap-0 py-1\">\n        {items.map((item, index) => {\n          const itemMessageIds =\n            item.messageIds && item.messageIds.length > 0\n              ? item.messageIds\n              : [item.id];\n          const active = itemMessageIds.some(\n            (messageId) =>\n              visibleMessageIdSet.has(messageId) || messageId === currentAnchorId\n          );\n          const distance =\n            focusIndex >= 0 ? Math.abs(index - focusIndex) : Number.POSITIVE_INFINITY;\n          const isFocused = distance === 0;\n          const isNear = distance === 1;\n          const isNextNear = distance === 2;\n          const barWidth = isFocused\n            ? 50\n            : isNear\n              ? 36\n              : isNextNear\n                ? 23\n                : 10;\n          const barOpacity = isFocused ? 1 : isNear ? 0.78 : isNextNear ? 0.58 : 0.36;\n          const fallbackLabel = `Turn ${index + 1}`;\n          const previewLabel =\n            item.label && item.label !== fallbackLabel ? item.label : \"\";\n          const responsePreview = (item.responsePreview || \"\").trim();\n\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              data-active={active}\n              dir=\"ltr\"\n              className={cx(\n                \"group relative flex h-2 w-16 items-center rounded-sm outline-none\",\n                railSide === \"left\" ? \"justify-start\" : \"justify-end\"\n              )}\n              aria-label={`Jump to ${item.label || fallbackLabel}`}\n              onBlur={() => setHoveredIndex(null)}\n              onFocus={() => setHoveredIndex(index)}\n              onMouseEnter={() => setHoveredIndex(index)}\n              onMouseLeave={() => setHoveredIndex(null)}\n              onClick={() =>\n                scrollToMessage(item.id, {\n                  align: \"start\",\n                  behavior: \"smooth\",\n                })\n              }\n            >\n              <span\n                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\"\n                style={{\n                  opacity: barOpacity,\n                  width: barWidth,\n                }}\n              />\n              {previewLabel ? (\n                <span\n                  dir={dir}\n                  className={cx(\n                    \"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\",\n                    railSide === \"left\"\n                      ? \"left-full ml-2 -translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0\"\n                      : \"right-full mr-2 translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0\",\n                    cardClassName\n                  )}\n                >\n                  <span\n                    className=\"block overflow-hidden text-sm leading-5 text-foreground\"\n                    style={{\n                      display: \"-webkit-box\",\n                      WebkitBoxOrient: \"vertical\",\n                      WebkitLineClamp: responsePreview ? 2 : 4,\n                    }}\n                  >\n                    {previewLabel}\n                  </span>\n                  {responsePreview ? (\n                    <span\n                      className=\"mt-1 block overflow-hidden text-sm leading-5 text-muted-foreground\"\n                      style={{\n                        display: \"-webkit-box\",\n                        WebkitBoxOrient: \"vertical\",\n                        WebkitLineClamp: 2,\n                      }}\n                    >\n                      {responsePreview}\n                    </span>\n                  ) : null}\n                </span>\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    </nav>\n  );\n}\n\nexport const LatestThreadScroller = {\n  Provider: LatestThreadScrollerProvider,\n  Root: LatestThreadScrollerRoot,\n  Viewport: LatestThreadScrollerViewport,\n  Content: LatestThreadScrollerContent,\n  Item: LatestThreadScrollerItem,\n  Button: LatestThreadScrollerButton,\n  Outline: LatestThreadScrollerOutline,\n};\n"],"mappings":"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","names":["content"]}

package/dist/chunk-EWZO4QJI.js

@@ -0,0 +1,140 @@
+// src/streaming-text.ts
+import { useEffect, useRef, useState } from "react";
+var DEFAULT_COMPLETED_TEXT_CACHE_SIZE = 200;
+var defaultCompletedTextCache = /* @__PURE__ */ new Map();
+var defaultStreamingTextCache = {
+  get: (id) => defaultCompletedTextCache.get(id),
+  set: (id, text) => {
+    defaultCompletedTextCache.set(id, text);
+    if (defaultCompletedTextCache.size > DEFAULT_COMPLETED_TEXT_CACHE_SIZE) {
+      const firstKey = defaultCompletedTextCache.keys().next().value;
+      if (firstKey) defaultCompletedTextCache.delete(firstKey);
+    }
+  }
+};
+var getActiveStreamingTextPartId = (message, streamingMessageId) => {
+  if (message.role !== "assistant" || streamingMessageId !== message.id) return null;
+  return message.parts.slice().reverse().find((part) => part.kind === "text")?.id || null;
+};
+var isActiveStreamingTextPart = (message, part, streamingMessageId) => part.kind === "text" && part.id === getActiveStreamingTextPartId(message, streamingMessageId);
+function useStreamingText({
+  id,
+  isStreaming,
+  text,
+  cache = defaultStreamingTextCache,
+  charsPerSecond = 72,
+  catchupThreshold = 40,
+  maxCatchupChars = 20
+}) {
+  const cacheAdapter = cache === false ? null : cache;
+  const [displayedText, setDisplayedText] = useState(() => {
+    const cachedText = cacheAdapter?.get(id);
+    return isStreaming && cachedText !== text ? "" : text;
+  });
+  const targetRef = useRef(text);
+  const displayedRef = useRef(displayedText);
+  const rafRef = useRef(null);
+  const lastFrameAtRef = useRef(null);
+  const idRef = useRef(id);
+  const shouldAnimateRef = useRef(isStreaming);
+  useEffect(() => {
+    if (isStreaming || !text) return;
+    cacheAdapter?.set(id, text);
+  }, [cacheAdapter, id, isStreaming, text]);
+  useEffect(() => {
+    targetRef.current = text;
+  }, [text]);
+  useEffect(() => {
+    if (idRef.current === id) return;
+    idRef.current = id;
+    const cachedText = cacheAdapter?.get(id);
+    const initial = isStreaming && cachedText !== text ? "" : text;
+    shouldAnimateRef.current = isStreaming && initial !== text;
+    displayedRef.current = initial;
+    setDisplayedText(initial);
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    lastFrameAtRef.current = null;
+  }, [cacheAdapter, id, isStreaming, text]);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      return;
+    }
+    const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      shouldAnimateRef.current = false;
+      return;
+    }
+    const cachedText = cacheAdapter?.get(id);
+    if (cachedText === text) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      shouldAnimateRef.current = false;
+      return;
+    }
+    if (isStreaming) {
+      shouldAnimateRef.current = true;
+    }
+    if (!shouldAnimateRef.current) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      return;
+    }
+    if (!text.startsWith(displayedRef.current)) {
+      displayedRef.current = "";
+      setDisplayedText("");
+    }
+    const tick = (timestamp) => {
+      const previousTimestamp = lastFrameAtRef.current ?? timestamp;
+      lastFrameAtRef.current = timestamp;
+      const target = targetRef.current;
+      const current = displayedRef.current;
+      if (current.length >= target.length) {
+        shouldAnimateRef.current = false;
+        rafRef.current = null;
+        return;
+      }
+      const elapsedMs = Math.max(8, timestamp - previousTimestamp);
+      const charsFromTime = Math.max(1, Math.floor(elapsedMs / 1e3 * charsPerSecond));
+      const gap = target.length - current.length;
+      const catchupStep = gap > catchupThreshold ? Math.min(maxCatchupChars, Math.ceil(gap / 10)) : charsFromTime;
+      const nextLength = Math.min(
+        target.length,
+        current.length + Math.max(charsFromTime, catchupStep)
+      );
+      const next = target.slice(0, nextLength);
+      displayedRef.current = next;
+      setDisplayedText(next);
+      rafRef.current = window.requestAnimationFrame(tick);
+    };
+    if (rafRef.current === null && displayedRef.current.length < text.length) {
+      rafRef.current = window.requestAnimationFrame(tick);
+    }
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      lastFrameAtRef.current = null;
+    };
+  }, [cacheAdapter, catchupThreshold, charsPerSecond, id, isStreaming, maxCatchupChars, text]);
+  return {
+    displayedText,
+    isAnimating: isStreaming,
+    mode: isStreaming ? "streaming" : "static",
+    parseIncompleteMarkdown: isStreaming
+  };
+}
+
+export {
+  getActiveStreamingTextPartId,
+  isActiveStreamingTextPart,
+  useStreamingText
+};
+//# sourceMappingURL=chunk-EWZO4QJI.js.map

package/dist/chunk-EWZO4QJI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/streaming-text.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport type { ChatMessage, ChatPart } from \"./types\";\n\nexport type StreamingTextMode = \"streaming\" | \"static\";\n\nexport type StreamingTextCache = {\n  get: (id: string) => string | undefined;\n  set: (id: string, text: string) => void;\n};\n\nexport type UseStreamingTextOptions = {\n  id: string;\n  isStreaming: boolean;\n  text: string;\n  cache?: StreamingTextCache | false;\n  charsPerSecond?: number;\n  catchupThreshold?: number;\n  maxCatchupChars?: number;\n};\n\nexport type UseStreamingTextResult = {\n  displayedText: string;\n  isAnimating: boolean;\n  mode: StreamingTextMode;\n  parseIncompleteMarkdown: boolean;\n};\n\nconst DEFAULT_COMPLETED_TEXT_CACHE_SIZE = 200;\nconst defaultCompletedTextCache = new Map<string, string>();\n\nconst defaultStreamingTextCache: StreamingTextCache = {\n  get: (id) => defaultCompletedTextCache.get(id),\n  set: (id, text) => {\n    defaultCompletedTextCache.set(id, text);\n    if (defaultCompletedTextCache.size > DEFAULT_COMPLETED_TEXT_CACHE_SIZE) {\n      const firstKey = defaultCompletedTextCache.keys().next().value;\n      if (firstKey) defaultCompletedTextCache.delete(firstKey);\n    }\n  },\n};\n\nexport const getActiveStreamingTextPartId = (\n  message: ChatMessage,\n  streamingMessageId: string | null\n) => {\n  if (message.role !== \"assistant\" || streamingMessageId !== message.id) return null;\n  return (\n    message.parts\n      .slice()\n      .reverse()\n      .find((part) => part.kind === \"text\")?.id || null\n  );\n};\n\nexport const isActiveStreamingTextPart = (\n  message: ChatMessage,\n  part: ChatPart,\n  streamingMessageId: string | null\n) => part.kind === \"text\" && part.id === getActiveStreamingTextPartId(message, streamingMessageId);\n\nexport function useStreamingText({\n  id,\n  isStreaming,\n  text,\n  cache = defaultStreamingTextCache,\n  charsPerSecond = 72,\n  catchupThreshold = 40,\n  maxCatchupChars = 20,\n}: UseStreamingTextOptions): UseStreamingTextResult {\n  const cacheAdapter = cache === false ? null : cache;\n  const [displayedText, setDisplayedText] = useState(() => {\n    const cachedText = cacheAdapter?.get(id);\n    return isStreaming && cachedText !== text ? \"\" : text;\n  });\n  const targetRef = useRef(text);\n  const displayedRef = useRef(displayedText);\n  const rafRef = useRef<number | null>(null);\n  const lastFrameAtRef = useRef<number | null>(null);\n  const idRef = useRef(id);\n  const shouldAnimateRef = useRef(isStreaming);\n\n  useEffect(() => {\n    if (isStreaming || !text) return;\n    cacheAdapter?.set(id, text);\n  }, [cacheAdapter, id, isStreaming, text]);\n\n  useEffect(() => {\n    targetRef.current = text;\n  }, [text]);\n\n  useEffect(() => {\n    if (idRef.current === id) return;\n\n    idRef.current = id;\n    const cachedText = cacheAdapter?.get(id);\n    const initial = isStreaming && cachedText !== text ? \"\" : text;\n    shouldAnimateRef.current = isStreaming && initial !== text;\n    displayedRef.current = initial;\n    setDisplayedText(initial);\n\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n    lastFrameAtRef.current = null;\n  }, [cacheAdapter, id, isStreaming, text]);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") {\n      displayedRef.current = text;\n      setDisplayedText(text);\n      return;\n    }\n\n    const reduceMotion =\n      typeof window.matchMedia === \"function\" &&\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n    if (reduceMotion) {\n      displayedRef.current = text;\n      setDisplayedText(text);\n      shouldAnimateRef.current = false;\n      return;\n    }\n\n    const cachedText = cacheAdapter?.get(id);\n    if (cachedText === text) {\n      displayedRef.current = text;\n      setDisplayedText(text);\n      shouldAnimateRef.current = false;\n      return;\n    }\n\n    if (isStreaming) {\n      shouldAnimateRef.current = true;\n    }\n\n    if (!shouldAnimateRef.current) {\n      displayedRef.current = text;\n      setDisplayedText(text);\n      return;\n    }\n\n    if (!text.startsWith(displayedRef.current)) {\n      displayedRef.current = \"\";\n      setDisplayedText(\"\");\n    }\n\n    const tick = (timestamp: number) => {\n      const previousTimestamp = lastFrameAtRef.current ?? timestamp;\n      lastFrameAtRef.current = timestamp;\n\n      const target = targetRef.current;\n      const current = displayedRef.current;\n\n      if (current.length >= target.length) {\n        shouldAnimateRef.current = false;\n        rafRef.current = null;\n        return;\n      }\n\n      const elapsedMs = Math.max(8, timestamp - previousTimestamp);\n      const charsFromTime = Math.max(1, Math.floor((elapsedMs / 1000) * charsPerSecond));\n      const gap = target.length - current.length;\n      const catchupStep =\n        gap > catchupThreshold ? Math.min(maxCatchupChars, Math.ceil(gap / 10)) : charsFromTime;\n      const nextLength = Math.min(\n        target.length,\n        current.length + Math.max(charsFromTime, catchupStep)\n      );\n\n      const next = target.slice(0, nextLength);\n      displayedRef.current = next;\n      setDisplayedText(next);\n      rafRef.current = window.requestAnimationFrame(tick);\n    };\n\n    if (rafRef.current === null && displayedRef.current.length < text.length) {\n      rafRef.current = window.requestAnimationFrame(tick);\n    }\n\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n      lastFrameAtRef.current = null;\n    };\n  }, [cacheAdapter, catchupThreshold, charsPerSecond, id, isStreaming, maxCatchupChars, text]);\n\n  return {\n    displayedText,\n    isAnimating: isStreaming,\n    mode: isStreaming ? \"streaming\" : \"static\",\n    parseIncompleteMarkdown: isStreaming,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-UU7OXHL3.js

@@ -0,0 +1,11 @@
+// src/ui/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...values) {
+  return twMerge(clsx(values));
+}
+
+export {
+  cn
+};
+//# sourceMappingURL=chunk-UU7OXHL3.js.map

package/dist/chunk-UU7OXHL3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...values: ClassValue[]) {\n  return twMerge(clsx(values));\n}\n"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}