@patternfly/chatbot 6.5.0-prerelease.2 → 6.5.0-prerelease.20

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

@@ -180,7 +180,7 @@ export const SettingsDemo: FunctionComponent = () => {
     },
     {
       id: 'archive-all',
-      label: 'Archive all chat',
+      label: 'Archive all chats',
       field: (
         // We want to add the id property here as well so the label is coupled
         // with the button on screen readers.

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

@@ -1,7 +1,7 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files
-section: PatternFly-AI
+section: extensions
 subsection: ChatBot
 # Sidenav secondary level section
 # should be the same for all markdown files
@@ -53,6 +53,7 @@ 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 Onboarding from '@patternfly/chatbot/dist/dynamic/Onboarding';
 import {
 ChatbotHeader,
 ChatbotHeaderCloseButton,
@@ -85,6 +86,7 @@ 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 onboardingHeader from './RH-Hat-Image.svg';
 import { CloseIcon, SearchIcon, OutlinedCommentsIcon } from '@patternfly/react-icons';
 import { FunctionComponent, FormEvent, useState, useRef, MouseEvent, isValidElement, cloneElement, Children, ReactNode, Ref, MouseEvent as ReactMouseEvent, CSSProperties, useEffect} from 'react';
 import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
@@ -93,7 +95,7 @@ import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
 
 ### Container
 
-The PatternFly ChatBot is a separate window that overlays or is embedded within other UI content. This container can be shown and hidden via [the ChatBot toggle.](/patternfly-ai/chatbot/ui#toggle)
+The PatternFly ChatBot is a separate window that overlays or is embedded within other UI content. This container can be shown and hidden via [the ChatBot toggle.](/extensions/chatbot/ui#toggle)
 
 The `<Chatbot>` component is the container that encompasses the ChatBot experience. It adapts to various display modes (overlay/default, docked, fullscreen, and embedded) and supports both light and dark themes.
 
@@ -105,7 +107,7 @@ The "embedded" display mode is meant to be used within a [PatternFly page](/comp
 
 ### Content and message box
 
-The `<ChatbotContent>` component is the container that is placed within the `<Chatbot>`, between the [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) and [`<ChatbotFooter>`.](/patternfly-ai/chatbot/ui#footer)
+The `<ChatbotContent>` component is the container that is placed within the `<Chatbot>`, between the [`<ChatbotHeader>`](/extensions/chatbot/ui#header) and [`<ChatbotFooter>`.](/extensions/chatbot/ui#footer)
 
 `<ChatbotContent>` usually contains a `<ChatbotMessageBox>` for displaying messages.
 
@@ -123,11 +125,11 @@ Your code structure should look like this:
 </Chatbot>
 ```
 
-**Note**: When messages update, it is important to announce new messages to users of assistive technology. To do this, make sure to set the `announcement` prop on `<MessageBox>` whenever you display a new message in `<MessageBox>`. You can view this in action in our [basic ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot) demos.
+**Note**: When messages update, it is important to announce new messages to users of assistive technology. To do this, make sure to set the `announcement` prop on `<MessageBox>` whenever you display a new message in `<MessageBox>`. You can view this in action in our [basic ChatBot](/extensions/chatbot/overview/demo#basic-chatbot) and [embedded ChatBot](/extensions/chatbot/overview/demo#embedded-chatbot) demos.
 
 ### Welcome message
 
-To introduce users to the ChatBot experience, display a welcome message before they input their first message. This brief message should follow our [conversation design guidelines](/patternfly-ai/conversation-design) to welcome users to the ChatBot experience and encourage them to interact.
+To introduce users to the ChatBot experience, display a welcome message before they input their first message. This brief message should follow our [conversation design guidelines](/ai/conversation-design) to welcome users to the ChatBot experience and encourage them to interact.
 
 This message can be dismissed once a user sends their first message. To change the arrangement of the message within the message box, specify the `position` in the `<MessageBox>` component.
 
@@ -147,7 +149,7 @@ To provide users with a more specific direction, you can also include optional w
 
 To provide page context, we recommend using a "Skip to chatbot" button. This allows you to skip past other content on the page, directly to the ChatBot content, using a [PatternFly skip to content component](/components/skip-to-content). To display this button, you must tab into the main window.
 
-When using default or docked modes, we recommend putting focus on the toggle if the ChatBot is closed, and the ChatBot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the ChatBot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and the [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot).
+When using default or docked modes, we recommend putting focus on the toggle if the ChatBot is closed, and the ChatBot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the ChatBot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen ChatBot](/extensions/chatbot/overview/demo#basic-chatbot) and the [embedded ChatBot](/extensions/chatbot/overview/demo#embedded-chatbot).
 
 ```js file="./SkipToContent.tsx" isFullscreen
 
@@ -226,7 +228,7 @@ There are a variety of options and customizations you can make to the header, to
 In this example, select the respective checkbox to toggle these features:
 
 - **Menu:** Users can select the menu toggle to open a menu of additional options or actions.
-- **New chat button:** Used to start a new chat session. The header button can be used in addition to or in place of a new chat button within the [conversation history drawer](/patternfly-ai/chatbot/ui/#drawer-with-search-and-new-chat-button).
+- **New chat button:** Used to start a new chat session. The header button can be used in addition to or in place of a new chat button within the [conversation history drawer](/extensions/chatbot/ui/#drawer-with-search-and-new-chat-button).
 - **Left-aligned logo**
 - **Centered logo**
 - **Selector dropdown:** Users can choose from preselected options in a dropdown menu. For example, they can toggle between AI models.
@@ -283,7 +285,7 @@ To disable the send button in the following example, select the "Disable send bu
 
 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.
 
-Attachments can also be added to the ChatBot via [drag and drop.](/patternfly-ai/chatbot/messages#attachment-dropzone)
+Attachments can also be added to the ChatBot via [drag and drop.](/extensions/chatbot/messages#attachment-dropzone)
 
 ```js file="./ChatbotMessageBarAttach.tsx"
 
@@ -314,6 +316,16 @@ To enable the stop button, set `hasStopButton` to `true` and pass in a `handleSt
 
 ```
 
+### Message bar with AI indicator styles
+
+To add a more pronounced AI indicator style to the message bar, pass `hasAiIndicator` to the `<MessageBar>` component. You can also enable a "thinking" animation by passing in `isThinking`.
+
+This example shows a simplified method of handling the "thinking" animation: after a user sends a message, the `isThinking` property is set to `true` to trigger the animation, then returns to `false` after 10 seconds to halt the animation.
+
+```ts file="./ChatbotMessageBarIndicatorThinking.tsx" isBeta
+
+```
+
 ## Navigation
 
 ### Side nav in a drawer
@@ -342,7 +354,7 @@ The code structure will look like this:
 </Chatbot>
 ```
 
-The conversation history drawer looks different depending on the `displayMode` of the parent `<Chatbot>`. (As shown in the [main ChatBot demo](/patternfly-ai/chatbot/overview/demo#basic-chatbot).):
+The conversation history drawer looks different depending on the `displayMode` of the parent `<Chatbot>`. (As shown in the [main ChatBot demo](/extensions/chatbot/overview/demo#basic-chatbot).):
 
 - `Default` and `docked` display modes display the conversation history on top of the rest of the ChatBot content, with a PatternFly backdrop between the drawer panel and drawer content.
 - `Fullscreen` and `embedded` display modes display the conversation history in line with the drawer content.
@@ -414,24 +426,6 @@ The drawer can also be used to display a list of basic menu items.
 
 ```
 
-### 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
-
-```
-
-### Compact terms of use
-
-To apply compact styling to the terms of use modal, pass `isCompact` to `<TermsOfUse>`. This will remove the header image and adjust the spacing of text, so that there is less white space in the modal.
-
-```js file="./TermsOfUseCompact.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.
@@ -459,3 +453,37 @@ Based on the [PatternFly modal](/components/modal), this modal adapts to the Cha
 ```js file="./ChatbotModal.tsx" isFullscreen
 
 ```
+
+### Onboarding
+
+You can use the onboarding modal to introduce users to your ChatBot and provide necessary information. The title, image, and body text are customizable.
+
+```js file="./Onboarding.tsx" isFullscreen
+
+```
+
+### Compact onboarding
+
+To make the onboarding modal compact, with less spacing, pass `isCompact` to the `<Onboarding>` component.
+
+```js file="./CompactOnboarding.tsx" isFullscreen
+
+```
+
+### 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](/extensions/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
+
+```
+
+### Compact terms of use
+
+To apply compact styling to the terms of use modal, pass `isCompact` to `<TermsOfUse>`. This will remove the header image and adjust the spacing of text, so that there is less white space in the modal.
+
+```js file="./TermsOfUseCompact.tsx" isFullscreen
+
+```

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

@@ -1,7 +1,7 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files
-section: PatternFly-AI
+section: extensions
 subsection: ChatBot
 # Sidenav secondary level section
 # should be the same for all markdown files
@@ -68,7 +68,7 @@ It is also important to announce when new content appears onscreen for accessibi
 
 This demo shows auto-scrolling functionality, which automatically scrolls to the bottom of the active chat.
 
-To enable auto-scroll behavior pass the `enableSmartScroll` prop to the [`<MessageBox>`](/patternfly-ai/chatbot/ui#message-box) component.
+To enable auto-scroll behavior pass the `enableSmartScroll` prop to the [`<MessageBox>`](/extensions/chatbot/ui#message-box) component.
 
 When enabled:
 
@@ -88,11 +88,11 @@ When using `ref`, the `<MessageBox>` component exposes the following methods:
 
 This demo includes broader ChatBot features, including:
 
-1. A [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
-2. A `<ChatbotContent>` and [`<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
+1. A [`<ChatbotToggle>`](/extensions/chatbot/ui#toggle) that controls the [`<Chatbot>`](/extensions/chatbot/ui#container) container.
+2. A `<ChatbotContent>` and [`<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) with:
    - A `<ChatbotWelcomePrompt>`
    - An initial user message and initial bot message
-3. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
+3. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/extensions/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
 
 ```js file="./ChatbotScrolling.tsx" isFullscreen
 
@@ -102,24 +102,24 @@ This demo includes broader ChatBot features, including:
 
 This demo displays unique attachment features, including:
 
-1. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) components that contain:
-   - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) with an attachment.
-   - The ability to preview or edit the attachment using the [`<PreviewAttachment>` and `<AttachmentEdit>` components.](/patternfly-ai/chatbot/messages##file-attachments)
+1. [`<ChatbotContent>` and `<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) components that contain:
+   - An initial [user `<Message>`](/extensions/chatbot/messages#user-messages) with an attachment.
+   - The ability to preview or edit the attachment using the [`<PreviewAttachment>` and `<AttachmentEdit>` components.](/extensions/chatbot/messages##file-attachments)
    - A [PatternFly `<Alert>`](/components/alert), customized to be sticky within the ChatBot window, which provides success or error messages for attachments.
 2. `<ChatbotContent>` and `<ChatbotFooter>`, wrapped in a `<FileDropZone>` component to support drag and drop attachments. The footer also:
-   - Displays attached files, using a [`<FileDetailsLabel>`](/patternfly-ai/chatbot/messages#attachment-label) component.
+   - Displays attached files, using a [`<FileDetailsLabel>`](/extensions/chatbot/messages#attachment-label) component.
    - Demonstrates custom handling of file uploads, using the `handleAttach` in `<MessageBar>` and `handleFileDrop` in `<FileDropZone>`.
 
 This demo includes broader ChatBot features, including:
 
-1. A [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
-2. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) that updates based on the display mode, with sub-components (including a `<ChatbotHeaderTitle>`).
+1. A [`<ChatbotToggle>`](/extensions/chatbot/ui#toggle) that controls the [`<Chatbot>`](/extensions/chatbot/ui#container) container.
+2. A [`<ChatbotHeader>`](/extensions/chatbot/ui#header) that updates based on the display mode, with sub-components (including a `<ChatbotHeaderTitle>`).
 3. The ability to swap display modes via the `<ChatbotHeaderOptionsDropdown>`
-4. A `<ChatbotContent>` and [`<MessageBox>`](/patternfly-ai/chatbot/uir#content-and-message-box) with:
+4. A `<ChatbotContent>` and [`<MessageBox>`](/extensions/chatbot/uir#content-and-message-box) with:
    - A `<ChatbotWelcomePrompt>`
    - The ability to preview or edit the attachment.
    - An initial bot message
-5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
+5. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/extensions/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
 
 ```js file="./ChatbotAttachment.tsx" isFullscreen
 
@@ -129,21 +129,21 @@ This demo includes broader ChatBot features, including:
 
 This demo displays unique attachment features, including:
 
-1. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) components that contain:
+1. [`<ChatbotContent>` and `<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) components that contain:
    - A PatternFly [`<Alert>`](/components/alert) to provide success or error messages for attachments.
 2. `<ChatbotContent>` and `<ChatbotFooter>`, wrapped in a `<FileDropZone>` component to support drag and drop attachments. The footer also:
 
-   - Displays attached files, using a [`<FileDetailsLabel>`](/patternfly-ai/chatbot/ui#attachment-label) component.
+   - Displays attached files, using a [`<FileDetailsLabel>`](/extensions/chatbot/ui#attachment-label) component.
    - Demonstrates custom handling of file uploads, using the `handleAttach` in `<MessageBar>` and `handleFileDrop` in `<FileDropZone>`.
    - Demonstrates how to define the `attachMenuProps` in the `<MessageBar>` to create a menu that allows users to select the source of an item they're attaching.
 
 This demo includes broader ChatBot features, including:
 
-1. A [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
-2. A `<ChatbotContent>` and [`<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
+1. A [`<ChatbotToggle>`](/extensions/chatbot/ui#toggle) that controls the [`<Chatbot>`](/extensions/chatbot/ui#container) container.
+2. A `<ChatbotContent>` and [`<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) with:
    - A `<ChatbotWelcomePrompt>`
    - An initial user message and initial bot message
-3. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
+3. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/extensions/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
 
 ```js file="./ChatbotAttachmentMenu.tsx" isFullscreen
 

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

@@ -1,7 +1,7 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files
-section: PatternFly-AI
+section: extensions
 subsection: ChatBot
 # Sidenav secondary level section
 # should be the same for all markdown files
@@ -66,24 +66,24 @@ import saveAs from 'file-saver';
 
 This demo displays a basic ChatBot, which includes:
 
-1. The [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>` container.](/patternfly-ai/chatbot/ui#container)
-2. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>` that changes its presentation depending on the display mode.
+1. The [`<ChatbotToggle>`](/extensions/chatbot/ui#toggle) that controls the [`<Chatbot>` container.](/extensions/chatbot/ui#container)
+2. A [`<ChatbotHeader>`](/extensions/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>` that changes its presentation depending on the display mode.
 3. The ability to swap display modes via `<ChatbotHeaderOptionsDropdown>`
-4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
+4. [`<ChatbotContent>` and `<MessageBox>`](/extensions/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#message-actions)
+- An initial [user `<Message>`](/extensions/chatbot/messages#user-messages) and an initial bot message with [message actions.](/extensions/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:
+5. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/extensions/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)
+- [Speech to text.](/extensions/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
 - Sending a message to the ChatBot.
 - Receiving a response from a backend AI tool with a loading message state.
 
-6. A [`<ChatbotConversationHistoryNav>`](/patternfly-ai/chatbot/ui#navigation) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
+6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#navigation) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
 
-7. A "Skip to chatbot" button that allows you to skip to the chatbot content via the [PatternFly skip to content component](/patternfly-ai/chatbot/ui#skip-to-content). To display this button you must tab into the main window.
+7. A "Skip to chatbot" button that allows you to skip to the chatbot content via the [PatternFly skip to content component](/extensions/chatbot/ui#skip-to-content). To display this button you must tab into the main window.
 
 ```js file="./Chatbot.tsx" isFullscreen
 
@@ -102,17 +102,17 @@ This demo displays a basic compact ChatBot
 This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed within a page in your product. This demo includes:
 
 1. A [PatternFly page](/components/page) with a sidebar, "Skip to chatbot" button, and masthead. To display the "Skip to chatbot" button you must tab into the main window.
-2. A [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
-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:
+2. A [`<Chatbot>`](/extensions/chatbot/ui#container) container.
+3. A [`<ChatbotHeader>`](/extensions/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>`
+4. [`<ChatbotContent>` and `<MessageBox>`](/extensions/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/#message-actions)
+   - An initial [user `<Message>`](/extensions/chatbot/messages#user-messages) and an initial bot message with [message actions.](/extensions/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)
+5. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/extensions/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
+   - [Speech to text.](/extensions/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
    - Sending a message to the ChatBot.
    - Receiving a response from a backend AI tool with a loading message state.
-6. A [`<ChatbotConversationHistoryNav>`](/patternfly-ai/chatbot/ui#navigation) that can be toggled by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
+6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#navigation) that can be toggled by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
 
 ```js file="./EmbeddedChatbot.tsx" isFullscreen
 
@@ -131,15 +131,23 @@ This demo displays a ChatBot in a static, inline drawer. This demo includes:
 
 ```
 
+### Primary color background
+
+This demo displays an embedded ChatBot with a [primary background color](/design-foundations/colors#background-colors). This example includes the same features as the [Embedded ChatBot demo](/extensions/chatbot/overview/demo/#embedded-chatbot)&mdash;the only differences are that the background color is adjusted via the `isPrimary` prop and some of the sample Messages have changed. You can use the same logic to adjust the background color in any ChatBot layout.
+
+```js file="./WhiteEmbeddedChatbot.tsx" isFullscreen
+
+```
+
 ### Display mode switcher
 
 This demo showcases how the ChatBot can be rendered in different display modes to suit various application layouts. It demonstrates how to dynamically change the page structure in response to the user's selection. This demo includes:
 
-1. The ability to switch between overlay, drawer, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/patternfly-ai/chatbot/ui#header-options) in the header.
+1. The ability to switch between overlay, drawer, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/extensions/chatbot/ui#header-options) in the header.
 2. A conditional page layout that renders the ChatBot for each display mode option:
-    - **Overlay:** As a floating window on top of the page content.
-    - **Drawer:** Inside an inline PatternFly `<Drawer>` as a side panel.
-    - **Fullscreen:** As a top-level component that covers the entire screen for an embedded experience.
+   - **Overlay:** As a floating window on top of the page content.
+   - **Drawer:** Inside an inline PatternFly `<Drawer>` as a side panel.
+   - **Fullscreen:** As a top-level component that covers the entire screen for an embedded experience.
 3. Logic to show or hide the `<ChatbotToggle>` button, which is only present in the default overlay mode.
 4. A [basic ChatBot](#basic-chatbot) with a header, welcome prompt, and message bar to populate the different layouts.
 
@@ -170,7 +178,7 @@ Your code structure should look like this:
 
 ### Chat transcripts
 
-This demo illustrates how you could add downloadable transcripts to your ChatBot, which outline conversation details in a Markdown file. This approach allows users to easily share information from a conversation with others. 
+This demo illustrates how you could add downloadable transcripts to your ChatBot, which outline conversation details in a Markdown file. This approach allows users to easily share information from a conversation with others.
 
 A message transcript includes details from a single chat message. To download a sample message transcript in this demo, click the "Download" action under a bot message.