:gem: [Feature] Auto scroll when content updated; disable scroll if user wheel or touch move; restore scroll if user click scroll-to-bottom button

apps/llm_mixer/index.html

@@ -78,6 +78,12 @@
                             title="Temperature"
                         ></select>
                     </div>
+                    <div class="col"></div>
+                    <div class="col-auto pr-0">
+                        <button id="scroll-to-bottom-button" class="btn px-0">
+                            <i class="fa fa-angles-down"></i>
+                        </button>
+                    </div>
                 </div>
                 <div class="mt-2 row no-gutters">
                     <div class="col-auto pl-3 pr-0">

apps/llm_mixer/js/buttons_binder.js

@@ -1,10 +1,11 @@
 import { ChatCompletionsRequester } from "./llm_requester.js";
 import {
-    pop_messager,
     stop_latest_message_animation,
     start_latest_message_animation,
     create_new_chat_session,
     get_latest_message_content_displayer,
+    scroll_to_bottom,
+    set_user_scroll_status,
 } from "./chat_operator.js";
 
 export function bind_chat_buttons() {
@@ -18,6 +19,11 @@ export function bind_chat_buttons() {
     openai_api_key_binder.bind();
     let show_endpoint_and_key_binder = new ShowEndpointAndKeyButtonBinder();
     show_endpoint_and_key_binder.bind();
+    let scroll_to_bottom_binder = new ScrollToBottomButtonBinder();
+    scroll_to_bottom_binder.bind();
+    let chat_session_container_scroll_binder =
+        new ChatSessionContainerScrollBinder();
+    chat_session_container_scroll_binder.bind();
 }
 
 class SendUserInputButtonBinder {
@@ -87,6 +93,7 @@ class SendUserInputButtonBinder {
             .addClass("icon-success");
         hljs.highlightAll();
         console.log(get_latest_message_content_displayer().data("raw_content"));
+        set_user_scroll_status(false);
     }
 }
 
@@ -162,3 +169,26 @@ class ShowEndpointAndKeyButtonBinder {
         });
     }
 }
+
+class ScrollToBottomButtonBinder {
+    constructor() {}
+    bind() {
+        const button = $("#scroll-to-bottom-button");
+        button.attr("title", "Scroll to bottom");
+        button.click(() => {
+            set_user_scroll_status(false);
+            scroll_to_bottom(true);
+        });
+    }
+}
+
+class ChatSessionContainerScrollBinder {
+    constructor() {}
+    bind() {
+        $("#chat-session-container").on("wheel touchmove", function () {
+            if ($("#send-user-input").attr("status") === "stop") {
+                set_user_scroll_status(true);
+            }
+        });
+    }
+}

apps/llm_mixer/js/chat_operator.js

@@ -10,6 +10,32 @@ 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];
 }
@@ -32,6 +58,7 @@ export function create_messager(
     };
     let messager = new Messager(message);
     get_active_messager_list().push(messager);
+    scroll_to_bottom();
 }
 
 export function get_selected_llm_model() {
@@ -111,6 +138,7 @@ export function update_message(json_chunks, content_displayer = null) {
             content_displayer
                 .find("table")
                 .addClass("table table-bordered table-hover");
+            scroll_to_bottom();
         }
         if (finish_reason === "stop") {
             console.log("[STOP]");

apps/llm_mixer/js/default.css

@@ -35,7 +35,7 @@
 }
 
 #available-models-select {
-    max-width: calc(100vw - 150px);
+    max-width: calc(100vw - 200px);
 }
 
 #temperature-select {

apps/llm_mixer/js/main.js

@@ -1,7 +1,6 @@
 import {
     setup_available_models_on_select,
     setup_temperature_on_select,
-    setup_endpoint_and_key,
 } from "./llm_models_loader.js";
 import { bind_chat_buttons } from "./buttons_binder.js";
 var user_input_history = [];