src/whiskr
1
0
Fork 0
mirror of https://github.com/coalaura/whiskr.git synced 2025-12-02 20:22:52 +00:00
Code Activity

declutter the ui a bit

Browse Source
This commit is contained in:
Laura
2025-11-09 21:35:57 +01:00
parent f85f5b14e8
commit 9a695d2cf4
4 changed files with 106 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
static/css/chat.css
View File

@@ -65,6 +65,7 @@ body {
body { body {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
padding: 0 10px;
} }
body.resizing * { body.resizing * {
@@ -192,7 +193,7 @@ body:not(.loading) #loading {
gap: 5px; gap: 5px;
background: #1e2030; background: #1e2030;
margin: auto; margin: auto;
margin-top: 40px; margin-top: 42px;
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
height: calc(100% - 40px); height: calc(100% - 40px);
@@ -220,10 +221,14 @@ body:not(.loading) #loading {
font-style: italic; font-style: italic;
padding-left: 22px; padding-left: 22px;
transition: 150ms opacity; transition: 150ms opacity;
max-width: 100%;
} }
#title-text { #title-text {
transition: 150ms; transition: 150ms;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
#title #title-refresh { #title #title-refresh {
@@ -288,7 +293,7 @@ body:not(.loading) #loading {
.message { .message {
position: relative; position: relative;
max-width: 700px; max-width: min(700px, 100%);
min-width: 280px; min-width: 280px;
width: max-content; width: max-content;
padding-top: 28px; padding-top: 28px;
@@ -371,20 +376,23 @@ body:not(.loading) #loading {
background-image: url(icons/search-tool.svg); background-image: url(icons/search-tool.svg);
} }
#role::before,
.message.user .role::before { .message.user .role::before {
background-image: url(icons/user.svg); background-image: url(icons/user.svg);
} }
#role:has(.dropdown[data-value="system"])::before,
.message.system .role::before { .message.system .role::before {
background-image: url(icons/system.svg); background-image: url(icons/system.svg);
} }
#role:has(.dropdown[data-value="assistant"])::before,
.message.assistant .role::before { .message.assistant .role::before {
background-image: url(icons/assistant.svg); background-image: url(icons/assistant.svg);
} }
.message.assistant { .message.assistant {
max-width: 800px; max-width: min(800px, 100%);
} }
.message.loading .text::after { .message.loading .text::after {
@@ -493,7 +501,7 @@ body:not(.loading) #loading {
height: 32px; height: 32px;
} }
.message.collapsed .body > * { .message.collapsed .body>* {
opacity: 0; opacity: 0;
} }
@@ -734,11 +742,12 @@ body:not(.loading) #loading {
left: 8px; left: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 2px 20px;
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
pointer-events: none; pointer-events: none;
flex-wrap: wrap;
} }
.statistics .provider, .statistics .provider,
@@ -811,6 +820,7 @@ body:not(.loading) #loading {
height: 320px; height: 320px;
padding-bottom: 36px; padding-bottom: 36px;
flex-shrink: 0; flex-shrink: 0;
flex-direction: column;
} }
#chat::after { #chat::after {
@@ -937,12 +947,45 @@ body:not(.loading) #loading {
opacity: 1; opacity: 1;
} }
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 6px;
background: #363a4f;
width: 100%;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 12px;
line-height: 12px;
}
#role {
display: flex;
align-items: center;
gap: 4px;
}
#role .dropdown {
font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
background: transparent;
padding: 0;
height: 14px;
}
#role .dropdown .selected {
text-transform: lowercase;
}
#role .dropdown .selected::after {
display: none;
}
#message { #message {
border-bottom-left-radius: 0px; border-radius: 0;
border-bottom-right-radius: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 14px 16px; padding: 12px 14px;
padding-bottom: 8px; padding-bottom: 8px;
} }
@@ -990,6 +1033,7 @@ select {
align-items: center; align-items: center;
gap: 12px; gap: 12px;
z-index: 10; z-index: 10;
max-width: calc(100% - 140px);
} }
#chat .option { #chat .option {
@@ -1000,7 +1044,7 @@ select {
.message .options .attach::after, .message .options .attach::after,
.message .options .collapse::after, .message .options .collapse::after,
#chat .option + .option::before { #chat .option+.option::before {
content: ""; content: "";
display: block; display: block;
width: 2px; width: 2px;
@@ -1042,6 +1086,7 @@ body.loading #version,
.message .statistics .tokens::before, .message .statistics .tokens::before,
.message .statistics .cost::before, .message .statistics .cost::before,
.message .scroll-view, .message .scroll-view,
#role::before,
#json, #json,
#search, #search,
#scrolling, #scrolling,
@@ -1061,6 +1106,7 @@ body.loading #version,
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#role::before,
.message .statistics .provider::before, .message .statistics .provider::before,
.message .statistics .ttft::before, .message .statistics .ttft::before,
.message .statistics .tps::before, .message .statistics .tps::before,
@@ -1176,7 +1222,7 @@ label[for="reasoning-tokens"] {
transform: rotate(180deg); transform: rotate(180deg);
} }
#top:not(.hidden) + #bottom { #top:not(.hidden)+#bottom {
right: 40px; right: 40px;
} }
@@ -1399,6 +1445,7 @@ label[for="reasoning-tokens"] {
} }
@keyframes swivel { @keyframes swivel {
0%, 0%,
100% { 100% {
left: 0px; left: 0px;
@@ -1411,6 +1458,7 @@ label[for="reasoning-tokens"] {
} }
@keyframes bounce { @keyframes bounce {
0%, 0%,
75%, 75%,
100% { 100% {
@@ -1461,3 +1509,13 @@ label[for="reasoning-tokens"] {
display: none; display: none;
} }
} }
@media (max-width: 745px) {
.message,
.message.assistant {
width: 100%;
min-width: auto;
max-width: 100%;
}
}

55
static/index.html
View File

@@ -45,6 +45,23 @@
<div id="attachments" class="files"></div> <div id="attachments" class="files"></div>
<div id="header">
<div id="role">
<select title="Message role">
<option value="user" selected>User</option>
<option value="assistant">Assistant</option>
<option value="system">System</option>
</select>
</div>
<div class="option">
<button id="export" title="Export the entire chat as a JSON file"></button>
<button id="import" title="Import a chat from an exported JSON file"></button>
<button id="dump" title="Dump the actual OpenRouter request for the current chat"></button>
<button id="clear" title="Clear the entire chat"></button>
</div>
</div>
<textarea id="message" placeholder="Type something..." autocomplete="off"></textarea> <textarea id="message" placeholder="Type something..." autocomplete="off"></textarea>
<button id="upload" title="Add files to message"></button> <button id="upload" title="Add files to message"></button>
@@ -52,30 +69,10 @@
<button id="send" title="Add message to chat and start completion"></button> <button id="send" title="Add message to chat and start completion"></button>
<div class="options"> <div class="options">
<div class="option">
<label for="role" title="Message role"></label>
<select id="role">
<option value="user" selected>User</option>
<option value="assistant">Assistant</option>
<option value="system">System</option>
</select>
</div>
<div class="option"> <div class="option">
<label for="model" title="Model"></label> <label for="model" title="Model"></label>
<select id="model" data-searchable></select> <select id="model" data-searchable></select>
</div> </div>
<div class="option">
<label for="prompt" title="Main system prompt"></label>
<select id="prompt" data-searchable></select>
</div>
<div class="option">
<label for="temperature" title="Temperature (0 - 2)"></label>
<input id="temperature" type="number" min="0" max="2" step="0.05" value="0.85" />
</div>
<div class="option">
<label for="iterations" title="Maximum number of iterations (turns) per response"></label>
<input id="iterations" type="number" min="1" max="50" value="3" />
</div>
<div class="option none"> <div class="option none">
<label for="reasoning-effort" title="Reasoning Effort"></label> <label for="reasoning-effort" title="Reasoning Effort"></label>
<select id="reasoning-effort"> <select id="reasoning-effort">
@@ -89,6 +86,18 @@
<label for="reasoning-tokens" title="Maximum amount of reasoning tokens"></label> <label for="reasoning-tokens" title="Maximum amount of reasoning tokens"></label>
<input id="reasoning-tokens" type="number" min="2" max="1048576" value="1024" /> <input id="reasoning-tokens" type="number" min="2" max="1048576" value="1024" />
</div> </div>
<div class="option">
<label for="prompt" title="Main system prompt"></label>
<select id="prompt" data-searchable></select>
</div>
<div class="option">
<label for="temperature" title="Temperature (0 - 2)"></label>
<input id="temperature" type="number" min="0" max="2" step="0.05" value="0.85" />
</div>
<div class="option">
<label for="iterations" title="Maximum number of iterations (turns) per response"></label>
<input id="iterations" type="number" min="1" max="50" value="3" />
</div>
<div class="option group none"> <div class="option group none">
<button id="json" title="Turn on structured json output"></button> <button id="json" title="Turn on structured json output"></button>
<button id="search" title="Turn on search tools (search_web and fetch_contents)"></button> <button id="search" title="Turn on search tools (search_web and fetch_contents)"></button>
@@ -96,12 +105,6 @@
<div class="option"> <div class="option">
<button id="scrolling" title="Turn on auto-scrolling"></button> <button id="scrolling" title="Turn on auto-scrolling"></button>
</div> </div>
<div class="option">
<button id="export" title="Export the entire chat as a JSON file"></button>
<button id="import" title="Import a chat form a JSON file"></button>
<button id="dump" title="Dump the actual OpenRouter request for the current chat"></button>
<button id="clear" title="Clear the entire chat"></button>
</div>
</div> </div>
</div> </div>
</div> </div>

6
static/js/chat.js
View File

@@ -23,7 +23,7 @@
$bottom = document.getElementById("bottom"), $bottom = document.getElementById("bottom"),
$resizeBar = document.getElementById("resize-bar"), $resizeBar = document.getElementById("resize-bar"),
$attachments = document.getElementById("attachments"), $attachments = document.getElementById("attachments"),
$role = document.getElementById("role"), $role = document.getElementById("role").querySelector("select"),
$model = document.getElementById("model"), $model = document.getElementById("model"),
$prompt = document.getElementById("prompt"), $prompt = document.getElementById("prompt"),
$temperature = document.getElementById("temperature"), $temperature = document.getElementById("temperature"),
@@ -2338,6 +2338,10 @@
} }
}); });
addEventListener("resize", () => {
updateScrollButton();
});
dropdown($role); dropdown($role);
dropdown($reasoningEffort); dropdown($reasoningEffort);

6
static/js/dropdown.js
View File

@@ -23,7 +23,7 @@
value: option.value, value: option.value,
label: option.textContent, label: option.textContent,
title: option.title || false, title: option.title || "",
tags: tags ? tags.split(",") : [], tags: tags ? tags.split(",") : [],
search: searchable(option.textContent), search: searchable(option.textContent),
@@ -173,8 +173,10 @@
const selection = this.#options[this.#selected]; const selection = this.#options[this.#selected];
this.#_selected.title = selection.title; this.#_selected.title = selection.title || this.#_select.title;
this.#_selected.innerHTML = selection.el.innerHTML; this.#_selected.innerHTML = selection.el.innerHTML;
this.#_dropdown.setAttribute("data-value", selection.value);
} }
#filter() { #filter() {