:gem: [Feature] ChatHistoryStorer: render sidebar items

index.html

@@ -34,17 +34,7 @@
                 </button>
             </div>
             <div class="offcanvas-body">
-                <!-- <form class="d-flex" role="search" id="chat-history-search-form">
-                    <input class="form-control" type="search" placeholder="Search chats">
-                    <button class="btn btn-success" type="submit">Search</button>
-                </form> -->
-                <ul class="navbar-nav justify-content-end flex-grow-1">
-                    <li class="nav-item">
-                        <a class="nav-link active" href="#chat-session-example-1">Chat-Session-Example-1</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#chat-session-example-2">Chat-Session-Example-2</a>
-                    </li>
+                <ul id="chat-history-sidebar-items" class="navbar-nav justify-content-end flex-grow-1">
                 </ul>
             </div>
         </div>

networks/chat_history_storer.js

@@ -1,20 +1,38 @@
 class ChatHistoryStorer {
     constructor() {
         this.init_database();
+        this.render_chat_history_sidebar_items();
     }
     init_database() {
         this.db = new Dexie("chat_history");
         this.db.version(1).stores({
-            chat_history: "index, html, saved_datetime"
+            chat_history: "index, display_title, html, saved_datetime"
         });
         this.db.chat_history.count((count) => {
             console.log(`${count} records loaded from chat_history.`);
         });
     }
+    clear_database() {
+        this.db.chat_history.clear();
+        this.render_chat_history_sidebar_items();
+        console.log("chat_history cleared.");
+    }
+    render_chat_history_sidebar_items() {
+        let chat_history_sidebar_items = $("#chat-history-sidebar-items");
+        let chat_history = this.db.chat_history;
+        chat_history_sidebar_items.empty();
+        chat_history.each((chat_history_item) => {
+            let chat_history_item_html = `
+                <li class="nav-item">
+                    <a class="nav-link" href="#${chat_history_item.index}">${chat_history_item.display_title}</a>
+                </li>
+            `;
+            chat_history_sidebar_items.append(chat_history_item_html);
+        });
+    }
     get_current_datetime_string() {
-        return moment().format("YYYY-MM-DD_HH:mm:ss.SSS");
+        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) {
@@ -39,9 +57,11 @@ class ChatHistoryStorer {
             let chat_saved_datetime = this.get_current_datetime_string();
             this.db.chat_history.put({
                 index: chat_index,
+                display_title: chat_index,
                 html: chat_container_html,
                 saved_datetime: chat_saved_datetime,
             });
+            this.render_chat_history_sidebar_items();
             console.log(
                 `${messagers_container.children().length} messages saved at ${chat_saved_datetime}.`
             );