Add collapse control to settings panel and relocate model selection (opendatahub-io#6158)

* Added open/close drawer controls

Signed-off-by: Agnieszka Gancarczyk <agagancarczyk@gmail.com>

* Added more styling

Signed-off-by: Agnieszka Gancarczyk <agagancarczyk@gmail.com>

* Tests cleanup

Signed-off-by: Agnieszka Gancarczyk <agagancarczyk@gmail.com>

* Feedback

Signed-off-by: Agnieszka Gancarczyk <agagancarczyk@gmail.com>

---------

Signed-off-by: Agnieszka Gancarczyk <agagancarczyk@gmail.com>

Author: agagancarczyk

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

@@ -142,14 +142,13 @@ class ChatbotPage {
   }
 
   // Model Selection
+  // Model dropdown is now in the toolbar (moved from Model tab)
   findModelDropdown(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return cy.findByText(/Model/i).parent().find('button') as unknown as Cypress.Chainable<
-      JQuery<HTMLElement>
-    >;
+    return cy.findByTestId('model-selector-toggle');
   }
 
   findModelSelectorButton(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return cy.findByRole('button', { name: /Llama|Select a model/i });
+    return cy.findByTestId('model-selector-toggle');
   }
 
   verifyModelSelected(): void {

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

@@ -1,13 +1,15 @@
 import * as React from 'react';
-import { Divider, Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
+import { Button, Divider, Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import {
   Chatbot,
   ChatbotContent,
   ChatbotDisplayMode,
   ChatbotFooter,
   ChatbotFootnote,
+  ChatbotHeaderMain,
   MessageBar,
 } from '@patternfly/chatbot';
+import { CogIcon } from '@patternfly/react-icons';
 import { useLocation } from 'react-router-dom';
 import { useUserContext } from '~/app/context/UserContext';
 import { ChatbotContext } from '~/app/context/ChatbotContext';
@@ -27,6 +29,7 @@ import { ChatbotConfigInstance } from './ChatbotConfigInstance';
 import useFileManagement from './hooks/useFileManagement';
 import useDarkMode from './hooks/useDarkMode';
 import { ChatbotSettingsPanel } from './components/ChatbotSettingsPanel';
+import ModelDetailsDropdown from './components/ModelDetailsDropdown';
 import {
   useChatbotConfigStore,
   selectSelectedModel,
@@ -82,6 +85,7 @@ const ChatbotPlayground: React.FC<ChatbotPlaygroundProps> = ({
   const isDarkMode = useDarkMode();
 
   const location = useLocation();
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(true);
   const selectedAAModel = location.state?.model;
   const mcpServersFromRoute = React.useMemo(() => {
     const servers = location.state?.mcpServers;
@@ -296,6 +300,9 @@ const ChatbotPlayground: React.FC<ChatbotPlaygroundProps> = ({
           checkMcpServerStatus={checkMcpServerStatus}
           guardrailModels={guardrailModelNames}
           guardrailModelsLoaded={guardrailModelsLoaded}
+          onCloseClick={() => {
+            setIsDrawerExpanded(false);
+          }}
         />
       ))}
     </>
@@ -336,11 +343,37 @@ const ChatbotPlayground: React.FC<ChatbotPlaygroundProps> = ({
           setIsNewChatModalOpen(false);
         }}
       />
-      <Drawer isExpanded isInline position="left">
+      <Drawer
+        // onExpand={() => drawerRef.current && drawerRef.current.focus()}
+        isExpanded={isDrawerExpanded}
+        isInline
+        position="left"
+      >
         <Divider />
         <DrawerContent panelContent={settingsPanelContent}>
           <DrawerContentBody>
             <Chatbot displayMode={ChatbotDisplayMode.embedded} data-testid="chatbot">
+              <div
+                style={{
+                  backgroundColor: 'var(--pf-t--global--background--color--100)',
+                  paddingLeft: '1.5rem',
+                }}
+              >
+                <ChatbotHeaderMain>
+                  <ModelDetailsDropdown
+                    selectedModel={primarySelectedModel || ''}
+                    onModelChange={setSelectedModel}
+                    style={{ maxWidth: '300px' }}
+                  />
+                  <Button
+                    variant="plain"
+                    aria-label={isDrawerExpanded ? 'Close settings panel' : 'Open settings panel'}
+                    icon={<CogIcon />}
+                    onClick={() => setIsDrawerExpanded(true)}
+                    style={{ margin: '0.7rem 0 0 0.5rem' }}
+                  />
+                </ChatbotHeaderMain>
+              </div>
               <ChatbotContent
                 style={{
                   backgroundColor: isDarkMode

packages/gen-ai/frontend/src/app/Chatbot/components/ChatbotSettingsPanel.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import {
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
   DrawerPanelContent,
   DrawerPanelBody,
   Badge,
@@ -9,6 +12,7 @@ import {
   Tabs,
   Tab,
   TabTitleText,
+  Title,
   Tooltip,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
@@ -17,7 +21,6 @@ import {
   selectSystemInstruction,
   selectTemperature,
   selectStreamingEnabled,
-  selectSelectedModel,
   selectSelectedMcpServerIds,
 } from '~/app/Chatbot/store';
 import { UseSourceManagementReturn } from '~/app/Chatbot/hooks/useSourceManagement';
@@ -52,6 +55,7 @@ interface ChatbotSettingsPanelProps {
   // Guardrails props
   guardrailModels?: string[];
   guardrailModelsLoaded?: boolean;
+  onCloseClick?: () => void;
 }
 
 const SETTINGS_PANEL_WIDTH = 'chatbot-settings-panel-width';
@@ -71,6 +75,7 @@ const ChatbotSettingsPanel: React.FunctionComponent<ChatbotSettingsPanelProps> =
   checkMcpServerStatus,
   guardrailModels = [],
   guardrailModelsLoaded = false,
+  onCloseClick,
 }) => {
   const [showMcpToolsWarning, setShowMcpToolsWarning] = React.useState(false);
   const [activeToolsCount, setActiveToolsCount] = React.useState(0);
@@ -81,13 +86,11 @@ const ChatbotSettingsPanel: React.FunctionComponent<ChatbotSettingsPanelProps> =
   const temperature = useChatbotConfigStore(selectTemperature(configId));
   const selectedMcpServerIds = useChatbotConfigStore(selectSelectedMcpServerIds(configId));
   const isStreamingEnabled = useChatbotConfigStore(selectStreamingEnabled(configId));
-  const selectedModel = useChatbotConfigStore(selectSelectedModel(configId));
 
   // Get updater functions from store
   const updateSystemInstruction = useChatbotConfigStore((state) => state.updateSystemInstruction);
   const updateTemperature = useChatbotConfigStore((state) => state.updateTemperature);
   const updateStreamingEnabled = useChatbotConfigStore((state) => state.updateStreamingEnabled);
-  const updateSelectedModel = useChatbotConfigStore((state) => state.updateSelectedModel);
 
   // Create callback handlers that include configId
   const handleSystemInstructionChange = React.useCallback(
@@ -104,13 +107,6 @@ const ChatbotSettingsPanel: React.FunctionComponent<ChatbotSettingsPanelProps> =
     [configId, updateTemperature],
   );
 
-  const handleModelChange = React.useCallback(
-    (value: string) => {
-      updateSelectedModel(configId, value);
-    },
-    [configId, updateSelectedModel],
-  );
-
   const handleStreamingToggle = React.useCallback(
     (enabled: boolean) => {
       updateStreamingEnabled(configId, enabled);
@@ -149,6 +145,12 @@ const ChatbotSettingsPanel: React.FunctionComponent<ChatbotSettingsPanelProps> =
       minSize="300px"
       onResize={handlePanelResize}
     >
+      <DrawerHead>
+        <Title headingLevel="h2">Configure</Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => onCloseClick?.()} aria-label="Close settings panel" />
+        </DrawerActions>
+      </DrawerHead>
       <DrawerPanelBody>
         <Tabs
           activeKey={activeTabKey}
@@ -163,8 +165,6 @@ const ChatbotSettingsPanel: React.FunctionComponent<ChatbotSettingsPanelProps> =
             data-testid="chatbot-settings-page-tab-model"
           >
             <ModelTabContent
-              selectedModel={selectedModel}
-              onModelChange={handleModelChange}
               temperature={temperature}
               onTemperatureChange={handleTemperatureChange}
               isStreamingEnabled={isStreamingEnabled}

packages/gen-ai/frontend/src/app/Chatbot/components/ModelDetailsDropdown.tsx

@@ -17,11 +17,13 @@ import useFetchBFFConfig from '~/app/hooks/useFetchBFFConfig';
 interface ModelDetailsDropdownProps {
   selectedModel: string;
   onModelChange: (value: string) => void;
+  style?: React.CSSProperties;
 }
 
 const ModelDetailsDropdown: React.FunctionComponent<ModelDetailsDropdownProps> = ({
   selectedModel,
   onModelChange,
+  style,
 }) => {
   const { models, aiModels, maasModels } = React.useContext(ChatbotContext);
   const { data: bffConfig } = useFetchBFFConfig();
@@ -53,7 +55,7 @@ const ModelDetailsDropdown: React.FunctionComponent<ModelDetailsDropdownProps> =
         <MenuToggle
           ref={toggleRef}
           isDisabled={models.length === 0}
-          isFullWidth
+          style={style}
           onClick={() => setIsOpen(!isOpen)}
           isExpanded={isOpen}
           data-testid="model-selector-toggle"

packages/gen-ai/frontend/src/app/Chatbot/components/settingsPanelTabs/ModelTabContent.tsx

@@ -2,32 +2,23 @@ import * as React from 'react';
 import { Form, FormGroup, Switch } from '@patternfly/react-core';
 import { fireMiscTrackingEvent } from '@odh-dashboard/internal/concepts/analyticsTracking/segmentIOUtils';
 import TabContentWrapper from '~/app/Chatbot/components/settingsPanelTabs/TabContentWrapper';
-import ModelDetailsDropdown from '~/app/Chatbot/components/ModelDetailsDropdown';
 import ModelParameterFormGroup from '~/app/Chatbot/components/ModelParameterFormGroup';
 
 interface ModelTabContentProps {
-  selectedModel: string;
-  onModelChange: (value: string) => void;
   temperature: number;
   onTemperatureChange: (value: number) => void;
   isStreamingEnabled: boolean;
   onStreamingToggle: (enabled: boolean) => void;
 }
 
 const ModelTabContent: React.FunctionComponent<ModelTabContentProps> = ({
-  selectedModel,
-  onModelChange,
   temperature,
   onTemperatureChange,
   isStreamingEnabled,
   onStreamingToggle,
 }) => (
   <TabContentWrapper title="Model">
     <Form>
-      <FormGroup fieldId="model-details">
-        <ModelDetailsDropdown selectedModel={selectedModel} onModelChange={onModelChange} />
-      </FormGroup>
-
       <ModelParameterFormGroup
         fieldId="temperature"
         label="Temperature: 0 - 2"

packages/gen-ai/frontend/src/app/Chatbot/components/settingsPanelTabs/__tests__/ModelTabContent.spec.tsx

@@ -13,24 +13,6 @@ jest.mock('@odh-dashboard/internal/concepts/analyticsTracking/segmentIOUtils', (
   fireMiscTrackingEvent: jest.fn(),
 }));
 
-jest.mock('../../ModelDetailsDropdown', () => ({
-  __esModule: true,
-  default: ({
-    selectedModel,
-    onModelChange,
-  }: {
-    selectedModel: string;
-    onModelChange: (value: string) => void;
-  }) => (
-    <div data-testid="model-details-dropdown">
-      <span data-testid="selected-model">{selectedModel}</span>
-      <button data-testid="change-model-button" onClick={() => onModelChange('new-model')}>
-        Change Model
-      </button>
-    </div>
-  ),
-}));
-
 jest.mock('../../ModelParameterFormGroup', () => ({
   __esModule: true,
   default: ({
@@ -56,8 +38,6 @@ const mockFireMiscTrackingEvent = jest.mocked(fireMiscTrackingEvent);
 
 describe('ModelTabContent', () => {
   const defaultProps = {
-    selectedModel: 'gpt-4',
-    onModelChange: jest.fn(),
     temperature: 1.0,
     onTemperatureChange: jest.fn(),
     isStreamingEnabled: true,
@@ -74,13 +54,6 @@ describe('ModelTabContent', () => {
     expect(screen.getByRole('heading', { name: 'Model' })).toBeInTheDocument();
   });
 
-  it('renders ModelDetailsDropdown with correct props', () => {
-    render(<ModelTabContent {...defaultProps} />);
-
-    expect(screen.getByTestId('model-details-dropdown')).toBeInTheDocument();
-    expect(screen.getByTestId('selected-model')).toHaveTextContent('gpt-4');
-  });
-
   it('renders ModelParameterFormGroup with correct temperature props', () => {
     render(<ModelTabContent {...defaultProps} />);
 
@@ -104,16 +77,6 @@ describe('ModelTabContent', () => {
     expect(streamingSwitch).not.toBeChecked();
   });
 
-  it('calls onModelChange when model is changed', async () => {
-    const user = userEvent.setup();
-    const mockOnModelChange = jest.fn();
-    render(<ModelTabContent {...defaultProps} onModelChange={mockOnModelChange} />);
-
-    await user.click(screen.getByTestId('change-model-button'));
-
-    expect(mockOnModelChange).toHaveBeenCalledWith('new-model');
-  });
-
   it('calls onTemperatureChange and fires tracking event when temperature changes', async () => {
     const user = userEvent.setup();
     const mockOnTemperatureChange = jest.fn();