Merge pull request #446 from rebeccaalpert/links

feat(Message): Add ability to handle external links

Author: nicolethoen

package-lock.json

@@ -91,7 +91,6 @@
     "puppeteer-cluster": "^0.24.0"
   },
   "dependencies": {
-    "dompurify": "^3.2.0",
     "react-dropzone": "^14.2.3"
   },
   "packageManager": "[email protected]+sha512.837566d24eec14ec0f5f1411adb544e892b3454255e61fdef8fd05f3429480102806bac7446bc9daff3896b01ae4b62d00096c7e989f1596f2af10b927532f39"

package.json

@@ -40,6 +40,8 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
     "rehype-unwrap-images": "^1.0.0",
+    "rehype-external-links": "^3.0.0",
+    "rehype-sanitize": "^6.0.0",
     "path-browserify": "^1.0.1"
   },
   "peerDependencies": {

packages/module/package.json

@@ -12,7 +12,7 @@
   background-color: var(--pf-t--chatbot--background);
   border-radius: var(--pf-t--global--border--radius--medium);
   box-shadow: var(--pf-t--global--box-shadow--lg);
-  font-size: var(--pf-t--chatbot--font-size);
+  font-size: var(--pf-t--global--font--size--md);
   z-index: var(--pf-t--global--z-index--md);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

packages/module/src/Chatbot/Chatbot.scss

@@ -0,0 +1,34 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Link
+// ============================================================================
+
+import React from 'react';
+import { Button, ButtonProps } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+
+const LinkMessage = ({ children, target, href, ...props }: ButtonProps) => {
+  if (target === '_blank') {
+    return (
+      <Button
+        component="a"
+        variant="link"
+        href={href}
+        icon={<ExternalLinkSquareAltIcon />}
+        iconPosition="end"
+        isInline
+        target={target}
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+
+  return (
+    <Button isInline component="a" href={href} variant="link" {...props}>
+      {children}
+    </Button>
+  );
+};
+
+export default LinkMessage;

packages/module/src/Message/LinkMessage/LinkMessage.tsx

@@ -11,7 +11,7 @@
   .pf-v6-c-list,
   ul,
   li {
-    font-size: var(--pf-t--chatbot--font-size);
+    font-size: var(--pf-t--global--font--size--md);
   }
 }
 

packages/module/src/Message/ListMessage/ListMessage.scss

@@ -5,6 +5,7 @@ import Message from './Message';
 import userEvent from '@testing-library/user-event';
 import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
 import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
+import rehypeExternalLinks from '../__mocks__/rehype-external-links';
 
 const ALL_ACTIONS = [
   { label: /Good response/i },
@@ -150,6 +151,9 @@ const checkListItemsRendered = () => {
 };
 
 describe('Message', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   it('should render user messages correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content="Hi" />);
     expect(screen.getByText('User')).toBeTruthy();
@@ -747,4 +751,22 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={IMAGE} />);
     expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
   });
+  it('should handle external links correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={`[PatternFly](https://www.patternfly.org/)`} />);
+    // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
+    expect(rehypeExternalLinks).toHaveBeenCalledTimes(1);
+  });
+  it('should handle external links correctly', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={`[PatternFly](https://www.patternfly.org/)`}
+        openLinkInNewTab={false}
+      />
+    );
+    // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
+    expect(rehypeExternalLinks).not.toHaveBeenCalled();
+  });
 });

packages/module/src/Message/Message.test.tsx

@@ -38,7 +38,10 @@ import ThMessage from './TableMessage/ThMessage';
 import { TableProps } from '@patternfly/react-table';
 import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSanitize from 'rehype-sanitize';
 import { PluggableList } from 'react-markdown/lib';
+import LinkMessage from './LinkMessage/LinkMessage';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -136,6 +139,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
   /** Additional rehype plugins passed from the consumer */
   additionalRehypePlugins?: PluggableList;
+  /** Whether to open links in message in new tab. */
+  openLinkInNewTab?: boolean;
 }
 
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -162,10 +167,18 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   isLiveRegion = true,
   innerRef,
   tableProps,
+  openLinkInNewTab = true,
   additionalRehypePlugins = [],
   ...props
 }: MessageProps) => {
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages];
+  if (openLinkInNewTab) {
+    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
+  }
+  if (additionalRehypePlugins) {
+    rehypePlugins.push(...additionalRehypePlugins);
+  }
   let avatarClassName;
   if (avatarProps && 'className' in avatarProps) {
     const { className, ...rest } = avatarProps;
@@ -175,9 +188,6 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   // Keep timestamps consistent between Timestamp component and aria-label
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
-
-  const rehypePlugins = [rehypeUnwrapImages, ...(additionalRehypePlugins ?? [])];
-
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
@@ -244,7 +254,12 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                       return <TdMessage {...rest} />;
                     },
                     th: (props) => <ThMessage {...props} />,
-                    img: (props) => <ImageMessage {...props} />
+                    img: (props) => <ImageMessage {...props} />,
+                    a: (props) => (
+                      <LinkMessage href={props.href} rel={props.rel} target={props.target}>
+                        {props.children}
+                      </LinkMessage>
+                    )
                   }}
                   remarkPlugins={[remarkGfm]}
                   rehypePlugins={rehypePlugins}

packages/module/src/Message/Message.tsx

@@ -21,12 +21,16 @@
   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-v6-c-button.pf-m-link {
+    font-size: var(--pf-t--global--font--size--md);
+  }
+
   .pf-v6-c-content,
   .pf-v6-c-content--small,
   .pf-v6-c-content--blockquote,
   p,
   a {
-    --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
+    --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--md);
   }
 
   code {
@@ -41,6 +45,9 @@
     color: var(--pf-t--global--text--color--on-brand--default);
     --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
     padding: var(--pf-t--global--spacer--sm);
+    .pf-v6-c-button__icon {
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--on-brand--default);
+    }
 
     .pf-v6-c-content,
     .pf-v6-c-content--small,

packages/module/src/Message/TextMessage/TextMessage.scss

@@ -0,0 +1,3 @@
+const rehypeExternalLinks = jest.fn((children) => children);
+
+export default rehypeExternalLinks;