@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0-prerelease.9

package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts

@@ -0,0 +1,30 @@
+export declare const monitorSampleAppQuickStartWithImage: {
+    apiVersion: string;
+    kind: string;
+    metadata: {
+        name: string;
+    };
+    spec: {
+        icon: string;
+        version: number;
+        displayName: string;
+        durationMinutes: number;
+        description: string;
+        prerequisites: string[];
+        introduction: string;
+        tasks: {
+            title: string;
+            description: string;
+            review: {
+                instructions: string;
+                failedTaskHelp: string;
+            };
+            summary: {
+                success: string;
+                failed: string;
+            };
+        }[];
+        conclusion: string;
+        nextQuickStart: string[];
+    };
+};

package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js

@@ -0,0 +1,74 @@
+export const monitorSampleAppQuickStartWithImage = {
+    apiVersion: 'console.openshift.io/v1',
+    kind: 'QuickStarts',
+    metadata: {
+        name: 'monitor-sampleapp'
+    },
+    spec: {
+        icon: 'test.png', // this is only difference
+        version: 4.7,
+        displayName: 'Monitoring your sample application',
+        durationMinutes: 10,
+        description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`,
+        prerequisites: [`You completed the "Getting started with a sample" quick start.`],
+        introduction: `### This quick start shows you how to monitor your sample application.
+You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`,
+        tasks: [
+            {
+                title: `Viewing the monitoring details of your sample application`,
+                description: `### To view the details of your sample application:
+1. Go to the project your sample application was created in.
+2. In the **</> Developer** perspective, go to **Topology** view.
+3. Click on the **nodejs-sample** deployment to view its details.
+4. Click on the **Monitoring** tab in the side panel.
+You can see context sensitive metrics and alerts in the **Monitoring** tab.`,
+                review: {
+                    instructions: `#### To verify you can view the monitoring information:
+1. Do you see a **Metrics** accordion in the side panel?
+2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion?
+3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how you can monitor your sample app!`,
+                    failed: `Try the steps again.`
+                }
+            },
+            {
+                title: `Viewing your project monitoring dashboard`,
+                description: `### To view the project monitoring dashboard in the context of **nodejs-sample**:
+1. Click on the **View monitoring dashboard** link in the side panel.
+2. You can change the **Time Range** and **Refresh Interval** of the dashboard.
+3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`,
+                review: {
+                    instructions: `#### To verify that you are able to view the monitoring dashboard:
+Do you see metrics charts in the dashboard?`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how to view the dashboard in the context of your sample app!`,
+                    failed: `Try the steps again.`
+                }
+            },
+            {
+                title: `Viewing custom metrics`,
+                description: `### To view custom metrics:
+1. Click on the **Metrics** tab of the **Monitoring** page.
+2. Click the **Select Query** drop-down list to see the available queries.
+3. Click on **Filesystem Usage** from the list to run the query.`,
+                review: {
+                    instructions: `#### Verify you can see the chart associated with the query:
+Do you see a chart displayed with filesystem usage for your project?  Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL.
+`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how to run a query!`,
+                    failed: `Try the steps again.`
+                }
+            }
+        ],
+        conclusion: `You have learned how to access workload monitoring and metrics!`,
+        nextQuickStart: [``]
+    }
+};

package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts

@@ -0,0 +1,30 @@
+export declare const monitorSampleAppQuickStart: {
+    apiVersion: string;
+    kind: string;
+    metadata: {
+        name: string;
+    };
+    spec: {
+        version: number;
+        displayName: string;
+        durationMinutes: number;
+        icon: string;
+        description: string;
+        prerequisites: string[];
+        introduction: string;
+        tasks: {
+            title: string;
+            description: string;
+            review: {
+                instructions: string;
+                failedTaskHelp: string;
+            };
+            summary: {
+                success: string;
+                failed: string;
+            };
+        }[];
+        conclusion: string;
+        nextQuickStart: string[];
+    };
+};

package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.js

@@ -0,0 +1,74 @@
+export const monitorSampleAppQuickStart = {
+    apiVersion: 'console.openshift.io/v1',
+    kind: 'QuickStarts',
+    metadata: {
+        name: 'monitor-sampleapp'
+    },
+    spec: {
+        version: 4.7,
+        displayName: 'Monitoring your sample application',
+        durationMinutes: 10,
+        icon: '',
+        description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`,
+        prerequisites: [`You completed the "Getting started with a sample" quick start.`],
+        introduction: `### This quick start shows you how to monitor your sample application.
+You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`,
+        tasks: [
+            {
+                title: `Viewing the monitoring details of your sample application`,
+                description: `### To view the details of your sample application:
+1. Go to the project your sample application was created in.
+2. In the **</> Developer** perspective, go to **Topology** view.
+3. Click on the **nodejs-sample** deployment to view its details.
+4. Click on the **Monitoring** tab in the side panel.
+You can see context sensitive metrics and alerts in the **Monitoring** tab.`,
+                review: {
+                    instructions: `#### To verify you can view the monitoring information:
+1. Do you see a **Metrics** accordion in the side panel?
+2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion?
+3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how you can monitor your sample app!`,
+                    failed: `Try the steps again.`
+                }
+            },
+            {
+                title: `Viewing your project monitoring dashboard`,
+                description: `### To view the project monitoring dashboard in the context of **nodejs-sample**:
+1. Click on the **View monitoring dashboard** link in the side panel.
+2. You can change the **Time Range** and **Refresh Interval** of the dashboard.
+3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`,
+                review: {
+                    instructions: `#### To verify that you are able to view the monitoring dashboard:
+Do you see metrics charts in the dashboard?`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how to view the dashboard in the context of your sample app!`,
+                    failed: `Try the steps again.`
+                }
+            },
+            {
+                title: `Viewing custom metrics`,
+                description: `### To view custom metrics:
+1. Click on the **Metrics** tab of the **Monitoring** page.
+2. Click the **Select Query** drop-down list to see the available queries.
+3. Click on **Filesystem Usage** from the list to run the query.`,
+                review: {
+                    instructions: `#### Verify you can see the chart associated with the query:
+Do you see a chart displayed with filesystem usage for your project?  Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL.
+`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how to run a query!`,
+                    failed: `Try the steps again.`
+                }
+            }
+        ],
+        conclusion: `You have learned how to access workload monitoring and metrics!`,
+        nextQuickStart: [``]
+    }
+};

package/dist/esm/Message/QuickStarts/types.d.ts

@@ -0,0 +1,132 @@
+import { ButtonProps } from '@patternfly/react-core';
+export interface AccessReviewResourceAttributes {
+    group?: string;
+    resource?: string;
+    subresource?: string;
+    verb?: K8sVerb;
+    name?: string;
+    namespace?: string;
+}
+export type K8sVerb = 'create' | 'get' | 'list' | 'update' | 'patch' | 'delete' | 'deletecollection' | 'watch';
+export interface QuickStart {
+    apiVersion?: string;
+    kind?: string;
+    metadata: ObjectMetadata;
+    spec: QuickStartSpec;
+}
+export interface ObjectMetadata {
+    name: string;
+    annotations?: {
+        [key: string]: string;
+    };
+    clusterName?: string;
+    creationTimestamp?: string;
+    deletionGracePeriodSeconds?: number;
+    deletionTimestamp?: string;
+    finalizers?: string[];
+    generateName?: string;
+    generation?: number;
+    labels?: {
+        [key: string]: string;
+    };
+    managedFields?: any[];
+    namespace?: string;
+    ownerReferences?: OwnerReference[];
+    resourceVersion?: string;
+    uid?: string;
+    language?: string;
+    country?: string;
+    locale?: string;
+    [key: string]: any;
+}
+export interface OwnerReference {
+    name: string;
+    kind: string;
+    uid: string;
+    apiVersion: string;
+    controller?: boolean;
+    blockOwnerDeletion?: boolean;
+}
+export interface QuickStartTask {
+    title?: string;
+    description?: string;
+    review?: QuickStartTaskReview;
+    summary?: QuickStartTaskSummary;
+    proc?: string;
+}
+export interface QuickStartTaskReview {
+    instructions?: string;
+    failedTaskHelp?: string;
+}
+export interface QuickStartTaskSummary {
+    success?: string;
+    failed?: string;
+}
+export interface QuickstartAction {
+    /** Screen reader aria label. */
+    'aria-label': string;
+    /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
+    icon?: React.ComponentType<unknown>;
+    /** Callback with synthetic event parameter. */
+    onClick?: (e: React.SyntheticEvent) => void;
+    /** Additional button props to be rendered as extra props. */
+    buttonProps?: ButtonProps;
+}
+export interface QuickStart {
+    apiVersion?: string;
+    kind?: string;
+    metadata: ObjectMetadata;
+    spec: QuickStartSpec;
+}
+export interface QuickStartSpec {
+    version?: number;
+    displayName: string;
+    durationMinutes?: number;
+    icon: React.ReactNode;
+    description: string;
+    prerequisites?: string[];
+    introduction?: string;
+    tasks?: QuickStartTask[];
+    conclusion?: string;
+    nextQuickStart?: string[];
+    accessReviewResources?: AccessReviewResourceAttributes[];
+    link?: QuickStartExternal;
+    type?: QuickStartType;
+}
+export interface QuickStartTask {
+    title?: string;
+    description?: string;
+    review?: QuickStartTaskReview;
+    summary?: QuickStartTaskSummary;
+    proc?: string;
+}
+export interface QuickStartTaskReview {
+    instructions?: string;
+    failedTaskHelp?: string;
+}
+export interface QuickStartTaskSummary {
+    success?: string;
+    failed?: string;
+}
+export type AllQuickStartStates = Record<string, QuickStartState>;
+export type QuickStartState = Record<string, string | number | QuickStartStatus>;
+export declare enum QuickStartStatus {
+    COMPLETE = "Complete",
+    IN_PROGRESS = "In Progress",
+    NOT_STARTED = "Not started"
+}
+export declare enum QuickStartTaskStatus {
+    INIT = "Initial",
+    VISITED = "Visited",
+    REVIEW = "Review",
+    SUCCESS = "Success",
+    FAILED = "Failed"
+}
+export interface QuickStartExternal {
+    href: string;
+    text?: string;
+}
+export interface QuickStartType {
+    text: string;
+    color?: 'green' | 'purple' | 'grey' | 'blue' | 'orange' | 'red' | 'teal' | 'orangered' | 'yellow';
+}

package/dist/esm/Message/QuickStarts/types.js

@@ -0,0 +1,14 @@
+export var QuickStartStatus;
+(function (QuickStartStatus) {
+    QuickStartStatus["COMPLETE"] = "Complete";
+    QuickStartStatus["IN_PROGRESS"] = "In Progress";
+    QuickStartStatus["NOT_STARTED"] = "Not started";
+})(QuickStartStatus || (QuickStartStatus = {}));
+export var QuickStartTaskStatus;
+(function (QuickStartTaskStatus) {
+    QuickStartTaskStatus["INIT"] = "Initial";
+    QuickStartTaskStatus["VISITED"] = "Visited";
+    QuickStartTaskStatus["REVIEW"] = "Review";
+    QuickStartTaskStatus["SUCCESS"] = "Success";
+    QuickStartTaskStatus["FAILED"] = "Failed";
+})(QuickStartTaskStatus || (QuickStartTaskStatus = {}));

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/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.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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.8",
+  "version": "2.2.0-prerelease.9",
   "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",
@@ -36,10 +36,8 @@
     "@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",
     "path-browserify": "^1.0.1"
   },
@@ -54,12 +52,8 @@
     "@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/examples/Messages/MessageWithQuickStart.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
+import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
+import { QuickStart } from '@patternfly/chatbot/dist/esm/Message/QuickStarts/types';
+
+export const MessageWithQuickStartExample: React.FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Text-based bot message with a quick start tile."
+      quickStarts={{
+        quickStart: explorePipelinesQuickStart as QuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Text-based bot message with a quick start tile that includes prerequisites and a default icon."
+      quickStarts={{
+        quickStart: monitorSampleAppQuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+    />
+  </>
+);

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

@@ -39,7 +39,8 @@ import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel'
 import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
 import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
-
+import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
+import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
 import userAvatar from './user_avatar.svg';
 import squareImg from './PF-social-color-square.svg';
 
@@ -116,6 +117,16 @@ The API for a source requires a link at minimum, but we strongly recommend provi
 
 ```
 
+### Messages with quick start tiles
+
+[Quick start](/extensions/quick-starts/) tiles can be added to messages via the `quickStarts` prop. Users can initiate the quick start from a link within the message tile.
+
+The quick start tile displayed below the message is based on the tile included in the [PatternFly quick starts extension](https://github.com/patternfly/patternfly-quickstarts), but with slightly more limited functionality. For example, it does not track the state of the extension. However, it supports an additional `onSelectQuickStart` prop, so that the name of the quick start can be captured on click. This can be used to trigger other behavior in your application, such as launching that quick start in your main UI.
+
+```js file="./MessageWithQuickStart.tsx"
+
+```
+
 ### User messages
 
 Messages from users have a different background color to differentiate them from bot messages. You can also display a custom avatar that is uploaded by the user. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`.

package/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts

@@ -0,0 +1,65 @@
+import userAvatar from './user_avatar.svg';
+
+export const explorePipelinesQuickStart = {
+  apiVersion: 'console.openshift.io/v1',
+  kind: 'QuickStarts',
+  metadata: {
+    name: 'explore-pipelines'
+  },
+  spec: {
+    version: 4.7,
+    displayName: `Installing the Pipelines Operator`,
+    durationMinutes: 10,
+    icon: userAvatar,
+    description: `Install the OpenShift® Pipelines Operator to build Pipelines using Tekton.`,
+    prerequisites: [''],
+    introduction: `OpenShift® Pipelines is a cloud-native, continuous integration and continuous delivery (CI/CD) solution based on Kubernetes resources. It uses Tekton building blocks to automate deployments across multiple Kubernetes distributions by abstracting away the underlying implementation details.
+* OpenShift Pipelines is a serverless CI/CD system that runs pipelines with all the required dependencies in isolated containers.
+* They are designed for decentralized teams that work on a microservice-based architecture.
+* They are defined using standard Custom Resource Definitions making them extensible and easy to integrate with the existing Kubernetes tools. This enables you to scale on-demand.
+* You can use OpenShift Pipelines to build images with Kubernetes tools such as Source-to-Image (S2I), Buildah, Buildpacks, and Kaniko that are portable across any Kubernetes platform.
+* You can use the Developer perspective to create and manage pipelines and view logs in your namespaces.
+
+To start using Pipelines, install the OpenShift® Pipelines Operator on your cluster.`,
+    tasks: [
+      {
+        title: `Installing the OpenShift Pipelines Operator`,
+        description: `### To install the OpenShift Pipelines Operator:
+
+1. From the **Administrator** perspective in the console navigation panel, click **Operators > OperatorHub**.
+2. In the **Filter by keyword** field, type \`OpenShift Pipelines Operator\`.
+3. If the tile has an Installed label, the Operator is already installed. Proceed to the next quick start to create a Pipeline.
+4. Click the **tile** to open the Operator details.
+5. At the top of the OpenShift Pipelines Operator panel that opens, click **Install**.
+6. Fill out the Operator subscription form by selecting the channel that matches your OpenShift cluster, and then click **Install**.
+7. On the **Installed Operators** page, wait for the OpenShift Pipelines Operator's status to change from **Installing** to **Succeeded**. `,
+        review: {
+          instructions: `#### To verify that the OpenShift Pipelines Operator is installed:
+1. From the **Operators** section of the navigation, go to the **Installed Operators** page.
+2. Verify that the **OpenShift Pipelines Operator** appears in the list of Operators.
+
+In the status column, is the status of the OpenShift Pipelines Operator **Succeeded**?`,
+          failedTaskHelp: `This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/pipelines/installing-pipelines.html#op-installing-pipelines-operator-in-web-console_installing-pipelines) about this topic.`
+        },
+        summary: {
+          success: `You have installed the Pipelines Operator!`,
+          failed: `Try the steps again.`
+        }
+      }
+    ],
+    conclusion: `You successfully installed the OpenShift Pipelines Operator! If you want to learn how to deploy an application and associate a Pipeline with it, take the Creating a Pipeline quick start.`,
+    nextQuickStart: [`install-app-and-associate-pipeline`],
+    accessReviewResources: [
+      {
+        group: 'operators.coreos.com',
+        resource: 'operatorgroups',
+        verb: 'list'
+      },
+      {
+        group: 'packages.operators.coreos.com',
+        resource: 'packagemanifests',
+        verb: 'list'
+      }
+    ]
+  }
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle';
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 
 export const SquareChatbotToggle: React.FunctionComponent = () => {
   const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);

package/src/Message/Message.test.tsx

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Message from './Message';
 import userEvent from '@testing-library/user-event';
+import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
+import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
 
 const ALL_ACTIONS = [
   { label: /Good response/i },
@@ -437,4 +439,56 @@ describe('Message', () => {
     expect(screen.getByRole('img')).toHaveClass('test');
     expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
   });
+  it('should handle QuickStart tile correctly', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => alert(id)
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy();
+  });
+  it('should handle click on QuickStart tile correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name);
+  });
+  it('should handle QuickStart tile with image correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStartWithImage,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
+  });
 });