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:
parent
1cd10ae9c4
commit
1b82f2281f
2 changed files with 49 additions and 1 deletions
|
@ -25,6 +25,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="sessions-div" class="sameline"></div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
<div class="sameline">
|
<div class="sameline">
|
||||||
<label for="system-in">System</label>
|
<label for="system-in">System</label>
|
||||||
<input type="text" name="system" id="system-in" class="flex-grow"/>
|
<input type="text" name="system" id="system-in" class="flex-grow"/>
|
||||||
|
|
|
@ -164,6 +164,7 @@ class MultiChatUI {
|
||||||
this.elBtnUser = /** @type{HTMLButtonElement} */(document.getElementById("user-btn"));
|
this.elBtnUser = /** @type{HTMLButtonElement} */(document.getElementById("user-btn"));
|
||||||
this.elInUser = /** @type{HTMLInputElement} */(document.getElementById("user-in"));
|
this.elInUser = /** @type{HTMLInputElement} */(document.getElementById("user-in"));
|
||||||
this.elSelectApiEP = /** @type{HTMLSelectElement} */(document.getElementById("api-ep"));
|
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.elInSystem, "system-in");
|
||||||
this.validate_element(this.elDivChat, "chat-div");
|
this.validate_element(this.elDivChat, "chat-div");
|
||||||
|
@ -254,7 +255,7 @@ class MultiChatUI {
|
||||||
this.elInUser.value = "";
|
this.elInUser.value = "";
|
||||||
this.elInUser.disabled = false;
|
this.elInUser.disabled = false;
|
||||||
let respBody = await resp.json();
|
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;
|
let assistantMsg;
|
||||||
if (apiEP == ApiEP.Chat) {
|
if (apiEP == ApiEP.Chat) {
|
||||||
assistantMsg = respBody["choices"][0]["message"]["content"];
|
assistantMsg = respBody["choices"][0]["message"]["content"];
|
||||||
|
@ -277,6 +278,49 @@ class MultiChatUI {
|
||||||
this.elInUser.focus();
|
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 MultiChatUI();
|
||||||
gMuitChat.new_chat(gChatId);
|
gMuitChat.new_chat(gChatId);
|
||||||
gMuitChat.setup_ui(gChatId);
|
gMuitChat.setup_ui(gChatId);
|
||||||
|
gMuitChat.show_sessions();
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", startme);
|
document.addEventListener("DOMContentLoaded", startme);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue