DEV: Tweaks for drop-down implementation (#69)

- Remove unused 'toggleAiBotPanel' widget action

- Switch from appEvents to closure actions

- Convert widget definition to native class syntax, so that we can use `@action` decorator. (alternatively, we could have done `{ closePanel: this.hideAiBotPanel.bind(this) }` in `RenderGlimmer`

assets/javascripts/discourse/components/ai-bot-header-panel.js

@@ -8,7 +8,6 @@ import I18n from "I18n";
 export default class AiBotHeaderPanel extends Component {
   @service siteSettings;
   @service composer;
-  @service appEvents;
 
   @action
   async composeMessageWithTargetBot(target) {
@@ -29,6 +28,7 @@ export default class AiBotHeaderPanel extends Component {
   }
 
   async #composeAiBotMessage(targetBot) {
-    composeAiBotMessage(targetBot, this.composer, this.appEvents);
+    this.args.closePanel();
+    composeAiBotMessage(targetBot, this.composer);
   }
 }

assets/javascripts/discourse/lib/ai-bot-helper.js

@@ -2,10 +2,7 @@ import { ajax } from "discourse/lib/ajax";
 import Composer from "discourse/models/composer";
 import I18n from "I18n";
 
-export async function composeAiBotMessage(targetBot, composer, appEvents) {
+export async function composeAiBotMessage(targetBot, composer) {
-  if (appEvents) {
-    appEvents.trigger("ai-bot-menu:close");
-  }
   let botUsername = await ajax("/discourse-ai/ai-bot/bot-username", {
     data: { username: targetBot },
   }).then((data) => {

assets/javascripts/discourse/widgets/ai-bot-header-panel-wrapper.js

@@ -1,31 +1,31 @@
-import { createWidget } from "discourse/widgets/widget";
+import Widget from "discourse/widgets/widget";
 import RenderGlimmer from "discourse/widgets/render-glimmer";
 import { hbs } from "ember-cli-htmlbars";
+import { action } from "@ember/object";
 
-export default createWidget("ai-bot-header-panel-wrapper", {
+export default class AiBotHeaderPanelWrapper extends Widget {
   buildAttributes() {
     return { "data-click-outside": true };
-  },
+  }
 
   html() {
     return [
       new RenderGlimmer(
         this,
         "div.widget-component-connector",
-        hbs`<AiBotHeaderPanel />`
+        hbs`<AiBotHeaderPanel @closePanel={{@data.closePanel}} />`,
+        { closePanel: this.closePanel }
       ),
     ];
-  },
+  }
 
-  init() {
+  @action
-    this.appEvents.on("ai-bot-menu:close", this, this.clickOutside);
+  closePanel() {
-  },
-
-  destroy() {
-    this.appEvents.off("ai-bot-menu:close", this, this.clickOutside);
-  },
-
-  clickOutside() {
     this.sendWidgetAction("hideAiBotPanel");
-  },
+  }
-});
+
+  @action
+  clickOutside() {
+    this.closePanel();
+  }
+}

assets/javascripts/initializers/ai-bot-replies.js

@@ -24,10 +24,6 @@ function attachHeaderIcon(api) {
       this.state.botSelectorVisible = false;
     });
 
-    api.attachWidgetAction("header", "toggleAiBotPanel", function () {
-      this.state.botSelectorVisible = !this.state.botSelectorVisible;
-    });
-
     api.decorateWidget("header-icons:before", (helper) => {
       return helper.attach("header-dropdown", {
         title: "blog.start_gpt_chat",