:gem: [Feature] Enable new chat session button

apps/llm_mixer/js/buttons_binder.js

@@ -3,13 +3,21 @@ import {
     pop_messager,
     stop_latest_message_animation,
     start_latest_message_animation,
+    create_new_chat_session,
 } from "./chat_operator.js";
 
-export class ButtonsBinder {
+export function bind_chat_buttons() {
+    let send_binder = new SendUserInputButtonBinder();
+    send_binder.bind();
+    let new_binder = new NewChatButtonBinder();
+    new_binder.bind();
+}
+
+class SendUserInputButtonBinder {
     constructor() {
         this.requester = null;
     }
-    bind_send_user_input() {
+    bind() {
         const button = $("#send-user-input");
         button.attr("status", "send").attr("title", "Send");
         button.click(async () => {
@@ -71,7 +79,15 @@ export class ButtonsBinder {
             .addClass("fa fa-paper-plane")
             .addClass("icon-success");
     }
+}
+
+class NewChatButtonBinder {
+    constructor() {}
     bind() {
-        this.bind_send_user_input();
+        const button = $("#new-chat-session");
+        button.attr("status", "new").attr("title", "New Chat");
+        button.click(() => {
+            create_new_chat_session();
+        });
     }
 }

apps/llm_mixer/js/chat_operator.js

@@ -1,11 +1,17 @@
 import { Messager, MessagerList } from "./messager.js";
 
 let messagers_container = $("#messagers-container");
-let messager_list = new MessagerList(messagers_container);
 let available_models_select = $("#available-models-select");
 let temperature_select = $("#temperature-select");
+
+let messager_list = new MessagerList(messagers_container);
+let chat_history = [messager_list];
 let md_to_html_converter = new showdown.Converter();
 
+export function get_active_messager_list() {
+    return chat_history[chat_history.length - 1];
+}
+
 export function create_messager(
     role,
     content = "",
@@ -19,7 +25,7 @@ export function create_messager(
         temperature: temperature,
     };
     let messager = new Messager(message);
-    messager_list.push(messager);
+    get_active_messager_list().push(messager);
 }
 
 export function get_selected_llm_model() {
@@ -31,7 +37,7 @@ export function get_selected_temperature() {
 }
 
 export function get_latest_messager_container() {
-    return messager_list.messagers_container.children().last();
+    return get_active_messager_list().messagers_container.children().last();
 }
 export function get_latest_message_content_displayer() {
     return get_latest_messager_container().find(".content-displayer");
@@ -64,11 +70,11 @@ export function stop_latest_message_animation() {
 }
 
 export function get_request_messages() {
-    return messager_list.get_request_messages();
+    return get_active_messager_list().get_request_messages();
 }
 
 export function pop_messager(n = 2) {
-    return messager_list.pop(n);
+    return get_active_messager_list().pop(n);
 }
 
 export function update_message(json_chunks, content_displayer = null) {
@@ -103,3 +109,9 @@ export function update_message(json_chunks, content_displayer = null) {
     });
     return json_chunks;
 }
+
+export function create_new_chat_session() {
+    let new_messager_list = new MessagerList(messagers_container);
+    chat_history.push(new_messager_list);
+    messagers_container.empty();
+}

apps/llm_mixer/js/main.js

@@ -2,7 +2,7 @@ import {
     setup_available_models_on_select,
     setup_temperature_on_select,
 } from "./llm_models_loader.js";
-import { ButtonsBinder } from "./buttons_binder.js";
+import { bind_chat_buttons } from "./buttons_binder.js";
 var user_input_history = [];
 var user_input_history_idx = 0;
 
@@ -22,25 +22,10 @@ function auto_resize_user_input() {
     );
 }
 
-function register_user_input_callbacks() {
-    // $("#user-input").on("keypress", function (event) {
-    // if (event.key === "Enter" && !event.shiftKey) {
-    // let current_user_input = $(this).val();
-    // user_input_history.push(current_user_input);
-    // $(this).val("");
-    // user_input_history_idx = user_input_history.length;
-    // set_user_input_history_buttons_state();
-    // console.log(user_input_history);
-    // request_llm();
+function setup_interactive_components() {
     setup_available_models_on_select();
     setup_temperature_on_select();
-    let buttons_binder = new ButtonsBinder();
-    buttons_binder.bind();
-
-    // request_available_models();
-    // event.preventDefault();
-    //     }
-    // });
+    bind_chat_buttons();
 }
 
 function register_user_input_history_buttons_callbacks() {
@@ -98,7 +83,7 @@ function adjust_messagers_container_max_height() {
 $(document).ready(function () {
     // load_available_models();
     auto_resize_user_input();
-    register_user_input_callbacks();
+    setup_interactive_components();
     register_user_input_history_buttons_callbacks();
     adjust_messagers_container_max_height();
     $(window).on("resize", adjust_messagers_container_max_height);