From 0dae12ba6bc56d111593235fbd6f87037f9c65eb Mon Sep 17 00:00:00 2001
From: HanishKVC <hanishkvc@gmail.com>
Date: Mon, 27 May 2024 01:56:10 +0530
Subject: [PATCH] SimpleChat:UI:Add settings button and bring in settings ui

---
 examples/server/public_simplechat/index.html    | 1 +
 examples/server/public_simplechat/simplechat.js | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/examples/server/public_simplechat/index.html b/examples/server/public_simplechat/index.html
index f6a0c79b7..4f6f62c4b 100644
--- a/examples/server/public_simplechat/index.html
+++ b/examples/server/public_simplechat/index.html
@@ -24,6 +24,7 @@
 
             <div class="sameline">
                 <p class="heading flex-grow" > <b> SimpleChat </b> </p>
+                <button id="settings">Settings</button>
                 <div class="sameline">
                     <label for="api-ep">Mode:</label>
                     <select name="api-ep" id="api-ep">
diff --git a/examples/server/public_simplechat/simplechat.js b/examples/server/public_simplechat/simplechat.js
index 33f11fd93..7e54ae986 100644
--- a/examples/server/public_simplechat/simplechat.js
+++ b/examples/server/public_simplechat/simplechat.js
@@ -134,7 +134,6 @@ class SimpleChat {
             if (bClear) {
                 div.innerHTML = gUsageMsg;
                 gMe.show_info(div);
-                gMe.show_settings(div);
             }
         }
     }
@@ -266,12 +265,14 @@ class MultiChatUI {
         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.elBtnSettings = /** @type{HTMLButtonElement} */(document.getElementById("settings"));
 
         this.validate_element(this.elInSystem, "system-in");
         this.validate_element(this.elDivChat, "chat-div");
         this.validate_element(this.elInUser, "user-in");
         this.validate_element(this.elSelectApiEP, "api-ep");
         this.validate_element(this.elDivChat, "sessions-div");
+        this.validate_element(this.elBtnSettings, "settings");
     }
 
     /**
@@ -312,6 +313,11 @@ class MultiChatUI {
             this.handle_session_switch(this.curChatId);
         }
 
+        this.elBtnSettings.addEventListener("click", (ev)=>{
+            this.elDivChat.replaceChildren();
+            gMe.show_settings(this.elDivChat);
+        });
+
         this.elBtnUser.addEventListener("click", (ev)=>{
             if (this.elInUser.disabled) {
                 return;