diff --git a/assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs b/assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs index e8e8ee6e..c4f9bc14 100644 --- a/assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs +++ b/assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs @@ -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" /> - - {{#if @controller.showUploadsContainer}} -
- {{#each @controller.uploads as |upload|}} -
- - {{upload.original_filename}} - - -
- {{/each}} - - {{#each @controller.inProgressUploads as |upload|}} -
- {{upload.fileName}} - - {{upload.progress}}% - - -
- {{/each}} -
- {{/if}}

{{i18n "discourse_ai.ai_bot.conversations.disclaimer"}}

+ + {{#if @controller.showUploadsContainer}} +
+ {{#each @controller.uploads as |upload|}} +
+ + {{upload.original_filename}} + + +
+ {{/each}} + + {{#each @controller.inProgressUploads as |upload|}} +
+ {{upload.fileName}} + + {{upload.progress}}% + + +
+ {{/each}} +
+ {{/if}} diff --git a/assets/stylesheets/modules/ai-bot-conversations/common.scss b/assets/stylesheets/modules/ai-bot-conversations/common.scss index aafbc603..dce213b4 100644 --- a/assets/stylesheets/modules/ai-bot-conversations/common.scss +++ b/assets/stylesheets/modules/ai-bot-conversations/common.scss @@ -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 {