UX: Empty state for AI conversations sidebar & btn changes (#1297)

This commit adds an empty state when the user doesn't have any PM history. It ALSO retains the new conversation button in the sidebar so it no longer jumps. The button is disabled, icon, and text are all updated.

assets/javascripts/discourse/components/ai-bot-sidebar-empty-state.gjs

@@ -0,0 +1,7 @@
+import { i18n } from "discourse-i18n";
+
+<template>
+  <div class="ai-bot-sidebar-empty-state">
+    {{i18n "discourse_ai.ai_bot.sidebar_empty"}}
+  </div>
+</template>

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

@@ -9,15 +9,14 @@ export default class AiBotSidebarNewConversation extends Component {
   @service sidebarState;
 
   get shouldRender() {
-    return (
+    return this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL);
-      this.router.currentRouteName !== "discourse-ai-bot-conversations" &&
-      this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL)
-    );
   }
 
   @action
   routeTo() {
-    this.router.transitionTo("/discourse-ai/ai-bot/conversations");
+    if (this.router.currentRouteName !== "discourse-ai-bot-conversations") {
+      this.router.transitionTo("/discourse-ai/ai-bot/conversations");
+    }
     this.args.outletArgs?.toggleNavigationMenu?.();
   }
 

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

@@ -31,6 +31,7 @@ export default RouteTemplate(
             {{on "input" @controller.updateInputValue}}
             {{on "keydown" @controller.handleKeyDown}}
             id="ai-bot-conversations-input"
+            autofocus="true"
             placeholder={{i18n "discourse_ai.ai_bot.conversations.placeholder"}}
             minlength="10"
             disabled={{@controller.loading}}

assets/javascripts/initializers/ai-conversations-sidebar.js

@@ -6,6 +6,7 @@ import { bind } from "discourse/lib/decorators";
 import { autoUpdatingRelativeAge } from "discourse/lib/formatter";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { i18n } from "discourse-i18n";
+import AiBotSidebarEmptyState from "../discourse/components/ai-bot-sidebar-empty-state";
 import AiBotSidebarNewConversation from "../discourse/components/ai-bot-sidebar-new-conversation";
 import { AI_CONVERSATIONS_PANEL } from "../discourse/services/ai-conversations-sidebar-manager";
 
@@ -121,6 +122,10 @@ export default {
               return "ai-conversations-history";
             }
 
+            get emptyStateComponent() {
+              return AiBotSidebarEmptyState;
+            }
+
             get text() {
               return i18n(
                 "discourse_ai.ai_bot.conversations.messages_sidebar_title"

config/locales/client.en.yml

@@ -673,6 +673,7 @@ en:
         share: "Copy AI conversation"
         conversation_shared: "Conversation copied"
         debug_ai: "View raw AI request and response"
+        sidebar_empty: "Bot conversation history will appear here."
         debug_ai_modal:
           title: "View AI interaction"
           copy_request: "Copy request"

spec/system/ai_bot/homepage_spec.rb

@@ -149,7 +149,6 @@ RSpec.describe "AI Bot - Homepage", type: :system do
           expect(sidebar).to have_section("ai-conversations-history")
           expect(sidebar).to have_section_link("Today")
           expect(sidebar).to have_section_link(pm.title)
-          expect(sidebar).to have_no_css("button.ai-new-question-button")
         end
 
         it "displays last_7_days label in the sidebar" do
@@ -204,16 +203,18 @@ RSpec.describe "AI Bot - Homepage", type: :system do
           expect(header).to have_icon_in_bot_button(icon: "robot")
         end
 
-        it "displays sidebar and 'new question' on the topic page" do
+        it "displays 'new question' button on homepage and topic page" do
           topic_page.visit_topic(pm)
-          expect(sidebar).to be_visible
+          expect(ai_pm_homepage).to have_new_question_button
-          expect(sidebar).to have_css("button.ai-new-question-button")
+
+          ai_pm_homepage.visit
+          expect(ai_pm_homepage).to have_new_question_button
         end
 
         it "redirect to the homepage when 'new question' is clicked" do
           topic_page.visit_topic(pm)
           expect(sidebar).to be_visible
-          sidebar.find("button.ai-new-question-button").click
+          ai_pm_homepage.click_new_question_button
           expect(ai_pm_homepage).to have_homepage
         end
 
@@ -232,6 +233,7 @@ RSpec.describe "AI Bot - Homepage", type: :system do
           Fabricate(:post, topic: pm, user: user_2, post_number: 4)
           Fabricate(:topic_allowed_user, topic: pm, user: user_2)
           sign_in(user_2)
+
           topic_page.visit_topic(pm)
 
           expect(sidebar).to be_visible
@@ -244,13 +246,18 @@ RSpec.describe "AI Bot - Homepage", type: :system do
           Fabricate(:post, topic: pm, user: user_2, post_number: 4)
           Fabricate(:topic_allowed_user, topic: pm, user: user_2)
           sign_in(user_2)
-
           visit "/"
           header.click_bot_button
           expect(ai_pm_homepage).to have_homepage
           expect(sidebar).to have_no_section_link(pm.title)
         end
 
+        it "renders empty state in sidebar with no bot PM history" do
+          sign_in(user_2)
+          ai_pm_homepage.visit
+          expect(ai_pm_homepage).to have_empty_state
+        end
+
         it "Allows choosing persona and LLM" do
           ai_pm_homepage.visit
 
@@ -325,7 +332,7 @@ RSpec.describe "AI Bot - Homepage", type: :system do
         it "displays the new question button in the menu when viewing a PM" do
           ai_pm_homepage.visit
           header_dropdown.open
-          expect(ai_pm_homepage).to have_no_new_question_button
+          expect(ai_pm_homepage).to have_new_question_button
 
           topic_page.visit_topic(pm)
           header_dropdown.open

spec/system/page_objects/components/ai_pm_homepage.rb

@@ -36,10 +36,22 @@ module PageObjects
         page.has_no_css?(".ai-new-question-button")
       end
 
+      def has_new_question_button?
+        sidebar = PageObjects::Components::NavigationMenu::Sidebar.new
+        sidebar.has_css?(
+          "button.ai-new-question-button",
+          text: I18n.t("js.discourse_ai.ai_bot.conversations.new"),
+        )
+      end
+
       def click_new_question_button
         page.find(".ai-new-question-button").click
       end
 
+      def has_empty_state?
+        page.has_css?(".ai-bot-sidebar-empty-state")
+      end
+
       def click_fist_sidebar_conversation
         page.find(
           ".sidebar-section[data-section-name='ai-conversations-history'] a.sidebar-section-link:not(.date-heading)",