@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.21

package/dist/esm/TermsOfUse/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TermsOfUse';
+export * from './TermsOfUse';

package/dist/esm/TermsOfUse/index.js

@@ -0,0 +1,2 @@
+export { default } from './TermsOfUse';
+export * from './TermsOfUse';

package/dist/esm/index.d.ts

@@ -24,6 +24,8 @@ export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
 export * from './ChatbotWelcomePrompt';
 export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
+export { default as Compare } from './Compare';
+export * from './Compare';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
@@ -42,7 +44,11 @@ export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
+export { default as Settings } from './Settings';
+export * from './Settings';
 export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
+export { default as TermsOfUse } from './TermsOfUse';
+export * from './TermsOfUse';

package/dist/esm/index.js

@@ -25,6 +25,8 @@ export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
 export * from './ChatbotWelcomePrompt';
 export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
+export { default as Compare } from './Compare';
+export * from './Compare';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
@@ -43,7 +45,11 @@ export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
+export { default as Settings } from './Settings';
+export * from './Settings';
 export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
+export { default as TermsOfUse } from './TermsOfUse';
+export * from './TermsOfUse';

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.2",
+  "version": "2.2.0-prerelease.21",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -31,15 +31,13 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0",
-    "@patternfly/react-code-editor": "^6.0.0",
-    "@patternfly/react-icons": "^6.0.0",
+    "@patternfly/react-core": "^6.1.0",
+    "@patternfly/react-code-editor": "^6.1.0",
+    "@patternfly/react-icons": "^6.1.0",
     "clsx": "^2.1.0",
     "framer-motion": "^11.3.28",
-    "react-jss": "^10.10.0",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
-    "react-textarea-auto-witdth-height": "^1.0.3",
     "remark-gfm": "^4.0.0",
     "path-browserify": "^1.0.1"
   },
@@ -48,18 +46,14 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.0.6",
-    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/documentation-framework": "^6.5.0",
+    "@patternfly/patternfly": "^6.1.0",
     "@patternfly/patternfly-a11y": "^5.0.0",
-    "@patternfly/react-table": "^6.0.0",
+    "@patternfly/react-table": "^6.1.0",
     "@types/dom-speech-recognition": "^0.0.4",
     "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
-    "@types/react-router-dom": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.22.2",
-    "react-router-dom": "^6.22.2",
     "rimraf": "^2.7.1",
     "typescript": "^5.3.3",
     "@octokit/rest": "^18.0.0",

package/patternfly-docs/content/extensions/chatbot/about-chatbot.md

@@ -12,11 +12,13 @@ It is important to leverage AI in a way that improves the experiences of your us
 
 _Only use this ChatBot when it adds value to your users' experiences._ Don't use it simply for the sake of novelty—your users will only be excited to interact with a new ChatBot feature if it directly helps them reach their goals.
 
-## How to use the ChatBot
+## ChatBot demos
 
-To illustrate the capabilities of the ChatBot, we offer a few demos: 
+To illustrate the capabilities of the ChatBot, including more complex interaction patterns, we've created these demos: 
 - [Basic ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot)
 - [Embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot)
+- [Comparing ChatBots](/patternfly-ai/chatbot/overview/demo/#comparing-chatbots)
+- [Message feedback](/patternfly-ai/chatbot/messages/demo#message-feedback)
 - [ChatBot attachments via file upload](/patternfly-ai/chatbot/messages/demo#attach-via-upload-button-in-message-bar)
 - [ChatBot attachments via built-in menu](/patternfly-ai/chatbot/messages/demo#attach-via-menu-of-options-in-message-bar)
 
@@ -31,6 +33,7 @@ Explore our documentation, which covers both ChatBot UI components and message-r
     - [Header](/patternfly-ai/chatbot/ui#header)
     - [Footer](/patternfly-ai/chatbot/ui#footer)
     - [Navigation](/patternfly-ai/chatbot/ui#navigation)
+    - [Modals](/patternfly-ai/chatbot/ui#modals)
 - Messages
     - [Bot and user messages](/patternfly-ai/chatbot/messages)
     - [File attachments](/patternfly-ai/chatbot/messages#attachments)

package/patternfly-docs/content/extensions/chatbot/design-guidelines.md

@@ -8,16 +8,16 @@ source: design-guidelines
 
 import "./images.css"
 
-## Elements
+## Elements 
 
-<div class="ws-docs-content-img">
+<div class="ws-docs-content-img" >
 ![Main elements of a ChatBot.](./img/chatbot-elements.svg)
 </div>
 
 1. **Container:** The window that contains the entire ChatBot experience and all of its components.
 1. **Header:** A persistent region at the top of the ChatBot window that contains navigation, branding, and actions.
 1. **Navigation:** A menu that contains navigational options, including access to the conversation history.
-1. **Options menu:** Contains display options and other settings. More details can be found in the [ChatBot variations section](#variations).
+1. **Options menu:** A menu that contains settings that are relevant to your product. This typically includes display options (more details in the [ChatBot variations section](#variations)) and other general settings (more details in the [ChatBot settings and preferences section](#chatbot-settings-and-preferences)).
 1. **Messages:** Elements of the conversation between a ChatBot and user. More details can be found in the [message guidelines](#messages).
 1. **Attachments:** Details about files that a user has uploaded to the ChatBot.
 1. **Footer:** A persistent region at the bottom of the ChatBot window that contains the message bar and the footnote.
@@ -37,9 +37,26 @@ import "./images.css"
 1. **Timestamp:** The relative or absolute time that a message was sent.
 1. **Label:** Labels ChatBot messages as "AI."
 1. **Quick responses:** Programmable, clickable actions that allow users to quickly answer questions from the ChatBot.
-1. **Sources:** Cards that link to documentation or other external resources. When multiple sources are included, users can paginate through the different options.
 1. **Response actions:** Actions that allow users to interact with a bot message. these typically include providing feedback, copying, sharing, or reading aloud, but [custom message actions](/patternfly-ai/chatbot/messages#custom-message-actions) are also supported.
 
+#### Source tiles
+
+A ChatBot can share relevant sources with users, like documentation that could provide the information a user is searching for. These sources will be contained in a single tile, which users can paginate through and select to navigate to other resources. 
+
+To provide users with enough context, sources should have descriptive titles and descriptions. The title is limited to 1 line and the body is limited to 2 lines.
+
+<div class="ws-docs-content-img">
+![Bot message that include multiple source tiles.](./img/source-tile.svg)
+</div>
+
+#### Quick start tiles
+
+A ChatBot can share a link to a [quick start](/extensions/quick-starts) that will help users complete a given task. Users can either select **Start** or the tile's title to initiate the linked quick start.
+
+<div class="ws-docs-content-img">
+![Bot message that links a quick start tile.](./img/chatbot-quickstarts-tile.svg)
+</div>
+
 ### Message bar
 
 To message the ChatBot, users can type directly into the message bar in the footer or click any included actions.
@@ -126,6 +143,12 @@ When there is an unread message from the ChatBot, a notification badge should be
 ![Toggle with notification badge.](./img/chatbot-toggle-notification.svg)
 </div>
 
+If necessary for brand consistency, you can customize the toggle shape and icon.
+
+<div class="ws-docs-content-img">
+![Different toggle shapes and icons.](./img/toggle-customizations.svg)
+</div>
+
 ### Using the navigation menu
 
 The ChatBot navigation menu primarily contains a users' conversation history with the ChatBot. Clicking the menu icon opens a side drawer in the ChatBot window.
@@ -136,6 +159,20 @@ By clicking into the navigation menu, users can search through previous conversa
 ![Conversation history with an options menu opened on a previous conversation.](./img/conversation-history.svg)
 </div>
 
+### ChatBot settings and preferences
+
+Users can access ChatBot settings and preferences via the options menu.
+
+<div class="ws-docs-content-img">
+![ChatBot options menu dropdown.](./img/settings-menu.svg)
+</div>
+
+Within the settings menu, users can select their preferences for a variety of ChatBot features, like theme or language. You can also support additional content management here, like adding or deleting chats. This menu can be customized to meet the needs of your ChatBot's users.
+
+<div class="ws-docs-content-img">
+![ChatBot global settings menu.](./img/chatbot-settings.svg)
+</div>
+
 ### Attaching files
 
 Using [the attach button](/patternfly-ai/chatbot/overview/design-guidelines#message-bar) in the message bar, users can [attach files](/patternfly-ai/chatbot/messages#file-attachments) to their message to share with the ChatBot.

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

@@ -2,9 +2,41 @@ import React from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
+import { Form, FormGroup, Radio } from '@patternfly/react-core';
 
 export const BotMessageExample: React.FunctionComponent = () => {
-  const markdown = `
+  const [variant, setVariant] = React.useState('code');
+
+  /* eslint-disable indent */
+  const renderContent = () => {
+    switch (variant) {
+      case 'code':
+        return code;
+      case 'heading':
+        return heading;
+      case 'emphasis':
+        return emphasis;
+      case 'blockQuotes':
+        return blockQuotes;
+      case 'orderedList':
+        return orderedList;
+      case 'unorderedList':
+        return unorderedList;
+      case 'moreComplexList':
+        return moreComplexList;
+      case 'inlineCode':
+        return inlineCode;
+      case 'link':
+        return link;
+      case 'table':
+        return table;
+      default:
+        return;
+    }
+  };
+  /* eslint-enable indent */
+
+  const code = `
 Here is some YAML code:
 
 ~~~yaml
@@ -35,6 +67,36 @@ export default MessageLoading;
 ~~~
 `;
 
+  const heading = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+
+  const emphasis = `
+**Bold text, formatted with double asterisks**
+
+__Bold text, formatted with double underscores__
+
+*Italic text, formatted with single asterisks*
+
+_Italic text, formatted with single underscores_
+
+~~Strikethrough~~
+`;
+
+  const blockQuotes = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+
   const orderedList = `
   Here is an ordered list:
 
@@ -61,21 +123,22 @@ export default MessageLoading;
      Acquire 1 tablespoon of room temperature \`butter\`. Use \`knife\` to spread butter on \`toast\`. Bon appétit!
  `;
 
+  const link = `A paragraph with a URL: https://reactjs.org.`;
+
+  const inlineCode = `Here is an inline code - \`() => void\``;
+
+  const table = `To customize your table, you can use [PatternFly TableProps](/components/table#table)
+
+ | Version | GA date | User role 
+ |-|-|-|
+ | 2.5 | September 30, 2024 | Administrator |
+ | 2.5 | June 27, 2023 | Editor |
+ | 3.0 | April 1, 2025 | Administrator
+ `;
+
   return (
     <>
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={`Text-based message from a bot named "Bot"`} />
-      <Message
-        name="Bot"
-        role="bot"
-        avatar={patternflyAvatar}
-        content={`Text-based message from a bot named "Bot," with updated timestamp`}
-        timestamp="1 hour ago"
-      />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={markdown} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={orderedList} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={unorderedList} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={moreComplexList} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
       <Message role="bot" avatar={patternflyAvatar} content="Text-based message from a nameless bot" />
       <Message
         name="Default Openshift Container Platform Assistant That Can Help With Any Query You Might Need Help With"
@@ -90,6 +153,98 @@ export default MessageLoading;
         content="Text-based message from a bot with a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
         hasRoundAvatar={false}
       />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content={`Text-based message from a bot named "Bot," with updated timestamp`}
+        timestamp="1 hour ago"
+      />
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
+
+      <Form>
+        <FormGroup role="radiogroup" isInline fieldId="bot-message-type" label="Message content type">
+          <Radio
+            isChecked={variant === 'code'}
+            onChange={() => setVariant('code')}
+            name="bot-message-type"
+            label="Code"
+            id="code"
+          />
+          <Radio
+            isChecked={variant === 'inlineCode'}
+            onChange={() => setVariant('inlineCode')}
+            name="bot-message-type"
+            label="Inline code"
+            id="inline-code"
+          />
+          <Radio
+            isChecked={variant === 'heading'}
+            onChange={() => setVariant('heading')}
+            name="bot-message-type"
+            label="Heading"
+            id="heading"
+          />
+          <Radio
+            isChecked={variant === 'blockQuotes'}
+            onChange={() => setVariant('blockQuotes')}
+            name="bot-message-type"
+            label="Block quote"
+            id="block-quotes"
+          />
+          <Radio
+            isChecked={variant === 'emphasis'}
+            onChange={() => setVariant('emphasis')}
+            name="bot-message-type"
+            label="Emphasis"
+            id="emphasis"
+          />
+          <Radio
+            isChecked={variant === 'link'}
+            onChange={() => setVariant('link')}
+            name="bot-message-type"
+            label="Link"
+            id="link"
+          />
+          <Radio
+            isChecked={variant === 'unorderedList'}
+            onChange={() => setVariant('unorderedList')}
+            name="bot-message-type"
+            label="Unordered list"
+            id="unordered-list"
+          />
+          <Radio
+            isChecked={variant === 'orderedList'}
+            onChange={() => setVariant('orderedList')}
+            name="bot-message-type"
+            label="Ordered list"
+            id="ordered-list"
+          />
+          <Radio
+            isChecked={variant === 'moreComplexList'}
+            onChange={() => setVariant('moreComplexList')}
+            name="bot-message-type"
+            label="More complex list"
+            id="more-complex-list"
+          />
+          <Radio
+            isChecked={variant === 'table'}
+            onChange={() => setVariant('table')}
+            name="bot-message-type"
+            label="Table"
+            id="table"
+          />
+        </FormGroup>
+      </Form>
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content={renderContent()}
+        tableProps={
+          variant === 'table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
+        }
+      />
     </>
   );
 };

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

@@ -15,16 +15,20 @@ export const CustomActionExample: React.FunctionComponent = () => (
     actions={{
       regenerate: {
         ariaLabel: 'Regenerate',
+        clickedAriaLabel: 'Regenerated',
         // eslint-disable-next-line no-console
         onClick: () => console.log('Clicked regenerate'),
         tooltipContent: 'Regenerate',
+        clickedTooltipContent: 'Regenerated',
         icon: <RedoIcon />
       },
       download: {
         ariaLabel: 'Download',
+        clickedAriaLabel: 'Downloaded',
         // eslint-disable-next-line no-console
         onClick: () => console.log('Clicked download'),
         tooltipContent: 'Download',
+        clickedTooltipContent: 'Downloaded',
         icon: <DownloadIcon />
       },
       info: {

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import { Checkbox, FormGroup, Stack } from '@patternfly/react-core';
+
+export const MessageWithFeedbackExample: React.FunctionComponent = () => {
+  const [hasCloseButton, setHasCloseButton] = React.useState(false);
+  const [hasTextArea, setHasTextArea] = React.useState(false);
+
+  return (
+    <>
+      <Stack hasGutter>
+        <FormGroup role="radiogroup" isInline fieldId="feedback-card" label="Variant">
+          <Checkbox
+            isChecked={hasTextArea}
+            onChange={() => {
+              setHasTextArea(!hasTextArea);
+            }}
+            name="basic-inline-radio"
+            label="Has text area"
+            id="has-text-area"
+          />
+        </FormGroup>
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This is a message with the feedback card:"
+          userFeedbackForm={{
+            quickResponses: [
+              { id: '1', content: 'Helpful information' },
+              { id: '2', content: 'Easy to understand' },
+              { id: '3', content: 'Resolved my issue' }
+            ],
+            onSubmit: (quickResponse, additionalFeedback) =>
+              alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
+            hasTextArea,
+            // eslint-disable-next-line no-console
+            onClose: () => console.log('closed feedback form'),
+            focusOnLoad: false
+          }}
+        />
+      </Stack>
+      <Stack hasGutter>
+        <FormGroup role="radiogroup" isInline fieldId="feedback-thank-you" label="Variant">
+          <Checkbox
+            isChecked={hasCloseButton}
+            onChange={() => {
+              setHasCloseButton(!hasCloseButton);
+            }}
+            name="basic-inline-radio"
+            label="Has close button"
+            id="has-close"
+          />
+        </FormGroup>
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This is a thank-you message, which is displayed once the feedback card is submitted:"
+          // eslint-disable-next-line no-console
+          userFeedbackComplete={{
+            // eslint-disable-next-line no-console
+            onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
+            focusOnLoad: false
+          }}
+        />
+      </Stack>
+    </>
+  );
+};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import { Button } from '@patternfly/react-core';
+
+export const MessageWithFeedbackTimeoutExample: React.FunctionComponent = () => {
+  const [hasFeedback, setHasFeedback] = React.useState(false);
+
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setHasFeedback(true)}>
+        Show card
+      </Button>
+      <Button variant="secondary" onClick={() => setHasFeedback(false)}>
+        Remove card
+      </Button>
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This completion message times out after you click **Show card**:"
+        userFeedbackComplete={hasFeedback ? { timeout: true, onTimeout: () => setHasFeedback(false) } : undefined}
+        isLiveRegion
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
+import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
+import { QuickStart } from '@patternfly/chatbot/dist/esm/Message/QuickStarts/types';
+
+export const MessageWithQuickStartExample: React.FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Text-based bot message with a quick start tile."
+      quickStarts={{
+        quickStart: explorePipelinesQuickStart as QuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Text-based bot message with a quick start tile that includes prerequisites and a default icon."
+      quickStarts={{
+        quickStart: monitorSampleAppQuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+    />
+  </>
+);