happyz
/
llama.cpp
mirror of https://github.com/ggerganov/llama.cpp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

SimpleChatTCRV:UICleanup: Scrollbar, role gradiants, textarea, ... 

Reduce fullbody height by a tiny bit so that everything fits within
the overall height of the screen available, without needing a dummy
no use vertical scrollbar for full body. Rather its hardcoded for
now, in a sense, need to look into all elements competing for vertical
space and see how to make this auto adapt responsively, if there is
any subtle issue beyond me going beyond 100vh.

Set scrollbar in general to thin and minimal contrast subdued look.

Change user gradiant to blue hue, also add a subtle whitish hue based
gradiant to assistant chat messages. Also make trimmed content bgnd
a gradiant.

Wrt print media target, instead of trying to change the body color
directly, use the global variable added for same, so that other elements
also adjust suitably wrt the change like gradiants merging seemlessly
into the changed overall background and so.

Allow the input textarea to grow vertically to an extent, while still
ensuring that it doesnt cross a limit which could lead to additional
full page scrollbar showing up.

Add a border-radius by default across elements. In turn add padding
wrt toolcall details block so that things dont get cutoff and appear
proper.
This commit is contained in:
hanishkvc 2025-11-18 18:11:01 +05:30
parent ab9e9c9ee8
commit 7b4afc8652
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
tools/server/public_simplechat/readme.md
View File

@ -796,12 +796,18 @@ Cleanup in general
* ui cleanup
* more rounded buttons, chat messages and input area elements
* make the body very very lightly gray in color, while the user input area is made whiter.
* gradients wrt heading, individual chat message blocks
* gradients wrt heading, role-specific individual chat message blocks
* avoid borders and instead give a box effect through light shadows
* also avoid allround border around chat message role block and instead have to only one side
* timeout close popover menu
* update usage notes wrt vision and toggling of sessions and system prompt through main title area
* make restore block into details based block, and anchor its position independent of db check.
* avoid unneeded outer overall scrollbar by adjusting fullbody height in screen mode.
* user css variable to define the overall background color and inturn use same to merge gradients
to the background, as well as to help switch the same seemlessly between screen and print modes.
* 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.
#### ToDo

23
tools/server/public_simplechat/simplechat.css
View File

@ -4,7 +4,8 @@
*/
:root {
--background-color: #f4f4f9
--background-color: #f4f4f9;
--background-color-contrast-vlight: #e8e8e8;
}
body {
@ -12,7 +13,7 @@ body {
font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
}
#fullbody {
height: 98vh;
height: 97vh;
}
#heading {
@ -28,16 +29,17 @@ body {
background: linear-gradient(135deg, lightblue 0%, var(--background-color) 100%);
}
.role-user {
background: linear-gradient(135deg, lightgray 0%, var(--background-color) 100%);
background: linear-gradient(135deg, #D0F0FF 0%, var(--background-color) 100%);
}
.role-assistant {
text-align: initial;
background: linear-gradient(135deg, #F7FAFC 0%, var(--background-color) 100%)
}
.role-tool {
background: linear-gradient(135deg, var(--background-color) 0%, lightyellow 100%);
}
.role-trim {
background-color: lightpink;
background: linear-gradient(135deg, lightpink 0%, transparent 100%);
}
#UsageNote {
@ -75,13 +77,13 @@ body {
border-style: solid;
border-color: grey;
border-width: thin;
border-radius: 2px;
padding: 0.5vmin;
}
.chat-message-toolcall-arg {
border-style: solid;
border-color: grey;
border-width: thin;
border-radius: 2px;
padding: inherit;
}
.chat-message-content {
overflow-wrap: break-word;
@ -152,6 +154,8 @@ body {
background-color: #ffffff;
padding: 1.6vmin 2vmin;
border-radius: 2.5vmin;
field-sizing: content;
max-height: 16vh;
}
#user-in[data-role="TOOL.TEMP"] {
background-color: lightyellow;
@ -195,13 +199,16 @@ button {
* {
margin: 0.6vmin;
scrollbar-color: var(--background-color-contrast-vlight) var(--background-color);
scrollbar-width: thin;
border-radius: 0.5rem;
}
@media print {
body {
background-color: white;
:root {
--background-color: white;
}
#fullbody {