feat(ui): reposition chat nav buttons as floating overlay in bottom-right of chat area
keyboardstaff committed
Mar 29, 2026 at 03:13 UTC
1539424d6407c3f14253277a91afcd0369ff84eb
3 files changed
+61
-20
webui/components/chat/input/progress.html
-19
@@ -18,20 +18,6 @@
18
<span class="icon material-symbols-outlined">volume_off</span>
19
</span>
20
</h4>
21
- <div id="chat-nav-buttons" aria-label="Chat navigation">
22
- <button class="btn-icon-action" title="Scroll to top" x-on:click="$store.chatNavigation.scrollToTop()">
23
- <span class="material-symbols-outlined">vertical_align_top</span>
24
- </button>
25
- <button class="btn-icon-action" title="Previous user message" x-on:click="$store.chatNavigation.scrollToPrevUserMessage()">
26
- <span class="material-symbols-outlined">keyboard_arrow_up</span>
27
- </button>
28
- <button class="btn-icon-action" title="Next user message" x-on:click="$store.chatNavigation.scrollToNextUserMessage()">
29
- <span class="material-symbols-outlined">keyboard_arrow_down</span>
30
- </button>
31
- <button class="btn-icon-action" title="Scroll to bottom" x-on:click="$store.chatNavigation.scrollToBottom()">
32
- <span class="material-symbols-outlined">vertical_align_bottom</span>
33
- </button>
34
- </div>
21
<x-extension id="chat-nav-after"></x-extension>
22
</div>
23
<x-extension id="chat-input-progress-end"></x-extension>
@@ -44,11 +30,6 @@
30
#progress-bar-box h4 { margin: 0; }
31
#progress-bar-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; margin-left: auto; margin-right: calc(5.5rem + var(--spacing-xs)); }
32
#progress-bar-right > x-extension { display: contents; }
47
- #chat-nav-buttons { display: flex; align-items: center; gap: 2px; opacity: 0.85; }
48
- #chat-nav-buttons .btn-icon-action { padding: var(--spacing-xs); }
49
- #chat-nav-buttons .btn-icon-action {
50
- border: none !important;
51
- }
33
.shiny-text { background: linear-gradient(to right, var(--color-primary-dark) 20%, var(--color-text) 40%, var(--color-text) 60%, var(--color-primary-dark) 60%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 1s linear infinite; }
34
@keyframes shine { to { background-position: -200% center; } }
35
</style>
webui/index.css
+42
@@ -415,6 +415,48 @@ img {
415
transition: margin-left var(--transition-speed) ease-in-out;
416
}
417
418
+/* Chat area wrapper – contains chat-history + floating nav buttons */
419
+#chat-area-wrapper {
420
+ position: relative;
421
+ display: flex;
422
+ flex-direction: column;
423
+ flex-grow: 1;
424
+ min-height: 0;
425
+}
426
+
427
+/* Chat Navigation Buttons – vertical, floating bottom-right of chat area */
428
+#chat-nav-buttons {
429
+ position: absolute;
430
+ right: var(--spacing-md);
431
+ bottom: var(--spacing-md);
432
+ display: flex;
433
+ flex-direction: column;
434
+ align-items: center;
435
+ gap: 2px;
436
+ z-index: 100;
437
+ opacity: 0;
438
+ transition: opacity 0.2s ease;
439
+ pointer-events: none;
440
+}
441
+#chat-area-wrapper:hover #chat-nav-buttons,
442
+#chat-nav-buttons:hover {
443
+ opacity: 0.85;
444
+ pointer-events: auto;
445
+}
446
+#chat-nav-buttons .btn-icon-action {
447
+ padding: var(--spacing-xs);
448
+ border: none !important;
449
+ border-radius: 50%;
450
+ background: var(--color-panel);
451
+ box-shadow: 0 1px 4px rgba(0,0,0,0.18);
452
+}
453
+@media (max-width: 768px) {
454
+ #chat-nav-buttons {
455
+ opacity: 0.85;
456
+ pointer-events: auto;
457
+ }
458
+}
459
+
460
/* Scrollbar styles for right panel */
461
#right-panel.expanded {
462
margin-left: 0;
webui/index.html
+19
-1
@@ -97,7 +97,25 @@
97
<x-component path="welcome/welcome-screen.html"></x-component>
98
</div>
99
<!-- Message History (actual messages) -->
100
- <div id="chat-history" x-data x-show="!$store.welcomeStore || !$store.welcomeStore.isVisible"></div>
100
+ <div id="chat-area-wrapper" x-data x-show="!$store.welcomeStore || !$store.welcomeStore.isVisible">
101
+ <div id="chat-history"></div>
102
+
103
+ <!-- Chat Navigation Buttons (floating over chat area) -->
104
+ <div id="chat-nav-buttons" aria-label="Chat navigation" x-cloak>
105
+ <button class="btn-icon-action" title="Scroll to top" @click="$store.chatNavigation.scrollToTop()">
106
+ <span class="material-symbols-outlined">vertical_align_top</span>
107
+ </button>
108
+ <button class="btn-icon-action" title="Previous user message" @click="$store.chatNavigation.scrollToPrevUserMessage()">
109
+ <span class="material-symbols-outlined">keyboard_arrow_up</span>
110
+ </button>
111
+ <button class="btn-icon-action" title="Next user message" @click="$store.chatNavigation.scrollToNextUserMessage()">
112
+ <span class="material-symbols-outlined">keyboard_arrow_down</span>
113
+ </button>
114
+ <button class="btn-icon-action" title="Scroll to bottom" @click="$store.chatNavigation.scrollToBottom()">
115
+ <span class="material-symbols-outlined">vertical_align_bottom</span>
116
+ </button>
117
+ </div>
118
+ </div>
119
120
<!-- NEW: Toast Stack Component -->
121
<div style="position: relative; height: 0;">