diff --git a/tools/server/public_simplechat/readme.md b/tools/server/public_simplechat/readme.md
index e8246a5aaa..e48a032b29 100644
--- a/tools/server/public_simplechat/readme.md
+++ b/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
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index 682414753a..bcb736d2bb 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/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;
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index 30779b26a0..bbd009b8b7 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -439,8 +439,8 @@ class ChatMessageEx {
*/
function usage_note(sRecentUserMsgCnt) {
let sUsageNote = `
-
- Usage Note
+
+ Usage Note
- Clicking chat icon, toggles chat session buttons and system prompt block
- System prompt above, helps control ai response characteristics.
@@ -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 += 'Restore
\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}`))
}