From 1cd10ae9c4b400ae0a98fb0a5ff9afcc2b3b8860 Mon Sep 17 00:00:00 2001 From: HanishKVC Date: Tue, 21 May 2024 09:43:02 +0530 Subject: [PATCH] SimpleChat: Move ui elements into MultiChatUI, Update el IDs Move ui elements into MultiChatUI, so that current handleUserSubmit doesnt need to take the element arguments. Also in future, when user is allowed to switch between different chat sessions, the UI can be updated as needed by using the elements in UI already known to MultiChatUI instance. Rename the element ids' so that they follow a common convention, as well as one can identify what the element represents in a more consistant manner. --- examples/server/public_simplechat/index.html | 10 +- .../server/public_simplechat/simplechat.css | 2 +- .../server/public_simplechat/simplechat.js | 104 ++++++++++-------- 3 files changed, 66 insertions(+), 50 deletions(-) diff --git a/examples/server/public_simplechat/index.html b/examples/server/public_simplechat/index.html index b76841938..463c79531 100644 --- a/examples/server/public_simplechat/index.html +++ b/examples/server/public_simplechat/index.html @@ -26,12 +26,12 @@
- - + +
-
+

Enter the system prompt above, before entering/submitting any user query.

Enter your text to the ai assistant below.

Use shift+enter for inserting enter.

@@ -40,8 +40,8 @@
- - + +
diff --git a/examples/server/public_simplechat/simplechat.css b/examples/server/public_simplechat/simplechat.css index 4797dd9b8..944693e9d 100644 --- a/examples/server/public_simplechat/simplechat.css +++ b/examples/server/public_simplechat/simplechat.css @@ -25,7 +25,7 @@ float: right; } -#chat { +#chat-div { overflow: scroll; flex-grow: 1; flex-shrink: 1; diff --git a/examples/server/public_simplechat/simplechat.js b/examples/server/public_simplechat/simplechat.js index 4cd2fcecc..1ffc7a953 100644 --- a/examples/server/public_simplechat/simplechat.js +++ b/examples/server/public_simplechat/simplechat.js @@ -157,6 +157,53 @@ class MultiChatUI { constructor() { /** @type {Object} */ this.simpleChats = {}; + + // the ui elements + this.elInSystem = /** @type{HTMLInputElement} */(document.getElementById("system-in")); + this.elDivChat = /** @type{HTMLDivElement} */(document.getElementById("chat-div")); + 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.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"); + } + + /** + * Check if the element got + * @param {HTMLElement | null} el + * @param {string} msgTag + */ + validate_element(el, msgTag) { + if (el == null) { + throw Error(`ERRR:MCUI:${msgTag} element missing in html...`); + } else { + console.debug(`INFO:MCUI:${msgTag}:Id:${el.id}:Name:${el["name"]}`); + } + } + + /** + * Setup the needed callbacks wrt UI + * @param {string} chatId + */ + setup_ui(chatId) { + this.elBtnUser.addEventListener("click", (ev)=>{ + if (this.elInUser.disabled) { + return; + } + this.handle_user_submit(chatId, this.elSelectApiEP.value); + }); + + this.elInUser.addEventListener("keyup", (ev)=> { + // allow user to insert enter into their message using shift+enter. + // while just pressing enter key will lead to submitting. + if ((ev.key === "Enter") && (!ev.shiftKey)) { + this.elBtnUser.click(); + ev.preventDefault(); + } + }); } /** @@ -170,23 +217,20 @@ class MultiChatUI { /** * Handle user query submit request, wrt specified chat session. * @param {string} chatId - * @param {HTMLInputElement} inputSystem - * @param {HTMLInputElement} inputUser - * @param {HTMLDivElement} divChat * @param {string} apiEP */ - async handle_user_submit(chatId, inputSystem, inputUser, divChat, apiEP) { + async handle_user_submit(chatId, apiEP) { let chat = this.simpleChats[chatId]; - chat.add_system_anytime(inputSystem.value, chatId); + chat.add_system_anytime(this.elInSystem.value, chatId); - let content = inputUser.value; + let content = this.elInUser.value; if (!chat.add(Roles.User, content)) { console.debug(`WARN:MCUI:${chatId}:HandleUserSubmit:Ignoring empty user input...`); return; } - chat.show(divChat); + chat.show(this.elDivChat); let theBody; let theUrl = gChatURL[apiEP] @@ -196,8 +240,8 @@ class MultiChatUI { theBody = chat.request_prompt_jsonstr(); } - inputUser.value = "working..."; - inputUser.disabled = true; + this.elInUser.value = "working..."; + this.elInUser.disabled = true; console.debug(`DBUG:MCUI:${chatId}:HandleUserSubmit:${theUrl}:ReqBody:${theBody}`); let resp = await fetch(theUrl, { method: "POST", @@ -207,8 +251,8 @@ class MultiChatUI { body: theBody, }); - inputUser.value = ""; - inputUser.disabled = false; + this.elInUser.value = ""; + this.elInUser.disabled = false; let respBody = await resp.json(); console.debug(`DBUG:MCUI:${chatId}:HandleUserSubmit:RespBody:${respBody}`); let assistantMsg; @@ -222,7 +266,7 @@ class MultiChatUI { } } chat.add(Roles.Assistant, assistantMsg); - chat.show(divChat); + chat.show(this.elDivChat); // Purposefully clear at end rather than begin of this function // so that one can switch from chat to completion mode and sequece // in a completion mode with multiple user-assistant chat data @@ -230,48 +274,20 @@ class MultiChatUI { if ((apiEP == ApiEP.Completion) && (gbCompletionFreshChatAlways)) { chat.xchat.length = 0; } - inputUser.focus(); + this.elInUser.focus(); } } -let gMuitChat = new MultiChatUI(); +let gMuitChat; const gChatId = "Default"; - function startme() { - - let inputSystem = /** @type{HTMLInputElement} */(document.getElementById("system")); - let divChat = /** @type{HTMLDivElement} */(document.getElementById("chat")); - let btnSubmit = document.getElementById("submit"); - let inputUser = /** @type{HTMLInputElement} */(document.getElementById("user")); - let selectApiEP = /** @type{HTMLInputElement} */(document.getElementById("api-ep")); - - if (divChat == null) { - throw Error("ERRR:StartMe:Chat element missing"); - } console.log("INFO:StartMe:Starting..."); - + gMuitChat = new MultiChatUI(); gMuitChat.new_chat(gChatId); - - btnSubmit?.addEventListener("click", (ev)=>{ - if (inputUser.disabled) { - return; - } - gMuitChat.handle_user_submit(gChatId, inputSystem, inputUser, divChat, selectApiEP.value); - }); - - inputUser?.addEventListener("keyup", (ev)=> { - // allow user to insert enter into their message using shift+enter. - // while just pressing enter key will lead to submitting. - if ((ev.key === "Enter") && (!ev.shiftKey)) { - btnSubmit?.click(); - ev.preventDefault(); - } - }); - + gMuitChat.setup_ui(gChatId); } - document.addEventListener("DOMContentLoaded", startme);