@schlenkr/quassel 0.5.3 → 0.5.4

package/chat-scroll.d.ts

@@ -3,7 +3,8 @@ interface ScrollViewport {
     readonly scrollHeight: number;
     readonly clientHeight: number;
 }
-export declare function createChatScroll(onFollowChange?: (following: boolean) => void): {
+export declare const defaultJumpToEndThreshold = 120;
+export declare function createChatScroll(onFollowChange?: (following: boolean) => void, getThreshold?: () => number): {
     layout: (viewport: ScrollViewport, dragging?: boolean) => void;
     pause(viewport: ScrollViewport): void;
     scroll(viewport: ScrollViewport, dragging?: boolean): void;

package/index.js

@@ -170,9 +170,10 @@ import { createPortal } from "react-dom";
 import { Dialog } from "@base-ui/react/dialog";
 
 // packages/quassel/src/chat-scroll.ts
-var atEnd = (viewport) => viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= 24;
+var defaultJumpToEndThreshold = 120;
 function createChatScroll(onFollowChange = () => {
-}) {
+}, getThreshold = () => defaultJumpToEndThreshold) {
+  const atEnd = (viewport) => viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= getThreshold();
   let following = true;
   let lastTop = 0;
   let lastHeight = 0;
@@ -191,18 +192,18 @@ function createChatScroll(onFollowChange = () => {
   const layout = (viewport, dragging = false) => {
     if (viewport.clientHeight <= 0) return;
     if (movedUp(viewport, dragging) && !atEnd(viewport)) follow(false);
+    if (atEnd(viewport)) follow(true);
     if (following) viewport.scrollTop = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
-    else if (viewport.scrollHeight <= viewport.clientHeight) follow(true);
     remember(viewport);
   };
   return {
     layout,
     pause(viewport) {
-      if (viewport.scrollHeight > viewport.clientHeight) follow(false);
+      if (viewport.clientHeight > 0) follow(atEnd(viewport));
     },
     scroll(viewport, dragging = false) {
       if (viewport.clientHeight <= 0) return;
-      if (atEnd(viewport) && viewport.scrollTop > lastTop) follow(true);
+      if (atEnd(viewport)) follow(true);
       else if (movedUp(viewport, dragging) && !atEnd(viewport)) follow(false);
       remember(viewport);
     },
@@ -1223,7 +1224,7 @@ function ChatMessages({
   scrollerRef,
   maxWidth,
   horizontalPadding,
-  jumpToEndThreshold = 120,
+  jumpToEndThreshold = defaultJumpToEndThreshold,
   appearance,
   timestampOptions,
   codeBlockOptions,
@@ -1253,7 +1254,11 @@ function ChatMessages({
   const scrollbarDragging = useRef3(false);
   const touchY = useRef3(void 0);
   const [showJumpToEnd, setShowJumpToEnd] = useState4(false);
-  const [scroll] = useState4(() => createChatScroll());
+  const endThreshold = useRef3(jumpToEndThreshold);
+  useLayoutEffect(() => {
+    endThreshold.current = jumpToEndThreshold;
+  }, [jumpToEndThreshold]);
+  const [scroll] = useState4(() => createChatScroll((following) => setShowJumpToEnd(!following), () => endThreshold.current));
   const sendScope = useContext3(ChatSendContext);
   const dock = useContext3(ChatActionDock);
   const [now, setNow] = useState4(() => Date.now());
@@ -1275,15 +1280,11 @@ function ChatMessages({
     }
     due.filter((message) => selected.includes(message)).map((message) => announce2 ? announce2({ kind: message.role === "action" ? "action" : "reply", message }) : markdownPlainText(message.text)).forEach((text) => text && announce(text));
   }, [messages, selected, running2, announce2]);
-  const updateJumpVisibility = useCallback2((viewport) => {
-    if (viewport.clientHeight > 0) setShowJumpToEnd(viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop > jumpToEndThreshold);
-  }, [jumpToEndThreshold]);
   useLayoutEffect(() => sendScope?.subscribe(() => {
     const viewport = scrollArea.current;
     if (!viewport) return;
     scroll.jump(viewport);
-    updateJumpVisibility(viewport);
-  }), [sendScope, scroll, updateJumpVisibility]);
+  }), [sendScope, scroll]);
   const pauseUp = (viewport, target) => {
     let element = target instanceof Element ? target : null;
     while (element && element !== viewport) {
@@ -1296,9 +1297,8 @@ function ChatMessages({
     const area = scrollArea.current;
     if (area) {
       scroll.scroll(area, scrollbarDragging.current);
-      updateJumpVisibility(area);
     }
-  }, [scroll, updateJumpVisibility]);
+  }, [scroll]);
   useEffect3(() => {
     const finishDrag = () => {
       if (scrollbarDragging.current && scrollArea.current) scroll.scroll(scrollArea.current, true);
@@ -1316,7 +1316,6 @@ function ChatMessages({
     if (!area) return;
     const align = () => {
       scroll.layout(area, scrollbarDragging.current);
-      updateJumpVisibility(area);
     };
     align();
     const observer = new ResizeObserver(align);
@@ -1520,7 +1519,6 @@ function ChatMessages({
     showJumpToEnd && /* @__PURE__ */ jsx13("div", { className: "qsl:pointer-events-none qsl:absolute qsl:inset-x-0 qsl:bottom-[calc(var(--qsl-composer-height,0px)_+_12px)] qsl:z-10 qsl:flex qsl:justify-center", children: /* @__PURE__ */ jsx13(Button2, { "aria-label": allTexts.jumpToEnd, className: "qsl:pointer-events-auto qsl:rounded-full qsl:border qsl:border-primary-foreground/20 qsl:shadow-md", size: "icon", title: allTexts.jumpToEnd, variant: "default", onClick: () => {
       if (scrollArea.current) {
         scroll.jump(scrollArea.current);
-        updateJumpVisibility(scrollArea.current);
       }
     }, children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) }) }),
     dock && openActions.length > 0 && createPortal(