SimpleChatTCRV:UICleanup: limit border-radius, SlidingWindow info

Allow AutoCreated Object Properties Editing UI to be themed to an
extent by assigning a id to the top level element, which is based
on the legend specified.

Use the same to add inline padding as well as adjust border radius
wrt the elements within, for the Settings ui. And min height and
border width wrt input, select and buttons within.

Similarly for the default Usage,Restore and SettingsInfo summary
titles, avoid border-radius.

Show the string representation of the sliding window selected.

Add some padding to system prompt input.

tools/server/public_simplechat/readme.md

@@ -808,6 +808,7 @@ 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.
+  * allow Auto ObjPropsEdit UI to be themed by assigning id to top level block.
 
 
 #### ToDo

tools/server/public_simplechat/simplechat.css

@@ -25,8 +25,13 @@ body {
     background-color: lightblue;
 }
 
+#system-in {
+    padding-inline: 0.5rem;
+}
+
 .role-system {
     background: linear-gradient(135deg, lightblue 0%, var(--background-color) 100%);
+    border-radius: 0.1vmin;
 }
 .role-user {
     background: linear-gradient(135deg, #D0F0FF 0%, var(--background-color) 100%);
@@ -195,6 +200,16 @@ button {
 [class^=SectionObjPropsInfoL] {
     margin-left: 2vmin;
 }
+#ObjPropsEdit-Settings * {
+    border-radius: 0.2rem;
+    padding-inline: 0.5rem;
+}
+#ObjPropsEdit-Settings button, #ObjPropsEdit-Settings select, #ObjPropsEdit-Settings input {
+    border-radius: 0.2rem;
+    padding-inline: 0.5rem;
+    min-height: 2vmin;
+    border-width: thin;
+}
 
 
 * {

tools/server/public_simplechat/simplechat.js

@@ -435,9 +435,9 @@ class ChatMessageEx {
 
 
 /**
- * @param {number} iRecentUserMsgCnt
+ * @param {string} sRecentUserMsgCnt
  */
-function usage_note(iRecentUserMsgCnt) {
+function usage_note(sRecentUserMsgCnt) {
     let sUsageNote = `
     <details>
     <summary id="UsageNote" class="role-system">Usage Note</summary>
@@ -455,7 +455,7 @@ function usage_note(iRecentUserMsgCnt) {
         </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, Last[${iRecentUserMsgCnt}] User Query/Resp, Cur Query].</li>
+    <li> ContextWindow = [System, ${sRecentUserMsgCnt} User Query/Resp, Cur Query].</li>
         <ul class="ul2">
         <li> ChatHistInCtxt, MaxTokens, ModelCtxt window to expand</li>
         </ul>
@@ -1381,7 +1381,7 @@ class MultiChatUI {
             this.scroll_el_into_view(this.elLastChatMessage)
         } else {
             if (bClear) {
-                this.elDivChat.innerHTML = usage_note(this.me.chatProps.iRecentUserMsgCnt-1);
+                this.elDivChat.innerHTML = usage_note(this.me.get_sRecentUserMsgCnt());
                 this.me.setup_load(this.elDivChat, chat);
                 this.me.show_info(this.elDivChat, bShowInfoAll);
             }
@@ -1844,7 +1844,7 @@ export class Me {
             bTrimGarbage: true,
         };
         /** @type {Object<string, number>} */
-        this.sRecentUserMsgCnt = {
+        this.sRecentUserMsgCntDict = {
             "Full": -1,
             "Last0": 1,
             "Last1": 2,
@@ -1972,12 +1972,25 @@ export class Me {
                 elParent.appendChild(sel.div);
             }
             if (propWithPath == ":chatProps:iRecentUserMsgCnt") {
-                let sel = ui.el_creatediv_select("SetChatHistoryInCtxt", "ChatHistoryInCtxt", this.sRecentUserMsgCnt, this.chatProps.iRecentUserMsgCnt, (val)=>{
-                    this.chatProps.iRecentUserMsgCnt = this.sRecentUserMsgCnt[val];
+                let sel = ui.el_creatediv_select("SetChatHistoryInCtxt", "ChatHistoryInCtxt", this.sRecentUserMsgCntDict, this.chatProps.iRecentUserMsgCnt, (val)=>{
+                    this.chatProps.iRecentUserMsgCnt = this.sRecentUserMsgCntDict[val];
                 });
                 elParent.appendChild(sel.div);
             }
         })
     }
 
+    get_sRecentUserMsgCnt() {
+        let sRecentUserMsgCnt = Object.keys(this.sRecentUserMsgCntDict).find((key)=>{
+            if (this.sRecentUserMsgCntDict[key] == this.chatProps.iRecentUserMsgCnt) {
+                return true
+            }
+            return false
+        });
+        if (sRecentUserMsgCnt) {
+            return sRecentUserMsgCnt;
+        }
+        return "Unknown";
+    }
+
 }

tools/server/public_simplechat/ui.mjs

@@ -310,6 +310,9 @@ export function ui_show_obj_props_edit(elParent, propsTreeRoot, oObj, lProps, sL
         "number": "number",
     };
     let elFS = document.createElement("fieldset");
+    if (propsTreeRoot == "") {
+        elFS.id = `ObjPropsEdit-${sLegend.replaceAll(' ', '')}`
+    }
     let elLegend = document.createElement("legend");
     elLegend.innerText = sLegend;
     elFS.appendChild(elLegend);