diff --git a/assets/javascripts/discourse/components/ai-bot-header-panel.js b/assets/javascripts/discourse/components/ai-bot-header-panel.js
index b12341c6..90e7b638 100644
--- a/assets/javascripts/discourse/components/ai-bot-header-panel.js
+++ b/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);
   }
 }
diff --git a/assets/javascripts/discourse/lib/ai-bot-helper.js b/assets/javascripts/discourse/lib/ai-bot-helper.js
index 5ea0dc2d..b90d03db 100644
--- a/assets/javascripts/discourse/lib/ai-bot-helper.js
+++ b/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) {
-  if (appEvents) {
-    appEvents.trigger("ai-bot-menu:close");
-  }
+export async function composeAiBotMessage(targetBot, composer) {
   let botUsername = await ajax("/discourse-ai/ai-bot/bot-username", {
     data: { username: targetBot },
   }).then((data) => {
diff --git a/assets/javascripts/discourse/widgets/ai-bot-header-panel-wrapper.js b/assets/javascripts/discourse/widgets/ai-bot-header-panel-wrapper.js
index 4f4f2f0d..44993122 100644
--- a/assets/javascripts/discourse/widgets/ai-bot-header-panel-wrapper.js
+++ b/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() {
-    this.appEvents.on("ai-bot-menu:close", this, this.clickOutside);
-  },
-
-  destroy() {
-    this.appEvents.off("ai-bot-menu:close", this, this.clickOutside);
-  },
-
-  clickOutside() {
+  @action
+  closePanel() {
     this.sendWidgetAction("hideAiBotPanel");
-  },
-});
+  }
+
+  @action
+  clickOutside() {
+    this.closePanel();
+  }
+}
diff --git a/assets/javascripts/initializers/ai-bot-replies.js b/assets/javascripts/initializers/ai-bot-replies.js
index a8e8e051..ba2651cb 100644
--- a/assets/javascripts/initializers/ai-bot-replies.js
+++ b/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",