fix scroll

Author: ngxson

tools/server/public/index.html.gz

@@ -239,9 +239,8 @@ export default function ChatScreen() {
               ''
             ) : (
               <>
+                <div className="mb-4">Send a message to start</div>
                 <ServerInfo />
-                <br />
-                Send a message to start
               </>
             )}
           </div>

tools/server/webui/src/components/ChatScreen.tsx

@@ -1,30 +1,30 @@
 import React, { useEffect } from 'react';
 import { throttle } from '../utils/misc';
 
-export const scrollToBottom = throttle(
-  (requiresNearBottom: boolean, delay?: number) => {
-    const mainScrollElem = document.getElementById('main-scroll');
-    if (!mainScrollElem) return;
-    const spaceToBottom =
-      mainScrollElem.scrollHeight -
-      mainScrollElem.scrollTop -
-      mainScrollElem.clientHeight;
-    if (!requiresNearBottom || spaceToBottom < 100) {
-      setTimeout(
-        () => mainScrollElem.scrollTo({ top: mainScrollElem.scrollHeight }),
-        delay ?? 80
-      );
-    }
-  },
-  80
-);
+export const scrollToBottom = (requiresNearBottom: boolean, delay?: number) => {
+  console.log({ requiresNearBottom });
+  const mainScrollElem = document.getElementById('main-scroll');
+  if (!mainScrollElem) return;
+  const spaceToBottom =
+    mainScrollElem.scrollHeight -
+    mainScrollElem.scrollTop -
+    mainScrollElem.clientHeight;
+  if (!requiresNearBottom || spaceToBottom < 100) {
+    setTimeout(
+      () => mainScrollElem.scrollTo({ top: mainScrollElem.scrollHeight }),
+      delay ?? 80
+    );
+  }
+};
+
+const scrollToBottomThrottled = throttle(scrollToBottom, 80);
 
 export function useChatScroll(msgListRef: React.RefObject<HTMLDivElement>) {
   useEffect(() => {
     if (!msgListRef.current) return;
 
     const resizeObserver = new ResizeObserver((_) => {
-      scrollToBottom(true);
+      scrollToBottomThrottled(true, 10);
     });
 
     resizeObserver.observe(msgListRef.current);