Merge branch 'main' into fix-aae-page-embedding-models-and-configure-playground

Author: jharan1

packages/gen-ai/frontend/src/__tests__/cypress/cypress/pages/chatbotPage.ts

@@ -405,16 +405,11 @@ class ChatbotPage {
     return cy.get('[data-testid^="chatbot-pane-"][role="region"]');
   }
 
-  // Find a specific chatbot pane by index (0 = Model 1, 1 = Model 2)
+  // Find a specific chatbot pane by index (0 = Chat 1, 1 = Chat 2)
   findChatbotPaneByIndex(index: number): Cypress.Chainable<JQuery<HTMLElement>> {
     return this.findAllChatbotPanes().eq(index);
   }
 
-  // Find pane settings button by pane index
-  findPaneSettingsButton(index: number): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.findChatbotPaneByIndex(index).find('[data-testid$="-settings-button"]');
-  }
-
   // Find pane close button by pane index
   findPaneCloseButton(index: number): Cypress.Chainable<JQuery<HTMLElement>> {
     return this.findChatbotPaneByIndex(index).find('[data-testid$="-close-button"]');
@@ -425,12 +420,28 @@ class ChatbotPage {
     return this.findChatbotPaneByIndex(index).findByTestId('chatbot-model-selector-toggle');
   }
 
-  // Find pane label text (e.g., "Model 1", "Model 2")
+  // Find pane label text (e.g., "Chat 1", "Chat 2")
   findPaneLabel(index: number): Cypress.Chainable<JQuery<HTMLElement>> {
-    const labelText = `Model ${index + 1}`;
+    const labelText = `Chat ${index + 1}`;
     return this.findChatbotPaneByIndex(index).contains(labelText);
   }
 
+  // Find the global Settings button in the page header
+  findSettingsButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('settings-button');
+  }
+
+  // Find the config switcher toggle group inside the settings panel
+  findConfigSwitcher(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('chatbot-config-switcher');
+  }
+
+  // Find the button inside a config tab in the settings panel switcher (1-based)
+  // aria-pressed is on the inner button, not the wrapper div
+  findConfigTab(chatNumber: number): Cypress.Chainable<JQuery<HTMLButtonElement>> {
+    return cy.findByTestId(`chatbot-config-tab-${chatNumber}`).find('button');
+  }
+
   // Verify we are in compare mode (two panes visible)
   verifyInCompareMode(): void {
     this.findAllChatbotPanes().should('have.length', 2);
@@ -451,22 +462,27 @@ class ChatbotPage {
     this.findCompareChatButton().click();
   }
 
-  // Exit compare mode by closing a pane
+  // Exit compare mode by closing a pane (confirms the modal)
   closePaneByIndex(index: number): void {
     this.findPaneCloseButton(index).click();
+    cy.findByTestId('close-compare-modal').findByTestId('modal-submit-button').click();
   }
 
-  // Open settings panel for a specific pane
-  openPaneSettings(index: number): void {
-    // First ensure any existing settings panel is closed
-    this.closeSettingsPanel();
-    // Then click the settings button for the specified pane
-    this.findPaneSettingsButton(index).click({ force: true });
+  // Open the settings panel via the header Settings button and switch to the given pane (1-based)
+  openPaneSettings(chatNumber: number): void {
+    // Only click Settings button if the panel isn't already open
+    cy.get('body').then(($body) => {
+      if (!$body.find('[data-testid="chatbot-config-switcher"]').is(':visible')) {
+        this.findSettingsButton().click();
+      }
+    });
+    this.findConfigSwitcher().should('be.visible');
+    // Use force:true to avoid detachment during drawer open animation
+    this.findConfigTab(chatNumber).click({ force: true });
   }
 
-  // Find settings panel header (shows "Configure - 1" or "Configure - 2")
+  // Find settings panel header (single mode only — shows "Configure")
   findSettingsPanelHeader(): Cypress.Chainable<JQuery<HTMLElement>> {
-    // Wait for the drawer to be visible before finding the header
     return cy.findByTestId('chatbot-settings-panel-header', { timeout: 10000 });
   }
 
@@ -489,8 +505,6 @@ class ChatbotPage {
       const closeButton = $body.find('[aria-label="Close settings panel"]');
       if (closeButton.length > 0 && closeButton.is(':visible')) {
         cy.get('[aria-label="Close settings panel"]').click({ force: true });
-        // Wait for panel to close
-        cy.get('[data-testid="chatbot-settings-panel-header"]').should('not.exist');
       }
     });
   }

packages/gen-ai/frontend/src/__tests__/cypress/cypress/tests/mocked/chatbot/compareMode.cy.ts

@@ -158,11 +158,11 @@ describe('Chatbot - Compare Mode (Mocked)', () => {
         cy.step('Verify in compare mode with two panes');
         chatbotPage.verifyInCompareMode();
 
-        cy.step('Verify Model 1 pane exists');
+        cy.step('Verify Chat 1 pane exists');
         chatbotPage.findChatbotPaneByIndex(0).should('be.visible');
         chatbotPage.findPaneLabel(0).should('be.visible');
 
-        cy.step('Verify Model 2 pane exists');
+        cy.step('Verify Chat 2 pane exists');
         chatbotPage.findChatbotPaneByIndex(1).should('be.visible');
         chatbotPage.findPaneLabel(1).should('be.visible');
       },
@@ -182,29 +182,26 @@ describe('Chatbot - Compare Mode (Mocked)', () => {
       'should display model selector in each pane',
       { tags: ['@GenAI', '@Chatbot', '@CompareMode', '@UI'] },
       () => {
-        cy.step('Verify Model 1 pane has model selector');
+        cy.step('Verify Chat 1 pane has model selector');
         chatbotPage.findPaneModelSelector(0).should('be.visible');
 
-        cy.step('Verify Model 2 pane has model selector');
+        cy.step('Verify Chat 2 pane has model selector');
         chatbotPage.findPaneModelSelector(1).should('be.visible');
       },
     );
 
     it(
-      'should display settings and close buttons in each pane',
+      'should display close button in each pane and settings button in header',
       { tags: ['@GenAI', '@Chatbot', '@CompareMode', '@UI'] },
       () => {
-        cy.step('Verify Model 1 pane has settings button');
-        chatbotPage.findPaneSettingsButton(0).should('be.visible');
-
-        cy.step('Verify Model 1 pane has close button');
+        cy.step('Verify Chat 1 pane has close button');
         chatbotPage.findPaneCloseButton(0).should('be.visible');
 
-        cy.step('Verify Model 2 pane has settings button');
-        chatbotPage.findPaneSettingsButton(1).should('be.visible');
-
-        cy.step('Verify Model 2 pane has close button');
+        cy.step('Verify Chat 2 pane has close button');
         chatbotPage.findPaneCloseButton(1).should('be.visible');
+
+        cy.step('Verify global Settings button is in header');
+        chatbotPage.findSettingsButton().should('be.visible');
       },
     );
 
@@ -228,26 +225,28 @@ describe('Chatbot - Compare Mode (Mocked)', () => {
     });
 
     it(
-      'should open settings for Model 1 when clicking Model 1 settings button',
+      'should open settings panel via header button and switch to Chat 1',
       { tags: ['@GenAI', '@Chatbot', '@CompareMode', '@Settings'] },
       () => {
-        cy.step('Click settings button on Model 1 pane');
-        chatbotPage.openPaneSettings(0);
+        cy.step('Open settings panel and switch to Chat 1');
+        chatbotPage.openPaneSettings(1);
 
-        cy.step('Verify settings panel shows Configure - 1');
-        chatbotPage.findSettingsPanelHeader().should('contain.text', 'Configure - 1');
+        cy.step('Verify config switcher is visible with Chat 1 selected');
+        chatbotPage.findConfigSwitcher().should('be.visible');
+        chatbotPage.findConfigTab(1).should('have.attr', 'aria-pressed', 'true');
       },
     );
 
     it(
-      'should open settings for Model 2 when clicking Model 2 settings button',
+      'should switch settings panel to Chat 2 via config switcher',
       { tags: ['@GenAI', '@Chatbot', '@CompareMode', '@Settings'] },
       () => {
-        cy.step('Click settings button on Model 2 pane');
-        chatbotPage.openPaneSettings(1);
+        cy.step('Open settings panel and switch to Chat 2');
+        chatbotPage.openPaneSettings(2);
 
-        cy.step('Verify settings panel shows Configure - 2');
-        chatbotPage.findSettingsPanelHeader().should('contain.text', 'Configure - 2');
+        cy.step('Verify config switcher is visible with Chat 2 selected');
+        chatbotPage.findConfigSwitcher().should('be.visible');
+        chatbotPage.findConfigTab(2).should('have.attr', 'aria-pressed', 'true');
       },
     );
   });
@@ -295,10 +294,10 @@ describe('Chatbot - Compare Mode (Mocked)', () => {
     });
 
     it(
-      'should exit compare mode when closing Model 1 pane',
+      'should exit compare mode when closing Chat 1 pane',
       { tags: ['@GenAI', '@Chatbot', '@CompareMode', '@E2E'] },
       () => {
-        cy.step('Close Model 1 pane');
+        cy.step('Close Chat 1 pane');
         chatbotPage.closePaneByIndex(0);
 
         cy.step('Verify exited compare mode');
@@ -310,10 +309,10 @@ describe('Chatbot - Compare Mode (Mocked)', () => {
     );
 
     it(
-      'should exit compare mode when closing Model 2 pane',
+      'should exit compare mode when closing Chat 2 pane',
       { tags: ['@GenAI', '@Chatbot', '@CompareMode', '@E2E'] },
       () => {
-        cy.step('Close Model 2 pane');
+        cy.step('Close Chat 2 pane');
         chatbotPage.closePaneByIndex(1);
 
         cy.step('Verify exited compare mode');

packages/gen-ai/frontend/src/app/Chatbot/ChatbotHeaderActions.tsx

@@ -11,7 +11,7 @@ import {
   MenuToggle,
   Tooltip,
 } from '@patternfly/react-core';
-import { CodeIcon, ColumnsIcon, EllipsisVIcon, PlusIcon } from '@patternfly/react-icons';
+import { CodeIcon, ColumnsIcon, CogIcon, EllipsisVIcon, PlusIcon } from '@patternfly/react-icons';
 import { ChatbotContext } from '~/app/context/ChatbotContext';
 import { useChatbotConfigStore, selectSelectedModel, selectConfigIds } from './store';
 
@@ -21,6 +21,8 @@ type ChatbotHeaderActionsProps = {
   onDeletePlayground: () => void;
   onNewChat: () => void;
   onCompareChat: () => void;
+  onSettingsClick: () => void;
+  isSettingsOpen: boolean;
   isCompareMode: boolean;
 };
 
@@ -30,6 +32,8 @@ const ChatbotHeaderActions: React.FC<ChatbotHeaderActionsProps> = ({
   onDeletePlayground,
   onNewChat,
   onCompareChat,
+  onSettingsClick,
+  isSettingsOpen,
   isCompareMode,
 }) => {
   const { lsdStatus, lastInput } = React.useContext(ChatbotContext);
@@ -72,6 +76,18 @@ const ChatbotHeaderActions: React.FC<ChatbotHeaderActionsProps> = ({
                 </Button>
               </ActionListItem>
             )}
+            <ActionListItem>
+              <Button
+                variant="link"
+                aria-label="Settings"
+                aria-expanded={isSettingsOpen}
+                icon={<CogIcon />}
+                onClick={onSettingsClick}
+                data-testid="settings-button"
+              >
+                Settings
+              </Button>
+            </ActionListItem>
             <ActionListItem>
               <Button
                 variant="link"

packages/gen-ai/frontend/src/app/Chatbot/ChatbotMain.tsx

@@ -54,6 +54,7 @@ const ChatbotMain: React.FunctionComponent = () => {
   const { isPromptManagementModalOpen } = usePlaygroundStore();
   // Track which pane's settings are active in compare mode
   const [activePaneConfigId, setActivePaneConfigId] = React.useState<string>(DEFAULT_CONFIG_ID);
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(true);
 
   // Ref to clear all chat messages (will be set by ChatbotPlayground)
   const clearAllMessagesRef = React.useRef<(() => void) | null>(null);
@@ -167,6 +168,8 @@ const ChatbotMain: React.FunctionComponent = () => {
                 setIsCompareChatModalOpen(true);
                 fireSimpleTrackingEvent('Playground Compare Chat Selected');
               }}
+              onSettingsClick={() => setIsDrawerExpanded((prev) => !prev)}
+              isSettingsOpen={isDrawerExpanded}
               isCompareMode={isCompareMode}
             />
           )
@@ -219,6 +222,8 @@ const ChatbotMain: React.FunctionComponent = () => {
               setActivePaneConfigId={setActivePaneConfigId}
               onClosePane={handleClosePane}
               clearAllMessagesRef={clearAllMessagesRef}
+              isDrawerExpanded={isDrawerExpanded}
+              setIsDrawerExpanded={setIsDrawerExpanded}
             />
           )
         ) : lsdStatus?.phase === 'Failed' ? (

packages/gen-ai/frontend/src/app/Chatbot/ChatbotPane.tsx

@@ -11,13 +11,14 @@ interface ChatbotPaneProps {
   displayLabel: string;
   selectedModel: string;
   onModelChange: (model: string) => void;
-  onSettingsClick: () => void;
   onClose: () => void;
   children: React.ReactNode;
   /** Metrics from the last response (latency, tokens, TTFT) */
   metrics?: ResponseMetrics | null;
   /** Whether a response is currently being generated */
   isLoading?: boolean;
+  isSettingsOpen?: boolean;
+  isActiveConfig?: boolean;
 }
 
 /**
@@ -29,11 +30,12 @@ const ChatbotPane: React.FC<ChatbotPaneProps> = ({
   displayLabel,
   selectedModel,
   onModelChange,
-  onSettingsClick,
   onClose,
   children,
   metrics,
   isLoading,
+  isSettingsOpen,
+  isActiveConfig,
 }) => {
   const isDarkMode = useDarkMode();
   return (
@@ -49,10 +51,11 @@ const ChatbotPane: React.FC<ChatbotPaneProps> = ({
         label={displayLabel}
         selectedModel={selectedModel}
         onModelChange={onModelChange}
-        onSettingsClick={onSettingsClick}
         onCloseClick={onClose}
         metrics={metrics}
         isLoading={isLoading}
+        isSettingsOpen={isSettingsOpen}
+        isActiveConfig={isActiveConfig}
         hasDivider
         testIdPrefix={`chatbot-pane-${configId}`}
         isDarkMode={isDarkMode}