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

SimpleChatTCRV:UI theme cleanup - html+css r3 

Move the heading, sessions list and system prompt into a details
block so that user can hide them if required.

avoid the borders around chat message blocks and the chat message
role blocks within them, instead go for a subtle box shadow.

Use gradiants wrt heading, as well as chat message role based color
codings.

Update both the normal/screen view as well as the print view wr
above.
This commit is contained in:
hanishkvc 2025-11-18 11:35:30 +05:30
parent 9f782d70b8
commit 92bd3557d5
2 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
tools/server/public_simplechat/index.html
View File

@ -23,21 +23,21 @@
<body>
<div class="samecolumn" id="fullbody">
<div class="sameline" id="heading">
<div class="heading flex-grow" > <b> SimpleChat </b> </div>
<div class="flex-nogrow">
<button id="clearchat">&#x1F9F9; ClearChat</button>
<button id="settings">&#x2699; Settings</button>
</div>
</div>
<details open>
<summary class="sameline" id="heading">
<div class="heading flex-grow" > <b> SimpleChat </b> </div>
<div class="flex-nogrow">
<button id="clearchat">&#x1F9F9; ClearChat</button>
<button id="settings">&#x2699; Settings</button>
</div>
</summary>
<div id="sessions-div" class="sameline"></div>
<hr>
<div class="sameline">
<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>
</details>
<hr>
<div id="chat-div">

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

@ -3,15 +3,21 @@
* by Humans for All
*/
:root {
--background-color: #f4f4f9
}
body {
background-color: #f8f9fa;
background-color: var(--background-color);
font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
}
#fullbody {
height: 98vh;
}
.heading {
background: linear-gradient(135deg, lightblue 0%, white 100%);
#heading {
background: linear-gradient(135deg, var(--background-color) 0%, lightblue 100%);
margin: 0;
}
.session-selected {
@ -19,17 +25,16 @@ body {
}
.role-system {
background-color: lightblue;
background: linear-gradient(135deg, lightblue 0%, var(--background-color) 100%);
}
.role-user {
background-color: lightgray;
background: linear-gradient(135deg, lightgray 0%, var(--background-color) 100%);
}
.role-assistant {
text-align: initial;
}
.role-tool {
/* background-color: cornsilk; */
background-color: lightyellow;
background: linear-gradient(135deg, var(--background-color) 0%, lightyellow 100%);
}
.role-trim {
background-color: lightpink;
@ -40,24 +45,22 @@ body {
}
.chat-message {
border-style: solid;
border-color: grey;
border-width: thin;
border-radius: 1vmin;
display: flex;
border-radius: 1vmin;
margin-bottom: 2vh;
/* box-shadow: 1px 1px 4px lightslategray; */
border: none;
padding: 0.4vmin;
padding-left: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.chat-message:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chat-message-role {
border-style: dotted;
border-color: black;
border-width: thin;
border-radius: 4px;
border: none;
writing-mode: vertical-lr;
padding-inline: 1vmin;
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.chat-message-reasoning {
border-block-style: dashed;
@ -159,6 +162,7 @@ button {
padding-inline: 2vmin;
border-radius: 1vmin;
min-height: 3vmin;
border-color: lightgray;
}
.sameline {
@ -193,25 +197,28 @@ button {
@media print {
body {
background-color: white;
}
#fullbody {
height: auto;
}
.chat-message {
border-style: solid;
border-color: grey;
border-width: thin;
border-radius: 2px;
display:inherit;
padding: 0.4vmin;
border-radius: 1vmin;
margin-bottom: 2vh;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.chat-message-role {
border-style: dotted;
border-color: black;
border-width: thin;
border-radius: 4px;
writing-mode:inherit;
max-width: fit-content;
padding-inline: 1vmin;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}