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

@@ -35,7 +35,7 @@
             <div id="sessionsprompts-div" class="visibility-visible">
                 <div id="sessions-div" class="sameline"></div>
                 <hr>
-                <div class="sameline">
+                <div class="sameline role-system">
                     <label for="system-in">System</label>
                     <textarea name="system" id="system-in" rows="2" placeholder="e.g. you are a helpful ai assistant, who provides concise answers" class="flex-grow"></textarea>
                 </div>
@@ -52,7 +52,6 @@
             </div>
 
             <div id="tool-div">
-                <hr>
                 <div class="sameline">
                     <textarea id="toolname-in" class="flex-grow" rows="1" placeholder="name of tool to run"></textarea>
                     <button id="tool-btn">run tool</button>
@@ -63,7 +62,7 @@
             </div>
 
             <hr>
-            <div id="user-in-div" class="sameline">
+            <div id="user-in-div" class="sameline role-user">
                 <textarea id="user-in" class="flex-grow" rows="2" placeholder="enter your query to the ai model here" ></textarea>
                 <button id="user-btn">submit</button>
             </div>

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 <HR> 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
 

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 {

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

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,

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