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 {
display: flex;
overflow: hidden;
padding: 0 10px;
}
body.resizing * {
@@ -192,7 +193,7 @@ body:not(.loading) #loading {
gap: 5px;
background: #1e2030;
margin: auto;
margin-top: 40px;
margin-top: 42px;
width: 100%;
max-width: 1200px;
height: calc(100% - 40px);
@@ -220,10 +221,14 @@ body:not(.loading) #loading {
font-style: italic;
padding-left: 22px;
transition: 150ms opacity;
max-width: 100%;
}
#title-text {
transition: 150ms;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#title #title-refresh {
@@ -288,7 +293,7 @@ body:not(.loading) #loading {
.message {
position: relative;
max-width: 700px;
max-width: min(700px, 100%);
min-width: 280px;
width: max-content;
padding-top: 28px;
@@ -371,20 +376,23 @@ body:not(.loading) #loading {
background-image: url(icons/search-tool.svg);
}
#role::before,
.message.user .role::before {
background-image: url(icons/user.svg);
}
#role:has(.dropdown[data-value="system"])::before,
.message.system .role::before {
background-image: url(icons/system.svg);
}
#role:has(.dropdown[data-value="assistant"])::before,
.message.assistant .role::before {
background-image: url(icons/assistant.svg);
}
.message.assistant {
max-width: 800px;
max-width: min(800px, 100%);
}
.message.loading .text::after {
@@ -493,7 +501,7 @@ body:not(.loading) #loading {
height: 32px;
}
.message.collapsed .body > * {
.message.collapsed .body>* {
opacity: 0;
}
@@ -734,11 +742,12 @@ body:not(.loading) #loading {
left: 8px;
display: flex;
align-items: center;
gap: 20px;
gap: 2px 20px;
white-space: nowrap;
font-size: 13px;
line-height: 13px;
pointer-events: none;
flex-wrap: wrap;
}
.statistics .provider,
@@ -811,6 +820,7 @@ body:not(.loading) #loading {
height: 320px;
padding-bottom: 36px;
flex-shrink: 0;
flex-direction: column;
}
#chat::after {
@@ -937,12 +947,45 @@ body:not(.loading) #loading {
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 {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-radius: 0;
width: 100%;
height: 100%;
padding: 14px 16px;
padding: 12px 14px;
padding-bottom: 8px;
}
@@ -990,6 +1033,7 @@ select {
align-items: center;
gap: 12px;
z-index: 10;
max-width: calc(100% - 140px);
}
#chat .option {
@@ -1000,7 +1044,7 @@ select {
.message .options .attach::after,
.message .options .collapse::after,
#chat .option + .option::before {
#chat .option+.option::before {
content: "";
display: block;
width: 2px;
@@ -1042,6 +1086,7 @@ body.loading #version,
.message .statistics .tokens::before,
.message .statistics .cost::before,
.message .scroll-view,
#role::before,
#json,
#search,
#scrolling,
@@ -1061,6 +1106,7 @@ body.loading #version,
background-repeat: no-repeat;
}
#role::before,
.message .statistics .provider::before,
.message .statistics .ttft::before,
.message .statistics .tps::before,
@@ -1176,7 +1222,7 @@ label[for="reasoning-tokens"] {
transform: rotate(180deg);
}
#top:not(.hidden) + #bottom {
#top:not(.hidden)+#bottom {
right: 40px;
}
@@ -1399,6 +1445,7 @@ label[for="reasoning-tokens"] {
}
@keyframes swivel {
0%,
100% {
left: 0px;
@@ -1411,6 +1458,7 @@ label[for="reasoning-tokens"] {
}
@keyframes bounce {
0%,
75%,
100% {
@@ -1461,3 +1509,13 @@ label[for="reasoning-tokens"] {
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="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>
<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>
<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">
<label for="model" title="Model"></label>
<select id="model" data-searchable></select>
</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">
<label for="reasoning-effort" title="Reasoning Effort"></label>
<select id="reasoning-effort">
@@ -89,6 +86,18 @@
<label for="reasoning-tokens" title="Maximum amount of reasoning tokens"></label>
<input id="reasoning-tokens" type="number" min="2" max="1048576" value="1024" />
</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">
<button id="json" title="Turn on structured json output"></button>
<button id="search" title="Turn on search tools (search_web and fetch_contents)"></button>
@@ -96,12 +105,6 @@
<div class="option">
<button id="scrolling" title="Turn on auto-scrolling"></button>
</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>

6
static/js/chat.js
View File

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

6
static/js/dropdown.js
View File

@@ -23,7 +23,7 @@
value: option.value,
label: option.textContent,
title: option.title || false,
title: option.title || "",
tags: tags ? tags.split(",") : [],
search: searchable(option.textContent),
@@ -173,8 +173,10 @@
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.#_dropdown.setAttribute("data-value", selection.value);
}
#filter() {