[devtools] Update Chat rendering to support blockquote (#254)

* [devtools] Update Chat rendering to support blockquote

* [devtools] Support underline and striketrhough too

Author: Jesperholmbergmsft

package-lock.json

@@ -28,6 +28,7 @@
     "codemirror": "^6.0.1",
     "date-fns": "^4.1.0",
     "highlight.js": "^11.11.1",
+    "htmlparser2": "^10.0.0",
     "mdast-util-from-markdown": "^2.0.2",
     "mdast-util-gfm": "^3.1.0",
     "micromark-extension-gfm": "^3.0.0",

packages/devtools/package.json

@@ -16,12 +16,12 @@ const useChatMessageStyles = makeStyles({
     display: 'block',
     position: 'relative',
     padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+    boxSizing: 'border-box',
     borderRadius: tokens.borderRadiusMedium,
     border: `${tokens.strokeWidthThick} solid ${tokens.colorSubtleBackground}`,
     width: '100%',
     wordWrap: 'break-word',
     overflowWrap: 'break-word',
-    whiteSpace: 'pre-wrap',
     '&:focus': {
       outline: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralForeground2Link}`,
       borderRadius: tokens.borderRadiusMedium,

packages/devtools/src/components/ChatMessage/ChatMessage.styles.ts

@@ -4,10 +4,9 @@ import { Message, MessageUser, MessageReaction } from '@microsoft/teams.api';
 
 import { useChatStore } from '../../stores/ChatStore';
 import { MessageActionUIPayload } from '../../types/MessageActionUI';
-import { hasMarkdownContent } from '../../utils/markdown';
 import Feedback from '../Feedback/Feedback';
+import HtmlMessageContent from '../HtmlMessageContent/HtmlMessageContent';
 import MessageActionsToolbar from '../MessageActionsToolbar/MessageActionsToolbar';
-import { MarkdownContent } from '../MarkdownContent';
 
 import ChatMessageDeleted from './MessageUpdate/ChatMessageDeleted';
 import useChatMessageStyles from './ChatMessage.styles';
@@ -117,12 +116,6 @@ const ChatMessage: FC<ChatMessageProps> = memo(
       );
     }
 
-    const messageContent = hasMarkdownContent(content) ? (
-      <MarkdownContent content={content} />
-    ) : (
-      <div className={classes.messageText}>{content}</div>
-    );
-
     return (
       <>
         <div
@@ -154,7 +147,7 @@ const ChatMessage: FC<ChatMessageProps> = memo(
                 className={mergeClasses(classes.messageBody, streaming && classes.streaming)}
               >
                 <div className={classes.messageContent}>
-                  {messageContent}
+                  <HtmlMessageContent content={content} />
                   {value.attachments && value.attachments.length > 0 && (
                     <MessageAttachments attachments={value.attachments} classes={classes} />
                   )}

packages/devtools/src/components/ChatMessage/ChatMessage.tsx

@@ -0,0 +1,48 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+export const useClasses = makeStyles({
+  contentContainer: {
+    "& div, & p, & pre, & blockquote": {
+      margin: 0,
+      marginBottom: tokens.spacingVerticalS,
+    },
+    "& img": {
+      // this to align inline emojis with the text
+      verticalAlign: "text-bottom",
+    },
+    "& > blockquote": {
+      // this is used for quoted messages
+      margin: `${tokens.spacingVerticalXS} 0`,
+      padding: `${tokens.spacingVerticalS} ${tokens.spacingVerticalS} ${tokens.spacingVerticalS} ${tokens.spacingVerticalM}`,
+      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
+      borderLeft: `${tokens.strokeWidthThicker} solid ${tokens.colorNeutralForeground4}`,
+      background: tokens.colorNeutralBackground2,
+      fontWeight: tokens.fontWeightRegular,
+      marginBlock: "unset",
+
+      // these are used for author name and timestamp
+      "& > *:not(p)": {
+        fontWeight: tokens.fontWeightRegular,
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200,
+        color: tokens.colorNeutralForeground1,
+      },
+      // add margin between adjacent elements - e.g between quote author name & timestamp
+      "& > *:not(:last-child)": {
+        marginRight: tokens.spacingHorizontalXS,
+      },
+    },
+    "& > pre": {
+      // this is used for the code blocks
+      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
+      background: tokens.colorNeutralBackground2,
+
+      "& > code": {
+        fontFamily: tokens.fontFamilyMonospace,
+        fontWeight: tokens.fontWeightRegular,
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200,
+      },
+    },
+  },
+});

packages/devtools/src/components/HtmlMessageContent/HtmlMessageContent.styles.ts

@@ -0,0 +1,108 @@
+import React from 'react';
+import { parseDocument } from 'htmlparser2';
+
+import { useClasses } from './HtmlMessageContent.styles';
+
+interface Props {
+  content: string;
+}
+
+// htmlparser2 lower-cases attribute names while parsing
+type LowercaseProps<T> = {
+  [K in keyof T as K extends string ? Lowercase<K> : never]?: T[K];
+};
+type HTMLElementAttributes =LowercaseProps<React.HTMLAttributes<HTMLElement>>;
+
+// these are attributes that we don't want to render on any of the nodes, because they either irrelevant
+// or problematic. E.g. className & style can break rendering; while the item* ones are irrelevant and 
+// React really don't like how they're just lower-case.
+const omitAttributes : Readonly<string[]> = ['class', 'classname', 'itemid', 'itemprop', 'itemscope', 'itemtype', 'style'];
+
+// this map captures the fixed set of attributes that must be applied to certain tags
+const fixedAttributeMap : Record<string, Readonly<Record<string, string>>> = {
+    'a':
+       {
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      }
+};
+
+// generates child content based on itemProp, if applicable
+const getChildContent = ({ children,  itemprop, itemid } : HTMLElementAttributes) => {
+  switch (itemprop) {
+    case 'time': {
+        const date = new Date(Number(itemid ?? ''));
+        // In the dev tools, this attribute might contain an activity guid rather than a timestamp.
+        // No biggie, let's just fall back on the current time.
+        return isNaN(date.getTime()) ? (new Date().toLocaleString()) : (date.toLocaleString());
+    }
+    default:
+      return children;
+  }
+}
+
+// adjusts the attributes that are rendered for each tag - either clean up gunk, or add mandatory attributes.
+const getEffectiveAttributes = ({name, attribs } : {name: string, attribs: Record<string, any>}) => {
+  // remove attributes that irrelevant or problematic.
+  const effectiveAttributes = Object.fromEntries(
+    Object.entries(attribs).filter(([key]) => !omitAttributes.includes(key))
+  );
+
+  // add any fixed attributes for the tag
+  const fixedAttributes = fixedAttributeMap[name];
+  return !fixedAttributes ? effectiveAttributes : {...effectiveAttributes, ...fixedAttributes};
+}
+
+const renderNode = (node: any, key: number = 0): React.ReactNode => {
+  if (node.type === 'text')  {
+    return <span key={key}>{node.data}</span>;
+  }
+
+  if (node.type === 'tag') {
+    const childNodes = (node.children?.map((child: any, i: number) => renderNode(child, i)));
+    const children = getChildContent({ ...node.attribs, children: childNodes});
+    const attribs = getEffectiveAttributes(node);
+
+    switch (node.name) {
+      case 'a':
+      case 'b':
+      case 'blockquote':
+      case 'code':
+      case 'div':
+      case 'em':
+      case 'i':
+      case 'li':
+      case 'ol':
+      case 'p':
+      case 'pre':
+      case 's':
+      case 'span':
+      case 'strong':
+      case 'u':
+      case 'ul':
+        {
+          const Component = node.name;
+          return <Component key={key} {...attribs}>{children}</Component>;
+        }
+      case 'br':
+        case 'img':
+        {
+          const Component = node.name;
+          return <Component key={key} {...attribs} />;
+        }
+      default:
+        return <span key={key} {...attribs}>{children}</span>;
+    }
+  }
+
+  return null;
+};
+
+const HtmlMessageContent = React.memo(function HtmlMessageContent ({ content }: Props)  {
+  const classes = useClasses();
+  const dom = parseDocument(content, { });
+  const body = dom.children || [];
+  return <div className={classes.contentContainer} >{body.map((node, i) => renderNode(node, i))}</div>;
+});
+
+export default HtmlMessageContent;