UX: update conversation input styles

Author: awesomerobot

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"
           />
           <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>

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,60 +228,123 @@ 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;
 
-        &:focus-visible {
-          border-color: var(--tertiary);
+        .d-icon {
+          background: var(--primary-low);
+          padding: 0.5em;
+          border-radius: 100%;
+        }
 
-          + #ai-bot-conversations-input {
-            border-left-color: var(--tertiary);
+        &:hover,
+        &:focus-visible {
+          .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;
         max-height: 30vh;
         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);
+          }
+        }
       }
     }
 
     .ai-disclaimer {
       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 {