@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -50,6 +50,7 @@
     align-items: center;
     .pf-v6-c-menu-toggle.pf-m-secondary {
       width: 160px;
+      --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
     }
   }
 }
@@ -70,15 +71,13 @@
 }
 
 // ============================================================================
-// Chatbot Display Mode - Docked
+// Chatbot Display Mode - Docked and Drawer
 // ============================================================================
+.pf-chatbot--drawer,
 .pf-chatbot--docked {
   .pf-chatbot__header {
     background-color: var(--pf-t--chatbot--background);
   }
-  .pf-chatbot__header__divider {
-    display: none;
-  }
 }
 
 // ============================================================================
@@ -95,7 +94,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 +110,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

@@ -27,7 +27,13 @@ const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseBu
   tooltipContent = 'Close'
 }: ChatbotHeaderCloseButtonProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip content={tooltipContent} 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/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

@@ -27,7 +27,13 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   tooltipContent = 'Menu'
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip content={tooltipContent} 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,75 @@
+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();
+  });
+
+  it('should render title for drawer display mode', () => {
+    render(
+      <ChatbotHeaderTitle
+        displayMode={ChatbotDisplayMode.drawer}
+        showOnDrawer="Drawer header title"
+        className="custom-header-class"
+      />
+    );
+    expect(screen.getByText('Drawer header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when drawer display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.drawer} showOnDefault="Default header title" />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderTitle.tsx

@@ -14,8 +14,10 @@ export interface ChatbotHeaderTitleProps {
   showOnFullScreen?: React.ReactNode | string;
   /** Content to display on docked screen */
   showOnDocked?: React.ReactNode | string;
-  /** Content to display on overlay screen */
+  /** Content to display on embedded screen */
   showOnEmbedded?: React.ReactNode | string;
+  /** Content to display in drawer mode */
+  showOnDrawer?: React.ReactNode | string;
   /** Content to display by default; this will be shown if a case is not explicitly set */
   showOnDefault?: React.ReactNode | string;
 }
@@ -27,10 +29,11 @@ export const ChatbotHeaderTitle: React.FunctionComponent<ChatbotHeaderTitleProps
   showOnFullScreen,
   showOnDocked,
   showOnEmbedded,
+  showOnDrawer,
   showOnDefault
 }: ChatbotHeaderTitleProps) => {
   const renderChildren = () => {
-    if (displayMode && (showOnDefault || showOnFullScreen || showOnEmbedded || showOnDocked)) {
+    if (displayMode) {
       /* eslint-disable indent */
       switch (displayMode) {
         case ChatbotDisplayMode.fullscreen:
@@ -39,6 +42,8 @@ export const ChatbotHeaderTitle: React.FunctionComponent<ChatbotHeaderTitleProps
           return showOnDocked ?? showOnDefault;
         case ChatbotDisplayMode.embedded:
           return showOnEmbedded ?? showOnDefault;
+        case ChatbotDisplayMode.drawer:
+          return showOnDrawer ?? showOnDefault;
         default:
           return showOnDefault;
       }

package/src/ChatbotModal/ChatbotModal.scss

@@ -1,22 +1,22 @@
 .pf-chatbot__chatbot-modal-backdrop {
-  position: static;
+  position: static !important;
 }
 
 .pf-chatbot__chatbot-modal {
-  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium);
-  position: fixed;
+  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium) !important;
+  position: fixed !important;
   inset-block-end: var(--pf-t--global--spacer--800); // no associated semantic token
   inset-inline-end: var(--pf-t--global--spacer--lg);
-  width: 30rem;
+  width: 30rem !important;
   height: 70vh;
-  background-color: var(--pf-t--global--background--color--secondary--default);
+  background-color: var(--pf-t--global--background--color--secondary--default) !important;
 
   .pf-v6-c-modal-box__title {
     --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--h3);
   }
   .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);
@@ -47,8 +47,8 @@
   .pf-chatbot__chatbot-modal--fullscreen {
     inset-block-end: 0;
     inset-inline-end: 0;
-    width: 50%;
-    height: fit-content;
+    width: 50% !important;
+    height: fit-content !important;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -59,7 +59,7 @@
 // Chatbot Display Mode - Default
 // ============================================================================
 .pf-chatbot__chatbot-modal--default {
-  box-shadow: unset;
+  box-shadow: unset !important;
 }
 
 // ============================================================================
@@ -69,9 +69,9 @@
   height: 100vh;
   inset-block-end: 0;
   inset-inline-end: 0;
-  border-radius: 0;
-  --pf-v6-c-modal-box--MaxHeight: 100vh;
-  box-shadow: unset;
+  border-radius: 0 !important;
+  --pf-v6-c-modal-box--MaxHeight: 100vh !important;
+  box-shadow: unset !important;
 }
 
 // ============================================================================

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.scss

@@ -29,6 +29,8 @@
 
   .pf-chatbot__prompt-suggestions > * {
     flex: 1;
+    overflow: visible;
+    height: 100%;
   }
 }
 

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

@@ -4,9 +4,10 @@
     --pf-v6-c-code-editor__main--BorderEndStartRadius: 0;
     --pf-v6-c-code-editor__main--BorderEndEndRadius: 0;
     --pf-v6-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--small);
+    --pf-v6-c-code-editor--m-read-only__main--BackgroundColor: #1f1f1f;
   }
   .pf-v6-c-code-editor__header {
-    background: #1f1f1f;
+    background: #1f1f1f !important;
     /** this is for the attachment editor header */
     border-start-start-radius: var(--pf-t--global--border--radius--small);
     border-start-end-radius: var(--pf-t--global--border--radius--small);
@@ -24,7 +25,9 @@
   .pf-v6-c-code-editor__header-content {
     --pf-v6-c-code-editor__header-content--BackgroundColor: #1f1f1f;
     --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: #1f1f1f;
-    --pf-v6-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--small);
+    --pf-v6-c-code-editor__header-content--BorderStartStartRadius: var(
+      --pf-t--global--border--radius--small
+    ) !important;
     --pf-v6-c-code-editor__header-content--PaddingInlineEnd: 0;
     justify-content: flex-end;
   }
@@ -38,7 +41,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;
@@ -80,5 +83,5 @@
 }
 
 .pf-chatbot__code-modal--fullscreen {
-  height: inherit; // override shared modal so code editor works in full screen
+  height: inherit !important; // override shared modal so code editor works in full screen
 }