@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.31

package/dist/esm/tracking/tracking_registry.js

@@ -0,0 +1,26 @@
+import TrackingProviderProxy from './trackingProviderProxy';
+import { ConsoleTrackingProvider } from './console_tracking_provider';
+import { SegmentTrackingProvider } from './segment_tracking_provider';
+import { PosthogTrackingProvider } from './posthog_tracking_provider';
+import { UmamiTrackingProvider } from './umami_tracking_provider';
+export const getTrackingProviders = (initProps) => {
+    const providers = [];
+    providers.push(new SegmentTrackingProvider());
+    providers.push(new PosthogTrackingProvider());
+    providers.push(new UmamiTrackingProvider());
+    // TODO dynamically find and register providers
+    // Initialize them
+    const enabledProviders = [];
+    for (const provider of providers) {
+        const key = provider.getKey();
+        if (Object.keys(initProps).indexOf(key) > -1) {
+            provider.initialize(initProps);
+            enabledProviders.push(provider);
+        }
+    }
+    // Add the console provider
+    const consoleTrackingProvider = new ConsoleTrackingProvider();
+    enabledProviders.push(consoleTrackingProvider); // TODO noop- provider?
+    return new TrackingProviderProxy(enabledProviders);
+};
+export default getTrackingProviders;

package/dist/esm/tracking/tracking_spi.d.ts

@@ -0,0 +1,9 @@
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+export interface InitProps {
+    [key: string]: string | number | boolean;
+}
+export interface TrackingSpi extends TrackingApi {
+    getKey: () => string;
+    initialize: (props: InitProps) => void;
+    trackSingleItem: (item: string, properties?: TrackingEventProperties) => void;
+}

package/dist/esm/tracking/tracking_spi.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/tracking/umami_tracking_provider.d.ts

@@ -0,0 +1,14 @@
+import { InitProps, TrackingSpi } from './tracking_spi';
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+declare global {
+    interface Window {
+        umami: any;
+    }
+}
+export declare class UmamiTrackingProvider implements TrackingSpi, TrackingApi {
+    getKey(): string;
+    initialize(props: InitProps): void;
+    identify(userID: string): void;
+    trackPageView(url: string | undefined): void;
+    trackSingleItem(item: string, properties?: TrackingEventProperties): void;
+}

package/dist/esm/tracking/umami_tracking_provider.js

@@ -0,0 +1,40 @@
+export class UmamiTrackingProvider {
+    getKey() {
+        return 'umamiKey';
+    }
+    initialize(props) {
+        // eslint-disable-next-line no-console
+        console.log('UmamiProvider initialize');
+        const umamiKey = props.umamiKey;
+        const hostUrl = props.umamiHostUrl;
+        const script = document.createElement('script');
+        script.src = hostUrl + '/script.js';
+        script.async = true;
+        script.defer = true;
+        // Configure Umami properties
+        script.setAttribute('data-website-id', umamiKey);
+        script.setAttribute('data-domains', 'localhost'); // TODO ?
+        script.setAttribute('data-auto-track', 'false');
+        script.setAttribute('data-host-url', hostUrl); // TODO ?
+        script.setAttribute('data-exclude-search', 'false'); // TODO ?
+        document.body.appendChild(script);
+    }
+    identify(userID) {
+        var _a;
+        // eslint-disable-next-line no-console
+        console.log('UmamiProvider userID: ' + userID);
+        (_a = window.umami) === null || _a === void 0 ? void 0 : _a.identify({ userID });
+    }
+    trackPageView(url) {
+        var _a;
+        // eslint-disable-next-line no-console
+        console.log('UmamiProvider url', url);
+        (_a = window.umami) === null || _a === void 0 ? void 0 : _a.track({ url });
+    }
+    trackSingleItem(item, properties) {
+        var _a;
+        // eslint-disable-next-line no-console
+        console.log('UmamiProvider: trackSingleItem' + item, properties);
+        (_a = window.umami) === null || _a === void 0 ? void 0 : _a.track(item, properties);
+    }
+}

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/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.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/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.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","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.3",
+  "version": "2.2.0-prerelease.31",
   "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,16 +31,17 @@
     "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",
+    "rehype-unwrap-images": "^1.0.0",
+    "rehype-external-links": "^3.0.0",
+    "rehype-sanitize": "^6.0.0",
     "path-browserify": "^1.0.1"
   },
   "peerDependencies": {
@@ -48,18 +49,14 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.0.6",
-    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/documentation-framework": "^6.5.13",
+    "@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,8 +33,12 @@ 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)
+- Analytics support
+    - [Overview](/patternfly-ai/chatbot/analytics)
+  
 
 We will continue to grow and evolve our ChatBot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one.

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/Analytics/Analytics.md

@@ -0,0 +1,214 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: PatternFly-AI
+subsection: ChatBot
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Analytics
+source: Analytics
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 4
+---
+import "../../images.css"
+
+To gain more insight into the ways that your users interact with your ChatBot, you can add support for **analytics**. To add analytics tracking, you can refer to this guide and configure tracking for the interactions you care about most.   
+
+## Elements
+
+This following diagram shows the main components of ChatBot analytics tracking code, as well as the flow of information between components:
+
+<div class="ws-docs-content-img">
+![Main elements of the tracking code.](../../img/chatbot-analytics.svg)
+</div>
+
+The user code (1) first calls the static `getTrackingProviders()` method (3) which initializes the tracking providers (4). This returns an instance of the `trackingAPI` (2), which can then subsequently be used to emit analytics events.
+
+Note that user code only interacts with:
+- `trackingAPI` (including `identify`, `trackPageview`, `trackSingleItem`)
+- `TrackingRegistry` (including `getTrackingProviders`)
+
+## Usage
+
+### Setup
+
+1. Before you can use the `trackingAPI`, you must first supply the API keys of the respective providers. 
+
+  ```nolive
+  const initProps: InitProps = {
+    segmentKey: 'TODO-key', // TODO add your key here
+  //  segmentCdn: 'https://my.org/cdn',  // Set up segment cdn (optional)
+  //  segmentIntegrations: { // Provide Segment integrations (optional)
+  //          'Segment.io': {
+  //            apiHost: 'my.api.host/api/v1',
+  //            protocol: 'https'
+  //          }
+          },
+
+    posthogKey: 'TODO-key',
+    umamiKey: 'TODO-key',
+    umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
+    something: 'test',
+    console: 'true' // Console provider
+  };
+  ```
+
+1. Once this is done, you can create an instance of the `trackingAPI` and start sending events.
+
+    ```nolive
+    const trackingAPI = getTrackingProviders(initProps);
+    ```
+
+1. One of your first events should identify the user in some way, such as a UUID that stays consistent for the same user. 
+
+  ```nolive
+  const trackingAPI = getTrackingProviders(initProps);
+  trackingAPI.identify('user-123'); // TODO get real user id
+  // Track the page that is currently visited. Best put into a react effect (see below)
+  trackingAPI.trackPageView();
+  // Track a single Event
+  trackingAPI.trackSingleItem("MyEvent", { response: 'Good response' })
+  ```
+
+#### Tracking providers
+
+Only providers with a matching key in the `InitProps` will be started and used.
+
+```nolive
+const initProps: InitProps = {
+  segmentKey: 'TODO-key', // TODO add your key here
+  posthogKey: 'TODO-key',
+  umamiKey: 'TODO-key',
+  umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
+  console: true
+```
+
+##### Modifying providers 
+
+If you know upfront that you only want to use 1 of the supported providers, you can modify `getTrackingProviders()` and remove all other providers in the providers array.
+
+When using the providers you need to add additional dependencies to your package.json file:
+
+```nolive
+"dependencies": {
+  "@segment/analytics-next": "^1.76.0",
+  "posthog-js": "^1.194.4"
+```
+
+##### Adding providers
+
+To add another analytics provider, you need to implement 2 interfaces, `TrackingSpi` and `trackingApi`.
+1. It is easiest to start by copying the `ConsoleTrackingProvider`
+1. The first thing you should do is to provide a correct value in `getKey()`
+1. Once you are happy enough with the implementation, add it to the array of providers in `getTrackingProviders()`
+
+### Page flow tracking
+
+To understand how users move through their ChatBot journey, you can track their page flow. 
+
+To add tracking to each page view, use the `trackPageView()` method.
+
+```nolive
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const useTrackPageFlow = (): void => {
+  const { pathname } = useLocation();
+
+  // notify url change events
+  React.useEffect(() => {
+    trackingAPI.trackPageView();
+  }, [pathname]);
+};
+```
+
+### Event tracking
+
+To get more specific insight into how users are interacting with the UI, you can track single events, including button clicks, form submissions, and so on. 
+
+To add tracking to an interaction of your choice, use the `trackSingleItem` method.
+
+```nolive
+trackingAPI.trackSingleItem(eventName, propertyDict)
+```
+
+This method takes 2 parameters:
+- `eventName`: The unique name of the event. To differentiate different events that use the same name, you'll need to add an additional property.
+- `propertyDict`: A dict with key-value pairs that represent important properties of the event. If there are none, this value can be empty.
+
+#### Form submissions
+
+Only add tracking to the form itself, not the button that opens the form. You should track both successful and failed form submissions, as well as cancelled forms
+
+```nolive
+trackingAPI.trackSingleItem(Event_Name, {
+    outcome: << submit , cancel >>,
+    success? : boolean,
+    error? : string,
+    <properties>, string/number/boolean } )
+```
+
+Parameters to pass with the `trackSingleItem` method can include:
+- `outcome`: Communicates if the form was submitted or cancelled. 
+- `success`: Used for a "submit" outcome to communicate if the submission was successful for not in the backend.
+- `error`: Used for a "submit" outcome to communicate the error message associated with a failed submission. Try to remove extraneous parts of the message, like part of a container-name.
+- `properties`: Any additional properties from the form, to be tracked for analytics. 
+  - Use your judgement to determine what will be useful for your analytics.
+  - Highly specific data, like names provided by the user or description text input, should not be tracked. 
+  - Less personal data, like deployment replica count or memory server size, is more likely to help you understand your users.
+
+## Examples
+
+To better understand the analytics tracking process, here are 3 examples of what you could see in an analytics tool.
+
+For all 3 tools, consider the following example, where the users has started a ChatBot and taken actions 1-5 in order:
+
+<div class="ws-docs-content-img" style="width:60%">
+![Events done in the ChatBot](../../img/analytics-example.svg)
+</div>
+
+1. Selected a model
+2. Sent a question
+3. Received a response from the model
+4. Clicked the "thumbs up" button
+5. Closed the ChatBot window
+
+This pattern of actions will be applied to the following 3 analytics tools.
+
+1. Segment
+
+    - [Segment](https://segment.com/) shows all user events in its source debugger: 
+
+      <div class="ws-docs-content-img" style="width:70%">
+      ![Events displayed in the Segment debugger](../../img/segment.svg)
+      </div>
+    
+      - 1-5: User actions with the newest event at the top.
+      - 6-7: You can also see the results of `identify` (6) and `trackPageView` (7).
+      - If you clicked on an event, you would also see the properties.
+
+    - **Note**: When using the Segment provider, you may also want to set the `segmentCdn` and `segmentIntegrations` initialization properties.
+
+1. Umami
+
+    - In [Umami](https://umami.is/), events are visible within **Website** / **Events**.
+    - The list is similar to Segment, with different formatting:
+
+      <div class="ws-docs-content-img">
+      ![Events in Umami](../../img/umami.svg)
+      </div>
+
+      - 1-5: User actions with the newest event at the top.
+
+3. PostHog
+
+    - In [PostHog](https://posthog.com/), events are located in the **Activity** section. 
+    - PostHog integrates deeper in the provided code, so there are more default events tracked:
+
+      <div class="ws-docs-content-img">
+      ![Events in PostHog](../../img/posthog.svg)
+      </div>
+
+      - 1-5: User actions with the newest event at the top.

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

@@ -6,8 +6,8 @@ export const AttachmentErrorExample: React.FunctionComponent = () => (
     variant="danger"
     // eslint-disable-next-line no-console
     onClose={() => console.log('Clicked the close button')}
-    title="File upload failed"
+    title="Could not upload file"
   >
-    Your file size is too large. Please ensure that your file is less than 25 MB.
+    Your file size must be less than 25 MB.
   </ChatbotAlert>
 );