Added remark gfm to render tables (All-Hands-AI#3423)

Co-authored-by: Tim O'Farrell <[email protected]>
nicelife729 · Aug 16, 2024 · f8b129d · f8b129d
1 parent 23608be
commit f8b129d
Show file tree

Hide file tree

Showing 4 changed files with 289 additions and 1 deletion.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,6 +30,7 @@
     "react-markdown": "^9.0.1",
     "react-redux": "^9.1.2",
     "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.5.2",
     "vite": "^5.4.1",
     "web-vitals": "^3.5.2"

diff --git a/frontend/src/components/chat/ChatMessage.tsx b/frontend/src/components/chat/ChatMessage.tsx
@@ -3,6 +3,7 @@ import Markdown from "react-markdown";
 import { FaClipboard, FaClipboardCheck } from "react-icons/fa";
 import { twMerge } from "tailwind-merge";
 import { useTranslation } from "react-i18next";
+import remarkGfm from "remark-gfm";
 import { code } from "../markdown/code";
 import toast from "#/utils/toast";
 import { I18nKey } from "#/i18n/declaration";
@@ -76,7 +77,9 @@ function ChatMessage({
           {isCopy ? <FaClipboardCheck /> : <FaClipboard />}
         </button>
       )}
-      <Markdown components={{ code }}>{message.content}</Markdown>
+      <Markdown components={{ code }} remarkPlugins={[remarkGfm]}>
+        {message.content}
+      </Markdown>
       {message.imageUrls.length > 0 && (
         <div className="flex space-x-2 mt-2">
           {message.imageUrls.map((url, index) => (

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -49,3 +49,11 @@ code {
   list-style-type: disc; /* Handles bullet points */
   margin-left: 20px;
 }
+
+.markdown-body th {
+  text-align: left;
+}
+
+.markdown-body th, .markdown-body td {
+  padding: 0.1rem 1rem;
+}