@patternfly/chatbot 2.2.0-prerelease.27 → 2.2.0-prerelease.29

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx

@@ -31,7 +31,7 @@ export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
       name="Bot"
       role="bot"
       avatar={patternflyAvatar}
-      content="Welcome back! How can I help?"
+      content="Welcome back, User! How can I help you today?"
       quickResponses={[
         { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
         { id: '2', content: 'Show my critical vulnerabilities', onClick: () => alert('Clicked id 2') },

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx

@@ -11,7 +11,7 @@ export const MessageWithQuickStartExample: React.FunctionComponent = () => (
       name="Bot"
       role="bot"
       avatar={patternflyAvatar}
-      content="Text-based bot message with a quick start tile."
+      content="Follow this quick guide to install the Pipelines Operator."
       quickStarts={{
         quickStart: explorePipelinesQuickStart as QuickStart,
         onSelectQuickStart: (id) => alert(id)
@@ -21,7 +21,7 @@ export const MessageWithQuickStartExample: React.FunctionComponent = () => (
       name="Bot"
       role="bot"
       avatar={patternflyAvatar}
-      content="Text-based bot message with a quick start tile that includes prerequisites and a default icon."
+      content="This quick start tile includes prerequisites and a default icon."
       quickStarts={{
         quickStart: monitorSampleAppQuickStart,
         onSelectQuickStart: (id) => alert(id)

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithResponseActions.tsx

@@ -8,7 +8,7 @@ export const ResponseActionExample: React.FunctionComponent = () => (
     name="Bot"
     role="bot"
     avatar={patternflyAvatar}
-    content="Example with all prebuilt actions"
+    content="I updated your account with those settings. You're ready to set up your first dashboard!"
     actions={{
       // eslint-disable-next-line no-console
       positive: { onClick: () => console.log('Good response') },

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx

@@ -61,7 +61,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with only one source"
+        content="Example with only 1 source"
         sources={{
           sources: [
             {

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -145,14 +145,14 @@ _Italic text, formatted with single underscores_
       <Message
         name="User"
         role="user"
-        content="Example content with updated timestamp text"
+        content="This is a user message with an updated timestamp."
         timestamp="1 hour ago"
         avatar={userAvatar}
       />
       <Message
         name="User"
         role="user"
-        content="Example user message with `avatarProps` set to add a border"
+        content="This is a user message with `avatarProps` set to add a border."
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx

@@ -5,20 +5,20 @@ export const FootnoteDemo: React.FunctionComponent = () => (
   <ChatbotFootnote
     label="ChatBot uses AI. Check for mistakes."
     popover={{
-      title: 'Verify accuracy',
-      description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+      title: 'Verify information',
+      description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
       bannerImage: {
         src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
         alt: 'Example image for footnote popover'
       },
       cta: {
-        label: 'Got it',
+        label: 'Dismiss',
         onClick: () => {
           alert('Do something!');
         }
       },
       link: {
-        label: 'Learn more',
+        label: 'View AI policy',
         url: 'https://www.redhat.com/'
       }
     }}

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx

@@ -121,7 +121,7 @@ export const BasicDemo: React.FunctionComponent = () => {
             showAll && setShowAll(!showAll);
           }}
           name="basic-inline-radio"
-          label="With options dropdown"
+          label="With settings dropdown"
           id="options-dropdown"
         />
       </FormGroup>

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomeInteraction.tsx

@@ -116,7 +116,7 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
         so that users of assistive devices receive sufficient context  */}
           <MessageBox announcement={announcement} position={position}>
             {messages.length === 0 && (
-              <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+              <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
             )}
             {/* This code block enables scrolling to the top of the last message.
           You can instead choose to move the div with scrollToBottomRef on it below 

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomePrompt.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 
 import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
-import Checkbox from '@patternfly/react-core';
+import { Checkbox } from '@patternfly/react-core';
 
 export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
   const [showWelcomePrompts, setShowWelcomePrompts] = React.useState(true);
 
   const welcomePrompts = [
     {
-      title: 'Topic 1',
-      message: 'Helpful prompt for Topic 1'
+      title: 'Set up account',
+      message: 'Choose the necessary settings and preferences for your account.'
     },
     {
-      title: 'Topic 2',
-      message: 'Helpful prompt for Topic 2'
+      title: 'Troubleshoot issue',
+      message: 'Find documentation and instructions to resolve your issue.'
     }
   ];
 
@@ -29,8 +29,8 @@ export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
         id="showWelcomePrompts"
       />
       <ChatbotWelcomePrompt
-        title="Hello, Chatbot User"
-        description="How may I help you today?"
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
         {...(showWelcomePrompts && { prompts: welcomePrompts })}
       />
     </>

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx

@@ -36,20 +36,20 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 const footnoteProps = {
   label: 'ChatBot uses AI. Check for mistakes.',
   popover: {
-    title: 'Verify accuracy',
-    description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+    title: 'Verify information',
+    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
     bannerImage: {
       src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
       alt: 'Example image for footnote popover'
     },
     cta: {
-      label: 'Got it',
+      label: 'Dismiss',
       onClick: () => {
         alert('Do something!');
       }
     },
     link: {
-      label: 'Learn more',
+      label: 'View AI policy',
       url: 'https://www.redhat.com/'
     }
   }
@@ -129,12 +129,12 @@ const initialMessages: MessageProps[] = [
 
 const welcomePrompts = [
   {
-    title: 'Topic 1',
-    message: 'Helpful prompt for Topic 1'
+    title: 'Set up account',
+    message: 'Choose the necessary settings and preferences for your account.'
   },
   {
-    title: 'Topic 2',
-    message: 'Helpful prompt for Topic 2'
+    title: 'Troubleshoot issue',
+    message: 'Find documentation and instructions to resolve your issue.'
   }
 ];
 
@@ -436,8 +436,8 @@ export const ChatbotDemo: React.FunctionComponent = () => {
                  so that users of assistive devices receive sufficient context  */}
                 <MessageBox announcement={announcement}>
                   <ChatbotWelcomePrompt
-                    title="Hello, Chatbot User"
-                    description="How may I help you today?"
+                    title="Hi, ChatBot User!"
+                    description="How can I help you today?"
                     prompts={welcomePrompts}
                   />
                   {/* This code block enables scrolling to the top of the last message.

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx

@@ -231,7 +231,7 @@ export const BasicDemo: React.FunctionComponent = () => {
                   {error}
                 </ChatbotAlert>
               )}
-              <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+              <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
               {messages.map((message) => (
                 <Message key={message.name} {...message} />
               ))}

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx

@@ -232,7 +232,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
                     {error}
                   </ChatbotAlert>
                 )}
-                <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+                <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
                 {messages.map((message) => (
                   <Message key={message.name} {...message} />
                 ))}

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx

@@ -44,20 +44,20 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 const footnoteProps = {
   label: 'ChatBot uses AI. Check for mistakes.',
   popover: {
-    title: 'Verify accuracy',
-    description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+    title: 'Verify information',
+    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
     bannerImage: {
       src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
       alt: 'Example image for footnote popover'
     },
     cta: {
-      label: 'Got it',
+      label: 'Dismiss',
       onClick: () => {
         alert('Do something!');
       }
     },
     link: {
-      label: 'Learn more',
+      label: 'View AI policy',
       url: 'https://www.redhat.com/'
     }
   }
@@ -137,12 +137,12 @@ const initialMessages: MessageProps[] = [
 
 const welcomePrompts = [
   {
-    title: 'Topic 1',
-    message: 'Helpful prompt for Topic 1'
+    title: 'Set up account',
+    message: 'Choose the necessary settings and preferences for your account.'
   },
   {
-    title: 'Topic 2',
-    message: 'Helpful prompt for Topic 2'
+    title: 'Troubleshoot issue',
+    message: 'Find documentation and instructions to resolve your issue.'
   }
 ];
 
@@ -400,8 +400,8 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
                  so that users of assistive devices receive sufficient context  */}
                 <MessageBox announcement={announcement}>
                   <ChatbotWelcomePrompt
-                    title="Hello, Chatbot User"
-                    description="How may I help you today?"
+                    title="Hi, ChatBot User!"
+                    description="How can I help you today?"
                     prompts={welcomePrompts}
                   />
                   {/* This code block enables scrolling to the top of the last message.

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx

@@ -117,7 +117,7 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
       </ChatbotHeader>
       <ChatbotContent>
         <MessageBox ariaLabel={`Scrollable message log for ${name}`} announcement={announcement}>
-          <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+          <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
           {messages.map((message) => (
             <Message key={message.id} {...message} />
           ))}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -9,11 +9,11 @@ import { MenuToggleElement, Tooltip, MenuToggle, Dropdown, DropdownProps } from
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownProps, 'toggle'> {
-  /** Dropdown items rendered in conversation options dropdown */
+  /** Dropdown items rendered in conversation settings dropdown */
   menuItems: React.ReactNode;
-  /** Optional classname applied to conversation options dropdown */
+  /** Optional classname applied to conversation settings dropdown */
   menuClassName?: string;
-  /** Tooltip content and aria-label applied to conversation options dropdown */
+  /** Tooltip content and aria-label applied to conversation settings dropdown */
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -48,11 +48,11 @@ export interface Conversation {
   noIcon?: boolean;
   /** Conversation */
   text: string;
-  /** Dropdown items rendered in conversation options dropdown */
+  /** Dropdown items rendered in conversation settings dropdown */
   menuItems?: React.ReactNode;
-  /** Optional classname applied to conversation options dropdown */
+  /** Optional classname applied to conversation settings dropdown */
   menuClassName?: string;
-  /** Tooltip content and aria-label applied to conversation options dropdown */
+  /** Tooltip content and aria-label applied to conversation settings dropdown */
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
@@ -124,7 +124,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
-  searchInputPlaceholder = 'Search...',
+  searchInputPlaceholder = 'Search previous conversations...',
   searchInputAriaLabel = 'Filter menu items',
   handleTextInputChange,
   displayMode,

package/src/ChatbotFooter/ChatbotFootnote.tsx

@@ -32,7 +32,7 @@ export interface ChatbotFootnotePopover {
   bannerImage?: ChatbotFootnotePopoverBannerImage;
   /** Optional CTA button that can be used to trigger an action and close the popover */
   cta?: ChatbotFootnotePopoverCTA;
-  /** Optional link that can be used to show and external link like **Learn More** */
+  /** Optional link that can be used to show an external link like **View AI policy** */
   link?: ChatbotFootnotePopoverLink;
   /** Props for PF Popover */
   popoverProps?: PopoverProps;
@@ -87,7 +87,7 @@ export const ChatbotFootnote: React.FunctionComponent<ChatbotFootnoteProps> = ({
             popover.cta?.onClick();
           }}
         >
-          {popover.cta?.label || 'Got it'}
+          {popover.cta?.label || 'Dismiss'}
         </Button>
       )}
       {popover?.link && (

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -15,7 +15,7 @@ describe('ChatbotHeaderSelectorDropdown', () => {
   it('should render ChatbotHeaderSelectorDropdown', () => {
     render(<ChatbotHeaderSelectorDropdown value="Option 1">{dropdownItems}</ChatbotHeaderSelectorDropdown>);
 
-    expect(screen.getByRole('button', { name: 'Chatbot selector' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Select model/i })).toBeTruthy();
   });
 
   it('should call onselect handler when a dropdown item is clicked', async () => {
@@ -27,7 +27,7 @@ describe('ChatbotHeaderSelectorDropdown', () => {
     );
 
     act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Chatbot selector' }));
+      fireEvent.click(screen.getByRole('button', { name: /Select model/i }));
     });
 
     await waitFor(() => {

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -23,12 +23,12 @@ 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
@@ -57,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/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/Message/Message.tsx

@@ -38,6 +38,7 @@ import ThMessage from './TableMessage/ThMessage';
 import { TableProps } from '@patternfly/react-table';
 import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
+import { PluggableList } from 'react-markdown/lib';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -133,6 +134,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   innerRef?: React.Ref<HTMLDivElement>;
   /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
   tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+  /** Additional rehype plugins passed from the consumer */
+  additionalRehypePlugins?: PluggableList;
 }
 
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -159,6 +162,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   isLiveRegion = true,
   innerRef,
   tableProps,
+  additionalRehypePlugins = [],
   ...props
 }: MessageProps) => {
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
@@ -171,6 +175,9 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   // Keep timestamps consistent between Timestamp component and aria-label
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
+  const rehypePlugins = [rehypeUnwrapImages, ...(additionalRehypePlugins ?? [])];
+
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
@@ -240,7 +247,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                     img: (props) => <ImageMessage {...props} />
                   }}
                   remarkPlugins={[remarkGfm]}
-                  rehypePlugins={[rehypeUnwrapImages]}
+                  rehypePlugins={rehypePlugins}
                 >
                   {content}
                 </Markdown>

package/src/MessageBar/MessageBar.scss

@@ -68,13 +68,13 @@
   .pf-v6-c-form-control__textarea:focus-visible {
     outline: none;
   }
-  .pf-v6-c-form-control > textarea {
-    outline-offset: 0px;
+  textarea {
+    outline-offset: 0px !important;
     --pf-v6-c-form-control--PaddingBlockStart: 0;
     --pf-v6-c-form-control--PaddingBlockEnd: 0;
     --pf-v6-c-form-control--BorderRadius: 0;
   }
-  .pf-v6-c-form-control > textarea:focus-visible {
+  textarea:focus-visible {
     outline: none;
   }
 }

package/src/ResponseActions/ResponseActions.test.tsx

@@ -90,7 +90,7 @@ describe('ResponseActions', () => {
         name="Bot"
         role="bot"
         avatar=""
-        content="Example with all prebuilt actions"
+        content="I updated your account with those settings. You're ready to set up your first dashboard!"
         actions={{
           positive: {},
           negative: {}
@@ -113,7 +113,9 @@ describe('ResponseActions', () => {
       'pf-chatbot__button--response-action-clicked'
     );
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
-    await userEvent.click(screen.getByText('Example with all prebuilt actions'));
+    await userEvent.click(
+      screen.getByText("I updated your account with those settings. You're ready to set up your first dashboard!")
+    );
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });