@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.20

package/src/Message/Message.tsx

@@ -1,9 +1,8 @@
 // ============================================================================
 // Chatbot Main - Message
 // ============================================================================
-
-import React, { ReactNode } from 'react';
-
+import { forwardRef, ReactNode, useEffect, useState } from 'react';
+import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
@@ -12,6 +11,8 @@ import {
   AvatarProps,
   ButtonProps,
   ContentVariants,
+  ExpandableSectionProps,
+  ExpandableSectionToggleProps,
   FormProps,
   Label,
   LabelGroupProps,
@@ -47,6 +48,7 @@ import { PluggableList } from 'react-markdown/lib';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
+import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -78,7 +80,7 @@ export interface MessageExtraContent {
   endContent?: ReactNode;
 }
 
-export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
+export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   /** Unique id for message */
   id?: string;
   /** Role of the user sending the message */
@@ -107,9 +109,24 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   botWord?: string;
   /** Label for the English "Loading message," displayed to screenreaders when loading a message */
   loadingWord?: string;
+  /** Props for code blocks */
   codeBlockProps?: {
+    /** Aria label applied to code blocks */
     'aria-label'?: string;
+    /** Class name applied to code blocks */
     className?: string;
+    /** Whether code blocks are expandable */
+    isExpandable?: boolean;
+    /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
+    maxLength?: number;
+    /** Additional props passed to expandable section if isExpandable is applied */
+    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+    /** Additional props passed to expandable toggle if isExpandable is applied */
+    expandableSectionToggleProps?: ExpandableSectionToggleProps;
+    /** Link text applied to expandable toggle when expanded */
+    expandedText?: string;
+    /** Link text applied to expandable toggle when collapsed */
+    collapsedText?: string;
   };
   /** Props for quick responses */
   quickResponses?: QuickResponse[];
@@ -139,7 +156,7 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   /** 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>;
+  innerRef?: 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;
   /** Additional rehype plugins passed from the consumer */
@@ -159,14 +176,16 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   /** Label for the English word "Cancel" used in edit mode. */
   cancelWord?: string;
   /** Callback function for when edit mode update button is clicked */
-  onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Callback functionf or when edit cancel update button is clicked */
-  onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Props for edit form */
   editFormProps?: FormProps;
+  /** Sets message to compact styling. */
+  isCompact?: boolean;
 }
 
-export const MessageBase: React.FunctionComponent<MessageProps> = ({
+export const MessageBase: FunctionComponent<MessageProps> = ({
   role,
   content,
   extraContent,
@@ -201,16 +220,17 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   onEditUpdate,
   onEditCancel,
   editFormProps,
+  isCompact,
   ...props
 }: MessageProps) => {
-  const [messageText, setMessageText] = React.useState(content);
+  const [messageText, setMessageText] = useState(content);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setMessageText(content);
   }, [content]);
 
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages];
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs];
   if (openLinkInNewTab) {
     rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
   }
@@ -240,9 +260,9 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
             editPlaceholder={editPlaceholder}
             updateWord={updateWord}
             cancelWord={cancelWord}
-            onEditUpdate={(event, text) => {
+            onEditUpdate={(event: ReactMouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {
               onEditUpdate && onEditUpdate(event);
-              setMessageText(text);
+              setMessageText(value);
             }}
             onEditCancel={onEditCancel}
             {...editFormProps}
@@ -336,7 +356,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,15 +366,19 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                 prerequisiteWord={quickStarts.prerequisiteWord}
                 prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
                 quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+                isCompact={isCompact}
               />
             )}
             {!isLoading && actions && <ResponseActions actions={actions} />}
-            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} />}
-            {userFeedbackComplete && <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} />}
+            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
+            {userFeedbackComplete && (
+              <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
+            )}
             {!isLoading && quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
                 quickResponseContainerProps={quickResponseContainerProps}
+                isCompact={isCompact}
               />
             )}
           </div>
@@ -383,7 +407,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   );
 };
 
-const Message = React.forwardRef((props: MessageProps, ref: React.Ref<HTMLDivElement>) => (
+const Message = forwardRef((props: MessageProps, ref: Ref<HTMLDivElement>) => (
   <MessageBase innerRef={ref} {...props} />
 ));
 

package/src/Message/MessageInput.tsx

@@ -1,8 +1,8 @@
 // ============================================================================
 // Chatbot Main - Message Input
 // ============================================================================
-
-import React from 'react';
+import type { FormEvent, FunctionComponent } from 'react';
+import { useState } from 'react';
 import { ActionGroup, Button, Form, FormProps, TextArea } from '@patternfly/react-core';
 
 export interface MessageInputProps extends FormProps {
@@ -20,7 +20,7 @@ export interface MessageInputProps extends FormProps {
   content?: string;
 }
 
-const MessageInput: React.FunctionComponent<MessageInputProps> = ({
+const MessageInput: FunctionComponent<MessageInputProps> = ({
   editPlaceholder = 'Edit prompt message...',
   updateWord = 'Update',
   cancelWord = 'Cancel',
@@ -29,9 +29,9 @@ const MessageInput: React.FunctionComponent<MessageInputProps> = ({
   content,
   ...props
 }: MessageInputProps) => {
-  const [messageText, setMessageText] = React.useState(content ?? '');
+  const [messageText, setMessageText] = useState(content ?? '');
 
-  const onChange = (event: React.FormEvent<HTMLTextAreaElement>, value: string) => {
+  const onChange = (_event: FormEvent<HTMLTextAreaElement>, value: string) => {
     setMessageText(value);
   };
 

package/src/Message/MessageLoading.tsx

@@ -2,8 +2,6 @@
 // Chatbot Main - Message - Processing
 // ============================================================================
 
-import React from 'react';
-
 const MessageLoading = ({ loadingWord }) => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">

package/src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts

@@ -0,0 +1,53 @@
+import { visit } from 'unist-util-visit';
+import { Element } from 'hast';
+import { Node } from 'unist';
+
+// Rehype plugin to remove images from within p tags and put them as separate block-level elements.
+// This allows us to avoid having a blue background on images - this is something Kayla requested.
+export const rehypeMoveImagesOutOfParagraphs = () => (tree: Node) => {
+  const nodesToRemove: { parent: Element; index: number; node: Element }[] = [];
+
+  visit(tree, 'element', (node: Element, index: number | null, parent: Element | null) => {
+    if (node.tagName === 'p' && node.children) {
+      const imagesInParagraph: { node: Element; index: number }[] = [];
+
+      node.children.forEach((child: Node, childIndex: number) => {
+        if (child.type === 'element' && (child as Element).tagName === 'img') {
+          imagesInParagraph.push({ node: child as Element, index: childIndex });
+        }
+      });
+
+      if (imagesInParagraph.length > 0 && parent && index !== null) {
+        imagesInParagraph.forEach(({ node: imgNode, index: imgIndex }) => {
+          nodesToRemove.push({ parent: node, index: imgIndex, node: imgNode });
+        });
+
+        // To avoid issues with index shifting during removal, we process in reverse
+        for (let i = nodesToRemove.length - 1; i >= 0; i--) {
+          const { parent: pTag, index: imgIndexToRemove } = nodesToRemove[i];
+          if (pTag.children) {
+            pTag.children.splice(imgIndexToRemove, 1);
+          }
+        }
+
+        // Insert the removed images after the paragraph
+        const paragraphIndexInParent = parent.children.indexOf(node);
+        if (paragraphIndexInParent !== -1) {
+          imagesInParagraph.forEach(({ node: imgNode }) => {
+            parent.children.splice(paragraphIndexInParent + 1, 0, imgNode);
+          });
+        }
+
+        // Remove paragraph if it's now empty after image removal
+        if (node.children.length === 0) {
+          const paragraphIndexInParent = parent.children.indexOf(node);
+          if (paragraphIndexInParent !== -1) {
+            parent.children.splice(paragraphIndexInParent, 1);
+          }
+        }
+
+        nodesToRemove.length = 0;
+      }
+    }
+  });
+};

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
 
@@ -15,14 +16,17 @@ 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> = ({
+export const QuickResponse: FunctionComponent<QuickResponseProps> = ({
   quickResponses,
   quickResponseContainerProps = { numLabels: 5 },
-  onSelect
+  onSelect,
+  isCompact
 }: QuickResponseProps) => {
-  const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
+  const [selectedQuickResponse, setSelectedQuickResponse] = useState<string>();
 
   const handleQuickResponseClick = (id: string, onClick?: () => void) => {
     setSelectedQuickResponse(id);
@@ -42,6 +46,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}

package/src/Message/QuickStarts/FallbackImg.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import type { FC } from 'react';
+import { useState } from 'react';
 
 interface FallbackImgProps {
   /** Image source */
@@ -11,8 +12,8 @@ interface FallbackImgProps {
   fallback?: React.ReactNode;
 }
 
-const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
-  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+const FallbackImg: FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = useState<boolean>(true);
 
   if (src && isSrcValid) {
     return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;

package/src/Message/QuickStarts/QuickStartTile.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { FC, ReactNode } from 'react';
 import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
 import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
 import {
@@ -49,9 +49,11 @@ 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> = ({
+const QuickStartTile: FC<QuickStartTileProps> = ({
   className,
   quickStart,
   onClick,
@@ -61,14 +63,15 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   prerequisiteWord,
   prerequisiteWordPlural,
   quickStartButtonAriaLabel,
-  action
+  action,
+  isCompact
 }) => {
   const {
     metadata: { name: id },
     spec: { icon, displayName, description, durationMinutes, prerequisites, link, type }
   } = quickStart;
 
-  let quickStartIcon: React.ReactNode;
+  let quickStartIcon: ReactNode;
   if (typeof icon === 'object') {
     quickStartIcon = <Icon size="2xl">{icon}</Icon>;
   } else {
@@ -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 && {

package/src/Message/QuickStarts/QuickStartTileDescription.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/Message/QuickStarts/QuickStartTileDescription.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import type { FC } from 'react';
+import { useRef } from 'react';
 import { Button, Flex, pluralize, Popover } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
@@ -29,7 +30,7 @@ export function pluralizeWord(i: number, singular: string, plural?: string) {
   return `${i === 1 ? singular : plural}`;
 }
 
-const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
+const QuickStartTileDescription: FC<QuickStartTileDescriptionProps> = ({
   description,
   prerequisites,
   prerequisiteWord = 'Prerequisite',
@@ -37,7 +38,7 @@ const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
   quickStartButtonAriaLabel = 'Show prerequisites'
 }) => {
   const prereqs = prerequisites?.filter((p) => p);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const pluralizedPrereq = pluralizeWord(prereqs?.length || 0, prerequisiteWord, prerequisiteWordPlural);
   return (
     <>

package/src/Message/QuickStarts/QuickStartTileHeader.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Button, Flex } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
 
 interface QuickStartTileHeaderProps {
   /** Name for the header */
@@ -10,7 +10,7 @@ interface QuickStartTileHeaderProps {
   onSelect: (e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>) => void;
 }
 
-const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({ name, quickStartId, onSelect }) => (
+const QuickStartTileHeader: FunctionComponent<QuickStartTileHeaderProps> = ({ name, quickStartId, onSelect }) => (
   <Flex flexWrap={{ default: 'nowrap' }}>
     <Button data-test="title" id={quickStartId} variant="link" isInline onClick={onSelect}>
       {name}

package/src/Message/QuickStarts/types.ts

@@ -1,4 +1,5 @@
 import { ButtonProps } from '@patternfly/react-core';
+import type { ComponentType, ReactNode, SyntheticEvent } from 'react';
 
 // These types are all from the QuickStart extension.
 // We want to ensure parity, so be careful when adjusting these.
@@ -77,9 +78,9 @@ 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>;
+  icon?: ComponentType<unknown>;
   /** Callback with synthetic event parameter. */
-  onClick?: (e: React.SyntheticEvent) => void;
+  onClick?: (e: SyntheticEvent) => void;
   /** Additional button props to be rendered as extra props. */
   buttonProps?: ButtonProps;
 }
@@ -95,7 +96,7 @@ export interface QuickStartSpec {
   version?: number;
   displayName: string;
   durationMinutes?: number;
-  icon: React.ReactNode;
+  icon: ReactNode;
   description: string;
   prerequisites?: string[];
   introduction?: string;

package/src/Message/TableMessage/TableMessage.tsx

@@ -2,7 +2,7 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Table, TableProps } from '@patternfly/react-table';
 
@@ -19,7 +19,7 @@ export interface TableNode {
   type: string;
 }
 
-const TableMessage = ({ children, ...props }: TableProps & ExtraProps) => {
+const TableMessage = ({ children, ...props }: Omit<TableProps, 'ref'> & ExtraProps) => {
   const { className, ...rest } = props;
 
   // This allows us to parse the nested data we get back from the 3rd party Markdown parser
@@ -53,9 +53,9 @@ const TableMessage = ({ children, ...props }: TableProps & ExtraProps) => {
   // This is somewhat opinionated and may break if 3rd party library changes
   // See Tr and Tbody for other usage
   const modifyChildren = (children) =>
-    React.Children.map(children, (child) => {
+    Children.map(children, (child) => {
       if (child && headerTextValues?.length > 0) {
-        return React.cloneElement(child, { extraHeaders: headerTextValues });
+        return cloneElement(child, { extraHeaders: headerTextValues });
       }
       return child;
     });

package/src/Message/TableMessage/TbodyMessage.tsx

@@ -2,15 +2,15 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Tbody, TbodyProps } from '@patternfly/react-table';
 
-const TbodyProps = ({ children, ...props }: TbodyProps & ExtraProps & { extraHeaders?: string[] }) => {
+const TbodyProps = ({ children, ...props }: Omit<TbodyProps, 'ref'> & ExtraProps & { extraHeaders?: string[] }) => {
   // passthrough so we can place dataLabel on tds
   const modifyChildren = (children) => {
     if (children && props.extraHeaders) {
-      return React.Children.map(children, (child) => React.cloneElement(child, { extraHeaders: props.extraHeaders }));
+      return Children.map(children, (child) => cloneElement(child, { extraHeaders: props.extraHeaders }));
     }
     return children;
   };

package/src/Message/TableMessage/TdMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Td, TdProps } from '@patternfly/react-table';
 
-const TdMessage = ({ children, ...props }: TdProps & ExtraProps) => <Td {...props}>{children}</Td>;
+const TdMessage = ({ children, ...props }: Omit<TdProps, 'ref'> & ExtraProps) => <Td {...props}>{children}</Td>;
 
 export default TdMessage;

package/src/Message/TableMessage/ThMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Th, ThProps } from '@patternfly/react-table';
 
-const ThMessage = ({ children, ...props }: ThProps & ExtraProps) => <Th {...props}>{children}</Th>;
+const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => <Th {...props}>{children}</Th>;
 
 export default ThMessage;

package/src/Message/TableMessage/TheadMessage.tsx

@@ -2,10 +2,11 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Thead, TheadProps } from '@patternfly/react-table';
 
-const TheadMessage = ({ children, ...props }: TheadProps & ExtraProps) => <Thead {...props}>{children}</Thead>;
+const TheadMessage = ({ children, ...props }: Omit<TheadProps, 'ref'> & ExtraProps) => (
+  <Thead {...props}>{children}</Thead>
+);
 
 export default TheadMessage;

package/src/Message/TableMessage/TrMessage.tsx

@@ -2,19 +2,19 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Tr, TrProps } from '@patternfly/react-table';
 
-const TrMessage = ({ children, ...props }: TrProps & ExtraProps & { extraHeaders?: string[] }) => {
+const TrMessage = ({ children, ...props }: Omit<TrProps, 'ref'> & ExtraProps & { extraHeaders?: string[] }) => {
   let tdIndex = 0;
 
   // passthrough so we can place dataLabel on tds
   // places column name on correct child
   const modifyChildren = (children) =>
-    React.Children.map(children, (child) => {
+    Children.map(children, (child) => {
       if (child.type.name === 'td' && props.extraHeaders) {
-        const clonedChild = React.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
+        const clonedChild = cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
         tdIndex = tdIndex + 1;
         return clonedChild;
       }

package/src/Message/TextMessage/TextMessage.scss

@@ -58,3 +58,28 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot.pf-m-compact {
+  // Need to inline shorter text
+  .pf-chatbot__message-text {
+    .pf-v6-c-button.pf-m-link {
+      font-size: var(--pf-t--global--font--size--sm);
+    }
+
+    .pf-v6-c-content,
+    .pf-v6-c-content--small,
+    .pf-v6-c-content--blockquote,
+    p,
+    a {
+      --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--sm);
+    }
+
+    .pf-v6-c-content--blockquote {
+      --pf-v6-c-content--blockquote--PaddingBlockStart: 0;
+      --pf-v6-c-content--blockquote--PaddingBlockEnd: 0;
+    }
+  }
+}

package/src/Message/TextMessage/TextMessage.tsx

@@ -2,11 +2,10 @@
 // Chatbot Main - Message - Content - Text
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Content, ContentProps } from '@patternfly/react-core';
 
-const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
+const TextMessage = ({ component, children, ...props }: Omit<ContentProps, 'ref'> & ExtraProps) => (
   <span className="pf-chatbot__message-text">
     <Content component={component} {...props}>
       {children}

package/src/Message/UserFeedback/CloseButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Messages - Close Button
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps } from '@patternfly/react-core';
@@ -14,7 +14,7 @@ export interface CloseButtonProps extends ButtonProps {
   ariaLabel?: string;
 }
 
-const CloseButton: React.FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
+const CloseButton: FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
   <Button variant="plain" onClick={onClose} icon={<CloseIcon />} aria-label={ariaLabel} />
 );
 

package/src/Message/UserFeedback/UserFeedback.scss

@@ -11,6 +11,7 @@
   flex-direction: column;
   gap: var(--pf-t--global--spacer--lg);
   align-items: center;
+  text-align: center;
 }
 .pf-chatbot__feedback-complete-text {
   display: flex;
@@ -26,9 +27,6 @@
   align-items: center;
   justify-content: center;
 }
-.pf-chatbot__feedback-complete-body {
-  text-align: center;
-}
 .pf-chatbot__feedback-complete-title {
   font-family: var(--pf-t--global--font--family--heading);
   font-size: var(--pf-t--global--font--size--lg);
@@ -51,3 +49,26 @@
 .pf-chatbot__feedback-card-optional {
   font-weight: initial;
 }
+
+// Compact styles
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
+  .pf-chatbot__feedback-card-form.pf-m-compact {
+    --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
+  }
+}
+
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete {
+  div.pf-chatbot__feedback-complete-body {
+    gap: var(--pf-t--global--spacer--sm);
+  }
+
+  .pf-chatbot__feedback-complete-image {
+    width: 40px;
+  }
+
+  .pf-chatbot__feedback-card-complete-empty-header {
+    .pf-v6-c-card__header:first-child {
+      --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+    }
+  }
+}