@schlenkr/quassel 0.5.2 → 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/chat.css

@@ -771,9 +771,9 @@
     --tw-leading: 1.625;
     line-height: 1.625;
   }
-  .qsl\:leading-\[var\(--qsl-chat-line-height\,1\.5\)\] {
-    --tw-leading: var(--qsl-chat-line-height,1.5);
-    line-height: var(--qsl-chat-line-height,1.5);
+  .qsl\:leading-\[var\(--qsl-chat-line-height\,1\.65\)\] {
+    --tw-leading: var(--qsl-chat-line-height,1.65);
+    line-height: var(--qsl-chat-line-height,1.65);
   }
   .qsl\:leading-normal {
     --tw-leading: var(--qsl-leading-normal);
@@ -1608,11 +1608,14 @@
       opacity: 100%;
     }
   }
+  li + .qsl\:\[li\+\&\]\:mt-1 {
+    margin-top: var(--qsl-spacing);
+  }
   li > .qsl\:\[li\>\&\]\:my-0 {
     margin-block: 0px;
   }
-  p + .qsl\:\[p\+\&\]\:mt-2 {
-    margin-top: calc(var(--qsl-spacing) * 2);
+  p + .qsl\:\[p\+\&\]\:mt-3 {
+    margin-top: calc(var(--qsl-spacing) * 3);
   }
   pre > .qsl\:\[pre\>\&\]\:bg-transparent {
     background-color: transparent;

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);
     },
@@ -535,10 +536,10 @@ var components = {
   h4: ({ children }) => /* @__PURE__ */ jsx8("h4", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
   h5: ({ children }) => /* @__PURE__ */ jsx8("h5", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
   h6: ({ children }) => /* @__PURE__ */ jsx8("h6", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
-  p: ({ children }) => /* @__PURE__ */ jsx8("p", { className: "qsl:[p+&]:mt-2", children }),
-  ul: ({ children }) => /* @__PURE__ */ jsx8("ul", { className: "qsl:my-2 qsl:list-disc qsl:pl-6 qsl:[li>&]:my-0", children }),
-  ol: ({ children }) => /* @__PURE__ */ jsx8("ol", { className: "qsl:my-2 qsl:list-decimal qsl:pl-6 qsl:[li>&]:my-0", children }),
-  li: ({ children }) => /* @__PURE__ */ jsx8("li", { className: "qsl:marker:text-muted-foreground qsl:in-data-[tone=on-color]:marker:text-inherit", children }),
+  p: ({ children }) => /* @__PURE__ */ jsx8("p", { className: "qsl:[p+&]:mt-3", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx8("ul", { className: "qsl:my-3 qsl:list-disc qsl:pl-6 qsl:[li>&]:my-0", children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx8("ol", { className: "qsl:my-3 qsl:list-decimal qsl:pl-6 qsl:[li>&]:my-0", children }),
+  li: ({ children }) => /* @__PURE__ */ jsx8("li", { className: "qsl:[li+&]:mt-1 qsl:marker:text-muted-foreground qsl:in-data-[tone=on-color]:marker:text-inherit", children }),
   hr: () => /* @__PURE__ */ jsx8("hr", { className: "qsl:my-3 qsl:border-t qsl:border-border" }),
   img: ({ src, alt }) => /* @__PURE__ */ jsx8("img", { alt, className: "qsl:h-auto qsl:max-w-full", src: typeof src === "string" ? src : void 0 }),
   blockquote: ({ children }) => /* @__PURE__ */ jsx8("blockquote", { className: "qsl:my-1 qsl:border-l-2 qsl:border-border qsl:pl-3 qsl:text-muted-foreground qsl:in-data-[tone=on-color]:border-white/50 qsl:in-data-[tone=on-color]:text-inherit", children }),
@@ -1190,7 +1191,7 @@ var chipClasses = cn(
 var chipInteractiveClasses = "qsl:cursor-pointer qsl:hover:border-border qsl:hover:bg-secondary qsl:hover:text-foreground qsl:focus-visible:border-border qsl:focus-visible:bg-secondary qsl:focus-visible:text-foreground qsl:focus-visible:outline-none qsl:data-[state=done]:hover:opacity-100 qsl:data-[state=done]:focus-visible:opacity-100";
 var collapseAtBottomFrom = 11;
 var maxAnnouncementsAtOnce = 2;
-var bubbleBodyClasses = "qsl:relative qsl:max-w-[86%] qsl:px-3 qsl:py-2 qsl:leading-[var(--qsl-chat-line-height,1.5)] qsl:[overflow-wrap:anywhere] qsl:@max-[620px]/chat:max-w-full";
+var bubbleBodyClasses = "qsl:relative qsl:max-w-[86%] qsl:px-3 qsl:py-2 qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:[overflow-wrap:anywhere] qsl:@max-[620px]/chat:max-w-full";
 function isStep(message) {
   return !!message && (message.role === "thinking" || message.role === "tool");
 }
@@ -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(
@@ -1785,7 +1783,7 @@ function Bubble({
     /* @__PURE__ */ jsx13(MessageActions, { message, options: messageActions, texts })
   ] });
   const cursor = message.role === "assistant" && message.textCursor ? JSON.stringify(message.textCursor) : void 0;
-  if (!useBubble) return /* @__PURE__ */ jsx13("div", { "data-chat-text-cursor": cursor, className: cn(stepSpacing, "qsl:group qsl:relative qsl:w-full qsl:leading-[var(--qsl-chat-line-height,1.5)] qsl:text-foreground"), "data-message": "answer", children: content });
+  if (!useBubble) return /* @__PURE__ */ jsx13("div", { "data-chat-text-cursor": cursor, className: cn(stepSpacing, "qsl:group qsl:relative qsl:w-full qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:text-foreground"), "data-message": "answer", children: content });
   const fullBackground = message.role === "user" && bubbleOptions?.userBackgroundFullWidth !== false;
   const surfaceClasses = message.bubble ? "qsl:rounded-lg" : "qsl:rounded-[var(--qsl-bubble-radius,10px_10px_4px_10px)] qsl:border qsl:border-border qsl:bg-secondary qsl:in-data-[tone=material]:rounded-[var(--qsl-bubble-radius,9px)] qsl:in-data-[tone=material]:border-glass-edge/20 qsl:in-data-[tone=material]:bg-primary/15";
   return /* @__PURE__ */ jsxs6(
@@ -2170,7 +2168,7 @@ function ChatInputToolbar({
     fileInput.dragging && "qsl:outline-2 qsl:outline-offset-[3px] qsl:outline-dashed qsl:outline-primary"
   );
   const textareaClasses = cn(
-    "qsl:resize-none qsl:overscroll-contain qsl:border-0 qsl:bg-transparent qsl:text-chat qsl:leading-[var(--qsl-chat-line-height,1.5)] qsl:text-foreground qsl:placeholder:text-muted-foreground qsl:focus:outline-none",
+    "qsl:resize-none qsl:overscroll-contain qsl:border-0 qsl:bg-transparent qsl:text-chat qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:text-foreground qsl:placeholder:text-muted-foreground qsl:focus:outline-none",
     inline ? "qsl:min-w-0 qsl:flex-1 qsl:px-2.5 qsl:py-2" : toolbar ? "qsl:w-full qsl:min-w-0 qsl:flex-auto qsl:px-2 qsl:py-[3px] qsl:leading-[1.3]" : "qsl:px-3 qsl:pt-3 qsl:pb-2"
   );
   const toolbarRowClasses = cn(