feat(ChatBotFooter/MessageBar): Add white background variants

Request from OpenShift AI since they have more complex embedded layouts.

Author: rebeccaalpert

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

@@ -118,6 +118,27 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
 
 ```
 
+### Embedded ChatBot with Primary Background
+
+This demo displays an embedded ChatBot with a primary background color. 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:
+   - 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)
+   - 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)
+   - 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>`.
+
+```js file="./WhiteEmbeddedChatbot.tsx" isFullscreen
+
+```
+
 ### Inline drawer ChatBot
 
 This demo displays a ChatBot in a static, inline drawer. This demo includes:
@@ -137,9 +158,9 @@ This demo showcases how the ChatBot can be rendered in different display modes t
 
 1. The ability to switch between overlay, drawer, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/patternfly-ai/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 +191,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.