SimpleChatTCRV:UIClean:Free up vertical space

move sessions buttons div to heading block

and move program name to the default block added to chat div, if
there is no chat in a given chat session.

cleanup the default block helpers to follow a common pattern.

also make the chat message bubbles/blocks bit more prominently box
shadowy

tools/server/public_simplechat/index.html

@@ -24,16 +24,15 @@
         <div class="samecolumn" id="fullbody">
 
             <div class="sameline" id="heading">
-                <div class="heading flex-grow" > <b> SimpleChat </b> </div>
-                <div class="flex-nogrow">
-                    <button id="sessionsprompts" title="chat sessions, system prompts">&#x1F4AC;</button>
+                <div id="sessions-div" class="flex-grow"></div>
+                <div id="icons-div" class="flex-nogrow">
+                    <button id="sessionsprompts" title="system prompts">&#x2728;</button>
                     <button id="clearchat" title="clear current chat">&#x1F9F9;</button>
                     <button id="settings" title="change settings">&#x2699;</button>
                 </div>
             </div>
 
             <div id="sessionsprompts-div" class="visibility-visible">
-                <div id="sessions-div" class="sameline"></div>
                 <hr>
                 <div class="sameline role-system">
                     <label for="system-in">System</label>

tools/server/public_simplechat/readme.md

@@ -834,6 +834,7 @@ Cleanup in general
   * ensure full props hierarchy is accounted for when setting the id of elements.
 * Chat button to toggle sessions buttons and system prompt.
 * Use unix date format markers wrt sys_date_time toolcall, also add w (day of week).
+* Free up the useful vertical space by merging chat sessions buttons/tabs into heading
 
 
 #### ToDo

tools/server/public_simplechat/simplechat.css

@@ -20,6 +20,9 @@ body {
     background: linear-gradient(135deg, var(--background-color) 0%, lightblue 100%);
     margin: 0;
 }
+#sessions-div {
+    overflow: auto;
+}
 
 .session-selected {
     background-color: lightblue;
@@ -54,12 +57,19 @@ body {
     background: linear-gradient(135deg, lightpink 0%, transparent 100%);
 }
 
-#UsageNote {
+#DefaultUsage {
     margin: 0.0vmin;
 }
-.restore-details {
+#DefaultRestore {
     margin: 0.0vmin;
 }
+#DefaultInfo {
+    margin: 0.0vmin;
+}
+#DefaultTitle {
+    font-size: xx-small;
+    text-align: end;
+}
 
 .chat-message {
     display: flex;
@@ -68,10 +78,10 @@ body {
     border: none;
     padding: 0.4vmin;
     padding-left: 0;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
 }
 .chat-message:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
 }
 .chat-message-role {
     border: none;

tools/server/public_simplechat/simplechat.js

@@ -439,8 +439,8 @@ class ChatMessageEx {
  */
 function usage_note(sRecentUserMsgCnt) {
     let sUsageNote = `
-    <details>
-    <summary id="UsageNote" class="role-system">Usage Note</summary>
+    <details id="DefaultUsage">
+    <summary 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>
@@ -1394,6 +1394,7 @@ class MultiChatUI {
                 this.elDivChat.innerHTML = usage_note(this.me.get_sRecentUserMsgCnt());
                 this.me.setup_load(this.elDivChat, chat);
                 this.me.show_info(this.elDivChat, bShowInfoAll);
+                this.me.show_title(this.elDivChat);
             }
         }
         return true
@@ -1925,7 +1926,7 @@ export class Me {
     setup_load(div, chat) {
         let tag = `Me:Load:${chat.chatId}`;
         let elRestore = document.createElement("details")
-        elRestore.className = "restore-details"
+        elRestore.id = "DefaultRestore"
         elRestore.hidden = true
         elRestore.open = true
         elRestore.innerHTML += '<summary class="role-system">Restore</summary>\n';
@@ -1961,6 +1962,17 @@ export class Me {
         })
     }
 
+    /**
+     * Show the title of this program
+     * @param {HTMLDivElement} elDiv
+     */
+    show_title(elDiv) {
+        let elTitle = document.createElement("div");
+        elTitle.id = "DefaultTitle";
+        elTitle.appendChild(document.createTextNode("SimpleChat"))
+        elDiv.appendChild(elTitle)
+    }
+
     /**
      * Show the configurable parameters info in the passed Div element.
      * @param {HTMLDivElement} elDiv
@@ -1971,12 +1983,15 @@ export class Me {
         if (!bAll) {
             props = [ "baseURL", "modelInfo", "tools", "chatProps" ];
         }
+        let elInfo = document.createElement("div")
+        elInfo.id = "DefaultInfo"
+        elDiv.appendChild(elInfo)
         fetch(`${this.baseURL}/props`).then(resp=>resp.json()).then(json=>{
             this.modelInfo = {
                 modelPath: json["model_path"],
                 ctxSize: json["default_generation_settings"]["n_ctx"]
             }
-            ui.ui_show_obj_props_info(elDiv, this, props, "Current Settings/Info (dev console document[gMe])", "", { toplegend: 'role-system' })
+            ui.ui_show_obj_props_info(elInfo, this, props, "Current Settings/Info (dev console document[gMe])", "", { toplegend: 'role-system' })
         }).catch(err=>console.log(`WARN:ShowInfo:${err}`))
     }