:gem: [Feature] New ChatHistoryStorer: save chat messages in browser with Dexie

components/buttons_binder.js

@@ -10,6 +10,7 @@ import {
 import { setup_available_models_on_select } from "./llm_models_loader.js";
 
 import { screen_scroller } from "./screen_scroller.js";
+import { chat_history_storer } from "../networks/chat_history_storer.js";
 
 export class ButtonsBinder {
     constructor() { }
@@ -118,6 +119,7 @@ class NewChatButtonBinder {
         const button = $("#new-chat-session");
         button.attr("status", "new").attr("title", "New Chat");
         button.click(() => {
+            chat_history_storer.save_current_chat_session();
             create_new_chat_session();
         });
     }

index.html

@@ -16,6 +16,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment-with-locales.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.2.4/dexie.min.js"></script>
     <link rel="stylesheet" href="./css/default.css" />
 </head>
 

networks/chat_history_storer.js

@@ -0,0 +1,52 @@
+class ChatHistoryStorer {
+    constructor() {
+        this.init_database();
+    }
+    init_database() {
+        this.db = new Dexie("chat_history");
+        this.db.version(1).stores({
+            chat_history: "index, html, saved_datetime"
+        });
+        this.db.chat_history.count((count) => {
+            console.log(`${count} records loaded from chat_history.`);
+        });
+    }
+    get_current_datetime_string() {
+        return moment().format("YYYY-MM-DD_HH:mm:ss.SSS");
+    }
+
+    get_chat_container_html() {
+        let messagers_container = $("#messagers-container");
+        if (messagers_container.children().length > 0) {
+            return messagers_container[0].outHTML;
+        } else {
+            return null;
+        }
+    }
+    create_chat_index() {
+        let date_string = this.get_current_datetime_string();
+        let chat_index = `chat_${date_string}`;
+        return chat_index;
+    }
+    save_current_chat_session() {
+        let chat_container_html = this.get_chat_container_html();
+        let messagers_container = $("#messagers-container");
+        if (chat_container_html === null) {
+            console.log("Empty messagers_container, no chat session to save.");
+            return;
+        } else {
+            let chat_index = this.create_chat_index();
+            let chat_saved_datetime = this.get_current_datetime_string();
+            this.db.chat_history.put({
+                index: chat_index,
+                html: chat_container_html,
+                saved_datetime: chat_saved_datetime,
+            });
+            console.log(
+                `${messagers_container.children().length} messages saved at ${chat_saved_datetime}.`
+            );
+        }
+    }
+}
+
+export let chat_history_storer = new ChatHistoryStorer();