FEATURE: Experimental Private Message Bot Homepage

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,
+                   has_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/controllers/discourse-ai-bot-conversations.js

@@ -0,0 +1,70 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { tracked } from "@ember-compat/tracked-built-ins";
+
+export default class DiscourseAiBotConversations extends Controller {
+  @service aiBotConversationsHiddenSubmit;
+  @service currentUser;
+
+  @tracked selectedPersona = this.personaOptions[0].username;
+
+  textarea = null;
+
+  init() {
+    super.init(...arguments);
+    this.selectedPersonaChanged(this.selectedPersona);
+  }
+
+  get personaOptions() {
+    if (this.currentUser.ai_enabled_personas) {
+      return this.currentUser.ai_enabled_personas
+        .filter((persona) => persona.username)
+        .map((persona) => {
+          return {
+            id: persona.id,
+            username: persona.username,
+            name: persona.name,
+            description: persona.description,
+          };
+        });
+    }
+  }
+
+  get displayPersonaSelector() {
+    return this.personaOptions.length > 1;
+  }
+
+  get filterable() {
+    return this.personaOptions.length > 4;
+  }
+
+  @action
+  selectedPersonaChanged(username) {
+    this.selectedPersona = username;
+    this.aiBotConversationsHiddenSubmit.personaUsername = username;
+  }
+
+  @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,43 @@ export function showShareConversationModal(modal, topicId) {
     .catch(popupAjaxError);
 }
 
-export function composeAiBotMessage(targetBot, composer) {
+export async function composeAiBotMessage(
+  targetBot,
+  composer,
+  options = {
+    skipFocus: false,
+    topicBody: "",
+    personaUsername: null,
+  }
+) {
   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;
+  let botUsername;
+  if (targetBot) {
+    botUsername = currentUser.ai_enabled_chat_bots.find(
+      (bot) => bot.model_name === targetBot
+    )?.username;
+  } else if (options.personaUsername) {
+    botUsername = options.personaUsername;
+  } else {
+    botUsername = currentUser.ai_enabled_chat_bots[0].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/services/ai-bot-conversations-hidden-submit.js

@@ -0,0 +1,62 @@
+import { action } from "@ember/object";
+import { next } from "@ember/runloop";
+import Service, { service } from "@ember/service";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import { i18n } from "discourse-i18n";
+import { composeAiBotMessage } from "../lib/ai-bot-helper";
+
+export default class AiBotConversationsHiddenSubmit extends Service {
+  @service composer;
+  @service aiConversationsSidebarManager;
+  @service dialog;
+
+  personaUsername;
+
+  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,
+      personaUsername: this.personaUsername,
+    });
+
+    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 (e) {
+      popupAjaxError(e);
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import { tracked } from "@glimmer/tracking";
+import Service, { service } from "@ember/service";
+import { ADMIN_PANEL, 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;
+
+  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.sidebarState.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");
+    const isAdminSidebarActive =
+      this.sidebarState.currentPanel?.key === ADMIN_PANEL;
+    // only restore main panel if we previously forced our sidebar
+    // and not if we are in admin sidebar
+    if (this.sidebarState.isForcingSidebar && !isAdminSidebarActive) {
+      this.sidebarState.setPanel(MAIN_PANEL); // Return to main sidebar panel
+      this.sidebarState.isForcingSidebar = false;
+    }
+  }
+}

assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs

@@ -0,0 +1,51 @@
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import RouteTemplate from "ember-route-template";
+import DButton from "discourse/components/d-button";
+import { i18n } from "discourse-i18n";
+import DropdownSelectBox from "select-kit/components/dropdown-select-box";
+
+export default RouteTemplate(
+  <template>
+    <div class="ai-bot-conversations">
+      {{#if @controller.displayPersonaSelector}}
+        <div class="ai-bot-conversations__persona-selector">
+          <DropdownSelectBox
+            class="persona-llm-selector__persona-dropdown"
+            @value={{@controller.selectedPersona}}
+            @valueProperty="username"
+            @content={{@controller.personaOptions}}
+            @options={{hash icon="robot" [email protected]}}
+            @onChange={{@controller.selectedPersonaChanged}}
+          />
+        </div>
+      {{/if}}
+
+      <div class="ai-bot-conversations__content-wrapper">
+
+        <h1>{{i18n "discourse_ai.ai_bot.conversations.header"}}</h1>
+        <div class="ai-bot-conversations__input-wrapper">
+          <textarea
+            {{didInsert @controller.setTextArea}}
+            {{on "input" @controller.updateInputValue}}
+            {{on "keydown" @controller.handleKeyDown}}
+            id="ai-bot-conversations-input"
+            placeholder={{i18n "discourse_ai.ai_bot.conversations.placeholder"}}
+            minlength="10"
+            rows="1"
+          />
+          <DButton
+            @action={{@controller.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>
+    </div>
+  </template>
+);