Add quickStarts tile

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -2,6 +2,8 @@ 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 { explorePipelinesQuickStart } from './quickStart.ts';
+import { monitorSampleAppQuickStart } from './quickStart2.ts';
 
 export const BotMessageExample: React.FunctionComponent = () => {
   const markdown = `
@@ -90,6 +92,26 @@ export default MessageLoading;
         content="Text-based message from a bot with a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
         hasRoundAvatar={false}
       />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="Text-based message from a bot with QuickStart tile."
+        quickStarts={{
+          quickStart: explorePipelinesQuickStart,
+          onSelectQuickStart: (id) => alert(id)
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="Text-based message from a bot with QuickStart tile that includes prerequisites and a default icon."
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => alert(id)
+        }}
+      />
     </>
   );
 };

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

@@ -39,6 +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 './quickStart.ts';
+import { monitorSampleAppQuickStart } from './quickStart2.ts';
 
 import userAvatar from './user_avatar.svg';
 import squareImg from './PF-social-color-square.svg';

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/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'
+      }
+    ]
+  }
+};

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/quickStart2.ts

@@ -0,0 +1,75 @@
+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: [``]
+  }
+};

packages/module/src/Message/Message.tsx

@@ -25,6 +25,8 @@
 import ListItemMessage from './ListMessage/ListItemMessage';
 import UnorderedListMessage from './ListMessage/UnorderedListMessage';
 import OrderedListMessage from './ListMessage/OrderedListMessage';
+import QuickStartTile from './QuickStarts/QuickStartTile';
+import { QuickStart, QuickstartAction } from './QuickStarts/types';
 
 export interface QuickResponse extends Omit<LabelProps, 'children'> {
   content: string;
@@ -89,6 +91,19 @@
   hasRoundAvatar?: boolean;
   /** Any additional props applied to the avatar, for additional customization  */
   avatarProps?: Omit<AvatarProps, 'alt'>;
+  /** Props for QuickStart card */
+  quickStarts?: {
+    quickStart: QuickStart;
+    onSelectQuickStart: (id: any) => void;
+    minuteWord?: string;
+    minuteWordPlural?: string;
+    prerequisiteWord?: string;
+    prerequisiteWordPlural?: string;
+    quickStartButtonAriaLabel?: string;
+    className?: string;
+    onClick?: () => void;
+    action?: QuickstartAction;
+  };
 }
 
 export const Message: React.FunctionComponent<MessageProps> = ({
@@ -108,6 +123,7 @@
   attachments,
   hasRoundAvatar = true,
   avatarProps,
+  quickStarts,
   ...props
 }: MessageProps) => {
   let avatarClassName;
@@ -165,6 +181,17 @@
               </Markdown>
             )}
             {!isLoading && sources && <SourcesCard {...sources} />}
+            {quickStarts && quickStarts.quickStart && (
+              <QuickStartTile
+                quickStart={quickStarts.quickStart}
+                onSelectQuickStart={quickStarts.onSelectQuickStart}
+                minuteWord={quickStarts.minuteWord}
+                minuteWordPlural={quickStarts.minuteWordPlural}
+                prerequisiteWord={quickStarts.prerequisiteWord}
+                prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
+                quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+              />
+            )}
             {!isLoading && actions && <ResponseActions actions={actions} />}
             {!isLoading && quickResponses && (
               <LabelGroup

packages/module/src/Message/QuickStarts/FallbackImg.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface FallbackImgProps {
+  /** Image source */
+  src: string;
+  /** Alt text for image */
+  alt?: string;
+  /** ClassName applied to image */
+  className?: string;
+  /** Fallback */
+  fallback?: React.ReactNode;
+}
+
+const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+
+  if (src && isSrcValid) {
+    return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;
+  }
+
+  return <>{fallback}</>;
+};
+
+export default FallbackImg;

packages/module/src/Message/QuickStarts/QuickStartTile.scss

@@ -0,0 +1,17 @@
+.pf-chatbot__quickstarts-tile {
+  // some icons provided to catalog tiles might have no defined height/width. Without this style, in those cases
+  // the icons would have a height and width of 0.
+  .pf-v6-c-card__header-main {
+    .pf-v6-c-icon__content {
+      display: contents;
+    }
+  }
+}
+
+.pf-v6-theme-dark {
+  .pf-chatbot__quickstarts-tile {
+    .pfext-catalog-item-icon__img {
+      filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
+    }
+  }
+}