feat: add renderMarkdown toggle to MessageBubble (#101)

Adds a toggle for whether user message text should be rendered as markdown or as plain text. Previously always rendered as Markdown. Rendering as plain text is useful when rendering logs of old conversations.

J=APV-939
TEST=auto,manual

Added unit tests. Modified ChatPanel locally to use renderMarkdown=false, spun up test-site, and confirmed a Markdown link was rendered as plain text.

Author: mkouzel-yext

docs/chat-ui-react.md

@@ -12,7 +12,7 @@
 |  [ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, onSend, onRetry, })](./chat-ui-react.chatinput.md) | A component that allows user to input message and send to Chat API. |
 |  [ChatPanel(props)](./chat-ui-react.chatpanel.md) | A component that renders a full panel for chat bot interactions. This includes the message bubbles for the conversation, input box with send button, and header (if provided). |
 |  [ChatPopUp(props)](./chat-ui-react.chatpopup.md) | A component that renders a popup button that displays and hides a panel for chat bot interactions. |
-|  [MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, })](./chat-ui-react.messagebubble.md) | A component that displays the provided message. |
+|  [MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, renderMarkdown, })](./chat-ui-react.messagebubble.md) | A component that displays the provided message. |
 |  [useComposedCssClasses(builtInClasses, customClasses)](./chat-ui-react.usecomposedcssclasses.md) | useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes. |
 |  [useReportAnalyticsEvent()](./chat-ui-react.usereportanalyticsevent.md) | Returns a function to send requests to Yext Analytics API. |
 

docs/chat-ui-react.messagebubble.md

@@ -9,14 +9,14 @@ A component that displays the provided message.
 **Signature:**
 
 ```typescript
-export declare function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, }: MessageBubbleProps): React.JSX.Element;
+export declare function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, renderMarkdown, }: MessageBubbleProps): React.JSX.Element;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, } | [MessageBubbleProps](./chat-ui-react.messagebubbleprops.md) |  |
+|  { message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, renderMarkdown, } | [MessageBubbleProps](./chat-ui-react.messagebubbleprops.md) |  |
 
 **Returns:**
 

docs/chat-ui-react.messagebubbleprops.md

@@ -21,6 +21,7 @@ export interface MessageBubbleProps
 |  [linkTarget?](./chat-ui-react.messagebubbleprops.linktarget.md) |  | string | _(Optional)_ Link target open behavior on click. |
 |  [message](./chat-ui-react.messagebubbleprops.message.md) |  | Message | The message to display. |
 |  [onLinkClick?](./chat-ui-react.messagebubbleprops.onlinkclick.md) |  | (href?: string) => void | _(Optional)_ A callback which is called when user clicks a link. |
+|  [renderMarkdown?](./chat-ui-react.messagebubbleprops.rendermarkdown.md) |  | boolean | _(Optional)_ Whether to render the message text as markdown. Defaults to true. |
 |  [showFeedbackButtons?](./chat-ui-react.messagebubbleprops.showfeedbackbuttons.md) |  | boolean | _(Optional)_ Whether to show the feedback buttons on the message bubble. Defaults to true. |
 |  [showTimestamp?](./chat-ui-react.messagebubbleprops.showtimestamp.md) |  | boolean | _(Optional)_ Whether to show the timestamp of the message with the message bubble. Defaults to true. |
 

docs/chat-ui-react.messagebubbleprops.rendermarkdown.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/chat-ui-react](./chat-ui-react.md) &gt; [MessageBubbleProps](./chat-ui-react.messagebubbleprops.md) &gt; [renderMarkdown](./chat-ui-react.messagebubbleprops.rendermarkdown.md)
+
+## MessageBubbleProps.renderMarkdown property
+
+Whether to render the message text as markdown. Defaults to true.
+
+**Signature:**
+
+```typescript
+renderMarkdown?: boolean;
+```

etc/chat-ui-react.api.md

@@ -178,7 +178,7 @@ export interface InitialMessagePopUpCssClasses {
 }
 
 // @public
-export function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, }: MessageBubbleProps): React_2.JSX.Element;
+export function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, renderMarkdown, }: MessageBubbleProps): React_2.JSX.Element;
 
 // @public
 export interface MessageBubbleCssClasses {
@@ -219,6 +219,7 @@ export interface MessageBubbleProps {
     linkTarget?: string;
     message: Message;
     onLinkClick?: (href?: string) => void;
+    renderMarkdown?: boolean;
     showFeedbackButtons?: boolean;
     showTimestamp?: boolean;
 }

src/components/MessageBubble.tsx

@@ -79,6 +79,11 @@ export interface MessageBubbleProps {
   linkTarget?: string;
   /** A callback which is called when user clicks a link. */
   onLinkClick?: (href?: string) => void;
+  /**
+   * Whether to render the message text as markdown.
+   * Defaults to true.
+   */
+  renderMarkdown?: boolean;
 }
 
 /**
@@ -96,6 +101,7 @@ export function MessageBubble({
   formatTimestamp = defaultFormatTimestamp,
   linkTarget,
   onLinkClick,
+  renderMarkdown = true,
 }: MessageBubbleProps) {
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
   const bubbleCssClasses = twMerge(
@@ -140,13 +146,17 @@ export function MessageBubble({
               responseId={message.responseId}
             />
           )}
-          <Markdown
-            content={message.text}
-            responseId={message.responseId}
-            customCssClasses={markdownCssClasses}
-            linkTarget={linkTarget}
-            onLinkClick={onLinkClick}
-          />
+          {renderMarkdown ? (
+            <Markdown
+              content={message.text}
+              responseId={message.responseId}
+              customCssClasses={markdownCssClasses}
+              linkTarget={linkTarget}
+              onLinkClick={onLinkClick}
+            />
+          ) : (
+            <div className={textCssClasses}>{message.text}</div>
+          )}
         </div>
         {/* fallback on empty space here to perserve the height for timestamp div */}
         {showTimestamp && (

tests/components/MessageBubble.test.tsx

@@ -79,3 +79,53 @@ it("applies link target setting (parent)", async () => {
 
   expect(screen.getByText("msg link")).toHaveAttribute("target", "_parent");
 });
+
+it("renders markdown by default", () => {
+  const linkMessage: Message = {
+    text: "Test [msg link](msglink)",
+    timestamp: "2023-06-01T15:26:55.362Z",
+    source: MessageSource.USER,
+  };
+
+  render(
+    <ChatHeadlessProvider config={dummyConfig}>
+      <MessageBubble message={linkMessage} />
+    </ChatHeadlessProvider>
+  );
+
+  expect(screen.getByText("msg link")).toHaveAttribute("href", "msglink");
+});
+
+it("renders raw message text when renderMarkdown is false", () => {
+  const linkMessage: Message = {
+    text: "Test [msg link](msglink)",
+    timestamp: "2023-06-01T15:26:55.362Z",
+    source: MessageSource.USER,
+  };
+
+  render(
+    <ChatHeadlessProvider config={dummyConfig}>
+      <MessageBubble message={linkMessage} renderMarkdown={false} />
+    </ChatHeadlessProvider>
+  );
+
+  expect(screen.getByText(linkMessage.text)).toBeInTheDocument();
+  expect(screen.queryByRole("link")).not.toBeInTheDocument();
+});
+
+it("escapes html when renderMarkdown is false", () => {
+  const htmlMessage: Message = {
+    text: "<strong>Test</strong>",
+    timestamp: "2023-06-01T15:26:55.362Z",
+    source: MessageSource.USER,
+  };
+
+  render(
+    <ChatHeadlessProvider config={dummyConfig}>
+      <MessageBubble message={htmlMessage} renderMarkdown={false} />
+    </ChatHeadlessProvider>
+  );
+
+  expect(screen.getByText(htmlMessage.text)).toBeInTheDocument();
+  expect(screen.queryByText("Test")).not.toBeInTheDocument();
+});