@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.31

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -76,9 +76,6 @@
   .pf-chatbot__header {
     background-color: var(--pf-t--chatbot--background);
   }
-  .pf-chatbot__header__divider {
-    display: none;
-  }
 }
 
 // ============================================================================
@@ -95,7 +92,7 @@
   .pf-v6-c-button__icon,
   .pf-v6-c-menu-toggle__icon,
   .pf-v6-c-icon__content {
-    color: var(--pf-t--chatbot--icon--fill);
+    color: var(--pf-t--global--icon--color--subtle);
   }
 
   .pf-v6-c-button__icon,
@@ -111,7 +108,7 @@
     .pf-v6-c-button__icon,
     .pf-v6-c-menu-toggle__icon,
     .pf-v6-c-icon__content {
-      color: var(--pf-t--chatbot--icon--fill--hover);
+      color: var(--pf-t--global--icon--color--regular);
     }
   }
 }

package/src/ChatbotHeader/ChatbotHeader.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeader from './ChatbotHeader';
+
+describe('ChatbotHeader', () => {
+  it('should render ChatbotHeader with children', () => {
+    render(<ChatbotHeader>Chatbot Header</ChatbotHeader>);
+    expect(screen.getByText('Chatbot Header')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeader with custom classname', () => {
+    const { container } = render(<ChatbotHeader className="custom-header-class">Chatbot Content</ChatbotHeader>);
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeaderActions from './ChatbotHeaderActions';
+
+describe('ChatbotHeaderActions', () => {
+  it('should render ChatbotHeaderActions with children', () => {
+    render(<ChatbotHeaderActions>Chatbot Header</ChatbotHeaderActions>);
+    expect(screen.getByText('Chatbot Header')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderActions with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderActions className="custom-header-action-class">Chatbot Content</ChatbotHeaderActions>
+    );
+    expect(container.querySelector('.custom-header-action-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
+
+describe('ChatbotHeaderCloseButton', () => {
+  it('should render ChatbotHeaderCloseButton', () => {
+    const { container } = render(
+      <ChatbotHeaderCloseButton className="custom-header-close-button" onClick={jest.fn()} />
+    );
+
+    expect(container.querySelector('.custom-header-close-button')).toBeTruthy();
+  });
+
+  it('should call onClick handler when close button is pressed', () => {
+    const onClick = jest.fn();
+    render(<ChatbotHeaderCloseButton className="custom-header-close-button" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+
+export interface ChatbotHeaderCloseButtonProps {
+  /** Callback function for when button is clicked */
+  onClick: () => void;
+  /** Custom classname for the header component */
+  className?: string;
+  /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+  tooltipProps?: TooltipProps;
+  /** Aria label for menu */
+  menuAriaLabel?: string;
+  /** Ref applied to menu */
+  innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
+}
+
+const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  menuAriaLabel = 'Close',
+  innerRef,
+  tooltipContent = 'Close'
+}: ChatbotHeaderCloseButtonProps) => (
+  <div className={`pf-chatbot__menu ${className}`}>
+    <Tooltip
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <Button
+        className="pf-chatbot__button--toggle-menu"
+        variant="plain"
+        onClick={onClick}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size="xl" isInline>
+            <CloseIcon />
+          </Icon>
+        }
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderCloseButton = React.forwardRef(
+  (props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
+  )
+);

package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeaderMain from './ChatbotHeaderMain';
+
+describe('ChatbotHeaderMain', () => {
+  it('should render ChatbotHeaderMain with children', () => {
+    render(<ChatbotHeaderMain>Chatbot Header Main</ChatbotHeaderMain>);
+    expect(screen.getByText('Chatbot Header Main')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderMain with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderMain className="custom-header-class">Chatbot Content</ChatbotHeaderMain>
+    );
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderMenu } from './ChatbotHeaderMenu';
+
+describe('ChatbotHeaderMenu', () => {
+  it('should render ChatbotHeaderMenu with custom class', () => {
+    const { container } = render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={jest.fn()} />);
+
+    expect(container.querySelector('.custom-header-menu')).toBeTruthy();
+  });
+
+  it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
+    const onMenuToggle = jest.fn();
+    render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={onMenuToggle} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+
+    expect(onMenuToggle).toHaveBeenCalled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -14,6 +14,8 @@ export interface ChatbotHeaderMenuProps {
   menuAriaLabel?: string;
   /** Ref applied to menu */
   innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
 }
 
 const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
@@ -21,10 +23,17 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   onMenuToggle,
   tooltipProps,
   menuAriaLabel = 'Toggle menu',
-  innerRef
+  innerRef,
+  tooltipContent = 'Menu'
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip content="Menu" position="bottom" {...tooltipProps}>
+    <Tooltip
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <Button
         className="pf-chatbot__button--toggle-menu"
         variant="plain"

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
+
+describe('ChatbotHeaderOptionsDropdown', () => {
+  const dropdownItems = (
+    <>
+      <DropdownItem>Option 1</DropdownItem>
+      <DropdownItem>Option 2</DropdownItem>
+      <DropdownItem>Option 3</DropdownItem>
+    </>
+  );
+
+  it('should render ChatbotHeaderOptionsDropdown', () => {
+    render(<ChatbotHeaderOptionsDropdown>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
+
+    expect(screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
+  });
+
+  it('should call onselect handler when a dropdown item is clicked', async () => {
+    const onSelect = jest.fn();
+    const { container } = render(
+      <ChatbotHeaderOptionsDropdown className="custom-header-options-dropdown" onSelect={onSelect}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+
+      expect(screen.getByText('Option 1'));
+      expect(screen.getByText('Option 2'));
+      expect(screen.getByText('Option 3'));
+
+      fireEvent.click(screen.getByText('Option 3'));
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -33,7 +33,14 @@ export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeader
   const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <Tooltip className="pf-chatbot__tooltip" content="Chatbot options" position="bottom" {...tooltipProps}>
+    <Tooltip
+      className="pf-chatbot__tooltip"
+      content="Chatbot options"
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <MenuToggle
         className="pf-chatbot__button--toggle-options"
         variant="plain"

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
+
+describe('ChatbotHeaderSelectorDropdown', () => {
+  const dropdownItems = (
+    <>
+      <DropdownItem>Option 1</DropdownItem>
+      <DropdownItem>Option 2</DropdownItem>
+      <DropdownItem>Option 3</DropdownItem>
+    </>
+  );
+
+  it('should render ChatbotHeaderSelectorDropdown', () => {
+    render(<ChatbotHeaderSelectorDropdown value="Option 1">{dropdownItems}</ChatbotHeaderSelectorDropdown>);
+
+    expect(screen.getByRole('button', { name: /Select model/i })).toBeTruthy();
+  });
+
+  it('should call onselect handler when a dropdown item is clicked', async () => {
+    const onSelect = jest.fn();
+    const { container } = render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" className="custom-header-selector-dropdown" onSelect={onSelect}>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /Select model/i }));
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
+
+      expect(screen.getByText('Option 3'));
+
+      fireEvent.click(screen.getByText('Option 3'));
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -23,15 +23,22 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
   children,
   onSelect,
   tooltipProps,
-  tooltipContent = 'Chatbot selector',
+  tooltipContent = 'Select model',
   menuToggleAriaLabel,
   ...props
 }: ChatbotHeaderSelectorDropdownProps) => {
   const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
-  const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Chatbot selector');
+  const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Select model');
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <Tooltip className="pf-chatbot__tooltip" content={tooltipContent} position="bottom" {...tooltipProps}>
+    <Tooltip
+      className="pf-chatbot__tooltip"
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <MenuToggle
         variant="secondary"
         aria-label={menuToggleAriaLabel ?? defaultAriaLabel}
@@ -50,7 +57,7 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
       isOpen={isOptionsMenuOpen}
       onSelect={(e, value) => {
         onSelect && onSelect(e, value);
-        setDefaultAriaLabel(`Chatbot selector: ${value}`);
+        setDefaultAriaLabel(`Select model: ${value}`);
         setIsOptionsMenuOpen(false);
       }}
       onOpenChange={(isOpen) => setIsOptionsMenuOpen(isOpen)}

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ChatbotHeaderTitle from './ChatbotHeaderTitle';
+
+describe('ChatbotHeaderTitle', () => {
+  it('should render ChatbotHeaderTitle with children', () => {
+    render(<ChatbotHeaderTitle>Chatbot Header Title</ChatbotHeaderTitle>);
+    expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderTitle with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderTitle className="custom-header-class">Chatbot Header Title</ChatbotHeaderTitle>
+    );
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+
+  it('should render title for default display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.default} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for docked display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDocked={'Docked header title'} />);
+    expect(screen.getByText('Docked header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when docked display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for embedded display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnEmbedded={'Embedded header title'} />);
+    expect(screen.getByText('Embedded header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when embedded display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for fullscreen display mode', () => {
+    render(
+      <ChatbotHeaderTitle
+        displayMode={ChatbotDisplayMode.fullscreen}
+        showOnFullScreen={'Fullscreen header title'}
+        className="custom-header-class"
+      />
+    );
+    expect(screen.getByText('Fullscreen header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when fullscreen display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.fullscreen} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/index.ts

@@ -7,3 +7,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';

package/src/ChatbotModal/ChatbotModal.scss

@@ -16,7 +16,7 @@
   }
   .pf-v6-c-button.pf-m-primary.pf-m-block,
   .pf-v6-c-button.pf-m-link.pf-m-block {
-    --pf-v6-c-button--FontWeight: 500;
+    --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--bold);
   }
   .pf-v6-c-modal-box__footer {
     padding-block-start: var(--pf-t--global--spacer--xl);

package/src/ChatbotToggle/ChatbotToggle.tsx

@@ -65,7 +65,12 @@ const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
   const icon = isChatbotVisible ? <AngleDownIcon data-testid={openIconTestId} /> : closedIcon;
 
   return (
-    <Tooltip content={tooltipLabel} {...tooltipProps}>
+    <Tooltip
+      content={tooltipLabel}
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <Button
         className={`pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`}
         variant="plain"

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx

@@ -7,53 +7,61 @@ import userEvent from '@testing-library/user-event';
 describe('ChatbotWelcomePrompt', () => {
   it('should render welcome prompt', () => {
     const { container } = render(
-      <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+      <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
     );
     expect(container).toMatchSnapshot();
   });
 
   it('should render correctly', () => {
-    render(<ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />);
-    expect(screen.getByText('Hello, Chatbot User')).toBeTruthy();
-    expect(screen.getByText('How may I help you today?')).toBeTruthy();
+    render(<ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />);
+    expect(screen.getByText('Hi, ChatBot User!')).toBeTruthy();
+    expect(screen.getByText('How can I help you today?')).toBeTruthy();
   });
   it('should render prompts with titles correctly', () => {
     render(
       <ChatbotWelcomePrompt
-        title="Hello, Chatbot User"
-        description="How may I help you today?"
-        prompts={[{ title: 'Topic 1' }]}
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        prompts={[{ title: 'Set up account' }]}
       />
     );
-    expect(screen.getByText('Topic 1')).toBeTruthy();
+    expect(screen.getByText('Set up account')).toBeTruthy();
   });
   it('should render prompts with messages correctly', () => {
     render(
       <ChatbotWelcomePrompt
-        title="Hello, Chatbot User"
-        description="How may I help you today?"
-        prompts={[{ title: 'Topic 1', message: 'Helpful prompt for Topic 1' }]}
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        prompts={[
+          { title: 'Set up account', message: 'Choose the necessary settings and preferences for your account.' }
+        ]}
       />
     );
-    expect(screen.getByText('Helpful prompt for Topic 1')).toBeTruthy();
+    expect(screen.getByText('Choose the necessary settings and preferences for your account.')).toBeTruthy();
   });
   it('should render prompts with onClick correctly', async () => {
     const spy = jest.fn();
     render(
       <ChatbotWelcomePrompt
-        title="Hello, Chatbot User"
-        description="How may I help you today?"
-        prompts={[{ title: 'Topic 1', message: 'Helpful prompt for Topic 1', onClick: spy }]}
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        prompts={[
+          {
+            title: 'Set up account',
+            message: 'Choose the necessary settings and preferences for your account.',
+            onClick: spy
+          }
+        ]}
       />
     );
-    await userEvent.click(screen.getByRole('button', { name: /Topic 1/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Set up account/i }));
     expect(spy).toHaveBeenCalled();
   });
   it('should apply className appropriately', () => {
     render(
       <ChatbotWelcomePrompt
-        title="Hello, Chatbot User"
-        description="How may I help you today?"
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
         className="test"
         testId="welcome-prompt"
       />

package/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap

@@ -15,13 +15,13 @@ exports[`ChatbotWelcomePrompt should render welcome prompt 1`] = `
       <span
         class="pf-chatbot__hello"
       >
-        Hello, Chatbot User
+        Hi, ChatBot User!
       </span>
       <br />
       <span
         class="pf-chatbot__question"
       >
-        How may I help you today?
+        How can I help you today?
       </span>
     </h1>
   </div>

package/src/CodeModal/CodeModal.scss

@@ -38,7 +38,7 @@
     border: none;
     --pf-v6-c-code-editor__tab--BorderStartEndRadius: 0;
     border-start-start-radius: var(--pf-t--global--border--radius--small);
-    --pf-t--global--font--weight--body--default: 500;
+    --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--body--bold);
   }
   .pf-v6-c-code-editor__tab-icon {
     display: none;
@@ -74,3 +74,11 @@
     }
   }
 }
+
+.pf-chatbot__code-modal-body {
+  flex: 1;
+}
+
+.pf-chatbot__code-modal--fullscreen {
+  height: inherit; // override shared modal so code editor works in full screen
+}

package/src/CodeModal/CodeModal.tsx

@@ -87,17 +87,6 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
     }
   };
 
-  /* eslint-disable indent */
-  const getHeight = (displayMode: ChatbotDisplayMode) => {
-    switch (displayMode) {
-      case ChatbotDisplayMode.docked:
-        return '100vh';
-      default:
-        return '45vh';
-    }
-  };
-  /* eslint-enable indent */
-
   const modal = (
     <ChatbotModal
       isOpen={isModalOpen}
@@ -114,7 +103,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
           </StackItem>
-          <StackItem>
+          <StackItem className="pf-chatbot__code-modal-body">
             <CodeEditor
               isDarkTheme
               isLineNumbersVisible={isLineNumbersVisible}
@@ -126,7 +115,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
               onEditorDidMount={onEditorDidMount}
               onCodeChange={onCodeChange}
               className={codeEditorClassName}
-              height={getHeight(displayMode)}
+              isFullHeight
               options={{
                 glyphMargin: false,
                 folding: false