render chat messages as markdown (#263)

### Description

When requesting `generate a table of fruits` or `generate some code to
count from 1 to 200` the response will contain markdown:

![image](https://github.com/microsoft/chat-copilot/assets/13119203/12b11e19-1e2b-4335-b45a-e3dd97919de2)

However Markdown can not be rendered in the frontend. This PR fixes it
by adding a markdown rendering library and making use of it:

![image](https://github.com/microsoft/chat-copilot/assets/13119203/726b6fe9-4673-4021-87c9-923d48a1d64d)

This also avoids using `dangerouslySetInnerHTML` attribute. The library
`remark-gfm` is used because `react-markdown` does not support tables
out of the box.

This is how urls or links would be rendered:

![image](https://github.com/microsoft/chat-copilot/assets/13119203/0b084d58-9602-4682-b5d2-ea77dbd6bbd9)

Author: Rainson12

webapp/package.json

@@ -27,7 +27,9 @@
     "microsoft-cognitiveservices-speech-sdk": "^1.31.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.2"
+    "react-markdown": "^8.0.7",
+    "react-redux": "^8.1.2",
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

webapp/src/components/chat/chat-history/ChatHistoryTextContent.tsx

@@ -2,8 +2,9 @@
 
 import { makeStyles } from '@fluentui/react-components';
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { IChatMessage } from '../../../libs/models/ChatMessage';
-import { convertToAnchorTags } from '../../utils/TextUtils';
 import * as utils from './../../utils/TextUtils';
 
 const useClasses = makeStyles({
@@ -18,12 +19,11 @@ interface ChatHistoryTextContentProps {
 
 export const ChatHistoryTextContent: React.FC<ChatHistoryTextContentProps> = ({ message }) => {
     const classes = useClasses();
+    const content = utils.formatChatTextContent(message.content);
 
-    let content = message.content.trim().replace(/[\u00A0-\u9999<>&]/g, function (i: string) {
-        return `&#${i.charCodeAt(0)};`;
-    });
-    content = utils.formatChatTextContent(content);
-    content = content.replace(/\n/g, '<br />').replace(/ {2}/g, '&nbsp;&nbsp;');
-
-    return <div className={classes.content} dangerouslySetInnerHTML={{ __html: convertToAnchorTags(content) }} />;
+    return (
+        <div className={classes.content}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        </div>
+    );
 };

webapp/src/components/utils/TextUtils.tsx

@@ -1,26 +1,5 @@
 import { Body1, tokens } from '@fluentui/react-components';
 
-/*
- * Function to detect and convert URLs within a string into clickable links.
- * It wraps each link matched with anchor tags and applies safe href attributes.
- */
-export function convertToAnchorTags(htmlString: string) {
-    // Regular expression to match links, excluding any HTML tags at the end
-    // Since response from bot is plain text, sometimes line breaks and other html tags are included in the response for readability.
-    const linkRegex =
-        /(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-/]))?(?=(<br|<p|<div|<span)\s*\/>|$)/g;
-
-    const result = htmlString.replace(linkRegex, function (link) {
-        // Parse URL first -- URL class handles cybersecurity concerns related to URL parsing and manipulation
-        const safeHref = new URL(link).toString();
-
-        // Replace each link with anchor tags
-        return `<a href="${safeHref}">${link}</a>`;
-    });
-
-    return result;
-}
-
 /*
  * Function to check if date is today.
  */