discourse
/
discourse-ai
mirror of https://github.com/discourse/discourse-ai.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: update conversation input styles (#1308)

This commit is contained in:
Kris 2025-05-02 13:42:12 -04:00 committed by GitHub
parent 3800728d52
commit b2a6ee9c05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 117 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs
View File

@ -51,7 +51,7 @@ export default RouteTemplate(
@icon="paper-plane"
@isLoading={{@controller.loading}}
@title="discourse_ai.ai_bot.conversations.header"
class="ai-bot-button btn-primary ai-conversation-submit"
class="ai-bot-button btn-transparent ai-conversation-submit"
/>
<input
type="file"
@ -60,44 +60,42 @@ export default RouteTemplate(
multiple="multiple"
{{didInsert @controller.registerFileInput}}
/>
{{#if @controller.showUploadsContainer}}
<div class="ai-bot-conversations__uploads-container">
{{#each @controller.uploads as |upload|}}
<div class="ai-bot-upload">
<span class="ai-bot-upload__filename">
{{upload.original_filename}}
</span>
<DButton
@icon="xmark"
@action={{fn @controller.removeUpload upload}}
class="btn-transparent ai-bot-upload__remove"
/>
</div>
{{/each}}
{{#each @controller.inProgressUploads as |upload|}}
<div class="ai-bot-upload ai-bot-upload--in-progress">
<span
class="ai-bot-upload__filename"
>{{upload.fileName}}</span>
<span class="ai-bot-upload__progress">
{{upload.progress}}%
</span>
<DButton
@icon="xmark"
@action={{fn @controller.cancelUpload upload}}
class="btn-flat ai-bot-upload__remove"
/>
</div>
{{/each}}
</div>
{{/if}}
</div>
<p class="ai-disclaimer">
{{i18n "discourse_ai.ai_bot.conversations.disclaimer"}}
</p>
{{#if @controller.showUploadsContainer}}
<div class="ai-bot-conversations__uploads-container">
{{#each @controller.uploads as |upload|}}
<div class="ai-bot-upload">
<span class="ai-bot-upload__filename">
{{upload.original_filename}}
</span>
<DButton
@icon="xmark"
@action={{fn @controller.removeUpload upload}}
class="btn-transparent ai-bot-upload__remove"
/>
</div>
{{/each}}
{{#each @controller.inProgressUploads as |upload|}}
<div class="ai-bot-upload ai-bot-upload--in-progress">
<span class="ai-bot-upload__filename">{{upload.fileName}}</span>
<span class="ai-bot-upload__progress">
{{upload.progress}}%
</span>
<DButton
@icon="xmark"
@action={{fn @controller.cancelUpload upload}}
class="btn-flat ai-bot-upload__remove"
/>
</div>
{{/each}}
</div>
{{/if}}
</div>
</div>
</template>

103
assets/stylesheets/modules/ai-bot-conversations/common.scss
View File

@ -156,6 +156,7 @@ body.has-ai-conversations-sidebar {
}
.ai-bot-conversations {
--input-max-width: 46em;
display: flex;
flex-direction: column;
height: calc(100dvh - var(--header-offset) - 5em);
@ -227,39 +228,56 @@ body.has-ai-conversations-sidebar {
--input-min-height: 2.5em;
display: flex;
align-items: end;
flex-wrap: wrap;
width: 100%;
border: 1px solid var(--primary-low);
border-radius: var(--d-input-border-radius);
@include viewport.from(sm) {
--input-max-width: 46em;
width: 80%;
max-width: var(--input-max-width);
}
&:focus-within {
border-color: var(--tertiary);
}
.ai-conversation-submit {
margin-left: 0.5em;
height: var(--input-min-height);
.d-icon {
color: var(--primary-medium);
padding: 0.5em;
}
&:hover,
&:focus-visible {
.d-icon {
color: var(--primary-medium);
}
}
}
.ai-bot-upload-btn {
min-height: var(--input-min-height);
align-self: stretch;
background: transparent;
border: 1px solid var(--primary-low);
border-right: none;
border-radius: var(--d-button-border-radius) 0 0
var(--d-button-border-radius);
border: none;
.d-icon {
background: var(--primary-low);
padding: 0.5em;
border-radius: 100%;
}
&:hover,
&:focus-visible {
border-color: var(--tertiary);
+ #ai-bot-conversations-input {
border-left-color: var(--tertiary);
.d-icon {
color: var(--primary);
}
}
}
#ai-bot-conversations-input {
--scrollbarBg: transparent;
--scrollbarThumbBg: var(--primary-low);
--scrollbarWidth: 10px;
box-sizing: border-box;
flex-grow: 1;
margin: 0;
resize: none;
@ -267,12 +285,58 @@ body.has-ai-conversations-sidebar {
min-height: var(--input-min-height);
border-radius: 0 var(--d-button-border-radius)
var(--d-button-border-radius) 0;
border: 1px solid var(--primary-low);
border: none;
padding-block: 0.8em;
padding-inline: 0;
scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
scrollbar-width: thin;
transition: scrollbar-color 0.25s ease-in-out;
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbarThumbBg);
border-radius: calc(var(--scrollbarWidth) / 2);
border: calc(var(--scrollbarWidth) / 4) solid var(--secondary);
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar {
width: var(--scrollbarWidth);
}
&::-moz-scrollbar-thumb {
background-color: var(--scrollbarThumbBg);
border-radius: calc(var(--scrollbarWidth) / 2);
border: calc(var(--scrollbarWidth) / 4) solid var(--secondary);
}
&::-moz-scrollbar-track {
background-color: transparent;
}
&::-moz-scrollbar {
width: var(--scrollbarWidth);
}
&:focus-visible {
outline: none;
border-color: var(--tertiary);
}
&:not(:placeholder-shown) + .ai-conversation-submit {
will-change: scale;
&:hover,
&:focus-visible {
transform: scale(1.2);
}
.d-icon {
color: var(--tertiary);
}
}
}
}
@ -280,7 +344,7 @@ body.has-ai-conversations-sidebar {
text-align: center;
font-size: var(--font-down-1);
color: var(--primary-700);
margin-top: 0;
margin: 0;
@include viewport.from(sm) {
width: 80%;
@ -309,8 +373,11 @@ body.has-ai-conversations-sidebar {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
padding-bottom: 1em;
margin-top: 0.5em;
@include viewport.from(sm) {
width: 80%;
max-width: var(--input-max-width);
}
}
.ai-bot-upload {