From 1a0d1d6e847d5b362ea05e38ffed2332f619b159 Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Thu, 24 Apr 2025 13:33:33 -0500
Subject: [PATCH] DEV: Add `ai-bot-conversations-above-input` plugin outlet and
 update loading animation (#1284)

Update loading animation

https://github.com/user-attachments/assets/f3bb6ca7-5d84-4231-8ea1-fa49fa402eae


- Add plugin outlet
- update `updateInputValue` so that it can be used by plugins to update the input value
---
 .../discourse-ai-bot-conversations.js         |  5 +-
 .../discourse-ai-bot-conversations.gjs        | 58 ++++++++++---------
 .../modules/ai-bot-conversations/common.scss  | 10 +++-
 3 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/assets/javascripts/discourse/controllers/discourse-ai-bot-conversations.js b/assets/javascripts/discourse/controllers/discourse-ai-bot-conversations.js
index d5037fa6..869b6e97 100644
--- a/assets/javascripts/discourse/controllers/discourse-ai-bot-conversations.js
+++ b/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
diff --git a/assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs b/assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs
index b1fa6eb9..a8d32758 100644
--- a/assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs
+++ b/assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs
@@ -1,8 +1,9 @@
+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 +17,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"
-            />
-            <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>
+        <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"
+            disabled={{@controller.loading}}
+            rows="1"
+          />
+          <DButton
+            @action={{@controller.aiBotConversationsHiddenSubmit.submitToBot}}
+            @icon="paper-plane"
+            @isLoading={{@controller.loading}}
+            @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>
       </div>
     </div>
   </template>
diff --git a/assets/stylesheets/modules/ai-bot-conversations/common.scss b/assets/stylesheets/modules/ai-bot-conversations/common.scss
index 3212a684..6e9b90fa 100644
--- a/assets/stylesheets/modules/ai-bot-conversations/common.scss
+++ b/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;