fix auto scroll

Author: ngxson

examples/server/webui/src/App.tsx

@@ -27,14 +27,19 @@ function AppLayout() {
   return (
     <>
       <Sidebar />
-      <div className="drawer-content grow flex flex-col h-screen w-screen mx-auto px-4 overflow-auto">
+      <div
+        className="drawer-content grow flex flex-col h-screen w-screen mx-auto px-4 overflow-auto"
+        id="main-scroll"
+      >
         <Header />
         <Outlet />
       </div>
-      {<SettingDialog
-        show={showSettings}
-        onClose={() => setShowSettings(false)}
-      />}
+      {
+        <SettingDialog
+          show={showSettings}
+          onClose={() => setShowSettings(false)}
+        />
+      }
     </>
   );
 }

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

@@ -17,22 +17,21 @@ export default function ChatScreen() {
     canvasData,
   } = useAppContext();
   const [inputMsg, setInputMsg] = useState('');
-  const containerRef = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
 
   const currConvId = viewingConversation?.id ?? '';
   const pendingMsg: PendingMessage | undefined = pendingMessages[currConvId];
 
   const scrollToBottom = (requiresNearBottom: boolean) => {
-    if (!containerRef.current) return;
-    const msgListElem = containerRef.current;
+    const mainScrollElem = document.getElementById('main-scroll');
+    if (!mainScrollElem) return;
     const spaceToBottom =
-      msgListElem.scrollHeight -
-      msgListElem.scrollTop -
-      msgListElem.clientHeight;
+      mainScrollElem.scrollHeight -
+      mainScrollElem.scrollTop -
+      mainScrollElem.clientHeight;
     if (!requiresNearBottom || spaceToBottom < 50) {
       setTimeout(
-        () => msgListElem.scrollTo({ top: msgListElem.scrollHeight }),
+        () => mainScrollElem.scrollTo({ top: mainScrollElem.scrollHeight }),
         1
       );
     }
@@ -71,11 +70,7 @@ export default function ChatScreen() {
     >
       <div className="flex flex-col w-full max-w-[900px] mx-auto">
         {/* chat messages */}
-        <div
-          id="messages-list"
-          className="flex flex-col grow overflow-y-auto"
-          ref={containerRef}
-        >
+        <div id="messages-list" className="flex flex-col grow overflow-y-auto">
           <div className="mt-auto flex justify-center">
             {/* placeholder to shift the message to the bottom */}
             {viewingConversation ? '' : 'Send a message to start'}

examples/server/webui/src/components/SettingDialog.tsx

@@ -325,7 +325,7 @@ export default function SettingDialog({
   };
 
   return (
-    <dialog className={classNames({ 'modal': true, 'modal-open': show })}>
+    <dialog className={classNames({ modal: true, 'modal-open': show })}>
       <div className="modal-box w-11/12 max-w-3xl">
         <h3 className="text-lg font-bold mb-6">Settings</h3>
         <div className="flex flex-col md:flex-row h-[calc(90vh-12rem)]">