update styling and remove duplicate event

Author: SamSaffron

assets/javascripts/discourse/controllers/discourse-ai-bot-conversations.js

@@ -139,9 +139,6 @@ export default class DiscourseAiBotConversations extends Controller {
   @action
   setTextArea(element) {
     this.textarea = element;
-    if (this.textarea) {
-      this.textarea.addEventListener("paste", this._handlePaste);
-    }
   }
 
   @action

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

@@ -53,47 +53,47 @@ export default RouteTemplate(
             @title="discourse_ai.ai_bot.conversations.header"
             class="ai-bot-button btn-primary ai-conversation-submit"
           />
-        </div>
-
-        {{! Hidden file input element }}
-        <input
-          type="file"
-          id="ai-bot-file-uploader"
-          class="hidden-upload-field"
-          multiple="multiple"
-          {{didInsert @controller.registerFileInput}}
-        />
+          <input
+            type="file"
+            id="ai-bot-file-uploader"
+            class="hidden-upload-field"
+            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}}
+          {{#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}}
+              {{#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"}}

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

@@ -227,6 +227,7 @@ body.has-ai-conversations-sidebar {
       --input-min-height: 2.5em;
       display: flex;
       align-items: end;
+      flex-wrap: wrap;
       width: 100%;
 
       @include viewport.from(sm) {
@@ -259,7 +260,7 @@ body.has-ai-conversations-sidebar {
       }
 
       #ai-bot-conversations-input {
-        width: 100%;
+        flex-grow: 1;
         margin: 0;
         resize: none;
         max-height: 30vh;
@@ -304,12 +305,12 @@ body.has-ai-conversations-sidebar {
     }
 
     .ai-bot-conversations__uploads-container {
-      width: 80%;
-      max-width: var(--input-max-width);
+      width: 100%;
       display: flex;
       flex-wrap: wrap;
       gap: 0.5em;
       padding-bottom: 1em;
+      margin-top: 0.5em;
     }
 
     .ai-bot-upload {