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

@@ -26,12 +26,13 @@
             <div class="sameline" id="heading">
                 <div class="heading flex-grow" > <b> SimpleChat </b> </div>
                 <div class="flex-nogrow">
-                    <button id="sessionsprompts" title="sessions, system prompts" popovertarget="popover-sessionsprompts">&#x1F4AC;</button>
+                    <button id="sessionsprompts" title="chat sessions, system prompts">&#x1F4AC;</button>
                     <button id="clearchat" title="clear current chat">&#x1F9F9;</button>
                     <button id="settings" title="change settings">&#x2699;</button>
                 </div>
             </div>
-            <div id="popover-sessionsprompts" popover="auto">
+
+            <div id="sessionsprompts-div" class="visibility-visible">
                 <div id="sessions-div" class="sameline"></div>
                 <hr>
                 <div class="sameline">

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

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

tools/server/public_simplechat/simplechat.js

@@ -442,6 +442,7 @@ function usage_note(sRecentUserMsgCnt) {
     <details>
     <summary id="UsageNote" class="role-system">Usage Note</summary>
     <ul class="ul1">
+    <li> Clicking chat icon, toggles chat session buttons and system prompt block </li>
     <li> System prompt above, helps control ai response characteristics.</li>
         <ul class="ul2">
         <li> Completion mode - no system prompt normally.</li>
@@ -454,7 +455,6 @@ function usage_note(sRecentUserMsgCnt) {
         <li> submit tool response placed into user query/response text area</li>
         </ul>
     <li> Use image button for vision models, submitting or switching session clears same </li>
-    <li> Clicking main title, toggles chat session buttons and system prompt </li>
     <li> ContextWindow = [System, ${sRecentUserMsgCnt} User Query/Resp, Cur Query].</li>
         <ul class="ul2">
         <li> ChatHistInCtxt, MaxTokens, ModelCtxt window to expand</li>
@@ -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)