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

package/src/DeepThinking/DeepThinking.tsx

@@ -0,0 +1,68 @@
+// ============================================================================
+// Deep Thinking
+// ============================================================================
+import {
+  Card,
+  CardBody,
+  CardBodyProps,
+  CardProps,
+  ExpandableSection,
+  ExpandableSectionProps
+} from '@patternfly/react-core';
+import { useState, type FunctionComponent } from 'react';
+
+export interface DeepThinkingProps {
+  /** Toggle content shown for expandable section  */
+  toggleContent: React.ReactNode;
+  /** Additional props passed to expandable section */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Subheading rendered inside expandable section */
+  subheading?: string;
+  /** Body text rendered inside expandable section */
+  body?: React.ReactNode | string;
+  /** Additional props passed to main card */
+  cardProps?: CardProps;
+  /** Additional props passed to main card body */
+  cardBodyProps?: CardBodyProps;
+}
+
+export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
+  body,
+  cardProps,
+  expandableSectionProps,
+  subheading,
+  toggleContent,
+  cardBodyProps
+}: DeepThinkingProps) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <Card isCompact className="pf-chatbot__deep-thinking" {...cardProps}>
+      <CardBody {...cardBodyProps}>
+        <ExpandableSection
+          toggleContent={toggleContent}
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          isIndented
+          className="pf-chatbot__deep-thinking-expandable-section"
+          {...expandableSectionProps}
+        >
+          <div className="pf-chatbot__deep-thinking-section">
+            {subheading && (
+              <div className="pf-chatbot__deep-thinking-subheading">
+                <span>{subheading}</span>
+              </div>
+            )}
+            {body && <div className="pf-chatbot__deep-thinking-body">{body}</div>}
+          </div>
+        </ExpandableSection>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default DeepThinking;

package/src/DeepThinking/index.ts

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

package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap

@@ -48,19 +48,16 @@ exports[`FileDetails should render file details 1`] = `
         <span
           class="pf-chatbot__code-fileName"
         >
-          <div
-            style="display: contents;"
+          <span
+            class="pf-v6-c-truncate"
+            tabindex="0"
           >
             <span
-              class="pf-v6-c-truncate"
+              class="pf-v6-c-truncate__start"
             >
-              <span
-                class="pf-v6-c-truncate__start"
-              >
-                test
-              </span>
+              test
             </span>
-          </div>
+          </span>
         </span>
       </div>
       <div

package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap

@@ -60,19 +60,16 @@ exports[`FileDetailsLabel should render file details label 1`] = `
                 <span
                   class="pf-chatbot__code-fileName"
                 >
-                  <div
-                    style="display: contents;"
+                  <span
+                    class="pf-v6-c-truncate"
+                    tabindex="0"
                   >
                     <span
-                      class="pf-v6-c-truncate"
+                      class="pf-v6-c-truncate__start"
                     >
-                      <span
-                        class="pf-v6-c-truncate__start"
-                      >
-                        test
-                      </span>
+                      test
                     </span>
-                  </div>
+                  </span>
                 </span>
               </div>
               <div

package/src/FilePreview/FilePreview.scss

@@ -0,0 +1,22 @@
+.pf-chatbot__file-preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--md);
+  align-items: center;
+  justify-content: center;
+}
+
+.pf-chatbot__file-preview-icon {
+  color: var(--pf-t--global--icon--color--subtle);
+  width: var(--pf-t--global--icon--size--2xl);
+  height: var(--pf-t--global--icon--size--2xl);
+}
+
+.pf-chatbot__file-preview-name {
+  font-size: var(--pf-t--global--font--size--xl);
+  font-weight: var(--pf-t--global--font--weight--heading--default);
+}
+.pf-chatbot__file-preview-body {
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--font--size--body--lg);
+}

package/src/FilePreview/FilePreview.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FilePreview from './FilePreview';
+import { ChatbotDisplayMode } from '../Chatbot';
+import { Button, ModalBodyProps, ModalHeaderProps } from '@patternfly/react-core';
+
+describe('FilePreview', () => {
+  const defaultProps = {
+    isModalOpen: true,
+    handleModalToggle: jest.fn(),
+    fileName: 'test-file.txt',
+    children: 'File content preview'
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render with basic props', () => {
+    render(<FilePreview {...defaultProps} />);
+    expect(screen.getByText('File preview')).toBeInTheDocument();
+    expect(screen.getByText('test-file.txt')).toBeInTheDocument();
+  });
+
+  it('should render with custom title', () => {
+    const customTitle = 'Custom file preview title';
+    render(<FilePreview {...defaultProps} title={customTitle} />);
+    expect(screen.getByRole('heading', { name: customTitle })).toBeTruthy();
+  });
+
+  it('should handle modal toggle when closed', () => {
+    const mockToggle = jest.fn();
+    render(<FilePreview {...defaultProps} isModalOpen={false} handleModalToggle={mockToggle} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('should apply default display mode class', () => {
+    render(<FilePreview {...defaultProps} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-chatbot__file-preview-modal--default');
+  });
+
+  it('should apply custom display mode class', () => {
+    render(<FilePreview {...defaultProps} displayMode={ChatbotDisplayMode.fullscreen} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-chatbot__file-preview-modal--fullscreen');
+  });
+
+  it('should apply compact styling when isCompact is true', () => {
+    render(<FilePreview {...defaultProps} isCompact />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-m-compact');
+  });
+
+  it('should not apply compact styling when isCompact is false', () => {
+    render(<FilePreview {...defaultProps} isCompact={false} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).not.toHaveClass('pf-m-compact');
+  });
+
+  it('should apply custom className', () => {
+    const customClass = 'custom-file-preview';
+    render(<FilePreview {...defaultProps} className={customClass} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass(customClass);
+  });
+
+  it('should pass through additional props to ChatbotModal', () => {
+    render(<FilePreview {...defaultProps} data-testid="file-preview-modal" />);
+    const modal = screen.getByTestId('file-preview-modal');
+    expect(modal).toBeInTheDocument();
+  });
+
+  it('should pass modalHeaderProps to ModalHeader', () => {
+    const modalHeaderProps = {
+      'data-testid': 'custom-header'
+    } as ModalHeaderProps;
+    render(<FilePreview {...defaultProps} modalHeaderProps={modalHeaderProps} />);
+    const header = screen.getByTestId('custom-header');
+    expect(header).toBeInTheDocument();
+  });
+
+  it('should pass modalBodyProps to ModalBody', () => {
+    const modalBodyProps = {
+      'data-testid': 'custom-body'
+    } as ModalBodyProps;
+    render(<FilePreview {...defaultProps} modalBodyProps={modalBodyProps} />);
+    const body = screen.getByTestId('custom-body');
+    expect(body).toBeInTheDocument();
+  });
+
+  it('should pass ouiaId to ChatbotModal', () => {
+    const ouiaId = 'file-preview-ouia-id';
+    render(<FilePreview {...defaultProps} ouiaId={ouiaId} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveAttribute('data-ouia-component-id', ouiaId);
+  });
+
+  it('should handle complex children', () => {
+    const complexChildren = (
+      <div>
+        <h3>File details</h3>
+        <p>Size: 1.2 MB</p>
+        <Button>Download</Button>
+      </div>
+    );
+    render(<FilePreview {...defaultProps}>{complexChildren}</FilePreview>);
+    expect(screen.getByRole('heading', { name: /File details/i })).toBeTruthy();
+    expect(screen.getByText('Size: 1.2 MB')).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Download/i })).toBeTruthy();
+  });
+});

package/src/FilePreview/FilePreview.tsx

@@ -0,0 +1,58 @@
+import { ModalBody, ModalBodyProps, ModalHeader, ModalHeaderProps } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal, { ChatbotModalProps } from '../ChatbotModal';
+import { FileIcon } from '@patternfly/react-icons';
+
+export interface FilePreviewProps extends ChatbotModalProps {
+  /** 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;
+  /** File name */
+  fileName: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+  /** Additional props passed to modal header */
+  modalHeaderProps?: ModalHeaderProps;
+  /** Additional props passed to modal body */
+  modalBodyProps?: ModalBodyProps;
+}
+
+const FilePreview: FunctionComponent<FilePreviewProps> = ({
+  isModalOpen,
+  displayMode = ChatbotDisplayMode.default,
+  children,
+  fileName,
+  isCompact,
+  className,
+  handleModalToggle,
+  title = 'File preview',
+  modalHeaderProps,
+  modalBodyProps,
+  ...props
+}: FilePreviewProps) => (
+  <ChatbotModal
+    isOpen={isModalOpen}
+    className={`pf-chatbot__file-preview-modal pf-chatbot__file-preview-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
+    displayMode={displayMode}
+    onClose={handleModalToggle}
+    isCompact={isCompact}
+    {...props}
+  >
+    <ModalHeader title={title} {...modalHeaderProps} />
+    <ModalBody className="pf-chatbot__file-preview-body" {...modalBodyProps}>
+      <FileIcon className="pf-chatbot__file-preview-icon" />
+      <h2 className="pf-chatbot__file-preview-name">{fileName}</h2>
+      {children && <div className="pf-chatbot__file-preview-body">{children}</div>}
+    </ModalBody>
+  </ChatbotModal>
+);
+
+export default FilePreview;

package/src/FilePreview/index.ts

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

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

package/src/Message/Message.test.tsx

@@ -7,6 +7,7 @@ import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quic
 import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
 import { AlertActionLink } from '@patternfly/react-core';
+import { DeepThinkingProps } from '../DeepThinking';
 
 const ALL_ACTIONS = [
   { label: /Good response/i },
@@ -141,10 +142,30 @@ const EMPTY_TABLE = `
 
  `;
 
+const FOOTNOTE = `This is some text with a footnote[^1] and here's a longer one.[^bignote]
+
+ You can also reference the same footnote multiple times[^1].
+ 
+   [^1]: This is the full footnote text. You can click the arrow to go back up. 
+   
+   [^bignote]: Here's one with multiple paragraphs and **formatting**.
+ 
+       Indent paragraphs to include them in the footnote.
+ 
+       Add as many paragraphs as you like. You can include *italic text*, **bold text**, and even \`code\`.
+ 
+       > You can even include blockquotes in footnotes!`;
+
 const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 
 const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 
+const DEEP_THINKING: DeepThinkingProps = {
+  toggleContent: 'Show thinking',
+  subheading: 'Thought for 3 seconds',
+  body: "Here's why I said this."
+};
+
 const ERROR = {
   title: 'Could not load chat',
   children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -675,6 +696,28 @@ describe('Message', () => {
     );
     expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
   });
+  it('should handle tool response correctly', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        toolResponse={{
+          toggleContent: 'Tool response: Name',
+          subheading: 'Thought for 3 seconds',
+          body: 'Lorem ipsum dolor sit amet',
+          cardTitle: 'Card title',
+          cardBody: 'Card body'
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: /Tool response: Name/i })).toBeTruthy();
+    expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
+    expect(screen.getByText('Lorem ipsum dolor sit amet')).toBeTruthy();
+    expect(screen.getByText('Card title')).toBeTruthy();
+    expect(screen.getByText('Card body')).toBeTruthy();
+  });
   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();
@@ -740,6 +783,28 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={TABLE} tableProps={{ 'aria-label': 'Test' }} />);
     expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
   });
+  it('should render footnote correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={FOOTNOTE} />);
+    expect(screen.getByText(/This is some text with a footnote/i)).toBeTruthy();
+    expect(screen.getByText(/and here's a longer one./i)).toBeTruthy();
+    expect(screen.getByText(/You can also reference the same footnote multiple times./i)).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Footnotes/i })).toBeTruthy();
+    expect(screen.getByText(/This is the full footnote text. You can click the arrow to go back up./i)).toBeTruthy();
+    expect(screen.getByText(/Here's one with multiple paragraphs and/i)).toBeTruthy();
+    expect(screen.getByText(/formatting/i)).toBeTruthy();
+    expect(screen.getByText(/Indent paragraphs to include them in the footnote./i)).toBeTruthy();
+    expect(screen.getByText(/Add as many paragraphs as you like. You can include/i)).toBeTruthy();
+    expect(screen.getByText(/italic text/i)).toBeTruthy();
+    expect(screen.getByText(/bold text/i)).toBeTruthy();
+    expect(screen.getByText(/, and even/i)).toBeTruthy();
+    expect(screen.getByText(/code/i)).toBeTruthy();
+    expect(screen.getByText(/You can even include blockquotes in footnotes!/i)).toBeTruthy();
+    expect(screen.getAllByRole('link', { name: '1' })).toHaveLength(2);
+    expect(screen.getAllByRole('link', { name: '2' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Back to reference 1' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Back to reference 1-2' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Back to reference 2/i })).toBeTruthy();
+  });
   it('should render beforeMainContent with main content', () => {
     const mainContent = 'Main message content';
     const beforeMainContentText = 'Before main content';
@@ -962,4 +1027,29 @@ describe('Message', () => {
     const form = container.querySelector('form');
     expect(form).toHaveClass('test');
   });
+  it('should be able to disable markdown parsing', () => {
+    render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} isMarkdownDisabled />);
+    // this is looking for markdown syntax that is ordinarily stripped
+    expect(screen.getByText(/~~~yaml/i)).toBeTruthy();
+  });
+  it('should be able to pass props to react-markdown, such as disabling tags', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={CODE_MESSAGE}
+        reactMarkdownProps={{ disallowedElements: ['code'] }}
+      />
+    );
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    // code block isn't rendering
+    expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+  });
+  it('should render deep thinking section correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content="" deepThinking={DEEP_THINKING} />);
+    expect(screen.getByRole('button', { name: /Show thinking/i })).toBeTruthy();
+    expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
+    expect(screen.getByText("Here's why I said this.")).toBeTruthy();
+  });
 });