DEV: Update to new header API and FloatKit (#516)

assets/javascripts/discourse/components/ai-bot-header-icon.gjs

@@ -0,0 +1,50 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { gt } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import i18n from "discourse-common/helpers/i18n";
+import DMenu from "float-kit/components/d-menu";
+import { composeAiBotMessage } from "../lib/ai-bot-helper";
+import AiBotHeaderPanel from "./ai-bot-header-panel";
+
+export default class AiBotHeaderIcon extends Component {
+  @service siteSettings;
+  @service composer;
+
+  get bots() {
+    return this.siteSettings.ai_bot_add_to_header
+      ? this.siteSettings.ai_bot_enabled_chat_bots.split("|").filter(Boolean)
+      : [];
+  }
+
+  @action
+  compose() {
+    composeAiBotMessage(this.bots[0], this.composer);
+  }
+
+  <template>
+    {{#if (gt this.bots.length 0)}}
+      <li>
+        {{#if (gt this.bots.length 1)}}
+          <DMenu
+            @icon="robot"
+            @title={{i18n "discourse_ai.ai_bot.shortcut_title"}}
+            class="ai-bot-button icon btn-flat"
+          >
+            <:content as |args|>
+              <AiBotHeaderPanel @closePanel={{args.close}} />
+            </:content>
+          </DMenu>
+        {{else}}
+          <DButton
+            @icon="robot"
+            @title={{i18n "discourse_ai.ai_bot.shortcut_title"}}
+            class="ai-bot-button icon btn-flat"
+            @action={{this.compose}}
+          />
+        {{/if}}
+      </li>
+    {{/if}}
+  </template>
+}

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

@@ -1,18 +1,10 @@
 <div class="bot-panel ai-bot-available-bot-options">
-  <div class="menu-panel drop-down">
-    <div class="panel-body">
-      <div class="panel-body-contents">
-        <div class="sidebar-hamburger-dropdown">
-          {{#each this.botNames as |bot|}}
-            <DButton
-              @translatedTitle={{bot.humanized}}
-              @translatedLabel={{bot.humanized}}
-              @action={{action "composeMessageWithTargetBot" bot.modelName}}
-              class="btn-flat ai-bot-available-bot-content"
-            />
-          {{/each}}
-        </div>
-      </div>
-    </div>
-  </div>
+  {{#each this.botNames as |bot|}}
+    <DButton
+      @translatedTitle={{bot.humanized}}
+      @translatedLabel={{bot.humanized}}
+      @action={{action "composeMessageWithTargetBot" bot.modelName}}
+      class="btn-flat ai-bot-available-bot-content"
+    />
+  {{/each}}
 </div>

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

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

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

@@ -3,12 +3,11 @@ import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { registerWidgetShim } from "discourse/widgets/render-glimmer";
-import { composeAiBotMessage } from "discourse/plugins/discourse-ai/discourse/lib/ai-bot-helper";
 import ShareModal from "../discourse/components/modal/share-modal";
 import streamText from "../discourse/lib/ai-streamer";
 import copyConversation from "../discourse/lib/copy-conversation";
-
 const AUTO_COPY_THRESHOLD = 4;
+import AiBotHeaderIcon from "../discourse/components/ai-bot-header-icon";
 
 let enabledChatBotIds = [];
 function isGPTBot(user) {
@@ -16,51 +15,7 @@ function isGPTBot(user) {
 }
 
 function attachHeaderIcon(api) {
-  const settings = api.container.lookup("service:site-settings");
-
-  const enabledBots = settings.ai_bot_add_to_header
-    ? settings.ai_bot_enabled_chat_bots.split("|").filter(Boolean)
-    : [];
-  if (enabledBots.length > 0) {
-    api.attachWidgetAction("header", "showAiBotPanel", function () {
-      this.state.botSelectorVisible = true;
-    });
-
-    api.attachWidgetAction("header", "hideAiBotPanel", function () {
-      this.state.botSelectorVisible = false;
-    });
-
-    api.decorateWidget("header-icons:before", (helper) => {
-      return helper.attach("header-dropdown", {
-        title: "discourse_ai.ai_bot.shortcut_title",
-        icon: "robot",
-        action: "clickStartAiBotChat",
-        active: false,
-        classNames: ["ai-bot-button"],
-      });
-    });
-
-    if (enabledBots.length === 1) {
-      api.attachWidgetAction("header", "clickStartAiBotChat", function () {
-        composeAiBotMessage(
-          enabledBots[0],
-          api.container.lookup("service:composer")
-        );
-      });
-    } else {
-      api.attachWidgetAction("header", "clickStartAiBotChat", function () {
-        this.sendWidgetAction("showAiBotPanel");
-      });
-    }
-
-    api.addHeaderPanel(
-      "ai-bot-header-panel-wrapper",
-      "botSelectorVisible",
-      function () {
-        return {};
-      }
-    );
-  }
+  api.headerIcons.add("ai", AiBotHeaderIcon);
 }
 
 function initializeAIBotReplies(api) {
@@ -194,14 +149,11 @@ export default {
   name: "discourse-ai-bot-replies",
 
   initialize(container) {
-    const settings = container.lookup("service:site-settings");
     const user = container.lookup("service:current-user");
 
     if (user?.ai_enabled_chat_bots) {
       enabledChatBotIds = user.ai_enabled_chat_bots.map((bot) => bot.id);
-      if (settings.ai_bot_add_to_header) {
-        withPluginApi("1.6.0", attachHeaderIcon);
-      }
+      withPluginApi("1.6.0", attachHeaderIcon);
       withPluginApi("1.6.0", initializeAIBotReplies);
       withPluginApi("1.6.0", initializePersonaDecorator);
       withPluginApi("1.22.0", (api) => initializeShareButton(api, container));

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

@@ -80,10 +80,14 @@ article.streaming .cooked {
 }
 
 .ai-bot-available-bot-options {
+  padding: 0.5em;
+
   .ai-bot-available-bot-content {
     color: var(--primary-high);
     display: flex;
     width: 100%;
+    min-width: 320px;
+    padding: 0.5em;
     .d-button-label {
       flex: 1;
       text-align: left;