@patternfly/chatbot 6.4.0-prerelease.23 → 6.4.0-prerelease.25

package/src/Message/Message.test.tsx

@@ -919,12 +919,16 @@ describe('Message', () => {
     expect(screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
     expect(screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
   });
-  it('should handle image correctly', () => {
+  it('should handle image correctly for user', () => {
     render(<Message avatar="./img" role="user" name="User" content={IMAGE} />);
+    expect(screen.queryByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeFalsy();
+  });
+  it('should handle image correctly for bot', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" content={IMAGE} />);
     expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
   });
   it('inline image parent should have class pf-chatbot__message-and-actions', () => {
-    render(<Message avatar="./img" role="user" name="User" content={INLINE_IMAGE} />);
+    render(<Message avatar="./img" role="bot" name="Bot" content={INLINE_IMAGE} />);
     expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
     expect(
       screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i }).parentElement
@@ -1046,6 +1050,25 @@ describe('Message', () => {
     // code block isn't rendering
     expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
   });
+  it('should disable images and additional tags for user messages', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={`${IMAGE} ${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();
+    expect(screen.queryByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeFalsy();
+  });
+  it('can override image tag removal default for user messages', () => {
+    render(<Message avatar="./img" role="user" name="User" content={IMAGE} hasNoImagesInUserMessages={false} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+  });
   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();

package/src/Message/Message.tsx

@@ -203,6 +203,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   remarkGfmProps?: Options;
   /** Props for a tool call message */
   toolCall?: ToolCallProps;
+  /** Whether user messages default to stripping out images in markdown */
+  hasNoImagesInUserMessages?: boolean;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -249,6 +251,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   deepThinking,
   remarkGfmProps,
   toolCall,
+  hasNoImagesInUserMessages = true,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -275,6 +278,11 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
 
+  const disallowedElements = role === 'user' && hasNoImagesInUserMessages ? ['img'] : [];
+  if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
+    disallowedElements.push(...reactMarkdownProps.disallowedElements);
+  }
+
   const handleMarkdown = () => {
     if (isMarkdownDisabled) {
       return (
@@ -415,6 +423,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
           footnoteLabelProperties: { className: [''] },
           ...reactMarkdownProps?.remarkRehypeOptions
         }}
+        disallowedElements={disallowedElements}
       >
         {messageText}
       </Markdown>

package/src/SourcesCard/SourcesCard.scss

@@ -1,10 +1,13 @@
-.pf-chatbot__source {
+.pf-chatbot__source,
+.pf-chatbot__sources-card-base {
   display: flex;
   flex-direction: column;
   gap: var(--pf-t--global--spacer--sm);
   padding-block-start: var(--pf-t--global--spacer--sm);
   max-width: 22.5rem;
+}
 
+.pf-chatbot__sources-card-base {
   a {
     color: var(--pf-t--global--text--color--link--default) !important;
     -webkit-text-decoration: var(--pf-t--global--text-decoration--link--line--default) !important;

package/src/SourcesCard/SourcesCard.test.tsx

@@ -1,42 +1,15 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import SourcesCard from './SourcesCard';
 
 describe('SourcesCard', () => {
-  it('should render card correctly if one source with only a link is passed in', () => {
-    render(<SourcesCard sources={[{ link: '' }]} />);
-    expect(screen.getByText('1 source')).toBeTruthy();
-    expect(screen.getByText('Source 1')).toBeTruthy();
-    // no buttons or navigation when there is only 1 source
-    expect(screen.queryByRole('button')).toBeFalsy();
-    expect(screen.queryByText('1/1')).toBeFalsy();
-  });
-
-  it('should render card correctly if one source with a title is passed in', () => {
+  it('should render sources correctly if one source is passed in', () => {
     render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '' }]} />);
     expect(screen.getByText('1 source')).toBeTruthy();
     expect(screen.getByText('How to make an apple pie')).toBeTruthy();
   });
 
-  it('should render card correctly if one source with a body is passed in', () => {
-    render(<SourcesCard sources={[{ link: '', body: 'To make an apple pie, you must first...' }]} />);
-    expect(screen.getByText('1 source')).toBeTruthy();
-    expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
-  });
-
-  it('should render card correctly if one source with a title and body is passed in', () => {
-    render(
-      <SourcesCard
-        sources={[{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }]}
-      />
-    );
-    expect(screen.getByText('1 source')).toBeTruthy();
-    expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-    expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
-  });
-
-  it('should render multiple cards correctly', () => {
+  it('should render sources correctly when there is more than one', () => {
     render(
       <SourcesCard
         sources={[
@@ -51,302 +24,4 @@ describe('SourcesCard', () => {
     screen.getByRole('button', { name: /Go to previous page/i });
     screen.getByRole('button', { name: /Go to next page/i });
   });
-
-  it('should navigate between cards correctly', async () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-      />
-    );
-    expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-    expect(screen.getByText('1/2')).toBeTruthy();
-    expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
-    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
-    expect(screen.queryByText('How to make an apple pie')).toBeFalsy();
-    expect(screen.getByText('How to make cookies')).toBeTruthy();
-    expect(screen.getByText('2/2')).toBeTruthy();
-    expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
-    expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
-  });
-
-  it('should apply className appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        className="test"
-      />
-    );
-    const element = screen.getByRole('navigation');
-    expect(element).toHaveClass('test');
-  });
-
-  it('should disable pagination appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        isDisabled
-      />
-    );
-    expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
-  });
-
-  it('should render navigation aria label appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-      />
-    );
-    expect(screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy();
-  });
-
-  it('should change paginationAriaLabel appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        paginationAriaLabel="Navegación"
-      />
-    );
-    expect(screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
-  });
-
-  it('should change sourceWord appropriately', () => {
-    render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '' }]} sourceWord={'fuente'} />);
-    expect(screen.getByText('1 fuente')).toBeTruthy();
-  });
-
-  it('should sourceWordPlural appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        sourceWordPlural={'fuentes'}
-      />
-    );
-    expect(screen.getByText('2 fuentes')).toBeTruthy();
-  });
-
-  it('should change toNextPageAriaLabel appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        toNextPageAriaLabel="Pase a la siguiente página"
-      />
-    );
-    expect(screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
-  });
-
-  it('should change toPreviousPageAriaLabel appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        toPreviousPageAriaLabel="Presione para regresar a la página anterior"
-      />
-    );
-    expect(screen.getByRole('button', { name: /Presione para regresar a la página anterior/i })).toBeTruthy();
-  });
-
-  it('should call onNextClick appropriately', async () => {
-    const spy = jest.fn();
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        onNextClick={spy}
-      />
-    );
-    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
-    expect(spy).toHaveBeenCalled();
-  });
-
-  it('should call onPreviousClick appropriately', async () => {
-    const spy = jest.fn();
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        onPreviousClick={spy}
-      />
-    );
-    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
-    await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
-    expect(spy).toHaveBeenCalled();
-  });
-
-  it('should call onSetPage appropriately', async () => {
-    const spy = jest.fn();
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        onSetPage={spy}
-      />
-    );
-    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
-    expect(spy).toHaveBeenCalledTimes(1);
-    await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
-    expect(spy).toHaveBeenCalledTimes(2);
-  });
-
-  it('should handle showMore appropriately', async () => {
-    render(
-      <SourcesCard
-        sources={[
-          {
-            title: 'Getting started with Red Hat OpenShift',
-            link: '#',
-            body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
-            hasShowMore: true
-          },
-          {
-            title: 'Azure Red Hat OpenShift documentation',
-            link: '#',
-            body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
-          },
-          {
-            title: 'OKD Documentation: Home',
-            link: '#',
-            body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
-          }
-        ]}
-      />
-    );
-    expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
-  });
-
-  it('should call onClick appropriately', async () => {
-    const spy = jest.fn();
-    render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '', onClick: spy }]} />);
-    await userEvent.click(screen.getByRole('link', { name: /How to make an apple pie/i }));
-    expect(spy).toHaveBeenCalled();
-  });
-
-  it('should apply titleProps appropriately', () => {
-    render(
-      <SourcesCard sources={[{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }]} />
-    );
-    expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
-  });
-
-  it('should apply cardTitleProps appropriately', () => {
-    render(
-      <SourcesCard
-        cardTitleProps={{ 'data-testid': 'card-title', className: 'test' } as any}
-        sources={[{ title: 'How to make an apple pie', link: '' }]}
-      />
-    );
-    expect(screen.getByTestId('card-title')).toHaveClass('test');
-  });
-
-  it('should apply cardBodyProps appropriately', () => {
-    render(
-      <SourcesCard
-        cardBodyProps={
-          { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' } as any
-        }
-        sources={[{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }]}
-      />
-    );
-    expect(screen.getByTestId('card-body')).toHaveClass('test');
-  });
-
-  it('should apply cardFooterProps appropriately', () => {
-    render(
-      <SourcesCard
-        cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-      />
-    );
-    expect(screen.getByTestId('card-footer')).toHaveClass('test');
-  });
-
-  it('should apply truncateProps appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          {
-            title: 'How to make an apple pie',
-            link: '',
-            truncateProps: { 'data-testid': 'card-truncate', className: 'test' } as any
-          }
-        ]}
-      />
-    );
-    expect(screen.getByTestId('card-truncate')).toHaveClass('test');
-  });
-
-  it('should apply custom footer appropriately when there is one source', () => {
-    render(
-      <SourcesCard sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]} />
-    );
-    expect(screen.getByText('I am a custom footer'));
-    expect(screen.queryByText('1/1')).toBeFalsy();
-  });
-
-  it('should apply custom footer appropriately when are multiple sources', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> },
-          { title: 'How to bake bread', link: '' }
-        ]}
-      />
-    );
-    expect(screen.getByText('I am a custom footer'));
-    // does not show navigation bar
-    expect(screen.queryByText('1/2')).toBeFalsy();
-  });
-
-  it('should apply footer props to custom footer appropriately', () => {
-    render(
-      <SourcesCard
-        cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
-        sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]}
-      />
-    );
-    expect(screen.getByText('I am a custom footer'));
-    expect(screen.getByTestId('card-footer')).toHaveClass('test');
-  });
-
-  it('should apply subtitle appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }]}
-      />
-    );
-    expect(screen.getByText('How to make an apple pie'));
-    expect(screen.getByText('You must first create the universe'));
-  });
 });

package/src/SourcesCard/SourcesCard.tsx

@@ -1,29 +1,18 @@
 // ============================================================================
 // Chatbot Main - Messages - Sources Card
 // ============================================================================
-import type { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { useState } from 'react';
+import type { FunctionComponent } from 'react';
 // Import PatternFly components
 import {
-  Button,
   ButtonProps,
-  ButtonVariant,
-  Card,
-  CardBody,
   CardBodyProps,
-  CardFooter,
   CardFooterProps,
   CardProps,
-  CardTitle,
   CardTitleProps,
-  ExpandableSection,
-  ExpandableSectionVariant,
-  Icon,
   pluralize,
-  Truncate,
   TruncateProps
 } from '@patternfly/react-core';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import SourcesCardBase from '../SourcesCardBase';
 
 export interface SourcesCardProps extends CardProps {
   /** Additional classes for the pagination navigation container. */
@@ -84,167 +73,15 @@ export interface SourcesCardProps extends CardProps {
 }
 
 const SourcesCard: FunctionComponent<SourcesCardProps> = ({
-  className,
-  isDisabled,
-  paginationAriaLabel = 'Pagination',
   sources,
   sourceWord = 'source',
   sourceWordPlural = 'sources',
-  toNextPageAriaLabel = 'Go to next page',
-  toPreviousPageAriaLabel = 'Go to previous page',
-  onNextClick,
-  onPreviousClick,
-  onSetPage,
-  showMoreWords = 'show more',
-  showLessWords = 'show less',
-  isCompact,
-  cardTitleProps,
-  cardBodyProps,
-  cardFooterProps,
   ...props
-}: SourcesCardProps) => {
-  const [page, setPage] = useState(1);
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
-    setIsExpanded(isExpanded);
-  };
-
-  const handleNewPage = (_evt: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
-    setPage(newPage);
-    onSetPage && onSetPage(_evt, newPage);
-  };
-
-  const renderTitle = (title?: string, truncateProps?: TruncateProps) => {
-    if (title) {
-      return <Truncate content={title} {...truncateProps} />;
-    }
-    return `Source ${page}`;
-  };
-
-  return (
-    <div className="pf-chatbot__source">
-      <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
-      <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
-        <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
-          <div className="pf-chatbot__sources-card-title-container">
-            <Button
-              component="a"
-              variant={ButtonVariant.link}
-              href={sources[page - 1].link}
-              icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
-              iconPosition="end"
-              isInline
-              rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
-              target={sources[page - 1].isExternal ? '_blank' : undefined}
-              onClick={sources[page - 1].onClick ?? undefined}
-              {...sources[page - 1].titleProps}
-            >
-              {renderTitle(sources[page - 1].title, sources[page - 1].truncateProps)}
-            </Button>
-            {sources[page - 1].subtitle && (
-              <span className="pf-chatbot__sources-card-subtitle">{sources[page - 1].subtitle}</span>
-            )}
-          </div>
-        </CardTitle>
-        {sources[page - 1].body && (
-          <CardBody
-            className={`pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}`}
-            {...cardBodyProps}
-          >
-            {sources[page - 1].hasShowMore ? (
-              // prevents extra VO announcements of button text - parent Message has aria-live
-              <div aria-live="off">
-                <ExpandableSection
-                  variant={ExpandableSectionVariant.truncate}
-                  toggleText={isExpanded ? showLessWords : showMoreWords}
-                  onToggle={onToggle}
-                  isExpanded={isExpanded}
-                  truncateMaxLines={2}
-                >
-                  {sources[page - 1].body}
-                </ExpandableSection>
-              </div>
-            ) : (
-              <div className="pf-chatbot__sources-card-body-text">{sources[page - 1].body}</div>
-            )}
-          </CardBody>
-        )}
-        {sources[page - 1].footer ? (
-          <CardFooter className="pf-chatbot__sources-card-footer" {...cardFooterProps}>
-            {sources[page - 1].footer}
-          </CardFooter>
-        ) : (
-          sources.length > 1 && (
-            <CardFooter className="pf-chatbot__sources-card-footer-container" {...cardFooterProps}>
-              <div className="pf-chatbot__sources-card-footer">
-                <nav
-                  className={`pf-chatbot__sources-card-footer-buttons ${className}`}
-                  aria-label={paginationAriaLabel}
-                >
-                  <Button
-                    variant={ButtonVariant.plain}
-                    isDisabled={isDisabled || page === 1}
-                    data-action="previous"
-                    onClick={(event) => {
-                      const newPage = page >= 1 ? page - 1 : 1;
-                      onPreviousClick && onPreviousClick(event, newPage);
-                      handleNewPage(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 aria-hidden="true">
-                    {page}/{sources.length}
-                  </span>
-                  <Button
-                    variant={ButtonVariant.plain}
-                    isDisabled={isDisabled || page === sources.length}
-                    aria-label={toNextPageAriaLabel}
-                    data-action="next"
-                    onClick={(event) => {
-                      const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
-                      onNextClick && onNextClick(event, newPage);
-                      handleNewPage(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>
-              </div>
-            </CardFooter>
-          )
-        )}
-      </Card>
-    </div>
-  );
-};
+}: SourcesCardProps) => (
+  <div className="pf-chatbot__source">
+    <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
+    <SourcesCardBase sources={sources} {...props} />
+  </div>
+);
 
 export default SourcesCard;