FEATURE: Bot Conversation Homepage

Author: markvanlan

app/controllers/discourse_ai/ai_bot/conversations_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module DiscourseAi
+  module AiBot
+    class ConversationsController < ::ApplicationController
+      requires_plugin ::DiscourseAi::PLUGIN_NAME
+      requires_login
+
+      def index
+        page = params[:page].to_i
+        per_page = params[:per_page]&.to_i || 40
+
+        bot_user_ids = EntryPoint.all_bot_ids
+        base_query =
+          Topic
+            .private_messages_for_user(current_user)
+            .joins(:topic_users)
+            .where(topic_users: { user_id: bot_user_ids })
+            .distinct
+        total = base_query.count
+        pms = base_query.order(last_posted_at: :desc).offset(page * per_page).limit(per_page)
+
+        render json: {
+                 conversations: serialize_data(pms, BasicTopicSerializer),
+                 meta: {
+                   total: total,
+                   page: page,
+                   per_page: per_page,
+                   more: total > (page + 1) * per_page,
+                 },
+               }
+      end
+    end
+  end
+end

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

@@ -9,6 +9,7 @@ export default class AiBotHeaderIcon extends Component {
   @service currentUser;
   @service siteSettings;
   @service composer;
+  @service router;
 
   get bots() {
     const availableBots = this.currentUser.ai_enabled_chat_bots
@@ -24,6 +25,9 @@ export default class AiBotHeaderIcon extends Component {
 
   @action
   compose() {
+    if (this.siteSettings.ai_enable_experimental_bot_ux) {
+      return this.router.transitionTo("discourse-ai-bot-conversations");
+    }
     composeAiBotMessage(this.bots[0], this.composer);
   }
 

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

@@ -0,0 +1,27 @@
+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 shouldRender() {
+    return (
+      this.router.currentRouteName !== "discourse-ai-bot-conversations" &&
+      this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL)
+    );
+  }
+
+  <template>
+    {{#if this.shouldRender}}
+      <DButton
+        @route="/discourse-ai/ai-bot/conversations"
+        @label="discourse_ai.ai_bot.conversations.new"
+        @icon="plus"
+        class="ai-new-question-button btn-default"
+      />
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/connectors/topic-above-post-stream/ai-bot-conversation.gjs

@@ -0,0 +1,20 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import bodyClass from "discourse/helpers/body-class";
+
+export default class AiBotConversation extends Component {
+  @service siteSettings;
+
+  get show() {
+    return (
+      this.siteSettings.ai_enable_experimental_bot_ux &&
+      this.args.outletArgs.model?.pm_with_non_human_user
+    );
+  }
+
+  <template>
+    {{#if this.show}}
+      {{bodyClass "discourse-ai-bot-conversations-page"}}
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,32 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+
+export default class DiscourseAiBotConversations extends Controller {
+  @service aiBotConversationsHiddenSubmit;
+
+  textarea = null;
+
+  @action
+  updateInputValue(event) {
+    this._autoExpandTextarea();
+    this.aiBotConversationsHiddenSubmit.inputValue = event.target.value;
+  }
+
+  @action
+  handleKeyDown(event) {
+    if (event.key === "Enter" && !event.shiftKey) {
+      this.aiBotConversationsHiddenSubmit.submitToBot();
+    }
+  }
+
+  @action
+  setTextArea(element) {
+    this.textarea = element;
+  }
+
+  _autoExpandTextarea() {
+    this.textarea.style.height = "auto";
+    this.textarea.style.height = this.textarea.scrollHeight + "px";
+  }
+}

assets/javascripts/discourse/discourse-ai-bot-dashboard-route-map.js

@@ -0,0 +1,5 @@
+export default function () {
+  this.route("discourse-ai-bot-conversations", {
+    path: "/discourse-ai/ai-bot/conversations",
+  });
+}

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

@@ -23,24 +23,37 @@ export function showShareConversationModal(modal, topicId) {
     .catch(popupAjaxError);
 }
 
-export function composeAiBotMessage(targetBot, composer) {
+export async function composeAiBotMessage(
+  targetBot,
+  composer,
+  options = {
+    skipFocus: false,
+    topicBody: "",
+  }
+) {
   const currentUser = composer.currentUser;
   const draftKey = "new_private_message_ai_" + new Date().getTime();
 
-  let botUsername = currentUser.ai_enabled_chat_bots.find(
-    (bot) => bot.model_name === targetBot
-  ).username;
+  const botUsername = !targetBot
+    ? currentUser.ai_enabled_chat_bots[0].username
+    : currentUser.ai_enabled_chat_bots.find(
+        (bot) => bot.model_name === targetBot
+      )?.username;
 
-  composer.focusComposer({
-    fallbackToNewTopic: true,
-    openOpts: {
-      action: Composer.PRIVATE_MESSAGE,
-      recipients: botUsername,
-      topicTitle: i18n("discourse_ai.ai_bot.default_pm_prefix"),
-      archetypeId: "private_message",
-      draftKey,
-      hasGroups: false,
-      warningsDisabled: true,
-    },
-  });
+  const data = {
+    action: Composer.PRIVATE_MESSAGE,
+    recipients: botUsername,
+    topicTitle: i18n("discourse_ai.ai_bot.default_pm_prefix"),
+    archetypeId: "private_message",
+    draftKey,
+    hasGroups: false,
+    warningsDisabled: true,
+  };
+
+  if (options.skipFocus) {
+    data.topicBody = options.topicBody;
+    await composer.open(data);
+  } else {
+    composer.focusComposer({ fallbackToNewTopic: true, openOpts: data });
+  }
 }

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

@@ -0,0 +1,3 @@
+import DiscourseRoute from "discourse/routes/discourse";
+
+export default class DiscourseAiBotConversationsRoute extends DiscourseRoute {}

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

@@ -0,0 +1,59 @@
+import { action } from "@ember/object";
+import { next } from "@ember/runloop";
+import Service, { service } from "@ember/service";
+import { i18n } from "discourse-i18n";
+import { composeAiBotMessage } from "../lib/ai-bot-helper";
+
+export default class AiBotConversationsHiddenSubmit extends Service {
+  @service composer;
+  @service aiConversationsSidebarManager;
+  @service dialog;
+
+  inputValue = "";
+
+  @action
+  focusInput() {
+    this.composer.destroyDraft();
+    this.composer.close();
+    next(() => {
+      document.getElementById("custom-homepage-input").focus();
+    });
+  }
+
+  @action
+  async submitToBot() {
+    this.composer.destroyDraft();
+    this.composer.close();
+
+    if (this.inputValue.length < 10) {
+      return this.dialog.alert({
+        message: i18n(
+          "discourse_ai.ai_bot.conversations.min_input_length_message"
+        ),
+        didConfirm: () => this.focusInput(),
+        didCancel: () => this.focusInput(),
+      });
+    }
+
+    // we are intentionally passing null as the targetBot to allow for the
+    // function to select the first available bot. This will be refactored in the
+    // future to allow for selecting a specific bot.
+    await composeAiBotMessage(null, this.composer, {
+      skipFocus: true,
+      topicBody: this.inputValue,
+    });
+
+    try {
+      await this.composer.save();
+      this.aiConversationsSidebarManager.newTopicForceSidebar = true;
+      if (this.inputValue.length > 10) {
+        // prevents submitting same message again when returning home
+        // but avoids deleting too-short message on submit
+        this.inputValue = "";
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to submit message:", error);
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import { tracked } from "@glimmer/tracking";
+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;
+
+  @tracked newTopicForceSidebar = false;
+  @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/discourse/templates/discourse-ai-bot-conversations.hbs

@@ -0,0 +1,25 @@
+{{body-class "discourse-ai-bot-conversations-page"}}
+
+<div class="custom-homepage__content-wrapper">
+  <h1>{{i18n "discourse_ai.ai_bot.conversations.header"}}</h1>
+  <div class="custom-homepage__input-wrapper">
+    <textarea
+      {{didInsert this.setTextArea}}
+      {{on "input" this.updateInputValue}}
+      {{on "keydown" this.handleKeyDown}}
+      id="custom-homepage-input"
+      placeholder={{i18n "discourse_ai.ai_bot.conversations.placeholder"}}
+      minlength="10"
+      rows="1"
+    />
+    <DButton
+      @action={{this.aiBotConversationsHiddenSubmit.submitToBot}}
+      @icon="paper-plane"
+      @title="discourse_ai.ai_bot.conversations.header"
+      class="ai-bot-button btn-primary ai-conversation-submit"
+    />
+  </div>
+  <p class="ai-disclaimer">
+    {{i18n "discourse_ai.ai_bot.conversations.disclaimer"}}
+  </p>
+</div>