From 1b82f2281f41dc0684cc67db30ec5e1104b488a1 Mon Sep 17 00:00:00 2001
From: HanishKVC <hanishkvc@gmail.com>
Date: Tue, 21 May 2024 15:05:17 +0530
Subject: [PATCH] SimpleChat:MCUI:Show available chat sessions, try switch btw
 them

Previous commits brought in / consolidated existing logic into
MultiChatUI class.

Now start adding logic towards multichat support

* show buttons indicating available chat sessions

* on sessin button click, try switch to that session
---
 examples/server/public_simplechat/index.html  |  3 ++
 .../server/public_simplechat/simplechat.js    | 47 ++++++++++++++++++-
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/examples/server/public_simplechat/index.html b/examples/server/public_simplechat/index.html
index 463c79531..139db7e3f 100644
--- a/examples/server/public_simplechat/index.html
+++ b/examples/server/public_simplechat/index.html
@@ -25,6 +25,9 @@
                 </div>
             </div>
 
+            <div id="sessions-div" class="sameline"></div>
+
+            <hr>
             <div class="sameline">
                 <label for="system-in">System</label>
                 <input type="text" name="system" id="system-in" class="flex-grow"/>
diff --git a/examples/server/public_simplechat/simplechat.js b/examples/server/public_simplechat/simplechat.js
index 1ffc7a953..f25c672f8 100644
--- a/examples/server/public_simplechat/simplechat.js
+++ b/examples/server/public_simplechat/simplechat.js
@@ -164,6 +164,7 @@ class MultiChatUI {
         this.elBtnUser = /** @type{HTMLButtonElement} */(document.getElementById("user-btn"));
         this.elInUser = /** @type{HTMLInputElement} */(document.getElementById("user-in"));
         this.elSelectApiEP = /** @type{HTMLSelectElement} */(document.getElementById("api-ep"));
+        this.elDivSessions = /** @type{HTMLDivElement} */(document.getElementById("sessions-div"));
 
         this.validate_element(this.elInSystem, "system-in");
         this.validate_element(this.elDivChat, "chat-div");
@@ -254,7 +255,7 @@ class MultiChatUI {
         this.elInUser.value = "";
         this.elInUser.disabled = false;
         let respBody = await resp.json();
-        console.debug(`DBUG:MCUI:${chatId}:HandleUserSubmit:RespBody:${respBody}`);
+        console.debug(`DBUG:MCUI:${chatId}:HandleUserSubmit:RespBody:${JSON.stringify(respBody)}`);
         let assistantMsg;
         if (apiEP == ApiEP.Chat) {
             assistantMsg = respBody["choices"][0]["message"]["content"];
@@ -277,6 +278,49 @@ class MultiChatUI {
         this.elInUser.focus();
     }
 
+    /**
+     * Show buttons for available chat sessions, in the passed elDiv.
+     * If elDiv is undefined/null, then use this.elDivSessions.
+     * @param {HTMLDivElement | undefined} elDiv
+     */
+    show_sessions(elDiv=undefined) {
+        if (!elDiv) {
+            elDiv = this.elDivSessions;
+        }
+        elDiv.replaceChildren();
+        let chatIds = Object.keys(this.simpleChats);
+        for(let cid of chatIds) {
+            let btn = document.createElement("button");
+            btn.id = cid;
+            btn.name = cid;
+            btn.innerText = cid;
+            btn.addEventListener("click", (ev)=>{
+                let target = /** @type{HTMLButtonElement} */(ev.target);
+                console.debug(`DBUG:MCUI:SessionClick:${target.id}`);
+                if (this.elInUser.disabled) {
+                    console.error(`ERRR:MCUI:SessionClick:${target.id}:Current session awaiting response, skipping switch...`);
+                    return;
+                }
+                this.handle_session_switch(target.id);
+            });
+            elDiv.appendChild(btn);
+        }
+    }
+
+    /**
+     * @param {string} chatId
+     */
+    async handle_session_switch(chatId) {
+        let chat = this.simpleChats[chatId];
+        if (chat == undefined) {
+            console.error(`ERRR:MCUI:Session:${chatId} missing...`);
+            return;
+        }
+        this.elInUser.value = "";
+        chat.show(this.elDivChat);
+        this.elInUser.focus();
+    }
+
 }
 
 
@@ -288,6 +332,7 @@ function startme() {
     gMuitChat = new MultiChatUI();
     gMuitChat.new_chat(gChatId);
     gMuitChat.setup_ui(gChatId);
+    gMuitChat.show_sessions();
 }
 
 document.addEventListener("DOMContentLoaded", startme);