feat(Message): Add compact sources, quick starts, and quick responses

Added isCompact prop used to control information density in Sources cards, Quick Starts tiles, and quick response labels.

Author: rebeccaalpert

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

@@ -50,5 +50,29 @@ export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
         { id: '2', content: 'No', onClick: () => alert('Clicked no') }
       ]}
     />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Welcome back, User! How can I help you today?"
+      quickResponses={[
+        { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
+        { id: '2', content: 'Show my critical vulnerabilities', onClick: () => alert('Clicked id 2') },
+        { id: '3', content: 'Create new integrations', onClick: () => alert('Clicked id 3') },
+        { id: '4', content: 'Get recommendations from an advisor', onClick: () => alert('Clicked id 4') },
+        { id: '5', content: 'Something else', onClick: () => alert('Clicked id 5') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Example with compact responses"
+      quickResponses={[
+        { id: '1', content: 'Yes', onClick: () => alert('Clicked id 1') },
+        { id: '2', content: 'No', onClick: () => alert('Clicked id 2') }
+      ]}
+      isCompact
+    />
   </>
 );

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

@@ -27,5 +27,16 @@ export const MessageWithQuickStartExample: React.FunctionComponent = () => (
         onSelectQuickStart: (id) => alert(id)
       }}
     />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This quick start tile is compact"
+      quickStarts={{
+        quickStart: monitorSampleAppQuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+      isCompact
+    />
   </>
 );

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

@@ -150,6 +150,27 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
           onSetPage
         }}
       />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This example displays a compact sources card"
+        sources={{
+          sources: [
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            }
+          ],
+          onSetPage
+        }}
+        isCompact
+      />
     </>
   );
 };

packages/module/src/Message/Message.tsx

@@ -164,6 +164,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Props for edit form */
   editFormProps?: FormProps;
+  /** Sets message to compact styling. */
+  isCompact?: boolean;
 }
 
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -201,6 +203,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   onEditUpdate,
   onEditCancel,
   editFormProps,
+  isCompact,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = React.useState(content);
@@ -336,7 +339,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
           <div className="pf-chatbot__message-and-actions">
             {renderMessage()}
             {afterMainContent && <>{afterMainContent}</>}
-            {!isLoading && sources && <SourcesCard {...sources} />}
+            {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
             {quickStarts && quickStarts.quickStart && (
               <QuickStartTile
                 quickStart={quickStarts.quickStart}
@@ -346,6 +349,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                 prerequisiteWord={quickStarts.prerequisiteWord}
                 prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
                 quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+                isCompact={isCompact}
               />
             )}
             {!isLoading && actions && <ResponseActions actions={actions} />}
@@ -355,6 +359,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
               <QuickResponse
                 quickResponses={quickResponses}
                 quickResponseContainerProps={quickResponseContainerProps}
+                isCompact={isCompact}
               />
             )}
           </div>

packages/module/src/Message/QuickResponse/QuickResponse.tsx

@@ -15,12 +15,15 @@ export interface QuickResponseProps {
   quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
   /** Callback when a response is clicked; used in feedback cards */
   onSelect?: (id: string) => void;
+  /** Sets the quick responses to compact styling */
+  isCompact?: boolean;
 }
 
 export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
   quickResponses,
   quickResponseContainerProps = { numLabels: 5 },
-  onSelect
+  onSelect,
+  isCompact
 }: QuickResponseProps) => {
   const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
 
@@ -42,6 +45,7 @@ export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
           key={id}
           onClick={() => handleQuickResponseClick(id, onClick)}
           className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
+          isCompact={isCompact}
           {...props}
         >
           {content}

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

@@ -49,6 +49,8 @@ export interface QuickStartTileProps {
   prerequisiteWordPlural?: string;
   /** Aria-label for the quick start description button */
   quickStartButtonAriaLabel?: string;
+  /** Sets the tile to compact styling */
+  isCompact?: boolean;
 }
 
 const QuickStartTile: React.FC<QuickStartTileProps> = ({
@@ -61,7 +63,8 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   prerequisiteWord,
   prerequisiteWordPlural,
   quickStartButtonAriaLabel,
-  action
+  action,
+  isCompact
 }) => {
   const {
     metadata: { name: id },
@@ -105,6 +108,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
       id={`${id}-chatbot-qs-tile`}
       style={{ height: '100%' }}
       data-testid={`chatbot-qs-card-${camelize(displayName)}`}
+      isCompact={isCompact}
     >
       <CardHeader
         {...(action && {

packages/module/src/SourcesCard/SourcesCard.scss

@@ -74,3 +74,11 @@
     }
   }
 }
+
+.pf-v6-c-card.pf-m-compact.pf-chatbot__sources-card {
+  .pf-v6-c-card__footer.pf-chatbot__sources-card-footer-container {
+    border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs)
+      var(--pf-t--global--spacer--xs) !important;
+  }
+}

packages/module/src/SourcesCard/SourcesCard.tsx

@@ -71,6 +71,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   onSetPage,
   showMoreWords = 'show more',
   showLessWords = 'show less',
+  isCompact,
   ...props
 }: SourcesCardProps) => {
   const [page, setPage] = React.useState(1);
@@ -95,7 +96,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   return (
     <div className="pf-chatbot__source">
       <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
-      <Card className="pf-chatbot__sources-card" {...props}>
+      <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title">
           <Button
             component="a"