"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var NEAR_BOTTOM_THRESHOLD_PX = 80;
function MessageList({
  autoScroll = true,
  className,
  children,
  ...props
}) {
  const ref = React.useRef(null);
  const stickToBottomRef = React.useRef(true);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || !autoScroll) return;
    if (stickToBottomRef.current) {
      el.scrollTop = el.scrollHeight;
    }
  }, [autoScroll, children]);
  function handleScroll(event) {
    const el = event.currentTarget;
    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
    stickToBottomRef.current = distance < NEAR_BOTTOM_THRESHOLD_PX;
    props.onScroll?.(event);
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      role: "log",
      "aria-live": "polite",
      "aria-relevant": "additions",
      className: cn("flex flex-col overflow-y-auto", className),
      ...props,
      onScroll: handleScroll,
      children
    }
  );
}

export { MessageList };
//# sourceMappingURL=message-list.js.map
//# sourceMappingURL=message-list.js.map