Merge pull request #108 from PytorchConnectomics/render-markdown-tables

render chatbot markdown tables correctly

Author: akgohain

client/package-lock.json

@@ -22,6 +22,7 @@
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
+    "remark-gfm": "^4.0.1",
     "utif": "^3.1.0",
     "web-vitals": "^4.1.1"
   },

client/package.json

@@ -3,6 +3,7 @@ import { Button, Input, List, Typography, Space, Spin, Popconfirm } from "antd";
 import { SendOutlined, CloseOutlined, DeleteOutlined } from "@ant-design/icons";
 import { queryChatBot, clearChat } from "../api";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
 const { TextArea } = Input;
 const { Text } = Typography;
@@ -155,6 +156,7 @@ function Chatbot({ onClose }) {
                     <Text style={{ color: "white" }}>{message.text}</Text>
                   ) : (
                     <ReactMarkdown
+                      remarkPlugins={[remarkGfm]}
                       components={{
                         ul: ({ children }) => (
                           <ul style={{ paddingLeft: "20px", margin: "8px 0" }}>