diff --git a/examples/server/public_simplechat/simplechat.css b/examples/server/public_simplechat/simplechat.css index 944693e9d..d45f50a95 100644 --- a/examples/server/public_simplechat/simplechat.css +++ b/examples/server/public_simplechat/simplechat.css @@ -11,6 +11,10 @@ background-color: lightgray; } +.session-selected { + background-color: lightblue; +} + .role-system { background-color: lightblue; } diff --git a/examples/server/public_simplechat/simplechat.js b/examples/server/public_simplechat/simplechat.js index 2e3da03ca..e2126c2de 100644 --- a/examples/server/public_simplechat/simplechat.js +++ b/examples/server/public_simplechat/simplechat.js @@ -163,6 +163,23 @@ let gChatURL = { 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 { constructor() { @@ -317,6 +334,7 @@ class MultiChatUI { /** * Show buttons for available chat sessions, in the passed elDiv. * If elDiv is undefined/null, then use this.elDivSessions. + * Take care of highlighting the selected chat-session's btn. * @param {HTMLDivElement | undefined} elDiv */ show_sessions(elDiv=undefined) { @@ -330,6 +348,9 @@ class MultiChatUI { btn.id = cid; btn.name = cid; btn.innerText = cid; + if (cid == this.curChatId) { + btn.className = "session-selected"; + } btn.addEventListener("click", (ev)=>{ let target = /** @type{HTMLButtonElement} */(ev.target); console.debug(`DBUG:MCUI:SessionClick:${target.id}`); @@ -338,6 +359,7 @@ class MultiChatUI { return; } this.handle_session_switch(target.id); + el_children_config_class(elDiv, target.id, "session-selected", ""); }); elDiv.appendChild(btn); }