@assistant-ui/react/dist/primitives/thread/useThreadViewportAutoScroll.js

Typescript/React library for AI Chat

"use strict";
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/primitives/thread/useThreadViewportAutoScroll.tsx
var useThreadViewportAutoScroll_exports = {};
__export(useThreadViewportAutoScroll_exports, {
  useThreadViewportAutoScroll: () => useThreadViewportAutoScroll
});
module.exports = __toCommonJS(useThreadViewportAutoScroll_exports);
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
var import_react = require("react");
var import_ThreadContext = require("../../context/react/ThreadContext.js");
var import_useOnResizeContent = require("../../utils/hooks/useOnResizeContent.js");
var import_useOnScrollToBottom = require("../../utils/hooks/useOnScrollToBottom.js");
var import_useManagedRef = require("../../utils/hooks/useManagedRef.js");
var import_ReadonlyStore = require("../../context/ReadonlyStore.js");
var import_ThreadViewportContext = require("../../context/react/ThreadViewportContext.js");
var useThreadViewportAutoScroll = ({
  autoScroll = true
}) => {
  const divRef = (0, import_react.useRef)(null);
  const threadViewportStore = (0, import_ThreadViewportContext.useThreadViewportStore)();
  const lastScrollTop = (0, import_react.useRef)(0);
  const isScrollingToBottomRef = (0, import_react.useRef)(false);
  const scrollToBottom = (behavior) => {
    const div = divRef.current;
    if (!div || !autoScroll) return;
    isScrollingToBottomRef.current = true;
    div.scrollTo({ top: div.scrollHeight, behavior });
  };
  const handleScroll = () => {
    const div = divRef.current;
    if (!div) return;
    const isAtBottom = threadViewportStore.getState().isAtBottom;
    const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight + 1;
    if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
    } else {
      if (newIsAtBottom) {
        isScrollingToBottomRef.current = false;
      }
      if (newIsAtBottom !== isAtBottom) {
        (0, import_ReadonlyStore.writableStore)(threadViewportStore).setState({
          isAtBottom: newIsAtBottom
        });
      }
    }
    lastScrollTop.current = div.scrollTop;
  };
  const resizeRef = (0, import_useOnResizeContent.useOnResizeContent)(() => {
    if (isScrollingToBottomRef.current || threadViewportStore.getState().isAtBottom) {
      scrollToBottom("instant");
    }
    handleScroll();
  });
  const scrollRef = (0, import_useManagedRef.useManagedRef)((el) => {
    el.addEventListener("scroll", handleScroll);
    return () => {
      el.removeEventListener("scroll", handleScroll);
    };
  });
  (0, import_useOnScrollToBottom.useOnScrollToBottom)(() => {
    scrollToBottom("auto");
  });
  const threadRuntime = (0, import_ThreadContext.useThreadRuntime)();
  (0, import_react.useEffect)(() => {
    return threadRuntime.unstable_on("run-start", () => scrollToBottom("auto"));
  }, [scrollToBottom, threadRuntime]);
  const autoScrollRef = (0, import_react_compose_refs.useComposedRefs)(resizeRef, scrollRef, divRef);
  return autoScrollRef;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useThreadViewportAutoScroll
});
//# sourceMappingURL=useThreadViewportAutoScroll.js.map