UX: Empty state for AI conversations sidebar & btn changes

Author: markvanlan

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,10 +9,21 @@ export default class AiBotSidebarNewConversation extends Component {
   @service sidebarState;
 
   get shouldRender() {
-    return (
-      this.router.currentRouteName !== "discourse-ai-bot-conversations" &&
-      this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL)
-    );
+    return this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL);
+  }
+
+  get disabled() {
+    return this.router.currentRouteName === "discourse-ai-bot-conversations";
+  }
+
+  get label() {
+    return this.disabled
+      ? "discourse_ai.ai_bot.conversations.enter_question"
+      : "discourse_ai.ai_bot.conversations.new";
+  }
+
+  get icon() {
+    return this.disabled ? "keyboard" : "plus";
   }
 
   @action
@@ -24,8 +35,9 @@ export default class AiBotSidebarNewConversation extends Component {
   <template>
     {{#if this.shouldRender}}
       <DButton
-        @label="discourse_ai.ai_bot.conversations.new"
-        @icon="plus"
+        @label={{this.label}}
+        @icon={{this.icon}}
+        @disabled={{this.disabled}}
         @action={{this.routeTo}}
         class="ai-new-question-button btn-default"
       />

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"
@@ -725,6 +726,7 @@ en:
           disclaimer: "Generative AI can make mistakes. Verify important information."
           placeholder: "Ask a question..."
           new: "New Question"
+          enter_question: "Enter Question"
           min_input_length_message: "Message must be longer than 10 characters"
           messages_sidebar_title: "Conversations"
           today: "Today"

spec/system/ai_bot/homepage_spec.rb

@@ -200,10 +200,20 @@
       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 the topic page" do
       topic_page.visit_topic(pm)
-      expect(sidebar).to be_visible
-      expect(sidebar).to have_css("button.ai-new-question-button")
+      expect(sidebar).to have_css(
+        "button.ai-new-question-button",
+        text: I18n.t("js.discourse_ai.ai_bot.conversations.new"),
+      )
+    end
+
+    it "displays 'enter question' button on conversations homepage" do
+      ai_pm_homepage.visit
+      expect(sidebar).to have_css(
+        "button.ai-new-question-button",
+        text: I18n.t("js.discourse_ai.ai_bot.conversations.enter_question"),
+      )
     end
 
     it "redirect to the homepage when 'new question' is clicked" do
@@ -247,6 +257,12 @@
       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
 

spec/system/page_objects/components/ai_pm_homepage.rb

@@ -40,6 +40,10 @@ 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)",