@patternfly/chatbot 2.1.0 → 2.2.0-prerelease.10

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -52,8 +52,10 @@ import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel'
 import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
 import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
+import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
 import {
 ChatbotHeader,
+ChatbotHeaderCloseButton,
 ChatbotHeaderMain,
 ChatbotHeaderMenu,
 ChatbotHeaderActions,
@@ -65,6 +67,7 @@ import { ChatbotFooter, ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
+import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 
@@ -74,10 +77,13 @@ import { DropdownItem, DropdownList, Checkbox } from '@patternfly/react-core';
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
+import { CloseIcon } from '@patternfly/react-icons';
 
 ## Structure
 
@@ -257,6 +263,18 @@ In this example, the locale is set to to ja-JP. You can try it out by saying "ha
 
 ```
 
+### Message bar with always-shown send button
+
+By default, the send button is only shown once a user has entered a valid message. If you choose to keep the send button visible at all times, disable the button when there is no valid message to send.
+
+To always show the send button in the message bar, use the `alwaysShowSendButton` prop. Use the `isSendButtonDisabled` prop to disable the button as needed. If you want to enable or disable the send button based on the presence of text in the message bar, you can detect text via the `onChange` prop for `<MessageBar>`.
+
+To disable the send button in the following example, select the "Disable send button" checkbox. When the button is disabled, you also cannot send via the enter key.
+
+```js file="./ChatbotMessageBarDisabled.tsx"
+
+```
+
 ### Message bar with attach menu appended to attach button
 
 You can change the behavior of the attach button to open a menu, rather than the default file viewer for your operating system. This menu can display different actions related to attachments.
@@ -345,6 +363,44 @@ Actions can be added to conversations with `menuItems`. Optionally, you can also
 
 ```
 
+### Drawer with active conversation
+
+If you're showing a conversation that is already active, you can set the `activeItemId` prop on your `<ChatbotConversationHistoryNav>` to apply an active visual state.
+
+```js file="./ChatbotHeaderDrawerWithSelection.tsx"
+
+```
+
+### Drawer with simple menu
+
+The drawer can also be used to display a list of basic menu items.
+
+```js file="./ChatbotHeaderDrawerNavigation.tsx"
+
+```
+
+### Terms of use
+
+Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and is meant to display terms and conditions for using a ChatBot in your project. The image in the header can be toggled on or off depending on whether the `image` and `altText` props are provided.
+
+This example also includes an example of how to use [skip to content](/patternfly-ai/chatbot/ui#skip-to-content). When the terms of use modal is open, focus is placed on the terms of use container. When it is closed, focus is placed on the ChatBot. In a real example with a functioning ChatBot toggle, you would also want to place focus on the toggle when appropriate.
+
+```js file="./TermsOfUse.tsx" isFullscreen
+
+```
+
+### Settings
+
+To contain user preference controls and other ChatBot setting options, you can create a separate settings page that can accept any number of buttons, dropdown menus, toggles, labels, and so on. This settings page will render all components appropriately within all 4 display modes.
+
+In this demo, you can toggle the settings page by clicking the "Settings" button in the display mode menu.
+
+```js file="./Settings.tsx" isFullscreen
+
+```
+
+## Modals
+
 ### Modal
 
 Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and accepts components typically used in a modal. It is primarily used and tested in the context of the attachment modals, but you can customize this modal to adapt it to other use cases as needed. The modal will overlay the ChatBot in default and docked modes, and will behave more like a traditional PatternFly modal in fullscreen and embedded modes.

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

@@ -66,7 +66,7 @@ This demo displays a basic ChatBot, which includes:
 4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
 
 - A `<ChatbotWelcomePrompt>`
-- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#messages-actions)
+- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#message-actions)
 - Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
 
 5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
@@ -92,7 +92,7 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
 3. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>`
 4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
    - A `<ChatbotWelcomePrompt>`
-   - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#messages-actions)
+   - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#message-actions)
    - Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
 5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
    - [Speech to text.](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)

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

@@ -34,10 +34,10 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 const footnoteProps = {
-  label: 'Lightspeed uses AI. Check for mistakes.',
+  label: 'ChatBot uses AI. Check for mistakes.',
   popover: {
     title: 'Verify accuracy',
-    description: `While Lightspeed 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.`,
+    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.`,
     bannerImage: {
       src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
       alt: 'Example image for footnote popover'

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

@@ -36,18 +36,26 @@ interface ModalData {
 }
 
 export const BasicDemo: React.FunctionComponent = () => {
-  const onAttachmentClose = (attachmentId: string) => {
-    const index = messages.findIndex((message) => message.attachmentId === attachmentId);
+  const onAttachmentClose = (event, name, id) => {
     const updatedMessages: MessageProps[] = [];
-    if (index >= 0) {
-      messages.forEach((message) => updatedMessages.push(message));
-      delete updatedMessages[index].attachmentName;
-      delete updatedMessages[index].attachmentId;
-      delete updatedMessages[index].onAttachmentClick;
-      delete updatedMessages[index].onAttachmentClose;
-      setMessages(updatedMessages);
-    }
+    messages.map((message) => {
+      if (message.attachments) {
+        const filteredAttachments = message.attachments.filter((attachment) => attachment.id !== id);
+        message.attachments = filteredAttachments;
+        updatedMessages.push(message);
+      } else {
+        updatedMessages.push(message);
+      }
+    });
+    setMessages(updatedMessages);
   };
+
+  const onAttachmentClick = () => {
+    setCurrentModalData({ fileName: 'auth-operator.yml', code: 'test' });
+    setIsEditModalOpen(false);
+    setIsPreviewModalOpen(true);
+  };
+
   const initialMessages: MessageProps[] = [
     {
       role: 'user',
@@ -55,14 +63,7 @@ export const BasicDemo: React.FunctionComponent = () => {
       name: 'User',
       avatar: userAvatar,
       avatarProps: { isBordered: true },
-      attachmentName: 'auth-operator.yml',
-      attachmentId: '1',
-      onAttachmentClose,
-      onAttachmentClick: () => {
-        setCurrentModalData({ fileName: 'auth-operator.yml', code: 'test' });
-        setIsEditModalOpen(false);
-        setIsPreviewModalOpen(true);
-      }
+      attachments: [{ name: 'auth-operator.yml', id: '1', onClick: onAttachmentClick, onClose: onAttachmentClose }]
     },
     {
       role: 'bot',
@@ -243,7 +244,7 @@ export const BasicDemo: React.FunctionComponent = () => {
               </div>
             )}
             <MessageBar onSendMessage={handleSend} hasAttachButton handleAttach={handleAttach} />
-            <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
+            <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
           </ChatbotFooter>
         </FileDropZone>
       </Chatbot>

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

@@ -259,7 +259,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
                   onAttachMenuToggleClick: onToggleClick
                 }}
               />
-              <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
+              <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
             </ChatbotFooter>
           </>
         </FileDropZone>

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

@@ -42,10 +42,10 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 const footnoteProps = {
-  label: 'Lightspeed uses AI. Check for mistakes.',
+  label: 'ChatBot uses AI. Check for mistakes.',
   popover: {
     title: 'Verify accuracy',
-    description: `While Lightspeed 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.`,
+    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.`,
     bannerImage: {
       src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
       alt: 'Example image for footnote popover'

package/src/Chatbot/Chatbot.scss

@@ -54,16 +54,6 @@
   }
 }
 
-html.pf-chatbot-allow--docked {
-  padding-inline-start: 480px;
-
-  // 30rem is the width of the docked chatbot
-  // if the screen is smaller, we want to be 100%
-  @media screen and (max-width: 30rem) {
-    padding-inline-start: 0px;
-  }
-}
-
 // ============================================================================
 // Chatbot Display Mode - Fullscreen
 // ============================================================================

package/src/Chatbot/Chatbot.tsx

@@ -35,15 +35,6 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
   ariaLabel,
   ...props
 }: ChatbotProps) => {
-  // Configure docked mode
-  React.useEffect(() => {
-    if (displayMode === ChatbotDisplayMode.docked) {
-      document.documentElement.classList.add('pf-chatbot-allow--docked');
-    } else {
-      document.documentElement.classList.remove('pf-chatbot-allow--docked');
-    }
-  }, [displayMode]);
-
   // Configure animations
   const motionChatbot = {
     visible: { opacity: 1, y: 0 },

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -44,10 +44,23 @@
     color: var(--pf-t--global--text--color--regular);
     font-size: var(--pf-t--global--font--size--body--lg);
     font-weight: var(--pf-t--global--font--weight--body--default);
+    border-radius: var(--pf-t--global--border--radius--small);
+  }
+  // allows focus state to have border radius
+  .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
+    overflow: hidden;
   }
   .pf-chatbot__history-actions {
     transform: rotate(90deg);
   }
+
+  .pf-chatbot__menu-item--active {
+    background-color: var(--pf-t--global--background--color--action--plain--clicked);
+  }
+
+  button.pf-chatbot__menu-item--active {
+    background-color: initial;
+  }
 }
 
 // Chatbot Header - Drawer
@@ -105,6 +118,7 @@
       border-radius: var(--pf-t--global--border--radius--pill);
       justify-content: center;
       align-items: center;
+      border-radius: var(--pf-t--global--border--radius--small);
     }
   }
 

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -11,7 +11,7 @@ describe('ChatbotConversationHistoryNav', () => {
   const initialConversations: Conversation[] = [
     {
       id: '1',
-      text: 'Lightspeed documentation'
+      text: 'ChatBot documentation'
     }
   ];
 
@@ -25,7 +25,7 @@ describe('ChatbotConversationHistoryNav', () => {
         conversations={initialConversations}
       />
     );
-    expect(screen.queryByText('Lightspeed documentation')).toBeInTheDocument();
+    expect(screen.queryByText('ChatBot documentation')).toBeInTheDocument();
   });
 
   it('should display the conversations for grouped conversations', () => {
@@ -120,7 +120,7 @@ describe('ChatbotConversationHistoryNav', () => {
     });
 
     waitFor(() => {
-      expect(screen.queryByText('Lightspeed documentation')).not.toBeInTheDocument();
+      expect(screen.queryByText('ChatBot documentation')).not.toBeInTheDocument();
     });
   });
 });

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -20,7 +20,9 @@ import {
   MenuList,
   MenuGroup,
   MenuItem,
-  MenuContent
+  MenuContent,
+  MenuItemProps,
+  MenuProps
 } from '@patternfly/react-core';
 
 import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
@@ -44,6 +46,8 @@ export interface Conversation {
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+  /** Additional props passed to conversation menu item */
+  additionalProps?: MenuItemProps;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Function called to toggle drawer */
@@ -76,6 +80,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   reverseButtonOrder?: boolean;
   /** Custom test id for the drawer actions */
   drawerActionsTestId?: string;
+  /** Additional props applied to menu  */
+  menuProps?: MenuProps;
 }
 
 export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -94,6 +100,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   displayMode,
   reverseButtonOrder = false,
   drawerActionsTestId = 'chatbot-nav-drawer-actions',
+  menuProps,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = React.useRef<HTMLDivElement>(null);
@@ -104,7 +111,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
 
   const getNavItem = (conversation: Conversation) => (
     <MenuItem
-      className="pf-chatbot__menu-item"
+      className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
       itemId={conversation.id}
       key={conversation.id}
       {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
@@ -121,6 +128,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
             )
           }
         : {})}
+      {...conversation.additionalProps}
       /* eslint-enable indent */
     >
       {conversation.text}
@@ -159,7 +167,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   // - Consumers should pass an array to <Chatbot> of the list of conversations
   // - Groups could be optional, but items need to be ordered by date
   const menuContent = (
-    <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId}>
+    <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
       <MenuContent>{buildMenu()}</MenuContent>
     </Menu>
   );

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -33,7 +33,8 @@
       }
     }
     .pf-chatbot__footer-container {
-      width: 60rem;
+      width: 90%;
+      max-width: 60rem;
       padding: var(--pf-t--global--spacer--sm) 0;
     }
   }

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -0,0 +1,51 @@
+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" {...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/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,11 @@ 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" {...tooltipProps}>
       <Button
         className="pf-chatbot__button--toggle-menu"
         variant="plain"

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

@@ -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

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

@@ -9,7 +9,7 @@ exports[`FileDropZone should render file drop zone 1`] = `
   >
     <input
       multiple=""
-      style="display: none;"
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"
     />

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
 
-const OrderedListMessage = ({ children }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
+const OrderedListMessage = ({ children, start }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
   <div className="pf-chatbot__message-ordered-list">
-    <List component={ListComponent.ol} type={OrderType.number}>
+    <List component={ListComponent.ol} type={OrderType.number} start={start}>
       {children}
     </List>
   </div>

package/src/Message/Message.scss

@@ -95,20 +95,6 @@
     display: grid;
     gap: var(--pf-t--global--spacer--sm);
   }
-
-  &-quick-response {
-    .pf-v6-c-label {
-      --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
-
-      @media screen and (min-width: 401px) and (max-width: 600px) {
-        --pf-v6-c-label__text--MaxWidth: 20ch;
-      }
-
-      @media screen and (max-width: 400px) {
-        --pf-v6-c-label__text--MaxWidth: 15ch;
-      }
-    }
-  }
 }
 
 // Attachments

package/src/Message/Message.test.tsx

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Message from './Message';
 import userEvent from '@testing-library/user-event';
+import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
+import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
 
 const ALL_ACTIONS = [
   { label: /Good response/i },
@@ -53,6 +55,22 @@ spec:
 
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
 
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
+
 const checkListItemsRendered = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -344,6 +362,12 @@ describe('Message', () => {
     expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
     checkListItemsRendered();
   });
+  it('should render ordered lists correctly if there is interstitial content', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ORDERED_LIST_WITH_CODE} />);
+    checkListItemsRendered();
+    const list = screen.getAllByRole('list')[1];
+    expect(list).toHaveAttribute('start', '3');
+  });
   it('should render inline code', () => {
     render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
     expect(screen.getByText(/() => void/i)).toBeTruthy();
@@ -415,4 +439,56 @@ describe('Message', () => {
     expect(screen.getByRole('img')).toHaveClass('test');
     expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
   });
+  it('should handle QuickStart tile correctly', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => alert(id)
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy();
+  });
+  it('should handle click on QuickStart tile correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name);
+  });
+  it('should handle QuickStart tile with image correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStartWithImage,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
+  });
 });