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

package/src/ImagePreview/ImagePreview.test.tsx

@@ -0,0 +1,253 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ImagePreview from './ImagePreview';
+import { ChatbotDisplayMode } from '../Chatbot';
+
+const mockImages = [
+  {
+    fileName: 'image1.jpg',
+    fileSize: '2.5 MB',
+    image: <img src="" alt="Test image 1" />
+  },
+  {
+    fileName: 'image2.png',
+    fileSize: '1.8 MB',
+    image: <img src="" alt="Test image 2" />
+  },
+  {
+    fileName: 'image3.gif',
+    image: <img src="" alt="Test image 3" />
+  }
+];
+
+const defaultProps = {
+  isModalOpen: true,
+  handleModalToggle: jest.fn(),
+  images: mockImages
+};
+
+describe('ImagePreview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders modal when isModalOpen is true', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('does not render modal when isModalOpen is false', () => {
+    render(<ImagePreview {...defaultProps} isModalOpen={false} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('displays custom title when provided', () => {
+    const customTitle = 'Custom image preview';
+    render(<ImagePreview {...defaultProps} title={customTitle} />);
+    expect(screen.getByRole('heading', { name: customTitle })).toBeInTheDocument();
+  });
+
+  it('displays default title when no title provided', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByRole('heading', { name: /Preview images/i })).toBeInTheDocument();
+  });
+
+  it('calls handleModalToggle when modal is closed', () => {
+    const mockHandleToggle = jest.fn();
+    render(<ImagePreview {...defaultProps} handleModalToggle={mockHandleToggle} />);
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+    expect(mockHandleToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays first image by default', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByText('image1.jpg')).toBeInTheDocument();
+    expect(screen.getByText('2.5 MB')).toBeInTheDocument();
+    expect(screen.getByAltText('Test image 1')).toBeInTheDocument();
+  });
+
+  it('displays page counter correctly', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByText('1/3')).toBeInTheDocument();
+  });
+
+  it('navigates to next image when next button is clicked', () => {
+    const mockOnNextClick = jest.fn();
+    render(<ImagePreview {...defaultProps} onNextClick={mockOnNextClick} />);
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+    expect(mockOnNextClick).toHaveBeenCalled();
+    expect(screen.getByText('2/3')).toBeInTheDocument();
+    expect(screen.getByText('image2.png')).toBeInTheDocument();
+  });
+
+  it('navigates to previous image when previous button is clicked', () => {
+    const mockOnPreviousClick = jest.fn();
+    render(<ImagePreview {...defaultProps} onPreviousClick={mockOnPreviousClick} />);
+    // First go to page 2
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+    // Then go back to page 1
+    const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+    fireEvent.click(previousButton);
+    expect(mockOnPreviousClick).toHaveBeenCalled();
+    expect(screen.getByText('1/3')).toBeInTheDocument();
+  });
+
+  it('calls onSetPage when page changes', () => {
+    const mockOnSetPage = jest.fn();
+    render(<ImagePreview {...defaultProps} onSetPage={mockOnSetPage} />);
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+    expect(mockOnSetPage).toHaveBeenCalledWith(expect.any(Object), 2);
+  });
+
+  it('disables previous button on first page', () => {
+    render(<ImagePreview {...defaultProps} />);
+    const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+    expect(previousButton).toBeDisabled();
+  });
+
+  it('disables next button on last page', () => {
+    render(<ImagePreview {...defaultProps} />);
+    // Navigate to last page
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton); // page 2
+    fireEvent.click(nextButton); // page 3
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('disables both navigation buttons when isDisabled is true', () => {
+    render(<ImagePreview {...defaultProps} isDisabled={true} />);
+    const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    expect(previousButton).toBeDisabled();
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('uses custom aria labels for pagination', () => {
+    const customLabels = {
+      paginationAriaLabel: 'Custom pagination',
+      toPreviousPageAriaLabel: 'Go to previous image',
+      toNextPageAriaLabel: 'Go to next image'
+    };
+
+    render(<ImagePreview {...defaultProps} {...customLabels} />);
+    expect(screen.getByRole('navigation', { name: 'Custom pagination' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Go to previous image' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Go to next image' })).toBeInTheDocument();
+  });
+
+  it('renders with compact mode when isCompact is true', () => {
+    render(<ImagePreview {...defaultProps} isCompact={true} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-m-compact');
+  });
+
+  it('applies custom className when provided', () => {
+    const customClassName = 'custom-image-preview';
+    render(<ImagePreview {...defaultProps} className={customClassName} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass(customClassName);
+  });
+
+  it('applies display mode class correctly', () => {
+    render(<ImagePreview {...defaultProps} displayMode={ChatbotDisplayMode.embedded} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-chatbot__image-preview-modal--embedded');
+  });
+
+  it('passes additional props to ChatbotModal', () => {
+    const modalClass = 'custom-modal-class';
+    const additionalProps = {
+      'data-testid': 'modal',
+      className: modalClass
+    };
+    render(<ImagePreview {...defaultProps} {...additionalProps} />);
+    const modal = screen.getByTestId('modal');
+    expect(modal).toBeInTheDocument();
+    expect(modal).toBeInTheDocument();
+    expect(modal).toHaveClass(modalClass);
+  });
+
+  it('passes modalHeaderProps correctly', () => {
+    const headerClass = 'custom-modal-header-class';
+    const headerProps = {
+      'data-testid': 'header',
+      className: headerClass
+    };
+    render(<ImagePreview {...defaultProps} modalHeaderProps={headerProps} />);
+    expect(screen.getByTestId('header')).toBeInTheDocument();
+    expect(screen.getByTestId('header')).toHaveClass(headerClass);
+  });
+
+  it('passes modalBodyProps correctly', () => {
+    const bodyClass = 'custom-modal-body-class';
+    const bodyProps = {
+      'data-testid': 'body',
+      className: bodyClass
+    };
+    render(<ImagePreview {...defaultProps} modalBodyProps={bodyProps} />);
+    expect(screen.getByTestId('body')).toBeInTheDocument();
+    expect(screen.getByTestId('body')).toHaveClass(bodyClass);
+  });
+
+  it('handles single image without pagination', () => {
+    const singleImage = [mockImages[0]];
+    render(<ImagePreview {...defaultProps} images={singleImage} />);
+    expect(screen.queryByText('1/1')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Go to previous image/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Go to next image/i })).not.toBeInTheDocument();
+  });
+
+  it('calls onCloseFileDetailsLabel when file details close button is clicked', () => {
+    const mockOnClose = jest.fn();
+    render(<ImagePreview {...defaultProps} onCloseFileDetailsLabel={mockOnClose} />);
+    const closeButton = screen.getByRole('button', { name: /Close image1.jpg/i });
+    fireEvent.click(closeButton);
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('passes fileDetailsLabelProps correctly to FileDetailsLabel', () => {
+    const customFileDetailsProps = {
+      'data-testid': 'custom-file-details'
+    };
+    render(<ImagePreview {...defaultProps} fileDetailsLabelProps={customFileDetailsProps as any} />);
+    expect(screen.getByTestId('custom-file-details')).toBeInTheDocument();
+  });
+
+  it('displays file details for current page when navigating', () => {
+    render(<ImagePreview {...defaultProps} />);
+    // Initially shows first image details
+    expect(screen.getByText('image1.jpg')).toBeInTheDocument();
+    expect(screen.getByText('2.5 MB')).toBeInTheDocument();
+
+    // Navigate to second page
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+
+    // Should now show second image details
+    expect(screen.getByText('image2.png')).toBeInTheDocument();
+    expect(screen.getByText('1.8 MB')).toBeInTheDocument();
+
+    // Navigate to third page
+    fireEvent.click(nextButton);
+
+    // Should now show third image details (no file size)
+    expect(screen.getByText('image3.gif')).toBeInTheDocument();
+    expect(screen.queryByText(/MB/)).not.toBeInTheDocument();
+  });
+
+  it('sets hasTruncation to false on FileDetailsLabel', () => {
+    const longFileName = 'very-long-filename-that-would-normally-be-truncated-in-other-contexts.jpg';
+    const imageWithLongName = {
+      fileName: longFileName,
+      fileSize: '1.0 MB',
+      image: <img src="" alt="Test image with long name" />
+    };
+    render(<ImagePreview {...defaultProps} images={[imageWithLongName]} />);
+    expect(screen.getByText(longFileName)).toBeInTheDocument();
+  });
+});

package/src/ImagePreview/ImagePreview.tsx

@@ -0,0 +1,200 @@
+import {
+  Button,
+  ButtonVariant,
+  Icon,
+  ModalBody,
+  ModalBodyProps,
+  ModalFooter,
+  ModalHeader,
+  ModalHeaderProps,
+  Stack,
+  StackItem
+} from '@patternfly/react-core';
+import {
+  useState,
+  useEffect,
+  type FunctionComponent,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent
+} from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal, { ChatbotModalProps } from '../ChatbotModal';
+import FileDetailsLabel, { FileDetailsLabelProps } from '../FileDetailsLabel';
+import { TrashIcon } from '@patternfly/react-icons';
+
+export interface ImagePreviewProps extends Omit<ChatbotModalProps, 'children'> {
+  /** Class applied to modal */
+  className?: string;
+  /** Function that handles modal toggle */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+  /** Additional props passed to modal header */
+  modalHeaderProps?: ModalHeaderProps;
+  /** Additional props passed to modal body */
+  modalBodyProps?: ModalBodyProps;
+  /** Images displayed in modal */
+  images: { fileName: string; fileSize?: string; image: React.ReactNode }[];
+  /** Flag indicating if the pagination is disabled. */
+  isDisabled?: boolean;
+  /** Accessible label for the pagination component. */
+  paginationAriaLabel?: string;
+  /** Accessible label for the button which moves to the next page. */
+  toNextPageAriaLabel?: string;
+  /** Accessible label for the button which moves to the previous page. */
+  toPreviousPageAriaLabel?: string;
+  /** Function called when user clicks to navigate to next page. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user clicks to navigate to previous page. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when page is changed. */
+  onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+  /** Callback function for when file details label close button is clicked */
+  onCloseFileDetailsLabel?: (event: React.MouseEvent, fileName: string, fileId?: string | number) => void;
+  /** Props passed to file details label */
+  fileDetailsLabelProps?: Omit<FileDetailsLabelProps, 'fileName'>;
+  /** Text shown in navigation */
+  paginationContent?: string;
+  /** Navigation progress announced to assistive devices. Should state the current page/image. */
+  screenreaderText?: string;
+}
+
+const ImagePreview: FunctionComponent<ImagePreviewProps> = ({
+  isModalOpen,
+  displayMode = ChatbotDisplayMode.default,
+  isCompact,
+  className,
+  handleModalToggle,
+  title = 'Preview images',
+  modalHeaderProps,
+  modalBodyProps,
+  images,
+  isDisabled,
+  onSetPage,
+  onPreviousClick,
+  toNextPageAriaLabel = 'Go to next image',
+  toPreviousPageAriaLabel = 'Go to previous image',
+  onNextClick,
+  paginationAriaLabel,
+  onCloseFileDetailsLabel,
+  fileDetailsLabelProps,
+  paginationContent,
+  screenreaderText,
+  ...props
+}: ImagePreviewProps) => {
+  const [page, setPage] = useState(1);
+  const paginationText = paginationContent || `${page}/${images.length}`;
+
+  useEffect(() => {
+    if (images.length === 0 || page > images.length) {
+      setPage(1);
+    }
+  }, [images.length, page]);
+
+  const handleNewPage = (_evt: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+    onSetPage && onSetPage(_evt, newPage);
+  };
+
+  return (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      className={`pf-chatbot__image-preview-modal pf-chatbot__image-preview-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
+      displayMode={displayMode}
+      onClose={handleModalToggle}
+      isCompact={isCompact}
+      {...props}
+    >
+      <ModalHeader title={title} {...modalHeaderProps} />
+      <ModalBody className="pf-chatbot__image-preview-body" {...modalBodyProps}>
+        {images.length > 0 && images[page - 1] && (
+          <Stack hasGutter className="pf-chatbot__image-preview-stack">
+            <StackItem>
+              <FileDetailsLabel
+                fileName={images[page - 1].fileName}
+                fileSize={images[page - 1].fileSize}
+                hasTruncation={false}
+                onClose={onCloseFileDetailsLabel}
+                closeButtonIcon={<TrashIcon />}
+                {...fileDetailsLabelProps}
+              />
+            </StackItem>
+            <StackItem>
+              <div className="pf-chatbot__image-preview-body">{images[page - 1].image}</div>
+            </StackItem>
+          </Stack>
+        )}
+      </ModalBody>
+      {images.length > 1 && (
+        <ModalFooter className="pf-chatbot__image-preview-footer">
+          <nav className={`pf-chatbot__image-preview-footer-buttons`} aria-label={paginationAriaLabel}>
+            <Button
+              variant={ButtonVariant.plain}
+              isDisabled={isDisabled || page === 1}
+              data-action="previous"
+              onClick={(event) => {
+                const newPage = page > 1 ? page - 1 : 1;
+                handleNewPage(event, newPage);
+                onPreviousClick && onPreviousClick(event, newPage);
+              }}
+              aria-label={toPreviousPageAriaLabel}
+            >
+              <Icon iconSize="lg">
+                {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                <svg
+                  className="pf-v6-svg"
+                  viewBox="0 0 280 500"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
+                </svg>
+              </Icon>
+            </Button>
+            <span>{paginationText}</span>
+            <div className="pf-chatbot-m-hidden" aria-live="polite">
+              {screenreaderText ?? `Image ${page} of ${images.length}`}
+            </div>
+            <Button
+              variant={ButtonVariant.plain}
+              isDisabled={isDisabled || page === images.length}
+              aria-label={toNextPageAriaLabel}
+              data-action="next"
+              onClick={(event) => {
+                const newPage = page + 1 <= images.length ? page + 1 : images.length;
+                handleNewPage(event, newPage);
+                onNextClick && onNextClick(event, newPage);
+              }}
+            >
+              <Icon isInline iconSize="lg">
+                {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                <svg
+                  className="pf-v6-svg"
+                  viewBox="0 0 180 500"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
+                </svg>
+              </Icon>
+            </Button>
+          </nav>
+        </ModalFooter>
+      )}
+    </ChatbotModal>
+  );
+};
+
+export default ImagePreview;

package/src/ImagePreview/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ImagePreview';
+
+export * from './ImagePreview';

package/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -77,8 +77,9 @@
 }
 
 .pf-chatbot__message-inline-code {
+  --pf-chatbot-message-text-inline-code-font-size: var(--pf-t--global--font--size--body--default);
   background-color: var(--pf-t--global--background--color--tertiary--default);
-  font-size: var(--pf-t--global--font--size--body--default);
+  font-size: var(--pf-chatbot-message-text-inline-code-font-size);
 }
 
 .pf-chatbot__message-code-toggle {

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import { useState, useRef, useId, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 // Import PatternFly components
 import {
   CodeBlock,
@@ -13,7 +13,8 @@ import {
   ExpandableSectionToggle,
   ExpandableSectionProps,
   ExpandableSectionToggleProps,
-  ExpandableSectionVariant
+  ExpandableSectionVariant,
+  getUniqueId
 } from '@patternfly/react-core';
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
@@ -56,9 +57,9 @@ const CodeBlockMessage = ({
   const [isExpanded, setIsExpanded] = useState(false);
 
   const buttonRef = useRef();
-  const tooltipID = useId();
-  const toggleId = useId();
-  const contentId = useId();
+  const tooltipID = getUniqueId();
+  const toggleId = getUniqueId();
+  const contentId = getUniqueId();
   const codeBlockRef = useRef<HTMLDivElement>(null);
 
   const language = /language-(\w+)/.exec(className || '')?.[1];

package/src/Message/LinkMessage/LinkMessage.tsx

@@ -4,8 +4,9 @@
 
 import { Button, ButtonProps } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import { ExtraProps } from 'react-markdown';
 
-const LinkMessage = ({ children, target, href, ...props }: ButtonProps) => {
+const LinkMessage = ({ children, target, href, id, ...props }: ButtonProps & ExtraProps) => {
   if (target === '_blank') {
     return (
       <Button
@@ -16,6 +17,8 @@ const LinkMessage = ({ children, target, href, ...props }: ButtonProps) => {
         iconPosition="end"
         isInline
         target={target}
+        // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
+        id={id}
         {...props}
       >
         {children}
@@ -24,7 +27,8 @@ const LinkMessage = ({ children, target, href, ...props }: ButtonProps) => {
   }
 
   return (
-    <Button isInline component="a" href={href} variant="link" {...props}>
+    // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
+    <Button isInline component="a" href={href} variant="link" id={id} {...props}>
       {children}
     </Button>
   );

package/src/Message/ListMessage/ListItemMessage.tsx

@@ -5,6 +5,10 @@
 import { ExtraProps } from 'react-markdown';
 import { ListItem } from '@patternfly/react-core';
 
-const ListItemMessage = ({ children }: JSX.IntrinsicElements['li'] & ExtraProps) => <ListItem>{children}</ListItem>;
+const ListItemMessage = ({ children, ...props }: JSX.IntrinsicElements['li'] & ExtraProps) => (
+  <ListItem {...props} tabIndex={props?.id?.includes('fn-') ? -1 : props?.tabIndex}>
+    {children}
+  </ListItem>
+);
 
 export default ListItemMessage;

package/src/Message/ListMessage/ListMessage.scss

@@ -21,5 +21,22 @@
     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);
+
+    // prevents issues when highlighting things like footnotes - don't have blue on blue
+    .pf-chatbot__message-text {
+      background-color: initial;
+    }
+  }
+
+  // targets footnotes specifically and prevents misalignment problems
+  .footnotes {
+    li > span {
+      display: inline-flex;
+      flex-direction: column;
+    }
+  }
+
+  li a {
+    color: var(--pf-t--global--text--color--on-brand--default);
   }
 }

package/src/Message/Message.scss

@@ -89,6 +89,49 @@
     display: grid;
     gap: var(--pf-t--global--spacer--sm);
   }
+
+  // targets footnotes specifically
+  .footnotes,
+  .pf-chatbot__message-text.footnotes {
+    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm);
+    --pf-chatbot-message-text-font-size: var(--pf-t--global--font--size--xs);
+    --pf-chatbot-message-text-inline-code-font-size: var(--pf-t--global--font--size--xs);
+
+    .pf-chatbot__message-text h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--md);
+      --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--md);
+      --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--md);
+      --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--md);
+      --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--md);
+      --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--md);
+    }
+    .pf-chatbot__message-text .pf-v6-c-content,
+    .pf-chatbot__message-text .pf-v6-c-content--small,
+    .pf-chatbot__message-text .pf-v6-c-content--blockquote,
+    .pf-chatbot__message-text p,
+    .pf-chatbot__message-text a {
+      --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--xs);
+    }
+    .pf-chatbot__message-inline-code,
+    .pf-chatbot__message-text .pf-v6-c-button.pf-m-link,
+    .pf-chatbot__message-ordered-list .pf-v6-c-list,
+    .pf-chatbot__message-ordered-list ul,
+    .pf-chatbot__message-ordered-list li,
+    .pf-chatbot__message-unordered-list .pf-v6-c-list,
+    .pf-chatbot__message-unordered-list ul,
+    .pf-chatbot__message-unordered-list li {
+      font-size: var(--pf-t--global--font--size--xs);
+    }
+  }
+
+  .footnotes {
+    background-color: var(--pf-t--global--background--color--tertiary--default);
+  }
 }
 
 // Attachments
@@ -106,6 +149,7 @@
 @import './MessageLoading';
 @import './CodeBlockMessage/CodeBlockMessage';
 @import './TextMessage/TextMessage';
+@import './SuperscriptMessage/SuperscriptMessage.scss';
 
 // ============================================================================
 // Information density styles