@patternfly/chatbot 2.2.0-prerelease.26 → 2.2.0-prerelease.28

package/src/ChatbotConversationHistoryNav/LoadingState.tsx

@@ -0,0 +1,38 @@
+import { Skeleton, SkeletonProps } from '@patternfly/react-core';
+import React from 'react';
+
+export const LoadingState: React.FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
+  <div className="pf-chatbot__history-loading">
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton
+        screenreaderText={screenreaderText ?? 'Loading chatbot conversation history'}
+        fontSize="3xl"
+        {...rest}
+      />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+  </div>
+);
+
+export default LoadingState;

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/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');
   });