UX: Improvements to the AI Bot header shortcut (#66)

- Humanize model names
- Focus composer editor when starting a PM with a bot
- Correctly close the models dropdown when clicking outside

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

@@ -17,12 +17,12 @@
         {{did-insert this.registerClickListener}}
         {{will-destroy this.unregisterClickListener}}
       >
-        {{#each this.enabledBotOptions as |modelName|}}
+        {{#each this.botNames as |bot|}}
           <DButton
             @class="btn-flat ai-bot-available-bot-content"
-            @translatedTitle={{modelName}}
+            @translatedTitle={{bot.humanized}}
-            @translatedLabel={{modelName}}
+            @translatedLabel={{bot.humanized}}
-            @action={{action "composeMessageWithTargetBot" modelName}}
+            @action={{action "composeMessageWithTargetBot" bot.modelName}}
           />
         {{/each}}
       </div>

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

@@ -43,7 +43,7 @@ export default class AiBotHeaderIcon extends Component {
   @bind
   closeDetails(event) {
     if (this.open) {
-      const isLinkClick = event.target.className.includes(
+      const isLinkClick = Array.from(event.target.classList).includes(
         "ai-bot-toggle-available-bots"
       );
 
@@ -55,7 +55,7 @@ export default class AiBotHeaderIcon extends Component {
 
   #isOutsideDetailsClick(event) {
     return !event.composedPath().some((element) => {
-      return element.className === "ai-bot-available-bot-options";
+      return element.className === "ai-bot-available-bot-content";
     });
   }
 
@@ -67,6 +67,15 @@ export default class AiBotHeaderIcon extends Component {
     document.addEventListener("click", this.closeDetails);
   }
 
+  get botNames() {
+    return this.enabledBotOptions.map((bot) => {
+      return {
+        humanized: I18n.t(`discourse_ai.ai_bot.bot_names.${bot}`),
+        modelName: bot,
+      };
+    });
+  }
+
   get enabledBotOptions() {
     return this.siteSettings.ai_bot_enabled_chat_bots.split("|");
   }
@@ -82,15 +91,17 @@ export default class AiBotHeaderIcon extends Component {
       return data.bot_username;
     });
 
-    this.composer.open({
+    this.composer.focusComposer({
-      action: Composer.PRIVATE_MESSAGE,
+      fallbackToNewTopic: true,
-      recipients: botUsername,
+      openOpts: {
-      topicTitle: `${I18n.t(
+        action: Composer.PRIVATE_MESSAGE,
-        "discourse_ai.ai_bot.default_pm_prefix"
+        recipients: botUsername,
-      )} ${botUsername}`,
+        topicTitle: I18n.t("discourse_ai.ai_bot.default_pm_prefix"),
-      archetypeId: "private_message",
+        archetypeId: "private_message",
-      draftKey: Composer.NEW_PRIVATE_MESSAGE_KEY,
+        draftKey: Composer.NEW_PRIVATE_MESSAGE_KEY,
-      hasGroups: false,
+        hasGroups: false,
+        warningsDisabled: true,
+      },
     });
 
     this.open = false;

config/locales/client.en.yml

@@ -30,6 +30,12 @@ en:
         default_pm_prefix: "[Untitled AI bot PM]"
         shortcut_title: "Start a PM with an AI bot"
 
+        bot_names:
+          gpt-4: "GPT-4"
+          gpt-3:
+            5-turbo: "GPT-3.5"
+          claude-v1: "Claude V1"
+
 
     review:
       types:

config/settings.yml

@@ -194,7 +194,7 @@ plugins:
     type: group_list
     list_type: compact
     default: "3|14" # 3: @staff, 14: @trust_level_4
-  # Adding a new bot? Make sure to create a user for it on the seed file.
+  # Adding a new bot? Make sure to create a user for it on the seed file and update translations.
   ai_bot_enabled_chat_bots:
     type: list
     default: "gpt-3.5-turbo"