From 72a780e181bfa8934134f3bd48952096131e04cc Mon Sep 17 00:00:00 2001 From: hanishkvc Date: Wed, 19 Nov 2025 21:16:44 +0530 Subject: [PATCH] SimpleChatTCRV:UICleanup: ToolCall trigger and UserInput block Add better visual cues wrt the tool call trigger block and the user input block, and inturn remove the now unneeded horizontal seperation line between chat messages block and the tool call trigger block. Bring in the user role color gradient to the full user input block Change the TEMP roles to use -TEMP instead of .TEMP suffix, so that role based css rules get applied without any complexity that may inturn not get applied. Avoid extra newlines in the err message returned by the tool call workers. Given that now there is a proper tool call response sent back to the ai backend/server, without using user and ai text content block itself to maintain the tool call and its response info (which is what this client was doing initially and so more spacing was added to important parts to bring it into better focus, just in case). --- tools/server/public_simplechat/index.html | 5 ++--- tools/server/public_simplechat/readme.md | 21 +++++++++++++++---- tools/server/public_simplechat/simplechat.css | 20 +++++++++++++++++- tools/server/public_simplechat/simplechat.js | 2 +- .../public_simplechat/toolsdbworker.mjs | 2 +- .../server/public_simplechat/toolsworker.mjs | 2 +- 6 files changed, 41 insertions(+), 11 deletions(-) diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html index e403509150..617d9b6094 100644 --- a/tools/server/public_simplechat/index.html +++ b/tools/server/public_simplechat/index.html @@ -35,7 +35,7 @@
-
+
@@ -52,7 +52,6 @@
-
@@ -63,7 +62,7 @@
-
+
diff --git a/tools/server/public_simplechat/readme.md b/tools/server/public_simplechat/readme.md index 8b58ad3d9b..e508ff7ab1 100644 --- a/tools/server/public_simplechat/readme.md +++ b/tools/server/public_simplechat/readme.md @@ -812,6 +812,17 @@ Cleanup in general * make things rounded across board by default. add some padding to toolcall details block, ... * 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 + * add role specific background gradients wrt the tool call trigger and user input block as well as + fix wrt the tool temp message block. also wrt system input block at top. + * also rename the TEMP role tags to use -TEMP instead of .TEMP, so that CSS rule selectors will + treat such tags like role-TOOL-TEMP as say a proper css class name rather than messing up with + something like role-TOOL.TEMP which will get split to role-TOOL and TEMP and inturn corresponding + css rule doesnt/wont get applied. + * given that now there is a proper visual cue based seperation of the tool call trigger block from + surrounding content, using proper seperate tool call specific coloring, so remove the
horiz + line seperation wrt tool call trigger block. + * however retain the horizontal line seperation between the tool trigger block and user input block, + given that some users and some ai dont seem to identify the difference very easily. * 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. @@ -842,16 +853,18 @@ Have a seperate helper to show the user input area, based on set state. And have if the models support same. It should also take care of some aspects of the tool call response edit / submit, potentially. -Make chat show messages by default only appends new chat messages to existing list of shown messages in ui, -instead of clearing ui and recreating each message ui element again. Have forgotten what I had originally -implemented, need to cross check. - Should I force a chat_show which clears usage and current settings info from chat session ui block at the begining like before the new optimised uirefresh based flow? Updating system prompt, will reset user input area fully now, which seems a good enough behaviour, while keeping the code flow also simple and straight, do I need to change it, I dont think so as of now. +Should I have a toggle to control whether show only the messages sent to ai server based on sliding window +or show all the messages (ie even beyond the sliding window)? +* rather previously with chat_show only whats in current sliding window was being shown, but now with + the uirefresh based logic, all messages from last chat_show will be shown irrespective of whether still + in ai server handshake related sliding window or not. + ### Debuging the handshake and beyond diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css index f34f896c30..d97e5a3c57 100644 --- a/tools/server/public_simplechat/simplechat.css +++ b/tools/server/public_simplechat/simplechat.css @@ -25,6 +25,10 @@ body { background-color: lightblue; } +#sessionsprompts-div .role-system { + border-radius: 1vmin; +} + #system-in { padding-inline: 0.5rem; } @@ -43,6 +47,9 @@ body { .role-tool { background: linear-gradient(135deg, var(--background-color) 0%, lightyellow 100%); } +.role-TOOL-TEMP { + background: linear-gradient(135deg, var(--background-color) 0%, lightyellow 100%); +} .role-trim { background: linear-gradient(135deg, lightpink 0%, transparent 100%); } @@ -155,6 +162,17 @@ body { flex-shrink: 1; min-height: 40vh; } +#tool-div { + border-width: thin; + border-color: yellow; + border-style: ridge; + background-color: antiquewhite; +} +#user-in-div { + border-width: thin; + border-color: black; + border-style: solid; +} #user-in { background-color: #ffffff; padding: 1.6vmin 2vmin; @@ -162,7 +180,7 @@ body { field-sizing: content; max-height: 16vh; } -#user-in[data-role="TOOL.TEMP"] { +#user-in[data-role="TOOL-TEMP"] { background-color: lightyellow; } #user-in-div button { diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js index feb4153182..9e29fd6c3e 100644 --- a/tools/server/public_simplechat/simplechat.js +++ b/tools/server/public_simplechat/simplechat.js @@ -12,7 +12,7 @@ import * as mIdb from "./idb.mjs" const DB_NAME = "SimpleChatTCRV" const DB_STORE = "Sessions" -const ROLES_TEMP_ENDSWITH = ".TEMP" +const ROLES_TEMP_ENDSWITH = "-TEMP" class Roles { static System = "system"; diff --git a/tools/server/public_simplechat/toolsdbworker.mjs b/tools/server/public_simplechat/toolsdbworker.mjs index 9523140b0a..30b58827e0 100644 --- a/tools/server/public_simplechat/toolsdbworker.mjs +++ b/tools/server/public_simplechat/toolsdbworker.mjs @@ -117,7 +117,7 @@ self.onmessage = async function (ev) { } console.info(`DBUG:WWDb:${ev.data.name}:OnMessage end`) } catch (/** @type {any} */error) { - let errMsg = `\n\nTool/Function call "${ev.data.name}" raised an exception:${error.name}:${error.message}\n\n`; + let errMsg = `\nTool/Function call "${ev.data.name}" raised an exception:${error.name}:${error.message}\n`; self.postMessage({ cid: ev.data.cid, tcid: ev.data.tcid, diff --git a/tools/server/public_simplechat/toolsworker.mjs b/tools/server/public_simplechat/toolsworker.mjs index 6bd27728d2..67eaf3a4bb 100644 --- a/tools/server/public_simplechat/toolsworker.mjs +++ b/tools/server/public_simplechat/toolsworker.mjs @@ -20,7 +20,7 @@ self.onmessage = async function (ev) { try { await xpromise.evalWithPromiseTracking(ev.data.code); } catch (/** @type {any} */error) { - console.log(`\n\nTool/Function call "${ev.data.name}" raised an exception:${error.name}:${error.message}\n\n`) + console.log(`\nTool/Function call "${ev.data.name}" raised an exception:${error.name}:${error.message}`) } tconsole.console_revert() self.postMessage({ cid: ev.data.cid, tcid: ev.data.tcid, name: ev.data.name, data: tconsole.gConsoleStr})