FEATURE: Force sidebar for bot conversations (#1266)

Author: markvanlan

assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs

@@ -1,17 +1,17 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
+import { AI_CONVERSATIONS_PANEL } from "../services/ai-conversations-sidebar-manager";
 
 export default class AiBotSidebarNewConversation extends Component {
-  @service router;
+  @service sidebarState;
 
-  get show() {
-    // don't show the new question button on the conversations home page
-    return this.router.currentRouteName !== "discourse-ai-bot-conversations";
+  get shouldRender() {
+    return this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL);
   }
 
   <template>
-    {{#if this.show}}
+    {{#if this.shouldRender}}
       <DButton
         @route="/discourse-ai/ai-bot/conversations"
         @label="discourse_ai.ai_bot.conversations.new"

assets/javascripts/discourse/routes/discourse-ai-bot-conversations.js

@@ -1,3 +1,16 @@
+import { service } from "@ember/service";
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default class DiscourseAiBotConversationsRoute extends DiscourseRoute {}
+export default class DiscourseAiBotConversationsRoute extends DiscourseRoute {
+  @service aiConversationsSidebarManager;
+
+  activate() {
+    super.activate(...arguments);
+    this.aiConversationsSidebarManager.forceCustomSidebar();
+  }
+
+  deactivate() {
+    super.deactivate(...arguments);
+    this.aiConversationsSidebarManager.stopForcingCustomSidebar();
+  }
+}

assets/javascripts/discourse/services/ai-bot-conversations-hidden-submit.js

@@ -40,6 +40,7 @@ export default class AiBotConversationsHiddenSubmit extends Service {
     const personaWithUsername = this.currentUser.ai_enabled_personas.find(
       (persona) => persona.username
     );
+
     // this is a total hack, the composer is hidden on the homepage with CSS
     await this.composer.open({
       action: Composer.PRIVATE_MESSAGE,

assets/javascripts/discourse/services/ai-conversations-sidebar-manager.js

@@ -0,0 +1,36 @@
+import { alias } from "@ember/object/computed";
+import Service, { service } from "@ember/service";
+import { MAIN_PANEL } from "discourse/lib/sidebar/panels";
+
+export const AI_CONVERSATIONS_PANEL = "ai-conversations";
+
+export default class AiConversationsSidebarManager extends Service {
+  @service sidebarState;
+
+  @alias("sidebarState.isForcingSidebar") isForcingSidebar;
+
+  forceCustomSidebar() {
+    // Set the panel to your custom panel
+    this.sidebarState.setPanel(AI_CONVERSATIONS_PANEL);
+
+    // Use separated mode to ensure independence from hamburger menu
+    this.sidebarState.setSeparatedMode();
+
+    // Hide panel switching buttons to keep UI clean
+    this.sidebarState.hideSwitchPanelButtons();
+
+    this.isForcingSidebar = true;
+    document.body.classList.add("has-ai-conversations-sidebar");
+    return true;
+  }
+
+  stopForcingCustomSidebar() {
+    // This method is called when leaving your route
+    // Only restore main panel if we previously forced ours
+    document.body.classList.remove("has-ai-conversations-sidebar");
+    if (this.isForcingSidebar) {
+      this.sidebarState.setPanel(MAIN_PANEL); // Return to main sidebar panel
+      this.isForcingSidebar = false;
+    }
+  }
+}

assets/javascripts/initializers/ai-bot-sidebar.js renamed to assets/javascripts/initializers/ai-conversations-sidebar.js

@@ -3,11 +3,16 @@ import { ajax } from "discourse/lib/ajax";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { i18n } from "discourse-i18n";
 import AiBotSidebarNewConversation from "../discourse/components/ai-bot-sidebar-new-conversation";
+import { AI_CONVERSATIONS_PANEL } from "../discourse/services/ai-conversations-sidebar-manager";
 
 export default {
-  name: "custom-sidebar-bot-messages",
+  name: "ai-conversations-sidebar",
+
   initialize() {
-    withPluginApi("1.37.1", (api) => {
+    withPluginApi("1.8.0", (api) => {
+      const aiConversationsSidebarManager = api.container.lookup(
+        "service:ai-conversations-sidebar-manager"
+      );
       const currentUser = api.container.lookup("service:current-user");
       const appEvents = api.container.lookup("service:app-events");
       const messageBus = api.container.lookup("service:message-bus");
@@ -18,9 +23,24 @@ export default {
 
       // TODO: Replace
       const recentConversations = 10;
+      // Step 1: Add a custom sidebar panel
+      api.addSidebarPanel(
+        (BaseCustomSidebarPanel) =>
+          class AiConversationsSidebarPanel extends BaseCustomSidebarPanel {
+            key = AI_CONVERSATIONS_PANEL;
+            hidden = true; // Hide from panel switching UI
+            displayHeader = true;
+            expandActiveSection = true;
+
+            // Optional - customize if needed
+            // switchButtonLabel = "Your Panel";
+            // switchButtonIcon = "cog";
+          }
+      );
 
-      api.renderInOutlet("after-sidebar-sections", AiBotSidebarNewConversation);
+      api.renderInOutlet("sidebar-footer-actions", AiBotSidebarNewConversation);
 
+      // Step 2: Add a custom section to your panel
       api.addSidebarSection(
         (BaseCustomSidebarSection, BaseCustomSidebarSectionLink) => {
           return class extends BaseCustomSidebarSection {
@@ -56,7 +76,9 @@ export default {
                   this.isFetching = false;
                   this.buildSidebarLinks();
                 })
-                .catch(() => (this.isFetching = false));
+                .catch((e) => {
+                  this.isFetching = false;
+                });
             }
 
             addNewMessage(newTopic) {
@@ -130,7 +152,31 @@ export default {
               return this.links?.length > 0;
             }
           };
-        }
+        },
+        AI_CONVERSATIONS_PANEL
+      );
+
+      api.modifyClass(
+        "route:topic",
+        (Superclass) =>
+          class extends Superclass {
+            activate() {
+              super.activate();
+              const topic = this.modelFor("topic");
+              if (
+                topic &&
+                topic.archetype === "private_message" &&
+                topic.ai_persona_name
+              ) {
+                aiConversationsSidebarManager.forceCustomSidebar();
+              }
+            }
+
+            deactivate() {
+              super.activate();
+              aiConversationsSidebarManager.stopForcingCustomSidebar();
+            }
+          }
       );
     });
   },