:recycle: [Refactor] Merge scroll to bottom functions to ScreenScroller

components/buttons_binder.js

@@ -4,10 +4,10 @@ import {
     start_latest_message_animation,
     create_new_chat_session,
     get_latest_message_content_displayer,
-    scroll_to_bottom,
-    set_user_scroll_status,
 } from "./chat_operator.js";
 
+import { screen_scroller } from "../storage/states.js";
+
 export class ButtonsBinder {
     constructor() {}
     bind() {
@@ -100,7 +100,7 @@ class SendUserInputButtonBinder {
             .addClass("icon-success");
         hljs.highlightAll();
         console.log(get_latest_message_content_displayer().data("raw_content"));
-        set_user_scroll_status(false);
+        screen_scroller.set_user_scrolling(false);
     }
 }
 
@@ -183,8 +183,8 @@ class ScrollToBottomButtonBinder {
         const button = $("#scroll-to-bottom-button");
         button.attr("title", "Scroll to bottom");
         button.click(() => {
-            set_user_scroll_status(false);
-            scroll_to_bottom(true);
+            screen_scroller.set_user_scrolling(false);
+            screen_scroller.scroll_to_bottom(true);
         });
     }
 }
@@ -194,7 +194,7 @@ class ChatSessionContainerScrollBinder {
     bind() {
         $("#chat-session-container").on("wheel touchmove", function () {
             if ($("#send-user-input").attr("status") === "stop") {
-                set_user_scroll_status(true);
+                screen_scroller.set_user_scrolling(true);
             }
         });
     }

components/chat_operator.js

@@ -1,5 +1,6 @@
 import { Messager, MessagerList } from "./messager.js";
 import { transform_footnote } from "../converters/stream_jsonizer.js";
+import { screen_scroller } from "../storage/states.js";
 
 let messagers_container = $("#messagers-container");
 let available_models_select = $("#available-models-select");
@@ -10,32 +11,6 @@ let chat_history = [messager_list];
 let md_to_html_converter = new showdown.Converter();
 md_to_html_converter.setFlavor("github");
 
-let is_user_scrolling = false;
-
-export function set_user_scroll_status(val = true) {
-    is_user_scrolling = val;
-}
-
-export function scroll_to_bottom(animate = false) {
-    if (is_user_scrolling) {
-        return;
-    }
-    console.log("scroll_to_bottom");
-    if (animate) {
-        $("#chat-session-container").animate(
-            {
-                scrollTop: $("#chat-session-container").prop("scrollHeight"),
-            },
-            500
-        );
-    } else {
-        $("#chat-session-container").prop(
-            "scrollTop",
-            $("#chat-session-container").prop("scrollHeight")
-        );
-    }
-}
-
 export function get_active_messager_list() {
     return chat_history[chat_history.length - 1];
 }
@@ -58,7 +33,7 @@ export function create_messager(
     };
     let messager = new Messager(message);
     get_active_messager_list().push(messager);
-    scroll_to_bottom();
+    screen_scroller.scroll_to_bottom();
 }
 
 export function get_selected_llm_model() {
@@ -142,7 +117,7 @@ export function update_message(json_chunks, content_displayer = null) {
             content_displayer
                 .find("table")
                 .addClass("table table-bordered table-hover");
-            scroll_to_bottom();
+            screen_scroller.scroll_to_bottom();
         }
         if (finish_reason === "stop") {
             console.log("[STOP]");

storage/states.js

@@ -0,0 +1,34 @@
+class ScreenScroller {
+    constructor() {
+        this.is_user_scrolling = false;
+    }
+    get_user_scrolling() {
+        return this.is_user_scrolling;
+    }
+    set_user_scrolling(val = true) {
+        this.is_user_scrolling = val;
+    }
+    scroll_to_bottom(animate = false) {
+        if (this.get_user_scrolling()) {
+            return;
+        }
+        console.log("scroll_to_bottom");
+        if (animate) {
+            $("#chat-session-container").animate(
+                {
+                    scrollTop: $("#chat-session-container").prop(
+                        "scrollHeight"
+                    ),
+                },
+                500
+            );
+        } else {
+            $("#chat-session-container").prop(
+                "scrollTop",
+                $("#chat-session-container").prop("scrollHeight")
+            );
+        }
+    }
+}
+
+export let screen_scroller = new ScreenScroller();