Clean up CSS and add persona selector

Author: markvanlan

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

@@ -1,12 +1,46 @@
 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 filterable() {
+    return this.personaOptions.length > 4;
+  }
+
+  @action
+  selectedPersonaChanged(username) {
+    this.selectedPersona = username;
+    this.aiBotConversationsHiddenSubmit.personaUsername = username;
+  }
+
   @action
   updateInputValue(event) {
     this._autoExpandTextarea();

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

@@ -29,16 +29,22 @@ export async function composeAiBotMessage(
   options = {
     skipFocus: false,
     topicBody: "",
+    personaUsername: null,
   }
 ) {
   const currentUser = composer.currentUser;
   const draftKey = "new_private_message_ai_" + new Date().getTime();
 
-  const botUsername = !targetBot
-    ? currentUser.ai_enabled_chat_bots[0].username
-    : 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;
+  }
 
   const data = {
     action: Composer.PRIVATE_MESSAGE,

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

@@ -9,6 +9,8 @@ export default class AiBotConversationsHiddenSubmit extends Service {
   @service aiConversationsSidebarManager;
   @service dialog;
 
+  personaUsername;
+
   inputValue = "";
 
   @action
@@ -41,6 +43,7 @@ export default class AiBotConversationsHiddenSubmit extends Service {
     await composeAiBotMessage(null, this.composer, {
       skipFocus: true,
       topicBody: this.inputValue,
+      personaUsername: this.personaUsername,
     });
 
     try {

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

@@ -1,25 +1,37 @@
-{{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 class="ai-bot-conversations">
+  <div class="ai-bot-conversations__persona-selector">
+    <DropdownSelectBox
+      class="persona-llm-selector__persona-dropdown"
+      @value={{this.selectedPersona}}
+      @valueProperty="username"
+      @content={{this.personaOptions}}
+      @options={{hash icon="robot" filterable=this.filterable}}
+      @onChange={{this.selectedPersonaChanged}}
     />
   </div>
-  <p class="ai-disclaimer">
-    {{i18n "discourse_ai.ai_bot.conversations.disclaimer"}}
-  </p>
+
+  <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 this.setTextArea}}
+        {{on "input" this.updateInputValue}}
+        {{on "keydown" this.handleKeyDown}}
+        id="ai-bot-conversations-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>
 </div>

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

@@ -165,70 +165,19 @@ body.has-ai-conversations-sidebar {
     margin-left: calc(var(--topic-avatar-width) - 1.15em);
   }
 
-  // custom header notification button
-  .user-menu.revamped .menu-tabs-container {
-    display: none;
-  }
-
-  // custom homepage
-  html.composer-open .custom-homepage #main-outlet {
-    padding-bottom: 0;
-  }
-
-  .custom-homepage {
-    @media screen and (max-width: 676px) {
-      #main-outlet {
-        padding-top: 0;
-      }
-
-      #main-outlet-wrapper #main-outlet {
-        max-width: 95vw;
-        overflow-x: hidden;
-      }
-    }
-
-    // hide toggle until we know there are messages
-    &:not(.sidebar-animate) {
-      &.has-sidebar-page .header-sidebar-toggle {
-        display: none;
-      }
-    }
-
-    // show toggle when populated
-    &:has(.sidebar-wrapper [data-section-name="ai-conversations-history"]) {
-      .header-sidebar-toggle {
-        display: block;
-      }
-    }
+  .ai-bot-conversations {
+    height: calc(100dvh - var(--header-offset) - 1.25em);
 
-    // hide the sidebar on the homepage, if empty
-    #main-outlet-wrapper:not(
-        :has([data-section-name="ai-conversations-history"])
-      ) {
-      grid-template-areas: "content";
-      grid-template-columns: 1fr !important;
-
-      @media screen and (min-width: 900px) {
-        .custom-homepage__content-wrapper {
-          margin-left: 1em;
-        }
-      }
-    }
-
-    // can't use this on the homepage due to composer hacks
-    .ai-new-question-button {
-      display: none;
-    }
-
-    // could maybe show if we force in:messages
-    .d-header-icons .header-dropdown-toggle.search-dropdown {
-      display: none;
+    @media screen and (min-width: 675px) {
+      border: 1px solid var(--primary-low);
+      padding: 2em 2em 3em;
+      border-radius: var(--border-radius);
+      height: calc(100dvh - var(--header-offset) - 10em);
     }
 
-    // the homepage has a custom input that submits the composer automatically
-    // so this is a hack to hide the composer appearing
-    #reply-control {
-      display: none !important;
+    &__persona-selector {
+      display: flex;
+      justify-content: flex-end;
     }
 
     &__content-wrapper {
@@ -237,14 +186,7 @@ body.has-ai-conversations-sidebar {
       box-sizing: border-box;
       align-items: center;
       justify-content: center;
-      height: calc(100dvh - var(--header-offset) - 1.25em);
-
-      @media screen and (min-width: 675px) {
-        border: 1px solid var(--primary-low);
-        padding: 2em 2em 3em;
-        border-radius: var(--border-radius);
-        height: calc(100dvh - var(--header-offset) - 4em);
-      }
+      height: 100%;
     }
 
     &__input-wrapper {
@@ -265,7 +207,7 @@ body.has-ai-conversations-sidebar {
         min-height: 2.5em;
       }
 
-      #custom-homepage-input {
+      #ai-bot-conversations-input {
         width: 100%;
         margin: 0;
         resize: none;
@@ -279,45 +221,6 @@ body.has-ai-conversations-sidebar {
       }
     }
 
-    &__button-wrapper {
-      margin-bottom: 1em;
-      display: flex;
-      gap: 1em;
-
-      @media screen and (max-width: 600px) {
-        padding-right: 2em;
-        box-sizing: border-box;
-        max-width: 95dvw;
-        min-width: 0;
-        overflow: auto;
-        font-size: var(--font-down-1);
-        padding-bottom: 0.5em;
-        margin-bottom: 0.5em;
-
-        &::after {
-          position: absolute;
-          content: "";
-          width: 4em;
-          background: linear-gradient(
-            to right,
-            rgba(var(--secondary-rgb), 0),
-            rgba(var(--secondary-rgb), 1)
-          );
-          right: 0;
-          height: 2.5em;
-          z-index: 2;
-        }
-
-        button {
-          display: flex;
-
-          .d-button-label {
-            white-space: nowrap;
-          }
-        }
-      }
-    }
-
     h1 {
       margin-bottom: 0.45em;
       max-width: 20em;
@@ -399,72 +302,6 @@ body.has-ai-conversations-sidebar {
     margin-top: 0;
   }
 
-  // custom header menus
-  .custom-admin-menu-trigger {
-    position: relative;
-    background: transparent;
-
-    &.-has-messages {
-      &::after {
-        position: absolute;
-        content: "";
-        background: var(--danger);
-        border-radius: 100%;
-        padding: 0.25em;
-        top: 0.5em;
-        right: 0.25em;
-      }
-    }
-  }
-
-  .custom-menu {
-    .mod-message-badge {
-      padding: 0.25em;
-      background: var(--danger);
-      border-radius: 100%;
-      font-size: var(--font-down-3);
-    }
-
-    &[class*="__links"] {
-      margin: 0;
-      list-style-type: none;
-      display: flex;
-      flex-direction: column;
-      padding: 0.75em;
-      gap: 0.25em;
-
-      li {
-        .discourse-no-touch & {
-          &:hover {
-            background: var(--d-hover);
-          }
-        }
-      }
-
-      .btn,
-      a {
-        box-sizing: border-box;
-        display: inline-flex;
-        justify-content: start;
-        gap: 0.5em;
-        width: 100%;
-        color: var(--primary);
-        padding: 0.25em 0.5em;
-        line-height: var(--line-height-large);
-
-        .d-icon {
-          color: var(--primary-high);
-        }
-
-        span {
-          display: flex;
-          gap: 0.5em;
-          align-items: center;
-        }
-      }
-    }
-  }
-
   @media screen and (max-width: 600px) {
     .share-ai-conversation-button {
       .d-icon {