From 519cc46f0e7c29b22e5dc55070ddb970a89f4ee7 Mon Sep 17 00:00:00 2001 From: hanishkvc Date: Wed, 19 Nov 2025 02:17:07 +0530 Subject: [PATCH] SimpleChatTCRV:Sessions++ button take two: normal html + js + css Now use javascript to trap the button click and inturn change css class to hide or show the corresponding div. This moving away from details with summary being the top level title + buttons block, avoids the warning wrt non standard use of details element, as well as gives a clear icon to end users wrt toggling the sessions+systemprompt block. --- tools/server/public_simplechat/index.html | 5 +++-- tools/server/public_simplechat/readme.md | 11 +++++++---- tools/server/public_simplechat/simplechat.css | 10 ++++++++++ tools/server/public_simplechat/simplechat.js | 13 ++++++++++++- 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html index e27ac93e64..e403509150 100644 --- a/tools/server/public_simplechat/index.html +++ b/tools/server/public_simplechat/index.html @@ -26,12 +26,13 @@
SimpleChat
- +
-
+ +
diff --git a/tools/server/public_simplechat/readme.md b/tools/server/public_simplechat/readme.md index 10c20e6cc8..8edd9af385 100644 --- a/tools/server/public_simplechat/readme.md +++ b/tools/server/public_simplechat/readme.md @@ -810,10 +810,13 @@ Cleanup in general * make the scrollbars more subtle and in the background. * allow user input textarea to grow vertically to some extent. * make things rounded across board by default. add some padding to toolcall details block, ... - * Auto ObjPropsEdit UI - * allow it to be themed by assigning id to top level block. - * fix a oversight (forgotten $) with use of templated literals and having variables in them. - * ensure full props hierarchy is accounted for when setting the id of elements. + * use icons without text wrt chat sessions++, new chat, clear chat and settings top level buttons. + * use title property/attribute to give a hint to the user about the button functionality +* Auto ObjPropsEdit UI + * allow it to be themed by assigning id to top level block. + * fix a oversight (forgotten $) with use of templated literals and having variables in them. + * ensure full props hierarchy is accounted for when setting the id of elements. +* Chat button to toggle sessions buttons and system prompt #### ToDo diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css index f75fb95e65..f34f896c30 100644 --- a/tools/server/public_simplechat/simplechat.css +++ b/tools/server/public_simplechat/simplechat.css @@ -212,6 +212,16 @@ button { } +.visibility-visible { + visibility: visible; + display: block; +} +.visibility-hidden { + visibility: hidden; + display: none; +} + + * { margin: 0.6vmin; scrollbar-color: var(--background-color-contrast-vlight) var(--background-color); diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js index 905446019d..feb4153182 100644 --- a/tools/server/public_simplechat/simplechat.js +++ b/tools/server/public_simplechat/simplechat.js @@ -442,6 +442,7 @@ function usage_note(sRecentUserMsgCnt) {
Usage Note
    +
  • Clicking chat icon, toggles chat session buttons and system prompt block
  • System prompt above, helps control ai response characteristics.
    • Completion mode - no system prompt normally.
      • @@ -454,7 +455,6 @@ function usage_note(sRecentUserMsgCnt) {
    • submit tool response placed into user query/response text area
  • Use image button for vision models, submitting or switching session clears same
    • -
  • Clicking main title, toggles chat session buttons and system prompt
  • ContextWindow = [System, ${sRecentUserMsgCnt} User Query/Resp, Cur Query].
    • ChatHistInCtxt, MaxTokens, ModelCtxt window to expand
      • @@ -1068,6 +1068,8 @@ class MultiChatUI { this.elDivSessions = /** @type{HTMLDivElement} */(document.getElementById("sessions-div")); this.elBtnSettings = /** @type{HTMLButtonElement} */(document.getElementById("settings")); this.elBtnClearChat = /** @type{HTMLButtonElement} */(document.getElementById("clearchat")); + this.elBtnSessionsPrompts = /** @type{HTMLButtonElement} */(document.getElementById("sessionsprompts")); + this.elDivSessionsPrompts = /** @type{HTMLDivElement} */(document.getElementById("sessionsprompts-div")); this.elDivTool = /** @type{HTMLDivElement} */(document.getElementById("tool-div")); this.elBtnTool = /** @type{HTMLButtonElement} */(document.getElementById("tool-btn")); this.elInToolName = /** @type{HTMLInputElement} */(document.getElementById("toolname-in")); @@ -1109,6 +1111,8 @@ class MultiChatUI { this.validate_element(this.elInToolName, "toolname-in"); this.validate_element(this.elInToolArgs, "toolargs-in"); this.validate_element(this.elBtnTool, "tool-btn"); + this.validate_element(this.elBtnSessionsPrompts, "sessionsprompts-btn"); + this.validate_element(this.elDivSessionsPrompts, "sessionsprompts-div"); } /** @@ -1497,6 +1501,13 @@ class MultiChatUI { this.simpleChats[this.curChatId].clear() this.chat_show(this.curChatId) }); + this.elBtnSessionsPrompts.addEventListener("click", (ev)=>{ + if (this.elDivSessionsPrompts.classList.contains("visibility-visible")) { + this.elDivSessionsPrompts.classList.replace("visibility-visible", "visibility-hidden") + } else { + this.elDivSessionsPrompts.classList.replace("visibility-hidden", "visibility-visible") + } + }) this.elBtnUser.addEventListener("click", (ev)=>{ clearTimeout(this.timers.toolcallResponseSubmitClick)