@patternfly/chatbot 2.2.0-prerelease.30 → 2.2.0-prerelease.32

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.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/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"],"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.30",
+  "version": "2.2.0-prerelease.32",
   "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",
@@ -49,7 +49,7 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.5.0",
+    "@patternfly/documentation-framework": "^6.5.13",
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/patternfly-a11y": "^5.0.0",
     "@patternfly/react-table": "^6.1.0",
@@ -71,7 +71,9 @@
     "victory-create-container": "^37.1.1",
     "victory-cursor-container": "^37.1.1",
     "victory-tooltip": "^37.1.1",
-    "victory-bar": "^37.1.1"
+    "victory-bar": "^37.1.1",
+    "@segment/analytics-next": "^1.76.0",
+    "posthog-js": "^1.194.4"
   },
   "overrides": {
     "puppeteer": "^23.6.1",

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

@@ -37,5 +37,8 @@ Explore our documentation, which covers both ChatBot UI components and message-r
 - 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/examples/Analytics/Analytics.md

@@ -0,0 +1,219 @@
+---
+# 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 user 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.
+
+1. 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/BotMessage.tsx

@@ -2,7 +2,7 @@ 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';
+import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core';
 
 export const BotMessageExample: React.FunctionComponent = () => {
   const [variant, setVariant] = React.useState('code');
@@ -140,6 +140,21 @@ _Italic text, formatted with single underscores_
 
   const image = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 
+  const error = {
+    title: 'Could not load chat',
+    children: 'Wait a few minutes and check your network settings. If the issue persists: ',
+    actionLinks: (
+      <React.Fragment>
+        <AlertActionLink component="a" href="#">
+          Start a new chat
+        </AlertActionLink>
+        <AlertActionLink component="a" href="#">
+          Contact support
+        </AlertActionLink>
+      </React.Fragment>
+    )
+  };
+
   return (
     <>
       <Message
@@ -258,6 +273,13 @@ _Italic text, formatted with single underscores_
             label="Image"
             id="image"
           />
+          <Radio
+            isChecked={variant === 'error'}
+            onChange={() => setVariant('error')}
+            name="bot-message-error"
+            label="Error"
+            id="error"
+          />
         </FormGroup>
       </Form>
       <Message
@@ -268,6 +290,7 @@ _Italic text, formatted with single underscores_
         tableProps={
           variant === 'table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
         }
+        error={variant === 'error' ? error : undefined}
       />
     </>
   );

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
-import { Form, FormGroup, Radio } from '@patternfly/react-core';
+import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core';
 
 export const UserMessageExample: React.FunctionComponent = () => {
   const [variant, setVariant] = React.useState('code');
@@ -140,6 +140,21 @@ _Italic text, formatted with single underscores_
 
   const image = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 
+  const error = {
+    title: 'Could not load chat',
+    children: 'Wait a few minutes and check your network settings. If the issue persists: ',
+    actionLinks: (
+      <React.Fragment>
+        <AlertActionLink component="a" href="#">
+          Start a new chat
+        </AlertActionLink>
+        <AlertActionLink component="a" href="#">
+          Contact support
+        </AlertActionLink>
+      </React.Fragment>
+    )
+  };
+
   return (
     <>
       <Message
@@ -235,6 +250,13 @@ _Italic text, formatted with single underscores_
             label="Image"
             id="user-image"
           />
+          <Radio
+            isChecked={variant === 'error'}
+            onChange={() => setVariant('error')}
+            name="user-message-error"
+            label="Error"
+            id="user-error"
+          />
         </FormGroup>
       </Form>
       <Message
@@ -245,6 +267,7 @@ _Italic text, formatted with single underscores_
         tableProps={
           variant === 'table' ? { 'aria-label': 'App information and user roles for user messages' } : undefined
         }
+        error={variant === 'error' ? error : undefined}
       />
     </>
   );

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

@@ -57,6 +57,8 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
+
 
 ### Basic ChatBot
 
@@ -106,6 +108,17 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
 
 ```
 
+### Inline drawer ChatBot
+
+This demo displays a ChatBot in a static, inline drawer. This demo includes:
+
+1. An empty [PatternFly page](/components/page) with a sidebar and masthead.
+2. A [basic ChatBot](#basic-chatbot), placed beside the page content. It does not overlay the page content, cannot be minimized, and does not allow you to change the display mode by default.
+
+```js file="./ChatbotInDrawer.tsx" isFullscreen
+
+```
+
 ### Comparing ChatBots
 
 To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window.

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

@@ -32,6 +32,8 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import { getTrackingProviders } from '@patternfly/chatbot/dist/dynamic/tracking';
+import { InitProps } from '@patternfly/chatbot/dist/dynamic/tracking';
 
 const footnoteProps = {
   label: 'ChatBot uses AI. Check for mistakes.',
@@ -95,6 +97,20 @@ export default MessageLoading;
 // The timestamps re-render with them.
 const date = new Date();
 
+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,
+  something: 'test'
+};
+
+const tracking = getTrackingProviders(initProps);
+tracking.identify('user-123'); // TODO get real user id
+tracking.trackPageView(window.document.documentURI);
+
+const actionEventName = 'MessageAction';
 const initialMessages: MessageProps[] = [
   {
     id: '1',
@@ -113,16 +129,11 @@ const initialMessages: MessageProps[] = [
     avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
-      // eslint-disable-next-line no-console
-      positive: { onClick: () => console.log('Good response') },
-      // eslint-disable-next-line no-console
-      negative: { onClick: () => console.log('Bad response') },
-      // eslint-disable-next-line no-console
-      copy: { onClick: () => console.log('Copy') },
-      // eslint-disable-next-line no-console
-      share: { onClick: () => console.log('Share') },
-      // eslint-disable-next-line no-console
-      listen: { onClick: () => console.log('Listen') }
+      positive: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Good response' }) },
+      negative: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Bad response' }) },
+      copy: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Copy' }) },
+      share: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Share' }) },
+      listen: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Listen' }) }
     }
   }
 ];
@@ -164,6 +175,7 @@ const initialConversations = {
   ]
 };
 
+const actionEvent2 = 'ActionEvent2';
 export const ChatbotDemo: React.FunctionComponent = () => {
   const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
   const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
@@ -180,7 +192,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
   const chatbotRef = React.useRef<HTMLDivElement>(null);
   const historyRef = React.useRef<HTMLButtonElement>(null);
 
-  // Autu-scrolls to the latest message
+  // Auto-scrolls to the latest message
   React.useEffect(() => {
     // don't scroll the first load - in this demo, we know we start with two messages
     if (messages.length > 2) {
@@ -193,6 +205,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
     value: string | number | undefined
   ) => {
     setSelectedModel(value as string);
+    tracking.trackSingleItem('ModelSelected', { model: value });
   };
 
   const onSelectDisplayMode = (
@@ -210,6 +223,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
 
   const handleSend = (message: string) => {
     setIsSendButtonDisabled(true);
+    tracking.trackSingleItem('UserInputReceived', { text: message });
     const newMessages: MessageProps[] = [];
     // We can't use structuredClone since messages contains functions, but we can't mutate
     // items that are going into state or the UI won't update correctly
@@ -255,21 +269,17 @@ export const ChatbotDemo: React.FunctionComponent = () => {
         avatar: patternflyAvatar,
         timestamp: date.toLocaleString(),
         actions: {
-          // eslint-disable-next-line no-console
-          positive: { onClick: () => console.log('Good response') },
-          // eslint-disable-next-line no-console
-          negative: { onClick: () => console.log('Bad response') },
-          // eslint-disable-next-line no-console
-          copy: { onClick: () => console.log('Copy') },
-          // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
-          // eslint-disable-next-line no-console
-          listen: { onClick: () => console.log('Listen') }
+          positive: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Good response' }) },
+          negative: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Bad response' }) },
+          copy: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Copy' }) },
+          share: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Share' }) },
+          listen: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Listen' }) }
         }
       });
       setMessages(loadedMessages);
       // make announcement to assistive devices that new message has loaded
       setAnnouncement(`Message from Bot: API response goes here`);
+      tracking.trackSingleItem('BotResponded', { undefined });
       setIsSendButtonDisabled(false);
     }, 5000);
   };
@@ -339,7 +349,10 @@ export const ChatbotDemo: React.FunctionComponent = () => {
       <ChatbotToggle
         tooltipLabel="Chatbot"
         isChatbotVisible={chatbotVisible}
-        onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+        onToggleChatbot={function () {
+          setChatbotVisible(!chatbotVisible);
+          tracking.trackSingleItem('Chatbot Visible', { isVisible: !chatbotVisible }); // TODO correct?
+        }}
         id="chatbot-toggle"
         ref={toggleRef}
       />
@@ -441,9 +454,9 @@ export const ChatbotDemo: React.FunctionComponent = () => {
                     prompts={welcomePrompts}
                   />
                   {/* This code block enables scrolling to the top of the last message.
-                  You can instead choose to move the div with scrollToBottomRef on it below 
+                  You can instead choose to move the div with scrollToBottomRef on it below
                   the map of messages, so that users are forced to scroll to the bottom.
-                  If you are using streaming, you will want to take a different approach; 
+                  If you are using streaming, you will want to take a different approach;
                   see: https://github.com/patternfly/chatbot/issues/201#issuecomment-2400725173 */}
                   {messages.map((message, index) => {
                     if (index === messages.length - 1) {