@mastra/playground-ui 40.0.0-alpha.3 → 40.0.0-alpha.5

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @mastra/playground-ui
 
+## 40.0.0-alpha.5
+
+### Patch Changes
+
+- Updated dependencies [[`a0085fa`](https://github.com/mastra-ai/mastra/commit/a0085fa0934e52c37c8c8b3d75a6bb5cd199af36)]:
+  - @mastra/core@1.50.0-alpha.5
+  - @mastra/client-js@1.31.0-alpha.5
+  - @mastra/react@1.2.3-alpha.5
+
+## 40.0.0-alpha.4
+
+### Patch Changes
+
+- Improved Studio metrics latency tabs so empty entity types are clearly disabled. ([#18996](https://github.com/mastra-ai/mastra/pull/18996))
+
+- Added reusable message scroller and thread rail primitives for conversation navigation, plus a shared `useIsomorphicLayoutEffect` hook for layout work that must also render safely on the server. ([#18902](https://github.com/mastra-ai/mastra/pull/18902))
+
+  ```tsx
+  import {
+    MessageScroller,
+    MessageScrollerButton,
+    MessageScrollerContent,
+    MessageScrollerItem,
+    MessageScrollerProvider,
+    MessageScrollerViewport,
+  } from '@mastra/playground-ui/components/MessageScroller';
+  import { ThreadRail, buildThreadRailTurns } from '@mastra/playground-ui/components/ThreadRail';
+
+  const turns = buildThreadRailTurns(messages);
+
+  <MessageScrollerProvider>
+    <MessageScroller>
+      <MessageScrollerViewport>
+        <MessageScrollerContent>
+          {messages.map(message => (
+            <MessageScrollerItem key={message.id} messageId={message.id}>
+              <MessageRow message={message} />
+            </MessageScrollerItem>
+          ))}
+        </MessageScrollerContent>
+      </MessageScrollerViewport>
+      <MessageScrollerButton />
+      <ThreadRail turns={turns} />
+    </MessageScroller>
+  </MessageScrollerProvider>;
+  ```
+
+- Updated dependencies [[`4039488`](https://github.com/mastra-ai/mastra/commit/403948898af7293198d9e8b3e7fb47f623c78b94), [`b2c9d70`](https://github.com/mastra-ai/mastra/commit/b2c9d70757207fb01a9069549e69b6f0d73a6636), [`252f63d`](https://github.com/mastra-ai/mastra/commit/252f63d8fec723955adb2202be2f01a75ad0e69c), [`c547a77`](https://github.com/mastra-ai/mastra/commit/c547a7729bdf64dfc2df29c965046c0712a18f10), [`81542c1`](https://github.com/mastra-ai/mastra/commit/81542c1835c35bc32f2ce4fa9136ee11993cd299), [`cb24ce7`](https://github.com/mastra-ai/mastra/commit/cb24ce76bd16ca88eb6a963f6277f8780e703029), [`5f9858f`](https://github.com/mastra-ai/mastra/commit/5f9858f791f1137ca7d52d23559fb4568f7a9026)]:
+  - @mastra/core@1.50.0-alpha.4
+  - @mastra/client-js@1.31.0-alpha.4
+  - @mastra/react@1.2.3-alpha.4
+
 ## 40.0.0-alpha.3
 
 ### Patch Changes

package/dist/components/CodeBlock.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const code = require('../code-B3WONxnA.cjs');
 const copyButton = require('../copy-button-DN9mi_LV.cjs');
 const select = require('../select-BxSmi19p.cjs');
-const tabsTab = require('../tabs-tab-BeUPTvaP.cjs');
+const tabsTab = require('../tabs-tab-DkeS2Iv0.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 

package/dist/components/CodeBlock.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { C as Code } from '../code-C5KVVzOZ.js';
 import { C as CopyButton } from '../copy-button-CJjjhHKN.js';
 import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../select-CFB6QZ9B.js';
-import { b as Tabs, a as TabList, T as Tab } from '../tabs-tab-CaZnZdY8.js';
+import { b as Tabs, a as TabList, T as Tab } from '../tabs-tab-1KGOybMG.js';
 import { transitions } from '../primitives/transitions.es.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 

package/dist/components/MessageScroller.cjs.js

@@ -0,0 +1,538 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const messageScrollerHooks = require('../message-scroller-hooks-DdXqrmC2.cjs');
+const utils_cn = require('../cn-vA5sWo9W.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const VISIBILITY_EPSILON = 0.5;
+const mergeRefs = (...refs) => (element) => {
+  refs.forEach((ref) => {
+    if (!ref) return;
+    if (typeof ref === "function") {
+      ref(element);
+      return;
+    }
+    ref.current = element;
+  });
+};
+const scrollableMatches = (left, right) => left.start === right.start && left.end === right.end;
+const visibilityMatches = (left, right) => left.currentAnchorId === right.currentAnchorId && left.visibleMessageIds.length === right.visibleMessageIds.length && left.visibleMessageIds.every((messageId, index) => messageId === right.visibleMessageIds[index]);
+const getContentPadding = (contentElement) => {
+  if (!contentElement) return { start: 0, end: 0 };
+  const styles = window.getComputedStyle(contentElement);
+  return {
+    start: Number.parseFloat(styles.paddingBlockStart || styles.paddingTop || "0") || 0,
+    end: Number.parseFloat(styles.paddingBlockEnd || styles.paddingBottom || "0") || 0
+  };
+};
+const getRelativeTop = (element, viewportElement) => {
+  const elementRect = element.getBoundingClientRect();
+  const viewportRect = viewportElement.getBoundingClientRect();
+  return elementRect.top - viewportRect.top + viewportElement.scrollTop;
+};
+const scrollViewportTo = (viewportElement, top, behavior) => {
+  if (typeof viewportElement.scrollTo === "function") {
+    viewportElement.scrollTo({ top, behavior });
+    return;
+  }
+  viewportElement.scrollTop = top;
+};
+const scheduleScrollSync = (callback) => {
+  if (typeof window.requestAnimationFrame === "function") {
+    window.requestAnimationFrame(callback);
+    return;
+  }
+  window.setTimeout(callback, 0);
+};
+const getScrollTarget = ({
+  align,
+  element,
+  scrollMargin,
+  viewportElement
+}) => {
+  const contentPadding = getContentPadding(element.parentElement);
+  const elementTop = getRelativeTop(element, viewportElement);
+  const elementHeight = element.getBoundingClientRect().height;
+  const visibleHeight = Math.max(0, viewportElement.clientHeight - contentPadding.start - contentPadding.end);
+  if (align === "center") return elementTop - contentPadding.start - (visibleHeight - elementHeight) / 2 - scrollMargin;
+  if (align === "end")
+    return elementTop - viewportElement.clientHeight + elementHeight + contentPadding.end + scrollMargin;
+  if (align === "nearest") {
+    const elementBottom = elementTop + elementHeight;
+    const viewportTop = viewportElement.scrollTop + contentPadding.start;
+    const viewportBottom = viewportElement.scrollTop + viewportElement.clientHeight - contentPadding.end;
+    if (elementTop >= viewportTop && elementBottom <= viewportBottom) return viewportElement.scrollTop;
+    return elementTop < viewportTop ? elementTop - contentPadding.start - scrollMargin : elementBottom - viewportElement.clientHeight + contentPadding.end + scrollMargin;
+  }
+  return elementTop - contentPadding.start - scrollMargin;
+};
+const getCurrentAnchorId = ({
+  fallbackAnchorId,
+  items,
+  scrollMargin,
+  scrollPreviousItemPeek,
+  visibleMessageIds,
+  viewportElement
+}) => {
+  const anchorLine = viewportElement.getBoundingClientRect().top + scrollMargin + scrollPreviousItemPeek;
+  const anchors = items.filter(([, item]) => item.scrollAnchor);
+  let anchoredAboveViewport;
+  for (const [messageId, item] of anchors) {
+    if (item.element.getBoundingClientRect().top <= anchorLine + VISIBILITY_EPSILON) {
+      anchoredAboveViewport = messageId;
+    }
+  }
+  if (anchoredAboveViewport) return anchoredAboveViewport;
+  return anchors.find(([messageId]) => visibleMessageIds.has(messageId))?.[0] ?? fallbackAnchorId;
+};
+function MessageScrollerProvider({
+  autoScroll = false,
+  children,
+  defaultScrollPosition = "end",
+  scrollEdgeThreshold = messageScrollerHooks.DEFAULT_SCROLL_EDGE_THRESHOLD,
+  scrollMargin = messageScrollerHooks.DEFAULT_SCROLL_MARGIN,
+  scrollPreviousItemPeek = messageScrollerHooks.DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK
+}) {
+  const itemsRef = React__namespace.useRef(null);
+  itemsRef.current ??= /* @__PURE__ */ new Map();
+  const itemsRegistry = itemsRef.current;
+  const visibleMessageIdsRef = React__namespace.useRef(null);
+  visibleMessageIdsRef.current ??= /* @__PURE__ */ new Set();
+  const intersectingMessageIds = visibleMessageIdsRef.current;
+  const [itemsVersion, setItemsVersion] = React__namespace.useState(0);
+  const [rootElement, setRootElement] = React__namespace.useState(null);
+  const [viewportElement, setViewportElement] = React__namespace.useState(null);
+  const [contentElement, setContentElement] = React__namespace.useState(null);
+  const defaultScrollAppliedRef = React__namespace.useRef(false);
+  const [scrollable, setScrollable] = React__namespace.useState(messageScrollerHooks.DEFAULT_SCROLLABLE);
+  const [visibility, setVisibility] = React__namespace.useState(messageScrollerHooks.DEFAULT_VISIBILITY);
+  const publishScrollable = React__namespace.useCallback(
+    (nextScrollable) => {
+      const scrollableValue = [nextScrollable.start && "start", nextScrollable.end && "end"].filter(Boolean).join(" ");
+      for (const element of [rootElement, viewportElement]) {
+        if (!element) continue;
+        if (scrollableValue) {
+          element.setAttribute("data-scrollable", scrollableValue);
+        } else {
+          element.removeAttribute("data-scrollable");
+        }
+      }
+      setScrollable((current) => scrollableMatches(current, nextScrollable) ? current : nextScrollable);
+    },
+    [rootElement, viewportElement]
+  );
+  const publishVisibility = React__namespace.useCallback((nextVisibility) => {
+    setVisibility((current) => visibilityMatches(current, nextVisibility) ? current : nextVisibility);
+  }, []);
+  const updateScrollable = React__namespace.useCallback(() => {
+    if (!viewportElement) {
+      publishScrollable(messageScrollerHooks.DEFAULT_SCROLLABLE);
+      return;
+    }
+    const remainingScroll = viewportElement.scrollHeight - viewportElement.scrollTop - viewportElement.clientHeight;
+    publishScrollable({
+      start: viewportElement.scrollTop > scrollEdgeThreshold,
+      end: remainingScroll > scrollEdgeThreshold
+    });
+  }, [publishScrollable, scrollEdgeThreshold, viewportElement]);
+  const updateVisibility = React__namespace.useCallback(() => {
+    const items = Array.from(itemsRegistry.entries());
+    const fallbackAnchorId = items.filter(([, item]) => item.scrollAnchor).at(-1)?.[0] ?? items.at(-1)?.[0];
+    if (items.length === 0) {
+      publishVisibility(messageScrollerHooks.DEFAULT_VISIBILITY);
+      return;
+    }
+    if (!viewportElement) {
+      publishVisibility({
+        currentAnchorId: fallbackAnchorId,
+        visibleMessageIds: fallbackAnchorId ? [fallbackAnchorId] : []
+      });
+      return;
+    }
+    const viewportRect = viewportElement.getBoundingClientRect();
+    const visibleMessageIds = /* @__PURE__ */ new Set();
+    if (typeof IntersectionObserver === "undefined") {
+      const visibilityTop = viewportRect.top + scrollMargin + scrollPreviousItemPeek;
+      items.forEach(([messageId, item]) => {
+        const rect = item.element.getBoundingClientRect();
+        if (rect.bottom > visibilityTop && rect.top < viewportRect.bottom) visibleMessageIds.add(messageId);
+      });
+    } else {
+      intersectingMessageIds.forEach((messageId) => visibleMessageIds.add(messageId));
+    }
+    const orderedVisibleMessageIds = items.flatMap(
+      ([messageId]) => visibleMessageIds.has(messageId) ? [messageId] : []
+    );
+    publishVisibility({
+      currentAnchorId: getCurrentAnchorId({
+        fallbackAnchorId,
+        items,
+        scrollMargin,
+        scrollPreviousItemPeek,
+        visibleMessageIds,
+        viewportElement
+      }),
+      visibleMessageIds: orderedVisibleMessageIds.length > 0 ? orderedVisibleMessageIds : fallbackAnchorId ? [fallbackAnchorId] : []
+    });
+  }, [intersectingMessageIds, itemsRegistry, publishVisibility, scrollMargin, scrollPreviousItemPeek, viewportElement]);
+  const syncAfterScroll = React__namespace.useCallback(() => {
+    updateScrollable();
+    updateVisibility();
+  }, [updateScrollable, updateVisibility]);
+  const scrollToElement = React__namespace.useCallback(
+    (element, {
+      align = "start",
+      behavior = "auto",
+      scrollMargin: optionScrollMargin = scrollMargin
+    } = {}) => {
+      if (!viewportElement || !contentElement?.contains(element)) return false;
+      const nextScrollTop = Math.max(
+        0,
+        getScrollTarget({ align, element, scrollMargin: optionScrollMargin, viewportElement })
+      );
+      if (Math.abs(viewportElement.scrollTop - nextScrollTop) <= VISIBILITY_EPSILON) {
+        scrollViewportTo(viewportElement, nextScrollTop, "auto");
+        syncAfterScroll();
+        return true;
+      }
+      scrollViewportTo(viewportElement, nextScrollTop, behavior);
+      scheduleScrollSync(syncAfterScroll);
+      return true;
+    },
+    [contentElement, scrollMargin, syncAfterScroll, viewportElement]
+  );
+  const scrollToStart = React__namespace.useCallback(
+    ({ behavior = "auto" } = {}) => {
+      if (!viewportElement) return false;
+      scrollViewportTo(viewportElement, 0, behavior);
+      scheduleScrollSync(syncAfterScroll);
+      return true;
+    },
+    [syncAfterScroll, viewportElement]
+  );
+  const scrollToEnd = React__namespace.useCallback(
+    ({ behavior = "auto" } = {}) => {
+      if (!viewportElement) return false;
+      scrollViewportTo(
+        viewportElement,
+        Math.max(0, viewportElement.scrollHeight - viewportElement.clientHeight),
+        behavior
+      );
+      scheduleScrollSync(syncAfterScroll);
+      return true;
+    },
+    [syncAfterScroll, viewportElement]
+  );
+  const scrollToMessage = React__namespace.useCallback(
+    (messageId, options) => {
+      const item = itemsRegistry.get(messageId);
+      if (!item) return false;
+      return scrollToElement(item.element, options);
+    },
+    [itemsRegistry, scrollToElement]
+  );
+  const registerItem = React__namespace.useCallback(
+    (messageId, element, scrollAnchor) => {
+      itemsRegistry.set(messageId, { element, scrollAnchor });
+      setItemsVersion((version) => version + 1);
+      return () => {
+        const current = itemsRegistry.get(messageId);
+        if (current?.element !== element) return;
+        itemsRegistry.delete(messageId);
+        intersectingMessageIds.delete(messageId);
+        setItemsVersion((version) => version + 1);
+      };
+    },
+    [intersectingMessageIds, itemsRegistry]
+  );
+  React__namespace.useEffect(() => {
+    if (!contentElement || !viewportElement || typeof IntersectionObserver === "undefined") {
+      updateVisibility();
+      return void 0;
+    }
+    const messageIdByElement = /* @__PURE__ */ new Map();
+    for (const [messageId, item] of itemsRegistry) {
+      messageIdByElement.set(item.element, messageId);
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const messageId = messageIdByElement.get(entry.target);
+          if (!messageId) continue;
+          if (entry.isIntersecting) {
+            intersectingMessageIds.add(messageId);
+          } else {
+            intersectingMessageIds.delete(messageId);
+          }
+        }
+        updateVisibility();
+      },
+      {
+        root: viewportElement,
+        rootMargin: `${-(scrollMargin + scrollPreviousItemPeek)}px 0px 0px 0px`,
+        threshold: [0, 0.01, 0.5, 1]
+      }
+    );
+    for (const [, item] of itemsRegistry) observer.observe(item.element);
+    updateVisibility();
+    return () => observer.disconnect();
+  }, [
+    contentElement,
+    intersectingMessageIds,
+    itemsRegistry,
+    itemsVersion,
+    scrollMargin,
+    scrollPreviousItemPeek,
+    updateVisibility,
+    viewportElement
+  ]);
+  React__namespace.useEffect(() => {
+    if (!viewportElement || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(syncAfterScroll);
+    observer.observe(viewportElement);
+    return () => observer.disconnect();
+  }, [syncAfterScroll, viewportElement]);
+  React__namespace.useLayoutEffect(() => {
+    updateScrollable();
+    updateVisibility();
+  }, [itemsVersion, updateScrollable, updateVisibility]);
+  React__namespace.useLayoutEffect(() => {
+    if (defaultScrollAppliedRef.current || !viewportElement || itemsRegistry.size === 0) return;
+    let didScroll = false;
+    if (defaultScrollPosition === "start") {
+      didScroll = scrollToStart({ behavior: "auto" });
+    } else if (defaultScrollPosition === "last-anchor") {
+      const lastAnchorId = Array.from(itemsRegistry.entries()).filter(([, item]) => item.scrollAnchor).at(-1)?.[0];
+      didScroll = lastAnchorId ? scrollToMessage(lastAnchorId, { align: "start", behavior: "auto" }) : scrollToEnd({ behavior: "auto" });
+    } else {
+      didScroll = scrollToEnd({ behavior: "auto" });
+    }
+    if (didScroll) defaultScrollAppliedRef.current = true;
+  }, [
+    defaultScrollPosition,
+    itemsRegistry,
+    itemsVersion,
+    scrollToEnd,
+    scrollToMessage,
+    scrollToStart,
+    viewportElement
+  ]);
+  React__namespace.useLayoutEffect(() => {
+    if (!autoScroll || !defaultScrollAppliedRef.current) return;
+    scrollToEnd({ behavior: "auto" });
+  }, [autoScroll, itemsVersion, scrollToEnd]);
+  const actionsContextValue = React__namespace.useMemo(
+    () => ({
+      registerItem,
+      scrollToEnd,
+      scrollToMessage,
+      scrollToStart,
+      setContentElement,
+      setRootElement,
+      setViewportElement,
+      syncAfterScroll
+    }),
+    [registerItem, scrollToEnd, scrollToMessage, scrollToStart, syncAfterScroll]
+  );
+  const scrollableContextValue = React__namespace.useMemo(
+    () => ({
+      end: scrollable.end,
+      start: scrollable.start
+    }),
+    [scrollable.end, scrollable.start]
+  );
+  const visibilityContextValue = React__namespace.useMemo(
+    () => ({
+      currentAnchorId: visibility.currentAnchorId,
+      visibleMessageIds: visibility.visibleMessageIds
+    }),
+    [visibility.currentAnchorId, visibility.visibleMessageIds]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(messageScrollerHooks.MessageScrollerActionsContext.Provider, { value: actionsContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(messageScrollerHooks.MessageScrollerScrollableContext.Provider, { value: scrollableContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(messageScrollerHooks.MessageScrollerVisibilityContext.Provider, { value: visibilityContextValue, children }) }) });
+}
+const MessageScroller = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { setRootElement } = messageScrollerHooks.useRequiredMessageScrollerActionsContext("MessageScroller");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: mergeRefs(setRootElement, ref),
+        "data-slot": "message-scroller",
+        className: utils_cn.cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className),
+        ...props
+      }
+    );
+  }
+);
+MessageScroller.displayName = "MessageScroller";
+const MessageScrollerViewport = React__namespace.forwardRef(
+  ({ className, onScroll, preserveScrollOnPrepend, role, tabIndex, ...props }, ref) => {
+    const { setViewportElement, syncAfterScroll } = messageScrollerHooks.useRequiredMessageScrollerActionsContext("MessageScrollerViewport");
+    const viewportRef = React__namespace.useMemo(() => mergeRefs(setViewportElement, ref), [ref, setViewportElement]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: viewportRef,
+        role: role ?? "region",
+        tabIndex: tabIndex ?? 0,
+        "data-slot": "message-scroller-viewport",
+        "data-preserve-scroll-on-prepend": preserveScrollOnPrepend ? "true" : void 0,
+        className: utils_cn.cn(
+          "size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
+          className
+        ),
+        onScroll: (event) => {
+          syncAfterScroll();
+          onScroll?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+MessageScrollerViewport.displayName = "MessageScrollerViewport";
+const MessageScrollerContent = React__namespace.forwardRef(
+  ({ children, className, spacerClassName, role, "aria-relevant": ariaRelevant = "additions", ...props }, ref) => {
+    const { setContentElement, syncAfterScroll } = messageScrollerHooks.useRequiredMessageScrollerActionsContext("MessageScrollerContent");
+    const [contentElement, setLocalContentElement] = React__namespace.useState(null);
+    const contentRef = React__namespace.useMemo(
+      () => mergeRefs(setContentElement, setLocalContentElement, ref),
+      [ref, setContentElement]
+    );
+    React__namespace.useLayoutEffect(() => {
+      syncAfterScroll();
+    }, [syncAfterScroll]);
+    React__namespace.useEffect(() => {
+      if (!contentElement || typeof MutationObserver === "undefined") return void 0;
+      const observer = new MutationObserver(syncAfterScroll);
+      observer.observe(contentElement, { childList: true, subtree: false });
+      return () => observer.disconnect();
+    }, [contentElement, syncAfterScroll]);
+    React__namespace.useEffect(() => {
+      if (!contentElement || typeof ResizeObserver === "undefined") return void 0;
+      const observer = new ResizeObserver(syncAfterScroll);
+      observer.observe(contentElement);
+      return () => observer.disconnect();
+    }, [contentElement, syncAfterScroll]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: contentRef,
+        role: role ?? "log",
+        "aria-relevant": ariaRelevant,
+        "data-slot": "message-scroller-content",
+        className: utils_cn.cn("flex h-max min-h-full flex-col gap-6", className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", "data-message-scroller-spacer": "", hidden: true, className: spacerClassName })
+        ]
+      }
+    );
+  }
+);
+MessageScrollerContent.displayName = "MessageScrollerContent";
+const MessageScrollerItem = React__namespace.forwardRef(
+  ({ className, messageId, scrollAnchor = false, ...props }, ref) => {
+    const { registerItem } = messageScrollerHooks.useRequiredMessageScrollerActionsContext("MessageScrollerItem");
+    const unregisterRef = React__namespace.useRef(void 0);
+    const itemRef = React__namespace.useCallback(
+      (element) => {
+        unregisterRef.current?.();
+        unregisterRef.current = void 0;
+        mergeRefs(ref)(element);
+        if (!element || !messageId) return;
+        unregisterRef.current = registerItem(messageId, element, scrollAnchor);
+      },
+      [messageId, ref, registerItem, scrollAnchor]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: itemRef,
+        "data-slot": "message-scroller-item",
+        "data-message-id": messageId,
+        "data-scroll-anchor": scrollAnchor ? "true" : "false",
+        className: utils_cn.cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
+        ...props
+      }
+    );
+  }
+);
+MessageScrollerItem.displayName = "MessageScrollerItem";
+const MessageScrollerButton = React__namespace.forwardRef(
+  ({ behavior = "smooth", direction = "end", className, children, onClick, tabIndex, type = "button", ...props }, ref) => {
+    const { scrollToEnd, scrollToStart } = messageScrollerHooks.useRequiredMessageScrollerActionsContext("MessageScrollerButton");
+    const { start, end } = messageScrollerHooks.useRequiredMessageScrollerScrollableContext("MessageScrollerButton");
+    const active = direction === "start" ? start : end;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type,
+        ...props,
+        "data-slot": "message-scroller-button",
+        "data-active": active ? "true" : "false",
+        "data-direction": direction,
+        tabIndex: active ? tabIndex : -1,
+        className: utils_cn.cn(
+          "absolute inset-s-1/2 -translate-x-1/2 rounded-full border border-border1 bg-surface3 text-neutral6 transition-[translate,scale,opacity] duration-200 hover:bg-surface4 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+          className
+        ),
+        onClick: (event) => {
+          if (!active) return;
+          onClick?.(event);
+          if (event.defaultPrevented) return;
+          event.currentTarget.blur();
+          if (direction === "start") {
+            scrollToStart({ behavior });
+          } else {
+            scrollToEnd({ behavior });
+          }
+        },
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, { className: "size-4", "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
+        ] })
+      }
+    );
+  }
+);
+MessageScrollerButton.displayName = "MessageScrollerButton";
+
+exports.useMessageScroller = messageScrollerHooks.useMessageScroller;
+exports.useMessageScrollerScrollable = messageScrollerHooks.useMessageScrollerScrollable;
+exports.useMessageScrollerVisibility = messageScrollerHooks.useMessageScrollerVisibility;
+exports.useOptionalMessageScroller = messageScrollerHooks.useOptionalMessageScroller;
+exports.useOptionalMessageScrollerScrollable = messageScrollerHooks.useOptionalMessageScrollerScrollable;
+exports.useOptionalMessageScrollerVisibility = messageScrollerHooks.useOptionalMessageScrollerVisibility;
+exports.MessageScroller = MessageScroller;
+exports.MessageScrollerButton = MessageScrollerButton;
+exports.MessageScrollerContent = MessageScrollerContent;
+exports.MessageScrollerItem = MessageScrollerItem;
+exports.MessageScrollerProvider = MessageScrollerProvider;
+exports.MessageScrollerViewport = MessageScrollerViewport;
+//# sourceMappingURL=MessageScroller.cjs.js.map