vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SimpleChat:MCUI: Allow selected chat-session btn to be highlighted

Browse source 
Also have a general helper for setting class of children.
This commit is contained in:
HanishKVC 2024-05-21 17:48:18 +05:30
parent 3458d2f8c3
commit b9f9c0ec6e
2 changed files with 26 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
examples/server/public_simplechat/simplechat.css
View file

@ -11,6 +11,10 @@
background-color: lightgray; background-color: lightgray;
} }
.session-selected {
background-color: lightblue;
}
.role-system { .role-system {
background-color: lightblue; background-color: lightblue;
} }

22
examples/server/public_simplechat/simplechat.js
View file

@ -163,6 +163,23 @@ let gChatURL = {
const gbCompletionFreshChatAlways = true; const gbCompletionFreshChatAlways = true;
/**
* Set the class of the children, based on whether it is the idSelected or not.
* @param {HTMLDivElement} elBase
* @param {string} idSelected
* @param {string} classSelected
* @param {string} classUnSelected
*/
function el_children_config_class(elBase, idSelected, classSelected, classUnSelected="") {
for(let child of elBase.children) {
if (child.id == idSelected) {
child.className = classSelected;
} else {
child.className = classUnSelected;
}
}
}
class MultiChatUI { class MultiChatUI {
constructor() { constructor() {
@ -317,6 +334,7 @@ class MultiChatUI {
/** /**
* Show buttons for available chat sessions, in the passed elDiv. * Show buttons for available chat sessions, in the passed elDiv.
* If elDiv is undefined/null, then use this.elDivSessions. * If elDiv is undefined/null, then use this.elDivSessions.
* Take care of highlighting the selected chat-session's btn.
* @param {HTMLDivElement | undefined} elDiv * @param {HTMLDivElement | undefined} elDiv
*/ */
show_sessions(elDiv=undefined) { show_sessions(elDiv=undefined) {
@ -330,6 +348,9 @@ class MultiChatUI {
btn.id = cid; btn.id = cid;
btn.name = cid; btn.name = cid;
btn.innerText = cid; btn.innerText = cid;
if (cid == this.curChatId) {
btn.className = "session-selected";
}
btn.addEventListener("click", (ev)=>{ btn.addEventListener("click", (ev)=>{
let target = /** @type{HTMLButtonElement} */(ev.target); let target = /** @type{HTMLButtonElement} */(ev.target);
console.debug(`DBUG:MCUI:SessionClick:${target.id}`); console.debug(`DBUG:MCUI:SessionClick:${target.id}`);
@ -338,6 +359,7 @@ class MultiChatUI {
return; return;
} }
this.handle_session_switch(target.id); this.handle_session_switch(target.id);
el_children_config_class(elDiv, target.id, "session-selected", "");
}); });
elDiv.appendChild(btn); elDiv.appendChild(btn);
} }