@mastra/playground-ui 45.0.0 → 45.1.0-alpha.1

package/dist/message-scroller-DIgCd5n3.cjs

@@ -0,0 +1,589 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const messageScrollerContext = require('./message-scroller-context-_VfCYFBU.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",
+  onReachStart,
+  preserveScrollOnPrepend = false,
+  reachStartThreshold = messageScrollerContext.DEFAULT_REACH_START_THRESHOLD,
+  scrollEdgeThreshold = messageScrollerContext.DEFAULT_SCROLL_EDGE_THRESHOLD,
+  scrollMargin = messageScrollerContext.DEFAULT_SCROLL_MARGIN,
+  scrollPreviousItemPeek = messageScrollerContext.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(messageScrollerContext.DEFAULT_SCROLLABLE);
+  const [visibility, setVisibility] = React__namespace.useState(messageScrollerContext.DEFAULT_VISIBILITY);
+  const atEndRef = React__namespace.useRef(true);
+  const reachStartArmedRef = React__namespace.useRef(false);
+  const reachStartFiredRef = React__namespace.useRef(false);
+  const prependAnchorRef = React__namespace.useRef(null);
+  const firstItemIdRef = React__namespace.useRef(void 0);
+  const onReachStartRef = React__namespace.useRef(onReachStart);
+  React__namespace.useEffect(() => {
+    onReachStartRef.current = onReachStart;
+  }, [onReachStart]);
+  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) {
+      atEndRef.current = true;
+      publishScrollable(messageScrollerContext.DEFAULT_SCROLLABLE);
+      return;
+    }
+    const remainingScroll = viewportElement.scrollHeight - viewportElement.scrollTop - viewportElement.clientHeight;
+    atEndRef.current = remainingScroll < messageScrollerContext.AUTO_SCROLL_ATTACH_THRESHOLD;
+    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(messageScrollerContext.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 notifyScroll = React__namespace.useCallback(() => {
+    const wasScrollable = Boolean(viewportElement && viewportElement.scrollHeight > viewportElement.clientHeight);
+    syncAfterScroll();
+    if (!viewportElement) return;
+    if (atEndRef.current && wasScrollable) reachStartArmedRef.current = true;
+    if (!reachStartArmedRef.current) return;
+    if (!wasScrollable) return;
+    if (viewportElement.scrollTop > reachStartThreshold) {
+      reachStartFiredRef.current = false;
+      return;
+    }
+    if (reachStartFiredRef.current) return;
+    if (!onReachStartRef.current) return;
+    reachStartFiredRef.current = true;
+    if (preserveScrollOnPrepend) {
+      prependAnchorRef.current = {
+        scrollHeight: viewportElement.scrollHeight,
+        scrollTop: viewportElement.scrollTop
+      };
+    }
+    onReachStartRef.current();
+  }, [preserveScrollOnPrepend, reachStartThreshold, syncAfterScroll, viewportElement]);
+  const notifyContentResize = React__namespace.useCallback(() => {
+    const followEnd = autoScroll && defaultScrollAppliedRef.current && atEndRef.current && viewportElement;
+    if (followEnd) {
+      scrollViewportTo(
+        viewportElement,
+        Math.max(0, viewportElement.scrollHeight - viewportElement.clientHeight),
+        "auto"
+      );
+    }
+    syncAfterScroll();
+  }, [autoScroll, syncAfterScroll, viewportElement]);
+  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(() => {
+    const previousFirstItemId = firstItemIdRef.current;
+    const firstItemId = contentElement?.querySelector('[data-slot="message-scroller-item"]')?.dataset.messageId;
+    firstItemIdRef.current = firstItemId;
+    const anchor = prependAnchorRef.current;
+    prependAnchorRef.current = null;
+    if (!anchor || !viewportElement || firstItemId === previousFirstItemId) return;
+    reachStartFiredRef.current = false;
+    const grownBy = viewportElement.scrollHeight - anchor.scrollHeight;
+    if (grownBy > 0) viewportElement.scrollTop = anchor.scrollTop + grownBy;
+  }, [contentElement, itemsVersion, viewportElement]);
+  React__namespace.useLayoutEffect(() => {
+    if (!autoScroll || !defaultScrollAppliedRef.current || !atEndRef.current) return;
+    scrollToEnd({ behavior: "auto" });
+  }, [autoScroll, itemsVersion, scrollToEnd]);
+  const actionsContextValue = React__namespace.useMemo(
+    () => ({
+      notifyContentResize,
+      notifyScroll,
+      registerItem,
+      scrollToEnd,
+      scrollToMessage,
+      scrollToStart,
+      setContentElement,
+      setRootElement,
+      setViewportElement,
+      syncAfterScroll
+    }),
+    [notifyContentResize, notifyScroll, 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(messageScrollerContext.MessageScrollerActionsContext.Provider, { value: actionsContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(messageScrollerContext.MessageScrollerScrollableContext.Provider, { value: scrollableContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(messageScrollerContext.MessageScrollerVisibilityContext.Provider, { value: visibilityContextValue, children }) }) });
+}
+const MessageScroller = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { setRootElement } = messageScrollerContext.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, role, tabIndex, ...props }, ref) => {
+    const { setViewportElement, notifyScroll } = messageScrollerContext.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",
+        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) => {
+          notifyScroll();
+          onScroll?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+MessageScrollerViewport.displayName = "MessageScrollerViewport";
+const MessageScrollerContent = React__namespace.forwardRef(
+  ({ children, className, spacerClassName, role, "aria-relevant": ariaRelevant = "additions", ...props }, ref) => {
+    const { setContentElement, notifyContentResize, syncAfterScroll } = messageScrollerContext.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(notifyContentResize);
+      observer.observe(contentElement, { childList: true, subtree: false });
+      return () => observer.disconnect();
+    }, [contentElement, notifyContentResize]);
+    React__namespace.useEffect(() => {
+      if (!contentElement || typeof ResizeObserver === "undefined") return void 0;
+      const observer = new ResizeObserver(notifyContentResize);
+      observer.observe(contentElement);
+      return () => observer.disconnect();
+    }, [contentElement, notifyContentResize]);
+    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 = React__namespace.useContext(messageScrollerContext.MessageScrollerActionsContext)?.registerItem;
+    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 || !registerItem) 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 } = messageScrollerContext.useRequiredMessageScrollerActionsContext("MessageScrollerButton");
+    const { start, end } = messageScrollerContext.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 inline-flex min-h-5 min-w-7 -translate-x-1/2 items-center justify-center rounded-full border border-border1 bg-surface3 text-neutral6 shadow-[0_1px_2px_-1px_oklch(0%_0_0deg/10%),0_8px_20px_-12px_oklch(0%_0_0deg/25%)] 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.MessageScroller = MessageScroller;
+exports.MessageScrollerButton = MessageScrollerButton;
+exports.MessageScrollerContent = MessageScrollerContent;
+exports.MessageScrollerItem = MessageScrollerItem;
+exports.MessageScrollerProvider = MessageScrollerProvider;
+exports.MessageScrollerViewport = MessageScrollerViewport;
+//# sourceMappingURL=message-scroller-DIgCd5n3.cjs.map