Add multiple pane model comparison to playground (opendatahub-io#6169)

* Add multiple pane model comparison to playground

* Add unit tests

Author: divyanshiGupta

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

@@ -143,12 +143,13 @@ class ChatbotPage {
 
   // Model Selection
   // Model dropdown is now in the toolbar (moved from Model tab)
+  // Note: There may be multiple model dropdowns (header + settings panel), so use .first()
   findModelDropdown(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return cy.findByTestId('model-selector-toggle');
+    return cy.findAllByTestId('model-selector-toggle').first();
   }
 
   findModelSelectorButton(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return cy.findByTestId('model-selector-toggle');
+    return cy.findAllByTestId('model-selector-toggle').first();
   }
 
   verifyModelSelected(): void {

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

@@ -86,7 +86,9 @@ describe('Chatbot - New Chat Modal (Mocked)', () => {
     cy.wait('@aaModels');
 
     // Verify that a model is selected by checking the dropdown shows a model name
-    cy.findByRole('button', { name: /Llama 3.2 3B Instruct|Select a model/i })
+    // Use .first() since there are two model dropdowns (header and settings panel)
+    cy.findAllByTestId('model-selector-toggle')
+      .first()
       .should('be.visible')
       .and('contain', 'Llama');
   });

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

@@ -18,6 +18,7 @@ import {
   selectGuardrail,
   selectGuardrailUserInputEnabled,
   selectGuardrailModelOutputEnabled,
+  selectRagEnabled,
 } from './store';
 import { ChatbotMessages } from './ChatbotMessagesList';
 import { sampleWelcomePrompts } from './const';
@@ -26,13 +27,13 @@ interface ChatbotConfigInstanceProps {
   configId: string;
   username?: string;
   selectedSourceSettings: ChatbotSourceSettings | null;
-  isRawUploaded: boolean;
   currentVectorStoreId: string | null;
   mcpServers: MCPServerFromAPI[];
   mcpServerStatuses: Map<string, ServerStatusInfo>;
   mcpServerTokens: Map<string, TokenInfo>;
   namespace?: string;
   showWelcomePrompt?: boolean;
+  welcomeDescription?: string;
   onMessagesHookReady?: (hook: UseChatbotMessagesReturn) => void;
   guardrailModelConfigs?: GuardrailModelConfig[];
 }
@@ -41,13 +42,13 @@ export const ChatbotConfigInstance: React.FC<ChatbotConfigInstanceProps> = ({
   configId,
   username,
   selectedSourceSettings,
-  isRawUploaded,
   currentVectorStoreId,
   mcpServers,
   mcpServerStatuses,
   mcpServerTokens,
   namespace,
   showWelcomePrompt = false,
+  welcomeDescription = 'Welcome to the playground',
   onMessagesHookReady,
   guardrailModelConfigs = [],
 }) => {
@@ -56,6 +57,7 @@ export const ChatbotConfigInstance: React.FC<ChatbotConfigInstanceProps> = ({
   const isStreamingEnabled = useChatbotConfigStore(selectStreamingEnabled(configId));
   const selectedModel = useChatbotConfigStore(selectSelectedModel(configId));
   const selectedMcpServerIds = useChatbotConfigStore(selectSelectedMcpServerIds(configId));
+  const isRagEnabled = useChatbotConfigStore(selectRagEnabled(configId));
 
   // Guardrails configuration from store
   const guardrail = useChatbotConfigStore(selectGuardrail(configId));
@@ -87,7 +89,7 @@ export const ChatbotConfigInstance: React.FC<ChatbotConfigInstanceProps> = ({
     modelId: selectedModel,
     selectedSourceSettings,
     systemInstruction,
-    isRawUploaded,
+    isRawUploaded: isRagEnabled,
     username,
     isStreamingEnabled,
     temperature,
@@ -114,7 +116,7 @@ export const ChatbotConfigInstance: React.FC<ChatbotConfigInstanceProps> = ({
       {showWelcomePrompt && (
         <ChatbotWelcomePrompt
           title={username ? `Hello, ${username}` : 'Hello'}
-          description="Welcome to the playground"
+          description={welcomeDescription}
           data-testid="chatbot-welcome-prompt"
           style={{
             cursor: 'default',

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

@@ -11,7 +11,7 @@ import {
   MenuToggle,
   Tooltip,
 } from '@patternfly/react-core';
-import { CodeIcon, EllipsisVIcon, PlusIcon } from '@patternfly/react-icons';
+import { CodeIcon, ColumnsIcon, EllipsisVIcon, PlusIcon } from '@patternfly/react-icons';
 import { ChatbotContext } from '~/app/context/ChatbotContext';
 import { useChatbotConfigStore, selectSelectedModel, selectConfigIds } from './store';
 
@@ -20,13 +20,17 @@ type ChatbotHeaderActionsProps = {
   onConfigurePlayground: () => void;
   onDeletePlayground: () => void;
   onNewChat: () => void;
+  onCompareChat: () => void;
+  isCompareMode: boolean;
 };
 
 const ChatbotHeaderActions: React.FC<ChatbotHeaderActionsProps> = ({
   onViewCode,
   onConfigurePlayground,
   onDeletePlayground,
   onNewChat,
+  onCompareChat,
+  isCompareMode,
 }) => {
   const { lsdStatus, lastInput } = React.useContext(ChatbotContext);
   // Might need to iterate through selectedModels for each config during comparison mode
@@ -54,6 +58,20 @@ const ChatbotHeaderActions: React.FC<ChatbotHeaderActionsProps> = ({
       <ActionListGroup>
         {lsdStatus?.phase === 'Ready' && (
           <>
+            {/* Hide compare button when in compare mode - use close button on pane to exit */}
+            {!isCompareMode && (
+              <ActionListItem>
+                <Button
+                  variant="link"
+                  aria-label="Compare chat"
+                  icon={<ColumnsIcon />}
+                  onClick={onCompareChat}
+                  data-testid="compare-chat-button"
+                >
+                  Compare chat
+                </Button>
+              </ActionListItem>
+            )}
             <ActionListItem>
               <Button
                 variant="link"

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

@@ -12,9 +12,11 @@ import ChatbotEmptyState from '~/app/EmptyStates/NoData';
 import { GenAiContext } from '~/app/context/GenAiContext';
 import ChatbotConfigurationModal from '~/app/Chatbot/components/chatbotConfiguration/ChatbotConfigurationModal';
 import DeletePlaygroundModal from '~/app/Chatbot/components/DeletePlaygroundModal';
+import CompareChatModal from '~/app/Chatbot/components/CompareChatModal';
 import ChatbotHeader from './ChatbotHeader';
 import ChatbotPlayground from './ChatbotPlayground';
 import ChatbotHeaderActions from './ChatbotHeaderActions';
+import { useChatbotConfigStore, selectConfigIds, DEFAULT_CONFIG_ID } from './store';
 
 const ChatbotMain: React.FunctionComponent = () => {
   const {
@@ -37,10 +39,42 @@ const ChatbotMain: React.FunctionComponent = () => {
   const [configurationModalOpen, setConfigurationModalOpen] = React.useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
   const [isNewChatModalOpen, setIsNewChatModalOpen] = React.useState(false);
+  const [isCompareChatModalOpen, setIsCompareChatModalOpen] = React.useState(false);
+  // Track which pane's settings are active in compare mode
+  const [activePaneConfigId, setActivePaneConfigId] = React.useState<string>(DEFAULT_CONFIG_ID);
+
+  // Ref to clear all chat messages (will be set by ChatbotPlayground)
+  const clearAllMessagesRef = React.useRef<(() => void) | null>(null);
+
+  // Derive compare mode from Zustand store (configIds.length > 1)
+  const configIds = useChatbotConfigStore(selectConfigIds);
+  const isCompareMode = configIds.length > 1;
 
   // Check if there are any models available (either AI assets or MaaS models)
   const hasModels = aiModels.length > 0 || maasModels.length > 0;
 
+  // Handle closing a pane - set active pane to the remaining config
+  const handleClosePane = React.useCallback((configIdToClose: string) => {
+    const currentConfigIds = useChatbotConfigStore.getState().configIds;
+    const remainingConfigId = currentConfigIds.find((id) => id !== configIdToClose);
+    useChatbotConfigStore.getState().removeConfiguration(configIdToClose);
+    // Set active pane to the remaining config (or default if somehow none remain)
+    setActivePaneConfigId(remainingConfigId || DEFAULT_CONFIG_ID);
+    fireSimpleTrackingEvent('Playground Compare Mode Exited');
+  }, []);
+
+  // Handle compare chat confirmation - clears messages and enters compare mode
+  const handleCompareConfirm = React.useCallback(() => {
+    // Clear all chat messages
+    if (clearAllMessagesRef.current) {
+      clearAllMessagesRef.current();
+    }
+    // Enter compare mode by duplicating the first config
+    const firstConfigId = useChatbotConfigStore.getState().configIds[0] || DEFAULT_CONFIG_ID;
+    useChatbotConfigStore.getState().duplicateConfiguration(firstConfigId);
+    fireSimpleTrackingEvent('Playground Compare Mode Entered');
+  }, []);
+
   return (
     <>
       <ApplicationsPage
@@ -108,6 +142,11 @@ const ChatbotMain: React.FunctionComponent = () => {
               setIsNewChatModalOpen(true);
               fireSimpleTrackingEvent('Playground New Chat Selected');
             }}
+            onCompareChat={() => {
+              setIsCompareChatModalOpen(true);
+              fireSimpleTrackingEvent('Playground Compare Chat Selected');
+            }}
+            isCompareMode={isCompareMode}
           />
         }
       >
@@ -117,6 +156,10 @@ const ChatbotMain: React.FunctionComponent = () => {
             setIsViewCodeModalOpen={setIsViewCodeModalOpen}
             isNewChatModalOpen={isNewChatModalOpen}
             setIsNewChatModalOpen={setIsNewChatModalOpen}
+            activePaneConfigId={activePaneConfigId}
+            setActivePaneConfigId={setActivePaneConfigId}
+            onClosePane={handleClosePane}
+            clearAllMessagesRef={clearAllMessagesRef}
           />
         ) : lsdStatus?.phase === 'Failed' ? (
           <EmptyState
@@ -148,6 +191,11 @@ const ChatbotMain: React.FunctionComponent = () => {
           }}
         />
       )}
+      <CompareChatModal
+        isOpen={isCompareChatModalOpen}
+        onClose={() => setIsCompareChatModalOpen(false)}
+        onConfirm={handleCompareConfirm}
+      />
     </>
   );
 };

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Card, CardBody } from '@patternfly/react-core';
+import ChatbotPaneHeader from './components/ChatbotPaneHeader';
+
+interface ChatbotPaneProps {
+  /** The configId used for state management */
+  configId: string;
+  /** Display label shown in the UI (e.g., "Model 1", "Model 2") */
+  displayLabel: string;
+  selectedModel: string;
+  onModelChange: (model: string) => void;
+  onSettingsClick: () => void;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Wrapper component for a single chatbot pane in compare mode.
+ * Includes header with label, model dropdown, settings, and close button.
+ */
+const ChatbotPane: React.FC<ChatbotPaneProps> = ({
+  configId,
+  displayLabel,
+  selectedModel,
+  onModelChange,
+  onSettingsClick,
+  onClose,
+  children,
+}) => (
+  <Card
+    isFullHeight
+    isPlain
+    style={{ boxShadow: 'none', display: 'flex', flexDirection: 'column', height: '100%' }}
+    data-testid={`chatbot-pane-${configId}`}
+    role="region"
+    aria-label={displayLabel}
+  >
+    <ChatbotPaneHeader
+      label={displayLabel}
+      selectedModel={selectedModel}
+      onModelChange={onModelChange}
+      onSettingsClick={onSettingsClick}
+      onCloseClick={onClose}
+      hasDivider
+      testIdPrefix={`chatbot-pane-${configId}`}
+    />
+    <CardBody
+      style={{
+        padding: 0,
+        overflow: 'hidden',
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      {children}
+    </CardBody>
+  </Card>
+);
+
+export default ChatbotPane;