DEV: Add ai-bot-conversations-above-input plugin outlet and update loading animation

Author: janzenisaac

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

@@ -27,9 +27,10 @@ export default class DiscourseAiBotConversations extends Controller {
   }
 
   @action
-  updateInputValue(event) {
+  updateInputValue(value) {
     this._autoExpandTextarea();
-    this.aiBotConversationsHiddenSubmit.inputValue = event.target.value;
+    this.aiBotConversationsHiddenSubmit.inputValue =
+      value.target?.value || value;
   }
 
   @action

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

@@ -1,8 +1,10 @@
+import { hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import RouteTemplate from "ember-route-template";
 import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 import DButton from "discourse/components/d-button";
+import PluginOutlet from "discourse/components/plugin-outlet";
 import { i18n } from "discourse-i18n";
 import AiPersonaLlmSelector from "discourse/plugins/discourse-ai/discourse/components/ai-persona-llm-selector";
 
@@ -16,31 +18,36 @@ export default RouteTemplate(
       />
 
       <div class="ai-bot-conversations__content-wrapper">
-        <ConditionalLoadingSpinner @condition={{@controller.loading}}>
-          <h1>{{i18n "discourse_ai.ai_bot.conversations.header"}}</h1>
-          <div class="ai-bot-conversations__input-wrapper">
-            <textarea
-              {{didInsert @controller.setTextArea}}
-              {{on "input" @controller.updateInputValue}}
-              {{on "keydown" @controller.handleKeyDown}}
-              id="ai-bot-conversations-input"
-              placeholder={{i18n
-                "discourse_ai.ai_bot.conversations.placeholder"
-              }}
-              minlength="10"
-              rows="1"
-            />
+        <h1>{{i18n "discourse_ai.ai_bot.conversations.header"}}</h1>
+        <PluginOutlet
+          @name="ai-bot-conversations-above-input"
+          @outletArgs={{hash
+            updateInput=@controller.updateInputValue
+            submit=@controller.aiBotConversationsHiddenSubmit.submitToBot
+          }}
+        />
+        <div class="ai-bot-conversations__input-wrapper">
+          <textarea
+            {{didInsert @controller.setTextArea}}
+            {{on "input" @controller.updateInputValue}}
+            {{on "keydown" @controller.handleKeyDown}}
+            id="ai-bot-conversations-input"
+            placeholder={{i18n "discourse_ai.ai_bot.conversations.placeholder"}}
+            minlength="10"
+            rows="1"
+          />
+          <ConditionalLoadingSpinner @condition={{@controller.loading}}>
             <DButton
               @action={{@controller.aiBotConversationsHiddenSubmit.submitToBot}}
               @icon="paper-plane"
               @title="discourse_ai.ai_bot.conversations.header"
               class="ai-bot-button btn-primary ai-conversation-submit"
             />
-          </div>
-          <p class="ai-disclaimer">
-            {{i18n "discourse_ai.ai_bot.conversations.disclaimer"}}
-          </p>
-        </ConditionalLoadingSpinner>
+          </ConditionalLoadingSpinner>
+        </div>
+        <p class="ai-disclaimer">
+          {{i18n "discourse_ai.ai_bot.conversations.disclaimer"}}
+        </p>
       </div>
     </div>
   </template>

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

@@ -217,9 +217,16 @@ body.has-ai-conversations-sidebar {
         max-width: 46em;
       }
 
-      .btn-primary {
+      .ai-conversation-submit {
         align-self: end;
         min-height: 2.5em;
+        max-height: 2.5em;
+      }
+
+      .spinner {
+        margin: 0;
+        width: 2em;
+        height: 2em;
       }
 
       #ai-bot-conversations-input {
@@ -228,6 +235,7 @@ body.has-ai-conversations-sidebar {
         resize: none;
         border-radius: var(--d-button-border-radius);
         max-height: 30vh;
+        overflow: hidden;
 
         &:focus {
           outline: none;