diff --git a/assets/javascripts/discourse/components/ai-bot-header-icon.gjs b/assets/javascripts/discourse/components/ai-bot-header-icon.gjs new file mode 100644 index 00000000..70f4aeed --- /dev/null +++ b/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); + } + + +} diff --git a/assets/javascripts/discourse/components/ai-bot-header-panel.hbs b/assets/javascripts/discourse/components/ai-bot-header-panel.hbs index 8b6dabf0..d67526ae 100644 --- a/assets/javascripts/discourse/components/ai-bot-header-panel.hbs +++ b/assets/javascripts/discourse/components/ai-bot-header-panel.hbs @@ -1,18 +1,10 @@
-
-
-
-
- {{#each this.botNames as |bot|}} - - {{/each}} -
-
-
-
+ {{#each this.botNames as |bot|}} + + {{/each}}
\ No newline at end of file diff --git a/assets/javascripts/discourse/widgets/ai-bot-header-panel-wrapper.js b/assets/javascripts/discourse/widgets/ai-bot-header-panel-wrapper.js deleted file mode 100644 index 653ad501..00000000 --- a/assets/javascripts/discourse/widgets/ai-bot-header-panel-wrapper.js +++ /dev/null @@ -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``, - { closePanel: this.closePanel } - ), - ]; - } - - @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 9e8c875a..ad962c02 100644 --- a/assets/javascripts/initializers/ai-bot-replies.js +++ b/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)); diff --git a/assets/stylesheets/modules/ai-bot/common/bot-replies.scss b/assets/stylesheets/modules/ai-bot/common/bot-replies.scss index 84f0f3cc..71fbc476 100644 --- a/assets/stylesheets/modules/ai-bot/common/bot-replies.scss +++ b/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;