@patternfly/chatbot 2.2.0-prerelease.9 → 2.2.0

package/dist/esm/tracking/posthog_tracking_provider.js

@@ -0,0 +1,33 @@
+import { posthog } from 'posthog-js';
+export class PosthogTrackingProvider {
+    getKey() {
+        return 'posthogKey';
+    }
+    initialize(props) {
+        // eslint-disable-next-line no-console
+        console.log('PosthogProvider initialize');
+        const posthogKey = props.posthogKey;
+        posthog.init(posthogKey, {
+            // eslint-disable-next-line camelcase
+            api_host: 'https://us.i.posthog.com',
+            // eslint-disable-next-line camelcase
+            person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
+        });
+    }
+    identify(userID) {
+        // eslint-disable-next-line no-console
+        console.log('PosthogProvider userID: ' + userID);
+        posthog.identify(userID);
+    }
+    trackPageView(url) {
+        // eslint-disable-next-line no-console
+        console.log('PostHogProvider url', url);
+        // TODO posthog seems to record that automatically.
+        //  How to not clash with this here? Just leave as no-op?
+    }
+    trackSingleItem(item, properties) {
+        // eslint-disable-next-line no-console
+        console.log('PosthogProvider: trackSingleItem' + item, properties);
+        posthog.capture(item, { properties });
+    }
+}

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

@@ -0,0 +1,10 @@
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+import { InitProps, TrackingSpi } from './tracking_spi';
+export declare class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
+    private analytics;
+    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/segment_tracking_provider.js

@@ -0,0 +1,46 @@
+import { AnalyticsBrowser } from '@segment/analytics-next';
+export class SegmentTrackingProvider {
+    getKey() {
+        return 'segmentKey';
+    }
+    initialize(props) {
+        // eslint-disable-next-line no-console
+        console.log('SegmentProvider initialize');
+        const segmentKey = props.segmentKey;
+        // We need to create an object here, as ts lint is unhappy otherwise
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const integrations = props.segmentIntegrations;
+        this.analytics = AnalyticsBrowser.load({
+            writeKey: segmentKey,
+            cdnURL: props.segmentCdn
+        }, {
+            integrations: Object.assign({}, integrations)
+        });
+    }
+    identify(userID) {
+        // eslint-disable-next-line no-console
+        console.log('SegmentProvider userID: ' + userID);
+        if (this.analytics) {
+            this.analytics.identify(userID);
+        }
+    }
+    trackPageView(url) {
+        // eslint-disable-next-line no-console
+        console.log('SegmentProvider url', url);
+        if (this.analytics) {
+            if (url) {
+                this.analytics.page(url);
+            }
+            else {
+                this.analytics.page(); // Uses window.url
+            }
+        }
+    }
+    trackSingleItem(item, properties) {
+        // eslint-disable-next-line no-console
+        console.log('SegmentProvider: trackSingleItem' + item, properties);
+        if (this.analytics) {
+            this.analytics.track(item, { properties });
+        }
+    }
+}

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

@@ -0,0 +1,9 @@
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+declare class TrackingProviderProxy implements TrackingApi {
+    providers: TrackingApi[];
+    constructor(providers: TrackingApi[]);
+    identify(userID: string): void;
+    trackSingleItem(eventName: string, properties?: TrackingEventProperties): void;
+    trackPageView(url: string | undefined): void;
+}
+export default TrackingProviderProxy;

package/dist/esm/tracking/trackingProviderProxy.js

@@ -0,0 +1,22 @@
+class TrackingProviderProxy {
+    constructor(providers) {
+        this.providers = [];
+        this.providers = providers;
+    }
+    identify(userID) {
+        for (const provider of this.providers) {
+            provider.identify(userID);
+        }
+    }
+    trackSingleItem(eventName, properties) {
+        for (const provider of this.providers) {
+            provider.trackSingleItem(eventName, properties);
+        }
+    }
+    trackPageView(url) {
+        for (const provider of this.providers) {
+            provider.trackPageView(url);
+        }
+    }
+}
+export default TrackingProviderProxy;

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

@@ -0,0 +1,8 @@
+export interface TrackingEventProperties {
+    [key: string]: string | number | boolean | undefined;
+}
+export interface TrackingApi {
+    identify: (userID: string) => void;
+    trackPageView: (url: string | undefined) => void;
+    trackSingleItem: (eventName: string, properties: TrackingEventProperties | undefined) => void;
+}

package/dist/esm/tracking/tracking_api.js

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

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

@@ -0,0 +1,4 @@
+import { InitProps } from './tracking_spi';
+import { TrackingApi } from './tracking_api';
+export declare const getTrackingProviders: (initProps: InitProps) => TrackingApi;
+export default getTrackingProviders;

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/ChatbotHeaderCloseButton.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/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/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.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts"],"version":"5.6.3"}
+{"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.9",
+  "version": "2.2.0",
   "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",
@@ -34,11 +34,17 @@
     "@patternfly/react-core": "^6.1.0",
     "@patternfly/react-code-editor": "^6.1.0",
     "@patternfly/react-icons": "^6.1.0",
+    "@patternfly/react-table": "^6.1.0",
+    "@segment/analytics-next": "^1.76.0",
+    "posthog-js": "^1.194.4",
     "clsx": "^2.1.0",
     "framer-motion": "^11.3.28",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "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": {
@@ -46,10 +52,9 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.5.0",
+    "@patternfly/documentation-framework": "6.5.20",
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/patternfly-a11y": "^5.0.0",
-    "@patternfly/react-table": "^6.1.0",
     "@types/dom-speech-recognition": "^0.0.4",
     "@types/react": "^18.2.61",
     "react": "^18.2.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,7 +8,7 @@ source: design-guidelines
 
 import "./images.css"
 
-## Elements
+## Elements 
 
 <div class="ws-docs-content-img">
 ![Main elements of a ChatBot.](./img/chatbot-elements.svg)
@@ -16,8 +16,8 @@ import "./images.css"
 
 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. **History menu:** A menu that contains a conversation history of previous chats.
+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,8 +37,88 @@ 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.
+1. **Message 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. More details for the feedback actions can be found in the [message feedback](#message-feedback) section.
+
+#### Welcome message
+
+At the start of a new chat, you should welcome your users to the ChatBot with a greeting.
+
+If you have user details from their account information, you can personalize this greeting with their username or name. If you don't have this information, or if you'd prefer to not use their personal details, you should instead introduce the ChatBot: 
+
+<div class="ws-docs-content-img">
+![Welcome messages.](./img/welcome-message.svg)
+</div>
+
+To help users get started quickly, it can also be helpful to include welcome prompts. When selected, these prompts will become the user's first message to the ChatBot, which the bot will immediately begin to reply to. To avoid overloading your users, present no more than 3 prompts at a time.
+
+<div class="ws-docs-content-img">
+![Welcome message with prompts.](./img/welcome-elements.svg)
+</div>
+
+#### 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>
+
+Selecting the quick start title, or the "Start" link can be configured to launch the quick start in a new window, as an interactive bot conversation within the ChatBot window, or as a separate tab within the ChatBot drawer (as shown in this [quick start/ChatBot concept demo](https://quickstart-chatbot-demo.surge.sh/?quickstart=install-app-and-associate-pipeline)).
+
+### Message actions 
+
+To allow users to interact with bot messages, utilize message actions. Refer to [the message actions React example](/patternfly-ai/chatbot/messages#message-actions) for an interactive visual.
+
+The following actions can be used for some of the most common interactions:
+
+<div class="ws-docs-content-img">
+![Default message response actions.](./img/message-responses.svg)
+</div>
+
+1. **Feedback (good response):** Applies a positive rating to the message.
+1. **Feedback (bad response):** Applies a negative rating to the message.
+1. **Copy:** Copies the message content to the clipboard.
+1. **Listen:** Reads the message content out loud.
+
+You can also use [custom message actions](/patternfly-ai/chatbot/messages#custom-message-actions) as needed for your particular use case. When using custom actions, be sure to add a tooltip that describes the effect that the action will have. For more information, view [our tooltips guidelines](/ux-writing/tooltips). 
+
+#### Message feedback
+
+A commonly used message response action is rating, which allows users to give feedback on the quality or helpfulness of a bot message. These actions include a thumbs-up icon, for a positive rating, and a thumbs-down icon, for a negative one:
+
+<div class="ws-docs-content-img">
+![A pointer clicking on an action button for a bot message.](./img/message-feedback.svg)
+</div>
+
+When users select either of these icons, you should present them with either:
+
+1. A thank-you card that confirms a user's response was received. Even if you don't use a feedback form, you should still display the thank-you card, so that users can be confident their rating went through.
+<br />
+<br />
+    <div class="ws-docs-content-img" style="width:75%">
+    ![A card displayed beneath a bot message which communicates that feedback was successfully received.](./img/thank-you-card.svg)
+    </div>
+1. A feedback form that collects more details.
+<br />
+<br />
+    <div class="ws-docs-content-img" style="width:75%">
+    ![A form beneath a bot message asking for more details about a user's feedback.](./img/feedback-form.svg)
+    </div>
+
+    1. **Close button (optional):** Closes the feedback form. The original feedback response should still be collected.
+    1. **Quick responses:** Options for users to provide more context around their rating. Customize these to make the most sense for your product. You can present positive and negative options based on the response type originally selected.
+    1. **Text area (optional):** Allows users to provide additional written detail if they'd like.
+    1. **Submit button:** Submits the feedback form and triggers the   thank-you card.
 
 ### Message bar
 
@@ -52,10 +132,10 @@ To message the ChatBot, users can type directly into the message bar in the foot
 1. **Use microphone button:** Supports speech recognition to allow users to use voice input. This feature is currently only available in Chrome and Safari.
 1. **Send button:** Allows users to send a typed message. This button should be disabled until a user has input text.
 
-When a user chooses to use speech input via the microphone button, the button will display an animation to indicate that the ChatBot is listening to the user (as shown in [this speech recognition example](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)).
+When a user chooses to use speech input via the microphone button, the button will display a pulsing animation to indicate that the ChatBot is listening to the user (as shown in [this speech recognition example](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)).
 
 <div class="ws-docs-content-img">
-![Active listening button in the message bar.](./img/listening.svg)
+![Animation phases of the listening button in the message bar.](./img/listening-pulse.svg)
 </div>
 
 When a bot is responding (or "streaming") to the user, a stop button will be displayed as the only action in the message bar. Selecting this button will halt the bot's message where it's at.
@@ -114,7 +194,20 @@ Do not use a ChatBot when:
 
 ### Accessing a ChatBot
 
-Users can enter a conversation with a ChatBot by clicking on the toggle. Once the ChatBot window opens, the toggle will change to display an "angle down" icon to indicate that clicking the toggle again will minimize the ChatBot. Users can select the toggle at any point in their journey to open and close the ChatBot as needed.
+The ChatBot toggle is the access point for users&mdash;place it in either of the following UI locations: 
+- **Floating toggle:** Consistently located in the bottom-right corner of the screen, this persistent button overlays other page content. Use if a masthead toggle would overcomplicate a masthead that already has many utilities.
+- **Masthead toggle:** A button that's integrated as a masthead utility. Use this location if a floating toggle would obscure important content.
+
+To help users further identify the toggle, add a "Launch ChatBot" tooltip. You can swap "ChatBot" in the tooltip for your bot's unique name.
+
+<div class="ws-docs-content-img">
+![Tooltips for ChatBot toggle.](./img/toggle-tooltips.svg)
+</div>
+
+Whichever method you choose, it is critical to be consistent with the toggle location and refer to the following the additional guidelines for each. 
+
+#### Floating toggle
+When users click the toggle, the ChatBot window opens and the toggle will change to display an "angle down" icon to indicate that clicking the toggle again will minimize the ChatBot. Users can select the toggle at any point in their journey to open and close the ChatBot as needed.
 
 <div class="ws-docs-content-img">
 ![2 toggles with open and closed icons.](./img/chatbot-toggle.svg)
@@ -126,16 +219,84 @@ When there is an unread message from the ChatBot, a notification badge should be
 ![Toggle with notification badge.](./img/chatbot-toggle-notification.svg)
 </div>
 
-### Using the navigation menu
+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>
 
-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.
+#### Masthead toggle 
 
-By clicking into the navigation menu, users can search through previous conversations and perform additional actions, such as sharing a conversation with others.
+When the ChatBot toggle is a masthead utility, use the fa-comments icon:
+
+<div class="ws-docs-content-img">
+![ChatBot toggle in a masthead.](./img/masthead-toggle.svg)
+</div>
+
+The exception to this is if you have a specific icon that aligns with your product or ChatBot branding.
+
+When there is an unread message from the ChatBot, a notification count should be displayed, and the badge should be styled as unread.
+
+<div class="ws-docs-content-img">
+![ChatBot toggle in a masthead with a notification count.](./img/masthead-toggle-notification.svg)
+</div>
+
+### Launching a ChatBot from page content
+
+If a UI element within the page content is an AI/ChatBot-supported feature, the ChatBot should be launched when users select the clearly-identified action. These kinds of actions should display your ChatBot's logo beside a label that clearly communicates the intention of the AI action.
+
+<div class="ws-docs-content-img">
+![Menu item for an AI action that launches a ChatBot.](./img/ai-action-inpage.svg)
+</div>
+
+When a ChatBot is launches via an AI-supported action, the action should be sent as a user message once the ChatBot opens.  
+
+<div class="ws-docs-content-img">
+![User message in ChatBot for an AI action command.](./img/ai-action-message.svg)
+</div>
+
+### Starting a new conversation 
+
+Each time a user begins a new conversation, display a [welcome message, with prompts](#welcome-message) that help them learn what the ChatBot can help with.
+
+As much as possible, the suggested prompts should consider the user’s location in the service or application, or the situation their project is undergoing. 
+
+### Using the conversation history menu
+
+The ChatBot history menu contains a log of a users' previous chats. Clicking the menu icon opens a side drawer in the ChatBot window.
+
+By clicking into the history menu, users can search through previous conversations and perform additional actions, such as sharing a conversation with others.
 
 <div class="ws-docs-content-img">
 ![Conversation history with an options menu opened on a previous conversation.](./img/conversation-history.svg)
 </div>
 
+When the conversation history is still loading, display skeleton items:
+
+<div class="ws-docs-content-img">
+![Chat history items loading.](./img/loading-state.svg)
+</div>
+
+If there's an error loading the conversation history, display an error screen with steps for resolving the error:
+
+<div class="ws-docs-content-img">
+![Error state in chat history.](./img/error-state.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.
@@ -185,28 +346,44 @@ There are a few display modes that users can choose when interacting with a Chat
 ![ChatBot in overlay mode.](./img/overlay.svg)
 </div>
 
-2. **Docked:** Anchors the ChatBot to the side of the page content. When docked, the ChatBot window is persistent, and cannot be toggled.
+2. **Docked:** Anchors the ChatBot to the side of the page, on top of the page content. 
 
 <div class="ws-docs-content-img">
 ![ChatBot in docked mode.](./img/docked.svg)
 </div>
 
-3. **Full screen:** Fills the screen with the ChatBot window.
+3. **Embedded:** Places the ChatBot within a product as its own page. An embedded ChatBot could be displayed in the product's navigation menu.
+
+<div class="ws-docs-content-img">
+![ChatBot embedded in a product.](./img/embedded.svg)
+</div>
+
+4. **Full screen:** Fills the screen with the ChatBot window.
 
 <div class="ws-docs-content-img">
 ![ChatBot in full-screen mode.](./img/fullscreen.svg)
 </div>
 
-4. **Embedded:** Places the ChatBot within a product as its own page. An embedded ChatBot could be displayed in the product's navigation menu.
+5. **Inline drawer**: A ChatBot that can fit and perform within a drawer. This drawer can look different for each product, but will often be placed to the side of the page, inline with the page content.
 
 <div class="ws-docs-content-img">
-![ChatBot embedded in a product.](./img/embedded.svg)
+![ChatBot in drawer mode.](./img/drawer.svg)
+</div>
+
+### Layouts
+
+ChatBot supports a side-by-side [comparison layout](/patternfly-ai/chatbot/overview/demo#comparing-chatbots), which allows users to compare 2 chats at once. This can be helpful to let users understand how different models respond to the same prompt.
+
+<div class="ws-docs-content-img">
+![2 ChatBots in comparison mode.](./img/comparison.svg)
 </div>
 
 ## Placement
 
 Your users will expect your ChatBot to be in a reliable, permanent location. Overlay displays are placed in the bottom right of the screen by default. If you're using a full screen or embedded ChatBot, stick to a consistent access location, like a button in the masthead or an item in the navigation menu.
 
+Refer to the additional guidelines for [accessing a ChatBot](#accessing-a-chatbot).
+
 ## Content considerations
 
 For guidance on writing ChatBot content, refer to our [conversation design guidelines](/patternfly-ai/conversation-design).