Improved UI/UX in WebUI
- Collapsible pref section :+1: - Monospace font - UX focus on user feedback and accessibility - Mobile and input section QoL - Other minor refinements
Alessandro committed
Oct 23, 2024 at 00:18 UTC
f28a05d7392e812bc0272f431a662d5eb68953b0
2 files changed
+348
-101
webui/index.css
+279
-55
@@ -1,4 +1,4 @@
1
-@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
1
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
2
3
:root {
4
/* Dark mode */
@@ -10,7 +10,7 @@
10
--color-message-bg-dark: #2d2d2d;
11
--color-message-text-dark: #e0e0e0;
12
--color-panel-dark: #1e1e1e;
13
- --color-border-dark: #444;
13
+ --color-border-dark: #444444a8;
14
--color-input-dark: #222;
15
--color-input-focus-dark: #1b1b1b;
16
@@ -23,7 +23,7 @@
23
--color-message-bg-light: #ffffff;
24
--color-message-text-light: #333333;
25
--color-panel-light: #ffffff;
26
- --color-border-light: #e0e0e0;
26
+ --color-border-light: #e0e0e0c7;
27
--color-input-light: #f1f1f1;
28
--color-input-focus-light: #ebeced;
29
@@ -62,9 +62,18 @@ html {
62
background-color: var(--color-background);
63
color: var(--color-text);
64
font-family: "Rubik", Arial, Helvetica, sans-serif;
65
+ width: 100%;
66
height: 100%;
67
margin: 0;
68
padding: 0;
69
+ overflow: hidden;
70
+ position: fixed;
71
+}
72
+
73
+body {
74
+ overscroll-behavior: none;
75
+ -webkit-overscroll-behavior: none;
76
+
77
}
78
79
body,
@@ -86,6 +95,7 @@ body,
95
.panel {
96
height: 100%;
97
overflow: auto;
98
+ scroll-behavior: smooth;
99
}
100
101
/* Left Panel */
@@ -95,13 +105,13 @@ body,
105
box-sizing: border-box;
106
display: flex;
107
flex-direction: column;
98
- flex-shrink: 0;
108
justify-content: space-between;
100
- padding: var(--spacing-md);
109
transition: all var(--transition-speed) ease-in-out;
110
width: 250px;
111
+ min-width: 250px;
112
color: var(--color-text);
113
box-shadow: 1px 0 5px rgba(0, 0, 0, 0.3);
114
+ user-select: none;
115
}
116
117
#left-panel.hidden {
@@ -109,23 +119,39 @@ body,
119
}
120
121
.left-panel-top {
112
- margin-top: 2.5rem;
113
- overflow-y: auto;
122
+ flex: 1;
123
+ display: flex;
124
+ flex-direction: column;
125
+ min-height: 0;
126
+ overflow: hidden;
127
+ margin-top: 3.5rem;
128
+ padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
129
}
130
116
-/* Apply the custom scrollbar style */
131
.left-panel-top::-webkit-scrollbar {
132
width: 0px;
133
}
134
135
+#status-section,
136
+.config-section:not(#chats-section) {
137
+ flex-shrink: 0;
138
+}
139
+
140
+.left-panel-bottom {
141
+ position: relative;
142
+ flex-shrink: 0;
143
+}
144
+
145
.toggle-sidebar-button {
146
+ height: 2.6rem;
147
+ width: 2.6rem;
148
background-color: var(--color-secondary);
149
border: none;
150
border-radius: var(--spacing-xs);
151
color: var(--color-text);
152
cursor: pointer;
153
left: var(--spacing-md);
128
- padding: var(--spacing-sm) 0.75rem;
154
+ padding: 0.47rem 0.56rem;
155
position: absolute;
156
top: var(--spacing-md);
157
transition: all var(--transition-speed) ease-in-out;
@@ -141,16 +167,98 @@ body,
167
}
168
169
#sidebar-hamburger-svg {
144
- height: 24px;
145
- width: 24px;
170
+ transition: all var(--transition-speed) ease;
171
+}
172
+
173
+.toggle-sidebar-button:active #sidebar-hamburger-svg {
174
+ transform: scaleY(0.8);
175
}
176
177
.switch-label {
178
margin-right: 0.5rem;
179
}
180
+
181
+/* Chats container */
182
+.chats-list-container {
183
+ flex: 1;
184
+ min-height: 0;
185
+ overflow-y: auto;
186
+ scroll-behavior: smooth;
187
+ /* Mask */
188
+ mask-image: linear-gradient(
189
+ to bottom,
190
+ black calc(100% - 20px),
191
+ transparent 100%
192
+ );
193
+ -webkit-mask-image: linear-gradient(
194
+ to bottom,
195
+ black calc(100% - 20px),
196
+ transparent 100%
197
+ );
198
+ /* Add padding to account for fade */
199
+ padding-bottom: 20px;
200
+}
201
+
202
+/* Chats scrollbar */
203
+.chats-list-container::-webkit-scrollbar {
204
+ width: 0px;
205
+}
206
+
207
+#chats-section {
208
+ display: flex;
209
+ flex-direction: column;
210
+ min-height: 0;
211
+ flex: 1;
212
+}
213
+
214
+/* Preferences */
215
+.pref-header {
216
+ display: flex;
217
+ justify-content: space-between;
218
+ align-items: center;
219
+ cursor: pointer;
220
+ user-select: none;
221
+ font-size: var(--font-size-normal);
222
+ margin: 0.28rem 0 0.6rem 0;
223
+}
224
+
225
+/* Arrow icon */
226
+.arrow-icon {
227
+ flex-shrink: 0;
228
+ transition: transform var(--transition-speed) ease-in-out;
229
+ margin-left: 0.5rem;
230
+ width: 16px;
231
+ height: 16px;
232
+ transform: rotate(90deg);
233
+}
234
+
235
+.arrow-icon.rotated {
236
+ transform: rotate(-90deg);
237
+}
238
+
239
+.pref-section {
240
+ font-size: var(--font-size-small);
241
+ padding: 0.6rem var(--spacing-md) 0.05rem var(--spacing-md);
242
+}
243
+
244
+/* Collapse transition */
245
+.pref-section [x-cloak] {
246
+ display: none;
247
+}
248
+
249
+/* Version */
250
+.version-info {
251
+ line-height: 0.8rem;
252
+ position: relative;
253
+ margin: 0 var(--spacing-md) 1rem var(--spacing-md);
254
+ padding-top: 10px;
255
+ border-top: 1px solid var(--color-border);
256
+}
257
+
258
/* Right Panel */
259
#right-panel {
260
display: flex;
261
+ width: 100%;
262
flex-direction: column;
263
flex-grow: 1;
264
transition: margin-left var(--transition-speed) ease-in-out;
@@ -162,10 +270,13 @@ body,
270
271
#time-date {
272
color: var(--color-text);
273
+ position: fixed;
274
+ right: 0;
275
font-size: var(--font-size-normal);
276
text-align: right;
277
line-height: 1.2;
278
margin-right: var(--spacing-md);
279
+ margin-top: var(--spacing-md);
280
}
281
282
#user-date {
@@ -174,12 +285,16 @@ body,
285
}
286
287
/* Typography */
177
-h2,
178
-h3 {
288
+h2 {
289
color: var(--color-primary);
290
margin-bottom: var(--spacing-sm);
291
margin-top: var(--spacing-lg);
292
}
293
+h3 {
294
+ color: var(--color-primary);
295
+ margin-bottom: var(--spacing-sm);
296
+}
297
+
298
h4 {
299
margin-top: auto;
300
margin-bottom: auto;
@@ -191,17 +306,26 @@ h4 {
306
font-size: 0.7rem;
307
}
308
309
+pre {
310
+ font-family: 'Roboto Mono', monospace;
311
+ font-optical-sizing: auto;
312
+ font-size: 0.75rem;
313
+}
314
+
315
/* Chat History */
316
#chat-history {
317
display: flex;
318
flex-direction: column;
319
flex-grow: 1;
320
overflow-y: auto;
321
+ scroll-behavior: smooth;
322
overflow-x: hidden;
201
- padding: var(--spacing-md);
323
+ padding: var(--spacing-md) var(--spacing-md) 0;
324
+ transition: all 0.3s ease;
325
}
326
+
327
#chat-history > *:first-child {
204
- margin-top: 5em;
328
+ margin-top: 4.4em;
329
}
330
331
/* Apply the custom scrollbar style here */
@@ -234,10 +358,9 @@ h4 {
358
display: flex;
359
align-items: center;
360
justify-content: space-between;
237
- position: sticky;
238
- margin-left: var(--spacing-md);
361
+ position: fixed;
362
+ margin-left: 4.6rem;
363
margin-top: var(--spacing-md);
240
- margin-bottom: -80px;
364
transition: margin-left var(--transition-speed) ease-in-out;
365
z-index: 1001;
366
}
@@ -250,7 +373,7 @@ h4 {
373
#logo-container img {
374
border-radius: var(--spacing-xs);
375
width: auto;
253
- height: 3rem;
376
+ height: 2.6rem;
377
filter: none;
378
transition: filter 0.3s ease;
379
}
@@ -288,7 +411,7 @@ h4 {
411
}
412
413
#right-panel.expanded #logo-container {
291
- margin-left: 5.5rem;
414
+ margin-left: 4.6rem;
415
}
416
417
/* Message Styles */
@@ -419,6 +542,7 @@ h4 {
542
.msg-kvps th,
543
.msg-kvps td {
544
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
545
+ align-content:baseline;
546
padding: 0.25rem;
547
text-align: left;
548
}
@@ -444,35 +568,67 @@ h4 {
568
.message-action:hover {
569
opacity: 1;
570
}
447
-
571
/* Input Section */
572
#input-section {
573
+ position: relative;
574
background-color: var(--color-panel);
575
display: flex;
452
- padding: var(--spacing-sm) var(--spacing-md);
576
+ padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
577
align-items: center;
578
flex-shrink: 0;
579
}
580
581
#chat-input {
582
background-color: var(--color-input);
459
- border: none;
460
- border-radius: var(--border-radius);
583
+ border: 1px solid var(--color-border);
584
+ border-radius: 8px;
585
color: var(--color-text);
586
flex-grow: 1;
463
- font-size: 0.7rem;
464
- max-height: 9rem;
465
- min-height: 20px;
587
+ font-family: 'Roboto Mono', monospace;
588
+ font-optical-sizing: auto;
589
+ font-size: 0.875rem;
590
+ max-height: 7rem;
591
+ min-height: 1.9rem;
592
+ padding: var(--spacing-xs) var(--spacing-sm);
593
+ overflow-y: auto;
594
+ scroll-behavior: smooth;
595
resize: none;
467
- padding: var(--spacing-sm) var(--spacing-md);
468
- transition: all var(--transition-speed) ease-in-out;
469
- overflow: hidden;
596
+ /* scrollbar padding */
597
+ background-clip: border-box;
598
+ border: 6px solid transparent;
599
+ transition: all 0.3s ease;
600
+}
601
+
602
+#chat-input::-webkit-scrollbar {
603
+ width: 6px;
604
+ height: 6px;
605
+}
606
+
607
+#chat-input::-webkit-scrollbar-track {
608
+ background: transparent;
609
+ margin: 4px 0;
610
+ border-radius: 6px;
611
+}
612
+
613
+#chat-input::-webkit-scrollbar-thumb {
614
+ background-color: rgba(155, 155, 155, 0.5);
615
+ border-radius: 6px;
616
+ transition: background-color 0.2s ease;
617
+}
618
+
619
+#chat-input::-webkit-scrollbar-thumb:hover {
620
+ background-color: rgba(155, 155, 155, 0.7);
621
}
622
623
#chat-input:focus {
624
+ outline: 0.05rem solid rgba(155, 155, 155, 0.3);
625
+ font-size: 0.955rem;
626
background-color: var(--color-input-focus);
474
- font-size: 0.8rem;
475
- outline: none;
627
+}
628
+
629
+#chat-input::placeholder {
630
+ color: var(--color-text-muted);
631
+ opacity: 0.7;
632
}
633
634
/* Config Section */
@@ -488,12 +644,16 @@ h4 {
644
645
.config-list li {
646
align-items: center;
491
- border-bottom: 1px solid var(--color-border);
647
+ border-top: 1px solid var(--color-border);
648
display: flex;
649
justify-content: space-between;
650
padding: 0.35rem 0;
651
}
652
653
+.config-list> *:first-child {
654
+ border-top: 0px;
655
+}
656
+
657
.config-button {
658
border: none;
659
border-radius: var(--spacing-xs);
@@ -507,7 +667,7 @@ h4 {
667
padding: var(--spacing-sm) 0.75rem;
668
text-wrap: nowrap;
669
background-color: var(--color-secondary);
510
- width: 48%;
670
+ width: 49%;
671
}
672
673
.config-button:hover {
@@ -537,15 +697,6 @@ h4 {
697
color: rgba(253, 253, 253, 0.35);
698
}
699
540
-.pref-section {
541
- font-size: var(--font-size-small);
542
-}
543
-
544
-.pref-section > ul {
545
- margin-bottom: 15px;
546
- margin-top: 0;
547
-}
548
-
700
/* Toggle Switch */
701
.switch {
702
display: inline-block;
@@ -593,6 +744,11 @@ input:checked + .slider:before {
744
transform: translateX(1.05rem);
745
}
746
747
+#chat-buttons-wrapper {
748
+ line-height: 0.5rem;
749
+ display: flex;
750
+}
751
+
752
/* Chat List Button */
753
.chat-list-button {
754
color: inherit;
@@ -610,12 +766,13 @@ input:checked + .slider:before {
766
color: var(--color-background);
767
cursor: pointer;
768
font-size: var(--font-size-normal);
613
- height: 3.125rem;
769
+ height: 2.525rem;
770
margin-left: var(--spacing-sm);
771
transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
616
- width: 3.125rem;
772
+ width: 2.525rem;
773
flex-shrink: 0;
618
- min-width: 3.125rem;
774
+ flex-grow: 0;
775
+ min-width: 2.525rem;
776
display: flex;
777
align-items: center;
778
justify-content: center;
@@ -785,7 +942,8 @@ input:checked + .slider:before {
942
943
/* Utility Classes */
944
.kvps-key {
788
- font-weight: bold;
945
+ font-weight: 500;
946
+ font-size: var(--font-size-small);
947
}
948
949
.kvps-val {
@@ -793,7 +951,7 @@ input:checked + .slider:before {
951
}
952
953
.kvps-val {
796
- margin: var(--spacing-sm) 0;
954
+ margin: 0.75rem 0 0.5rem 0.5rem;
955
}
956
957
.msg-json {
@@ -848,14 +1006,80 @@ input:checked + .slider:before {
1006
}
1007
1008
@media (max-width: 768px) {
851
- #left-panel.expanded #chat-input {
852
- display: none;
853
- overflow: hidden;
854
- flex-shrink: 0;
1009
+ #left-panel {
1010
+ position: fixed;
1011
+ left: 0;
1012
+ top: 0;
1013
+ bottom: 0;
1014
+ width: 250px !important; /* Force width */
1015
+ min-width: 250px;
1016
+ z-index: 1000;
1017
+ transition: all var(--transition-speed) ease-in-out;
1018
+ }
1019
+
1020
+ #left-panel.hidden {
1021
+ margin-left: -250px;
1022
+ }
1023
+
1024
+ .toggle-sidebar-button {
1025
+ position: fixed;
1026
+ left: var(--spacing-md);
1027
+ z-index: 1001;
1028
+ }
1029
+
1030
+ #logo-container {
1031
+ margin-left: 4.6rem;
1032
+ transition: all 0.3s ease;
1033
+ }
1034
+
1035
+ #right-panel.expanded #logo-container {
1036
+ margin-left: 4.6rem;
1037
+ }
1038
+
1039
+ #chat-buttons-wrapper {
1040
+ display: inline;
1041
}
1042
857
- #left-panel.expanded #time-date {
858
- flex-shrink: 0;
859
- text-wrap: nowrap;
1043
+ #chat-input {
1044
+ min-height: 4.2rem;
1045
}
1046
}
1047
+
1048
+@media (min-width: 768px) {
1049
+ #chat-buttons-wrapper {
1050
+ flex-wrap: no-wrap;
1051
+ }
1052
+}
1053
+
1054
+@media (max-height: 600px) {
1055
+ #chats-section {
1056
+ min-height: 100%;
1057
+ }
1058
+
1059
+ .left-panel-top {
1060
+ overflow-y: auto;
1061
+ scroll-behavior: smooth;
1062
+ }
1063
+
1064
+ /* consistent font sizing */
1065
+ html {
1066
+ -webkit-text-size-adjust: 100%;
1067
+ -moz-text-size-adjust: 100%;
1068
+ -ms-text-size-adjust: 100%;
1069
+ text-size-adjust: 100%;
1070
+ }
1071
+
1072
+ body {
1073
+ -webkit-font-smoothing: antialiased;
1074
+ -moz-osx-font-smoothing: grayscale;
1075
+ }
1076
+}
1077
+
1078
+@media screen and (orientation: landscape) {
1079
+
1080
+ /* lock font size during rotation */
1081
+ html {
1082
+ -webkit-text-size-adjust: none;
1083
+ text-size-adjust: none;
1084
+ }
1085
+}
\ No newline at end of file
webui/index.html
+69
-46
@@ -3,7 +3,7 @@
3
4
<head>
5
<meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7
<title>Agent Zero</title>
8
<link rel="stylesheet" href="index.css">
9
<link rel="stylesheet" href="toast.css">
@@ -14,6 +14,8 @@
14
if (window[name]) window[name](...args)
15
}
16
</script>
17
+
18
+ <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
19
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
20
<script type="module" src="index.js"></script>
21
<script type="text/javascript" src="settings.js"></script>
@@ -24,16 +26,23 @@
26
<div class="container">
27
<div class="icons-section" id="hide-button" x-data="{ connected: true }">
28
<!--Sidebar-->
29
+ <!-- Sidebar Toggle Button -->
30
<button id="toggle-sidebar" class="toggle-sidebar-button" aria-label="Toggle Sidebar" aria-expanded="false">
31
<span aria-hidden="true">
29
- <svg id="sidebar-hamburger-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
30
- viewBox="0 0 24 24" fill="CurrentColor">
31
- <path
32
- d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" />
32
+ <!-- Hamburger Icon -->
33
+ <svg id="sidebar-hamburger-svg" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="CurrentColor">
34
+ <path d="M3 13h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V7H3v2z"></path>
35
</svg>
36
</span>
37
</button>
38
+
39
+ <div id="logo-container">
40
+ <a href="https://github.com/frdel/agent-zero" target="_blank" rel="noopener noreferrer">
41
+ <img src="splash.jpg" alt="a0" width="22" height="22">
42
+ </a>
43
+ </div>
44
</div>
45
+
46
<div id="left-panel" class="panel">
47
<div class="left-panel-top">
48
<!--Sidebar upper elements-->
@@ -45,34 +54,46 @@
54
55
<div class="config-section" x-data="{ showQuickActions: true }">
56
<h3>Quick Actions</h3>
48
- <button class="config-button" id="resetChat" @click="resetChat()">Reset chat</button>
57
+ <button class="config-button" id="resetChat" @click="resetChat()">Reset Chat</button>
58
<button class="config-button" id="newChat" @click="newChat()">New Chat</button>
59
<button class="config-button" id="loadChats" @click="loadChats()">Load Chat</button>
60
<button class="config-button" id="loadChat" @click="saveChat()">Save Chat</button>
61
<button class="config-button" id="settings"
62
@click="settingsModalProxy.openModal()">Settings</button>
63
</div>
55
-
64
+ <!-- Chats List -->
65
<div class="config-section" id="chats-section" x-data="{ contexts: [], selected: '' }"
57
- x-show="contexts.length > 0">
58
- <h3>Chats</h3>
66
+ x-show="contexts.length > 0">
67
+ <h3>Chats</h3>
68
+ <div class="chats-list-container">
69
<ul class="config-list">
70
<template x-for="context in contexts">
71
<li>
62
- <span :class="{'chat-list-button': true, 'font-bold': context.id === selected}"
63
- @click="selected = context.id; selectChat(context.id)">
64
- Chat #<span x-text="context.no"></span>
65
- </span>
66
- <button class="edit-button" @click="killChat(context.id)">X</button>
72
+ <span :class="{'chat-list-button': true, 'font-bold': context.id === selected}"
73
+ @click="selected = context.id; selectChat(context.id)">
74
+ Chat #<span x-text="context.no"></span>
75
+ </span>
76
+ <button class="edit-button" @click="killChat(context.id)">X</button>
77
</li>
78
</template>
79
</ul>
80
</div>
81
</div>
72
- <!--Preferences-->
73
- <div class="pref-section">
74
- <h3>Preferences</h3>
75
- <ul class="config-list">
82
+ </div>
83
+ <!--Sidebar lower elements-->
84
+ <div class="left-panel-bottom">
85
+ <!-- Preferences -->
86
+ <div class="pref-section" x-data="{ prefOpen: true }">
87
+ <span><h3 class="pref-header" @click="prefOpen = !prefOpen">
88
+ Preferences
89
+ <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
90
+ fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"
91
+ :class="{'rotated': !prefOpen}">
92
+ <path d="M8 4l8 8-8 8"/>
93
+ </svg>
94
+ </h3>
95
+ <ul class="config-list" x-show="prefOpen" x-collapse x-transition>
96
+ <!-- Preferences Items -->
97
<li x-data="{ autoScroll: true }">
98
<span>Autoscroll</span>
99
<label class="switch">
@@ -83,7 +104,7 @@
104
</li>
105
<li x-data="{ darkMode: localStorage.getItem('darkMode') != 'false' }"
106
x-init="$watch('darkMode', val => toggleDarkMode(val))">
86
- <div class="switch-label">Dark mode</div>
107
+ <span class="switch-label">Dark mode</span>
108
<label class="switch">
109
<input type="checkbox" x-model="darkMode">
110
<span class="slider"></span>
@@ -112,19 +133,18 @@
133
<span class="slider"></span>
134
</label>
135
</li>
115
-
116
- </ul>
117
- <span id="a0version">Agent Zero 0.7<br>built on 2024-10-6</span>
136
+ </ul>
137
+ </span>
138
+ </div>
139
+ <!-- Version Info -->
140
+ <div class="version-info">
141
+ <span id="a0version">Agent Zero 0.7.1<br>built on 2024-10-16</span>
142
</div>
143
</div>
144
+ </div>
145
<div id="right-panel" class="panel">
121
- <div id="logo-container">
122
- <a href="https://github.com/frdel/agent-zero" target="_blank" rel="noopener noreferrer">
123
- <img src="splash.jpg" alt="a0" width="48" height="48">
124
- </a>
125
- <div id="time-date"></div>
126
- </div>
146
<!--Chat-->
147
+ <div id="time-date"></div>
148
<div id="chat-history">
149
</div>
150
<div id="toast" class="toast">
@@ -133,27 +153,30 @@
153
<button class="toast__close">Close</button>
154
</div>
155
<div id="progress-bar-box">
136
- <h4 id="progress-bar-h"><span id="progress-bar-i">|></span><span id="progress-bar"></span></h4>
156
+ <h4 id="progress-bar-h"><span id="progress-bar-i">|></span><span id="progress-bar"></span></h4>
157
</div>
158
<div id="input-section" x-data="{ paused: false }">
159
<textarea id="chat-input" placeholder="Type your message here..." rows="1"></textarea>
140
- <button class="chat-button" id="send-button" aria-label="Send message">
141
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
142
- <path d="M25 20 L75 50 L25 80" fill="none" stroke="currentColor" stroke-width="15" />
143
- </svg>
144
- </button>
145
- <button class="chat-button pause-button" id="pause-button" @click="pauseAgent(true)" x-show="!paused"
146
- aria-label="Pause agent">
147
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
148
- <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
149
- </svg>
150
- </button>
151
- <button class="chat-button pause-button" id="unpause-button" @click="pauseAgent(false)" x-show="paused"
152
- aria-label="Resume agent">
153
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
154
- <path d="M8 5v14l11-7z" />
155
- </svg>
156
- </button>
160
+
161
+ <div id="chat-buttons-wrapper">
162
+ <button class="chat-button" id="send-button" aria-label="Send message">
163
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
164
+ <path d="M25 20 L75 50 L25 80" fill="none" stroke="currentColor" stroke-width="15"></path>
165
+ </svg>
166
+ </button>
167
+ <br>
168
+ <button class="chat-button pause-button" id="pause-button" @click="pauseAgent(true)" x-show="!paused" aria-label="Pause agent">
169
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
170
+ <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
171
+ </svg>
172
+ </button>
173
+ <button class="chat-button pause-button" id="unpause-button" @click="pauseAgent(false)" x-show="paused" aria-label="Resume agent" style="display: none;">
174
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
175
+ <path d="M8 5v14l11-7z"></path>
176
+ </svg>
177
+ </button>
178
+
179
+ </div>
180
</div>
181
</div>
182
</div>