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
This commit is contained in:
HanishKVC 2024-05-21 15:05:17 +05:30
parent 1cd10ae9c4
commit 1b82f2281f
2 changed files with 49 additions and 1 deletions

View file

@ -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"/>

View file

@ -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);