Skip to content

Commit b2a6ee9

Browse files
awesomerobotawesomerobot
authored
UX: update conversation input styles (#1308)
1 parent 3800728 commit b2a6ee9

File tree

2 files changed

+117
-52
lines changed

2 files changed

+117
-52
lines changed

‎assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default RouteTemplate(
5151
@icon="paper-plane"
5252
@isLoading={{@controller.loading}}
5353
@title="discourse_ai.ai_bot.conversations.header"
54-
class="ai-bot-button btn-primary ai-conversation-submit"
54+
class="ai-bot-button btn-transparent ai-conversation-submit"
5555
/>
5656
<input
5757
type="file"
@@ -60,44 +60,42 @@ export default RouteTemplate(
6060
multiple="multiple"
6161
{{didInsert @controller.registerFileInput}}
6262
/>
63-
64-
{{#if @controller.showUploadsContainer}}
65-
<div class="ai-bot-conversations__uploads-container">
66-
{{#each @controller.uploads as |upload|}}
67-
<div class="ai-bot-upload">
68-
<span class="ai-bot-upload__filename">
69-
{{upload.original_filename}}
70-
</span>
71-
<DButton
72-
@icon="xmark"
73-
@action={{fn @controller.removeUpload upload}}
74-
class="btn-transparent ai-bot-upload__remove"
75-
/>
76-
</div>
77-
{{/each}}
78-
79-
{{#each @controller.inProgressUploads as |upload|}}
80-
<div class="ai-bot-upload ai-bot-upload--in-progress">
81-
<span
82-
class="ai-bot-upload__filename"
83-
>{{upload.fileName}}</span>
84-
<span class="ai-bot-upload__progress">
85-
{{upload.progress}}%
86-
</span>
87-
<DButton
88-
@icon="xmark"
89-
@action={{fn @controller.cancelUpload upload}}
90-
class="btn-flat ai-bot-upload__remove"
91-
/>
92-
</div>
93-
{{/each}}
94-
</div>
95-
{{/if}}
9663
</div>
9764

9865
<p class="ai-disclaimer">
9966
{{i18n "discourse_ai.ai_bot.conversations.disclaimer"}}
10067
</p>
68+
69+
{{#if @controller.showUploadsContainer}}
70+
<div class="ai-bot-conversations__uploads-container">
71+
{{#each @controller.uploads as |upload|}}
72+
<div class="ai-bot-upload">
73+
<span class="ai-bot-upload__filename">
74+
{{upload.original_filename}}
75+
</span>
76+
<DButton
77+
@icon="xmark"
78+
@action={{fn @controller.removeUpload upload}}
79+
class="btn-transparent ai-bot-upload__remove"
80+
/>
81+
</div>
82+
{{/each}}
83+
84+
{{#each @controller.inProgressUploads as |upload|}}
85+
<div class="ai-bot-upload ai-bot-upload--in-progress">
86+
<span class="ai-bot-upload__filename">{{upload.fileName}}</span>
87+
<span class="ai-bot-upload__progress">
88+
{{upload.progress}}%
89+
</span>
90+
<DButton
91+
@icon="xmark"
92+
@action={{fn @controller.cancelUpload upload}}
93+
class="btn-flat ai-bot-upload__remove"
94+
/>
95+
</div>
96+
{{/each}}
97+
</div>
98+
{{/if}}
10199
</div>
102100
</div>
103101
</template>

‎assets/stylesheets/modules/ai-bot-conversations/common.scss

Lines changed: 85 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ body.has-ai-conversations-sidebar {
156156
}
157157

158158
.ai-bot-conversations {
159+
--input-max-width: 46em;
159160
display: flex;
160161
flex-direction: column;
161162
height: calc(100dvh - var(--header-offset) - 5em);
@@ -227,60 +228,123 @@ body.has-ai-conversations-sidebar {
227228
--input-min-height: 2.5em;
228229
display: flex;
229230
align-items: end;
230-
flex-wrap: wrap;
231231
width: 100%;
232+
border: 1px solid var(--primary-low);
233+
border-radius: var(--d-input-border-radius);
232234

233235
@include viewport.from(sm) {
234-
--input-max-width: 46em;
235236
width: 80%;
236237
max-width: var(--input-max-width);
237238
}
238239

240+
&:focus-within {
241+
border-color: var(--tertiary);
242+
}
243+
239244
.ai-conversation-submit {
240-
margin-left: 0.5em;
241-
height: var(--input-min-height);
245+
.d-icon {
246+
color: var(--primary-medium);
247+
padding: 0.5em;
248+
}
249+
250+
&:hover,
251+
&:focus-visible {
252+
.d-icon {
253+
color: var(--primary-medium);
254+
}
255+
}
242256
}
243257

244258
.ai-bot-upload-btn {
245259
min-height: var(--input-min-height);
246-
align-self: stretch;
247-
background: transparent;
248-
border: 1px solid var(--primary-low);
249-
border-right: none;
250-
border-radius: var(--d-button-border-radius) 0 0
251-
var(--d-button-border-radius);
260+
border: none;
252261

253-
&:focus-visible {
254-
border-color: var(--tertiary);
262+
.d-icon {
263+
background: var(--primary-low);
264+
padding: 0.5em;
265+
border-radius: 100%;
266+
}
255267

256-
+ #ai-bot-conversations-input {
257-
border-left-color: var(--tertiary);
268+
&:hover,
269+
&:focus-visible {
270+
.d-icon {
271+
color: var(--primary);
258272
}
259273
}
260274
}
261275

262276
#ai-bot-conversations-input {
277+
--scrollbarBg: transparent;
278+
--scrollbarThumbBg: var(--primary-low);
279+
--scrollbarWidth: 10px;
280+
box-sizing: border-box;
263281
flex-grow: 1;
264282
margin: 0;
265283
resize: none;
266284
max-height: 30vh;
267285
min-height: var(--input-min-height);
268286
border-radius: 0 var(--d-button-border-radius)
269287
var(--d-button-border-radius) 0;
270-
border: 1px solid var(--primary-low);
288+
border: none;
289+
padding-block: 0.8em;
290+
padding-inline: 0;
291+
scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
292+
scrollbar-width: thin;
293+
transition: scrollbar-color 0.25s ease-in-out;
294+
295+
&::-webkit-scrollbar-thumb {
296+
background-color: var(--scrollbarThumbBg);
297+
border-radius: calc(var(--scrollbarWidth) / 2);
298+
border: calc(var(--scrollbarWidth) / 4) solid var(--secondary);
299+
}
300+
301+
&::-webkit-scrollbar-track {
302+
background-color: transparent;
303+
}
304+
305+
&::-webkit-scrollbar {
306+
width: var(--scrollbarWidth);
307+
}
308+
309+
&::-moz-scrollbar-thumb {
310+
background-color: var(--scrollbarThumbBg);
311+
border-radius: calc(var(--scrollbarWidth) / 2);
312+
border: calc(var(--scrollbarWidth) / 4) solid var(--secondary);
313+
}
314+
315+
&::-moz-scrollbar-track {
316+
background-color: transparent;
317+
}
318+
319+
&::-moz-scrollbar {
320+
width: var(--scrollbarWidth);
321+
}
271322

272323
&:focus-visible {
273324
outline: none;
274325
border-color: var(--tertiary);
275326
}
327+
328+
&:not(:placeholder-shown) + .ai-conversation-submit {
329+
will-change: scale;
330+
331+
&:hover,
332+
&:focus-visible {
333+
transform: scale(1.2);
334+
}
335+
336+
.d-icon {
337+
color: var(--tertiary);
338+
}
339+
}
276340
}
277341
}
278342

279343
.ai-disclaimer {
280344
text-align: center;
281345
font-size: var(--font-down-1);
282346
color: var(--primary-700);
283-
margin-top: 0;
347+
margin: 0;
284348

285349
@include viewport.from(sm) {
286350
width: 80%;
@@ -309,8 +373,11 @@ body.has-ai-conversations-sidebar {
309373
display: flex;
310374
flex-wrap: wrap;
311375
gap: 0.5em;
312-
padding-bottom: 1em;
313-
margin-top: 0.5em;
376+
377+
@include viewport.from(sm) {
378+
width: 80%;
379+
max-width: var(--input-max-width);
380+
}
314381
}
315382

316383
.ai-bot-upload {

0 commit comments

Comments
 (0)