@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.21

package/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -36,15 +36,15 @@
       justify-content: space-between;
       width: 100%;
       font-size: var(--pf-t--global--font--size--sm);
-      font-weight: 500;
+      font-weight: var(--pf-t--global--font--weight--body--bold);
     }
 
     .pf-chatbot__button--copy.pf-v6-c-button {
-      color: var(--pf-t--color--white);
+      color: var(--pf-t--color--white); // same in light + dark theme
 
       &:hover,
       &:focus {
-        color: var(--pf-t--color--white);
+        color: var(--pf-t--color--white); // same in light + dark theme
       }
     }
   }
@@ -77,6 +77,6 @@
 }
 
 .pf-chatbot__message-inline-code {
-  background-color: var(--pf-t--chatbot--code--background);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }

package/src/Message/ListMessage/ListMessage.scss

@@ -5,8 +5,8 @@
 .pf-chatbot__message-ordered-list,
 .pf-chatbot__message-unordered-list {
   width: fit-content;
-  padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
 
   .pf-v6-c-list,
   ul,
@@ -18,8 +18,8 @@
 .pf-chatbot__message--user {
   .pf-chatbot__message-ordered-list,
   .pf-chatbot__message-unordered-list {
-    background-color: var(--pf-t--chatbot-message--type--background--color--primary);
-    color: var(--pf-t--chatbot-message--type--text--color--primary);
-    padding: var(--pf-t--chatbot-message--type--padding);
+    background-color: var(--pf-t--global--color--brand--default);
+    color: var(--pf-t--global--text--color--on-brand--default);
+    padding: var(--pf-t--global--spacer--sm);
   }
 }

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
 
-const OrderedListMessage = ({ children }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
+const OrderedListMessage = ({ children, start }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
   <div className="pf-chatbot__message-ordered-list">
-    <List component={ListComponent.ol} type={OrderType.number}>
+    <List component={ListComponent.ol} type={OrderType.number} start={start}>
       {children}
     </List>
   </div>

package/src/Message/Message.scss

@@ -2,14 +2,6 @@
 // Chatbot Message
 // ============================================================================
 .pf-chatbot__message {
-  --pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--tertiary--default);
-  --pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
-  --pf-t--chatbot-message--type--padding: var(--pf-t--global--spacer--sm);
-  --pf-t--chatbot-message--type--text--color--default: var(--pf-t--global--text--color--regular);
-  --pf-t--chatbot-message--type--text--color--primary: var(--pf-t--global--text--color--inverse);
-  --pf-t--chatbot-message--type--border--radius: var(--pf-t--global--border--radius--small);
-  --pf-t--chatbot-message--meta--label--color: var(--pf-t--global--border--color--on-secondary);
-
   display: flex;
   align-items: flex-start;
   gap: var(--pf-t--global--spacer--lg);
@@ -63,12 +55,12 @@
 
     // Badge
     .pf-v6-c-label {
-      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--chatbot-message--meta--label--color);
+      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
       --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
-      font-weight: 500;
+      font-weight: var(--pf-t--global--font--weight--body--bold);
 
       .pf-v6-c-label__content {
-        --pf-v6-c-label--Color: var(--pf-t--chatbot-message--meta--label--color);
+        --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
       }
     }
 
@@ -88,27 +80,13 @@
     flex-direction: column;
     align-items: flex-start;
     gap: var(--pf-t--global--font--size--sm);
-    color: var(--pf-t--chatbot-message--type--text--color--default);
+    color: var(--pf-t--global--text--color--regular);
   }
 
   &-and-actions {
     display: grid;
     gap: var(--pf-t--global--spacer--sm);
   }
-
-  &-quick-response {
-    .pf-v6-c-label {
-      --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
-
-      @media screen and (min-width: 401px) and (max-width: 600px) {
-        --pf-v6-c-label__text--MaxWidth: 20ch;
-      }
-
-      @media screen and (max-width: 400px) {
-        --pf-v6-c-label__text--MaxWidth: 15ch;
-      }
-    }
-  }
 }
 
 // Attachments

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 },
@@ -53,6 +55,89 @@ spec:
 
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
 
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
+
+const HEADING = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+
+const BLOCK_QUOTES = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+const TABLE = `
+
+ | Column 1 | Column 2 |
+ |-|-|
+ | Cell 1 | Cell 2 |
+ | Cell 3 | Cell 4 |
+
+ `;
+
+const ONE_COLUMN_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+ | Cell 2 |
+
+ `;
+
+const ONE_CELL_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+
+ `;
+
+const HEADERLESS_TABLE = `
+
+ | |
+ |-|
+ | Cell 1 | 
+
+ `;
+
+const CHILDLESS_TABLE = `
+
+ | Column 1 |
+ |-|
+ | | 
+
+ `;
+
+const EMPTY_TABLE = `
+
+ | |
+ |-|
+ | | 
+
+ `;
+
 const checkListItemsRendered = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -344,6 +429,12 @@ describe('Message', () => {
     expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
     checkListItemsRendered();
   });
+  it('should render ordered lists correctly if there is interstitial content', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ORDERED_LIST_WITH_CODE} />);
+    checkListItemsRendered();
+    const list = screen.getAllByRole('list')[1];
+    expect(list).toHaveAttribute('start', '3');
+  });
   it('should render inline code', () => {
     render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
     expect(screen.getByText(/() => void/i)).toBeTruthy();
@@ -353,13 +444,17 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
     expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
     expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-    expect(screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
+    expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
     expect(screen.getByText(/metadata:/i)).toBeTruthy();
-    expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+    expect(screen.getByText(/name:/i)).toBeTruthy();
+    expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
     expect(screen.getByText(/spec/i)).toBeTruthy();
     expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
+    expect(screen.getByText(/url:/i)).toBeTruthy();
     expect(
-      screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
+      screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
     ).toBeTruthy();
   });
   it('can click copy code button', async () => {
@@ -415,4 +510,121 @@ 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');
+  });
+  it('should handle block quote correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={BLOCK_QUOTES} />);
+    expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
+    expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
+    expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
+  });
+  it('should handle heading correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={HEADING} />);
+    expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
+  });
+  it('should render table correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={TABLE} />);
+    expect(screen.getByRole('row', { name: /Column 1 Column 2/i })).toBeTruthy();
+    expect(screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toBeTruthy();
+    expect(screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 3/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 4/i })).toBeTruthy();
+  });
+  it('should render table data labels correctly for mobile breakpoint', () => {
+    render(<Message avatar="./img" role="user" name="User" content={TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+    expect(screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 2');
+    expect(screen.getByRole('cell', { name: /Cell 3/i })).toHaveAttribute('data-label', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 4/i })).toHaveAttribute('data-label', 'Column 2');
+  });
+  it('should render table data labels correctly for mobile breakpoint for one column table', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ONE_COLUMN_TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+    expect(screen.getByRole('row', { name: /Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 1');
+  });
+  it('should render table data labels correctly for mobile breakpoint for one cell table', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ONE_CELL_TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+  });
+  it('should render table data labels correctly for mobile breakpoint for headerless', () => {
+    render(<Message avatar="./img" role="user" name="User" content={HEADERLESS_TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', '');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).not.toHaveAttribute('data-label');
+  });
+  it('should render table data labels correctly for mobile breakpoint for childless', () => {
+    render(<Message avatar="./img" role="user" name="User" content={CHILDLESS_TABLE} />);
+    expect(screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', 'Column 1');
+  });
+  it('should render table data labels correctly for mobile breakpoint for empty', () => {
+    render(<Message avatar="./img" role="user" name="User" content={EMPTY_TABLE} />);
+    expect(screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', '');
+  });
+  it('should render custom table aria label correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={TABLE} tableProps={{ 'aria-label': 'Test' }} />);
+    expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
+  });
 });

package/src/Message/Message.tsx

@@ -9,10 +9,9 @@ import remarkGfm from 'remark-gfm';
 import {
   Avatar,
   AvatarProps,
+  ContentVariants,
   Label,
-  LabelGroup,
   LabelGroupProps,
-  LabelProps,
   Timestamp,
   Truncate
 } from '@patternfly/react-core';
@@ -25,12 +24,19 @@ import SourcesCard, { SourcesCardProps } from '../SourcesCard';
 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';
+import QuickResponse from './QuickResponse/QuickResponse';
+import UserFeedback, { UserFeedbackProps } from './UserFeedback/UserFeedback';
+import UserFeedbackComplete, { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
+import TableMessage from './TableMessage/TableMessage';
+import TrMessage from './TableMessage/TrMessage';
+import TdMessage from './TableMessage/TdMessage';
+import TbodyMessage from './TableMessage/TbodyMessage';
+import TheadMessage from './TableMessage/TheadMessage';
+import ThMessage from './TableMessage/ThMessage';
+import { TableProps } from '@patternfly/react-table';
 
-export interface QuickResponse extends Omit<LabelProps, 'children'> {
-  content: string;
-  id: string;
-  onClick: () => void;
-}
 export interface MessageAttachment {
   /** Name of file attached to the message */
   name: string;
@@ -85,13 +91,36 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   quickResponses?: QuickResponse[];
   /** Props for quick responses container */
   quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Props for user feedback card */
+  userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
+  /** Props for user feedback response */
+  userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
   /** Whether avatar is round */
   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?: string) => void;
+    minuteWord?: string;
+    minuteWordPlural?: string;
+    prerequisiteWord?: string;
+    prerequisiteWordPlural?: string;
+    quickStartButtonAriaLabel?: string;
+    className?: string;
+    onClick?: () => void;
+    action?: QuickstartAction;
+  };
+  /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
+  isLiveRegion?: boolean;
+  /** Ref applied to message  */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
+  tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
 }
 
-export const Message: React.FunctionComponent<MessageProps> = ({
+export const MessageBase: React.FunctionComponent<MessageProps> = ({
   role,
   content,
   name,
@@ -108,6 +137,12 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   attachments,
   hasRoundAvatar = true,
   avatarProps,
+  quickStarts,
+  userFeedbackForm,
+  userFeedbackComplete,
+  isLiveRegion = true,
+  innerRef,
+  tableProps,
   ...props
 }: MessageProps) => {
   let avatarClassName;
@@ -123,6 +158,9 @@ export const Message: React.FunctionComponent<MessageProps> = ({
     <section
       aria-label={`Message from ${role} - ${dateString}`}
       className={`pf-chatbot__message pf-chatbot__message--${role}`}
+      aria-live={isLiveRegion ? 'polite' : undefined}
+      aria-atomic={isLiveRegion ? false : undefined}
+      ref={innerRef}
       {...props}
     >
       {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
@@ -153,11 +191,33 @@ export const Message: React.FunctionComponent<MessageProps> = ({
             ) : (
               <Markdown
                 components={{
-                  p: TextMessage,
-                  code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
-                  ul: UnorderedListMessage,
-                  ol: OrderedListMessage,
-                  li: ListItemMessage
+                  p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+                  code: ({ children, ...props }) => (
+                    <CodeBlockMessage {...props} {...codeBlockProps}>
+                      {children}
+                    </CodeBlockMessage>
+                  ),
+                  h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+                  h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+                  h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+                  h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+                  h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+                  h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+                  blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+                  ul: (props) => <UnorderedListMessage {...props} />,
+                  ol: (props) => <OrderedListMessage {...props} />,
+                  li: (props) => <ListItemMessage {...props} />,
+                  table: (props) => <TableMessage {...props} {...tableProps} />,
+                  tbody: (props) => <TbodyMessage {...props} />,
+                  thead: (props) => <TheadMessage {...props} />,
+                  tr: (props) => <TrMessage {...props} />,
+                  td: (props) => {
+                    // Conflicts with Td type
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { width, ...rest } = props;
+                    return <TdMessage {...rest} />;
+                  },
+                  th: (props) => <ThMessage {...props} />
                 }}
                 remarkPlugins={[remarkGfm]}
               >
@@ -165,18 +225,25 @@ export const Message: React.FunctionComponent<MessageProps> = ({
               </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} />}
+            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} />}
+            {userFeedbackComplete && <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} />}
             {!isLoading && quickResponses && (
-              <LabelGroup
-                className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className}`}
-                {...quickResponseContainerProps}
-              >
-                {quickResponses.map(({ id, onClick, content, ...props }: QuickResponse) => (
-                  <Label variant="outline" color="blue" key={id} onClick={onClick} {...props}>
-                    {content}
-                  </Label>
-                ))}
-              </LabelGroup>
+              <QuickResponse
+                quickResponses={quickResponses}
+                quickResponseContainerProps={quickResponseContainerProps}
+              />
             )}
           </div>
           {attachments && (
@@ -203,4 +270,8 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   );
 };
 
+const Message = React.forwardRef((props: MessageProps, ref: React.Ref<HTMLDivElement>) => (
+  <MessageBase innerRef={ref} {...props} />
+));
+
 export default Message;

package/src/Message/MessageLoading.scss

@@ -3,9 +3,9 @@
 // ============================================================================
 .pf-chatbot__message-loading {
   width: 36px;
-  padding: var(--pf-t--chatbot-message--type--padding);
+  padding: var(--pf-t--global--spacer--sm);
   background-color: var(--pf-t--global--background--color--tertiary--default);
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  border-radius: var(--pf-t--global--border--radius--small);
 
   &-dots {
     position: relative;

package/src/Message/QuickResponse/QuickResponse.scss

@@ -0,0 +1,33 @@
+.pf-chatbot__message-quick-response {
+  .pf-v6-c-label {
+    --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+
+    @media screen and (min-width: 401px) and (max-width: 600px) {
+      --pf-v6-c-label__text--MaxWidth: 20ch;
+    }
+
+    @media screen and (max-width: 400px) {
+      --pf-v6-c-label__text--MaxWidth: 15ch;
+    }
+  }
+
+  .pf-chatbot__message-quick-response--selected {
+    .pf-v6-c-label__content:is(:hover, :focus) {
+      --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+      --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    }
+  }
+
+  .pf-chatbot__message-quick-response--selected:hover,
+  .pf-chatbot__message-quick-response--selected:focus {
+    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+  }
+
+  // active state right before selection
+  .pf-v6-c-label.pf-m-blue.pf-m-clickable .pf-v6-c-label__content:is(:active) {
+    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+  }
+}

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import { CheckIcon } from '@patternfly/react-icons';
+
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+  content: string;
+  id: string;
+  onClick?: () => void;
+}
+
+export interface QuickResponseProps {
+  /** Props for quick responses */
+  quickResponses: QuickResponse[];
+  /** Props for quick responses container */
+  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Callback when a response is clicked; used in feedback cards */
+  onSelect?: (id: string) => void;
+}
+
+export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
+  quickResponses,
+  quickResponseContainerProps = { numLabels: 5 },
+  onSelect
+}: QuickResponseProps) => {
+  const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
+
+  const handleQuickResponseClick = (id: string, onClick?: () => void) => {
+    setSelectedQuickResponse(id);
+    onClick && onClick();
+    onSelect && onSelect(id);
+  };
+  return (
+    <LabelGroup
+      className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className}`}
+      {...quickResponseContainerProps}
+    >
+      {quickResponses.map(({ id, onClick, content, className, ...props }: QuickResponse) => (
+        <Label
+          variant={id === selectedQuickResponse ? undefined : 'outline'}
+          icon={id === selectedQuickResponse ? <CheckIcon /> : undefined}
+          color="blue"
+          key={id}
+          onClick={() => handleQuickResponseClick(id, onClick)}
+          className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
+          {...props}
+        >
+          {content}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};
+
+export default QuickResponse;