feat: scrolling to bottom during streaming is now instant (#461)

* feat: scrolling to bottom during streaming is now instant this fixes a long tail of edge-case issues where the chat would simply stop scrolling during streaming mode * changelog
assistant-ui · Jul 11, 2024 · 7d4798a · 7d4798a
1 parent d097e49
commit 7d4798a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @assistant-ui/react
 
+## 0.4.3
+
+### Minor Changes
+
+- feat: scrolling to bottom during streaming is now instant
+- fix: useSmooth gets triggered during branch switch
+
 ## 0.4.2
 
 ### Minor Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -29,7 +29,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MIT",
   "exports": {
     ".": {

diff --git a/packages/react/src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx b/packages/react/src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
@@ -19,20 +19,16 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
 
   const { useViewport } = useThreadContext();
 
-  const firstRenderRef = useRef(true);
   const lastScrollTop = useRef<number>(0);
 
   // bug: when ScrollToBottom's button changes its disabled state, the scroll stops
   // fix: delay the state change until the scroll is done
   const isScrollingToBottomRef = useRef(false);
 
-  const scrollToBottom = () => {
+  const scrollToBottom = (behavior: ScrollBehavior) => {
     const div = divRef.current;
     if (!div || !autoScroll) return;
 
-    const behavior = firstRenderRef.current ? "instant" : "auto";
-    firstRenderRef.current = false;
-
     isScrollingToBottomRef.current = true;
     div.scrollTo({ top: div.scrollHeight, behavior });
   };
@@ -47,7 +43,9 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
       // ignore scroll down
     } else {
-      isScrollingToBottomRef.current = newIsAtBottom;
+      if (newIsAtBottom) {
+        isScrollingToBottomRef.current = false;
+      }
 
       if (newIsAtBottom !== isAtBottom) {
         (useViewport as unknown as StoreApi<ThreadViewportState>).setState({
@@ -60,15 +58,11 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   };
 
   const resizeRef = useOnResizeContent(() => {
-    if (
-      !isScrollingToBottomRef.current &&
-      !useViewport.getState().isAtBottom &&
-      !firstRenderRef.current
-    ) {
-      handleScroll();
-    } else {
-      scrollToBottom();
+    if (isScrollingToBottomRef.current || useViewport.getState().isAtBottom) {
+      scrollToBottom("instant");
     }
+
+    handleScroll();
   });
 
   const scrollRef = useManagedRef<HTMLElement>((el) => {
@@ -81,7 +75,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);
 
   useOnScrollToBottom(() => {
-    scrollToBottom();
+    scrollToBottom("auto");
   });
 
   return autoScrollRef;