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

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();
+  });
 });

package/src/Message/Message.tsx

@@ -3,7 +3,7 @@
 // ============================================================================
 import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
-import Markdown from 'react-markdown';
+import Markdown, { Options } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
   AlertProps,
@@ -49,6 +49,9 @@ import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
 import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
+import ToolResponse, { ToolResponseProps } from '../ToolResponse';
+import DeepThinking, { DeepThinkingProps } from '../DeepThinking';
+import SuperscriptMessage from './SuperscriptMessage/SuperscriptMessage';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -161,6 +164,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
   /** Additional rehype plugins passed from the consumer */
   additionalRehypePlugins?: PluggableList;
+  /** Additional remark plugins passed from the consumer */
+  additionalRemarkPlugins?: PluggableList;
   /** Whether to open links in message in new tab. */
   openLinkInNewTab?: boolean;
   /** Optional inline error message that can be displayed in the message */
@@ -185,6 +190,16 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   editFormProps?: FormProps;
   /** Sets message to compact styling. */
   isCompact?: boolean;
+  /** Disables markdown parsing for message, allowing only text input */
+  isMarkdownDisabled?: boolean;
+  /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+  reactMarkdownProps?: Options;
+  /** Props for tool response card */
+  toolResponse?: ToolResponseProps;
+  /** Props for deep thinking card */
+  deepThinking?: DeepThinkingProps;
+  /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+  remarkGfmProps?: Options;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -213,6 +228,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   tableProps,
   openLinkInNewTab = true,
   additionalRehypePlugins = [],
+  additionalRemarkPlugins = [],
   linkProps,
   error,
   isEditable,
@@ -224,6 +240,11 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   inputRef,
   editFormProps,
   isCompact,
+  isMarkdownDisabled,
+  reactMarkdownProps,
+  toolResponse,
+  deepThinking,
+  remarkGfmProps,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -250,6 +271,152 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
 
+  const handleMarkdown = () => {
+    if (isMarkdownDisabled) {
+      return (
+        <TextMessage component={ContentVariants.p} {...props}>
+          {messageText}
+        </TextMessage>
+      );
+    }
+    return (
+      <Markdown
+        components={{
+          section: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <section {...rest} className={`pf-chatbot__message-text ${rest?.className}`} />;
+          },
+          p: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.p} {...rest} />;
+          },
+          code: ({ children, ...props }) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...codeProps } = props;
+            return (
+              <CodeBlockMessage {...codeProps} {...codeBlockProps}>
+                {children}
+              </CodeBlockMessage>
+            );
+          },
+          h1: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h1} {...rest} />;
+          },
+          h2: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h2} {...rest} />;
+          },
+          h3: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h3} {...rest} />;
+          },
+          h4: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h4} {...rest} />;
+          },
+          h5: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h5} {...rest} />;
+          },
+          h6: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.h6} {...rest} />;
+          },
+          blockquote: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TextMessage component={ContentVariants.blockquote} {...rest} />;
+          },
+          ul: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <UnorderedListMessage {...rest} />;
+          },
+          ol: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <OrderedListMessage {...rest} />;
+          },
+          li: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <ListItemMessage {...rest} />;
+          },
+          // table requires node attribute for calculating headers for mobile breakpoint
+          table: (props) => <TableMessage {...props} {...tableProps} />,
+          tbody: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TbodyMessage {...rest} />;
+          },
+          thead: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TheadMessage {...rest} />;
+          },
+          tr: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <TrMessage {...rest} />;
+          },
+          td: (props) => {
+            // Conflicts with Td type
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, width, ...rest } = props;
+            return <TdMessage {...rest} />;
+          },
+          th: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <ThMessage {...rest} />;
+          },
+          img: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <ImageMessage {...rest} />;
+          },
+          a: (props) => {
+            // node is just the details of the document structure - not needed
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return (
+              // some a types conflict with ButtonProps, but it's ok because we are using an a tag
+              // there are too many to handle manually
+              <LinkMessage {...(rest as any)} {...linkProps}>
+                {props.children}
+              </LinkMessage>
+            );
+          },
+          // used for footnotes
+          sup: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { node, ...rest } = props;
+            return <SuperscriptMessage {...rest} />;
+          }
+        }}
+        remarkPlugins={[[remarkGfm, { ...remarkGfmProps }], ...additionalRemarkPlugins]}
+        rehypePlugins={rehypePlugins}
+        {...reactMarkdownProps}
+        remarkRehypeOptions={{
+          // removes sr-only class from footnote labels applied by default
+          footnoteLabelProperties: { className: [''] },
+          ...reactMarkdownProps?.remarkRehypeOptions
+        }}
+      >
+        {messageText}
+      </Markdown>
+    );
+  };
+
   const renderMessage = () => {
     if (isLoading) {
       return <MessageLoading loadingWord={loadingWord} />;
@@ -277,51 +444,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
     return (
       <>
         {beforeMainContent && <>{beforeMainContent}</>}
-        {error ? (
-          <ErrorMessage {...error} />
-        ) : (
-          <Markdown
-            components={{
-              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} />,
-              img: (props) => <ImageMessage {...props} />,
-              a: (props) => (
-                <LinkMessage href={props.href} rel={props.rel} target={props.target} {...linkProps}>
-                  {props.children}
-                </LinkMessage>
-              )
-            }}
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={rehypePlugins}
-          >
-            {messageText}
-          </Markdown>
-        )}
+        {error ? <ErrorMessage {...error} /> : handleMarkdown()}
       </>
     );
   };
@@ -360,6 +483,8 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
           <div className="pf-chatbot__message-and-actions">
             {renderMessage()}
             {afterMainContent && <>{afterMainContent}</>}
+            {toolResponse && <ToolResponse {...toolResponse} />}
+            {deepThinking && <DeepThinking {...deepThinking} />}
             {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
             {quickStarts && quickStarts.quickStart && (
               <QuickStartTile

package/src/Message/SuperscriptMessage/SuperscriptMessage.scss

@@ -0,0 +1,8 @@
+.pf-chatbot__message-superscript {
+  font-size: smaller;
+  vertical-align: super;
+  .pf-v6-c-button.pf-m-link.pf-m-inline {
+    font-size: inherit;
+    vertical-align: inherit;
+  }
+}

package/src/Message/SuperscriptMessage/SuperscriptMessage.tsx

@@ -0,0 +1,13 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Superscript (like for footnotes)
+// ============================================================================
+
+import { ExtraProps } from 'react-markdown';
+
+const SuperscriptMessage = ({ children }: JSX.IntrinsicElements['sup'] & ExtraProps) => (
+  <span className="pf-chatbot__message-superscript">
+    <sup>{children}</sup>
+  </span>
+);
+
+export default SuperscriptMessage;

package/src/Message/TextMessage/TextMessage.scss

@@ -17,9 +17,10 @@
   width: fit-content;
   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-chatbot-message-text-font-size: var(--pf-t--global--font--size--md);
 
   .pf-v6-c-button.pf-m-link {
-    font-size: var(--pf-t--global--font--size--md);
+    font-size: var(--pf-chatbot-message-text-font-size);
   }
 
   .pf-v6-c-content,
@@ -27,15 +28,49 @@
   .pf-v6-c-content--blockquote,
   p,
   a {
-    --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--md);
+    --pf-v6-c-content--FontSize: var(--pf-chatbot-message-text-font-size);
   }
 
   code {
     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);
+  }
+
+  // Hide message text that contains sr-only content
+  // https://css-tricks.com/inclusively-hidden/
+  &:has(.sr-only) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
   }
 }
 
+// ============================================================================
+// Footnote spacing styles
+// ============================================================================
+
+// Add spacing to paragraphs in multi-paragraph footnotes
+// Only target p tags that are direct children of message-text spans (not inside blockquotes, etc.)
+li[id*='user-content-fn-']:has(> span > .pf-chatbot__message-text + .pf-chatbot__message-text)
+  > span
+  > .pf-chatbot__message-text
+  > p {
+  margin-block-end: var(--pf-t--global--spacer--md);
+}
+
+// Handle user message footnotes which may have extra span wrappers
+li[id*='user-content-fn-']:has(> span > span > .pf-chatbot__message-text + .pf-chatbot__message-text)
+  > span
+  > span
+  > .pf-chatbot__message-text
+  > p {
+  margin-block-end: var(--pf-t--global--spacer--md);
+}
+
 .pf-chatbot__message--user {
   .pf-chatbot__message-text {
     background-color: var(--pf-t--global--color--brand--default);
@@ -54,6 +89,11 @@
       color: var(--pf-t--global--text--color--on-brand--default);
     }
   }
+
+  .pf-chatbot__message-text > .pf-chatbot__message-text {
+    background-color: initial;
+    padding: initial;
+  }
 }
 
 // ============================================================================
@@ -62,8 +102,9 @@
 .pf-chatbot.pf-m-compact {
   // Need to inline shorter text
   .pf-chatbot__message-text {
+    --pf-chatbot-message-text-font-size: var(--pf-t--global--font--size--sm);
     .pf-v6-c-button.pf-m-link {
-      font-size: var(--pf-t--global--font--size--sm);
+      font-size: var(--pf-chatbot-message-text-font-size);
     }
 
     .pf-v6-c-content,
@@ -71,7 +112,7 @@
     .pf-v6-c-content--blockquote,
     p,
     a {
-      --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--sm);
+      --pf-v6-c-content--FontSize: var(--pf-chatbot-message-text-font-size);
     }
 
     .pf-v6-c-content--blockquote {

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -245,4 +245,111 @@ describe('UserFeedback', () => {
     );
     expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
   });
+  it('should pass buttonProps to submit button', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        submitButtonProps={{ variant: 'secondary', isDisabled: true }}
+      />
+    );
+    const submitButton = screen.getByRole('button', { name: /Submit/i });
+    expect(submitButton).toHaveClass('pf-v6-c-button pf-m-secondary');
+    expect(submitButton).toBeDisabled();
+  });
+  it('should pass cardHeaderProps to card header', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        cardHeaderProps={{ 'data-testid': 'card-header', className: 'custom-header' } as any}
+      />
+    );
+    const cardHeader = screen.getByTestId('card-header');
+    expect(cardHeader).toHaveClass('custom-header');
+  });
+  it('should pass cardBodyProps to card body', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        cardBodyProps={{ 'data-testid': 'card-body', className: 'custom-body' } as any}
+      />
+    );
+    const cardBody = screen.getByTestId('card-body');
+    expect(cardBody).toHaveClass('custom-body');
+  });
+  it('should pass headingLevelProps to title heading', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        headingLevelProps={{ className: 'custom-heading', id: 'feedback-title' }}
+      />
+    );
+    const heading = screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i });
+    expect(heading).toHaveClass('custom-heading');
+    expect(heading).toHaveAttribute('id', 'feedback-title');
+  });
+
+  it('should pass formProps to form', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        formProps={{ 'data-testid': 'feedback-form', className: 'custom-form' } as any}
+      />
+    );
+    const form = screen.getByTestId('feedback-form');
+    expect(form).toHaveClass('custom-form');
+  });
+  it('should pass textAreaProps to text area when hasTextArea is true', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaProps={{ 'data-testid': 'custom-textarea', rows: 5 } as any}
+      />
+    );
+    const textArea = screen.getByTestId('custom-textarea');
+    expect(textArea).toHaveAttribute('rows', '5');
+    expect(textArea).toHaveAttribute('data-testid', 'custom-textarea');
+  });
+  it('should pass actionGroupProps to action group', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        actionGroupProps={{ 'data-testid': 'action-group', className: 'custom-actions' } as any}
+      />
+    );
+    const actionGroup = screen.getByTestId('action-group');
+    expect(actionGroup).toHaveClass('custom-actions');
+  });
+  it('should render children', () => {
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES}>
+        <div data-testid="custom-content">Custom feedback content</div>
+        <p>Additional paragraph</p>
+      </UserFeedback>
+    );
+    expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+    expect(screen.getByText('Custom feedback content')).toBeInTheDocument();
+    expect(screen.getByText('Additional paragraph')).toBeInTheDocument();
+  });
 });