From 5fb9dd223924e4ced09252ff549f079f5580d979 Mon Sep 17 00:00:00 2001
From: Edward Louth <edward@louths.com>
Date: Mon, 13 Nov 2023 12:19:39 +0000
Subject: [PATCH] Further test fixes

---
 .../src/components/chat/ChatMessage.tsx       | 32 +-------------
 .../src/components/utils/Markdown.tsx         | 44 +++++++++++++++++++
 2 files changed, 46 insertions(+), 30 deletions(-)
 create mode 100644 grai-frontend/src/components/utils/Markdown.tsx

diff --git a/grai-frontend/src/components/chat/ChatMessage.tsx b/grai-frontend/src/components/chat/ChatMessage.tsx
index f53067ff5..36aa9b622 100644
--- a/grai-frontend/src/components/chat/ChatMessage.tsx
+++ b/grai-frontend/src/components/chat/ChatMessage.tsx
@@ -1,11 +1,8 @@
 import React from "react"
 import { Avatar, Box, Grid } from "@mui/material"
-import Markdown from "react-markdown"
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
-import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism"
-import remarkGfm from "remark-gfm"
 import theme from "theme"
 import { GraiIconSmall } from "components/icons"
+import Markdown from "components/utils/Markdown"
 
 export type GroupedChats = {
   sender: boolean
@@ -49,7 +46,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ groupedChat }) => {
   const side = groupedChat.sender ? "right" : "left"
 
   const messages = groupedChat.messages
-  const remarkPlugins = [remarkGfm]
 
   const attachClass = (index: number) => {
     if (index === 0) {
@@ -108,31 +104,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ groupedChat }) => {
                 ...classes[side],
               }}
             >
-              <Markdown
-                remarkPlugins={remarkPlugins}
-                components={{
-                  p: ({ children }) => <>{children}</>,
-                  code: ({ children, className, node, ref, ...rest }) => {
-                    const match = /language-(\w+)/.exec(className || "")
-
-                    return match ? (
-                      <SyntaxHighlighter
-                        {...rest}
-                        PreTag="div"
-                        children={String(children).replace(/\n$/, "")}
-                        language={match[1]}
-                        style={dark}
-                      />
-                    ) : (
-                      <code {...rest} className={className}>
-                        {children}
-                      </code>
-                    )
-                  },
-                }}
-              >
-                {msg}
-              </Markdown>
+              <Markdown message={msg} />
             </Box>
           </Box>
         ))}
diff --git a/grai-frontend/src/components/utils/Markdown.tsx b/grai-frontend/src/components/utils/Markdown.tsx
new file mode 100644
index 000000000..686d09885
--- /dev/null
+++ b/grai-frontend/src/components/utils/Markdown.tsx
@@ -0,0 +1,44 @@
+/* istanbul ignore file */
+import React from "react"
+import BaseMarkdown from "react-markdown"
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
+import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism"
+import remarkGfm from "remark-gfm"
+
+type MarkdownProps = {
+  message: string | null | undefined
+}
+
+const Markdown: React.FC<MarkdownProps> = ({ message }) => {
+  const remarkPlugins = [remarkGfm]
+
+  return (
+    <BaseMarkdown
+      remarkPlugins={remarkPlugins}
+      components={{
+        p: ({ children }) => <>{children}</>,
+        code: ({ children, className, node, ref, ...rest }) => {
+          const match = /language-(\w+)/.exec(className || "")
+
+          return match ? (
+            <SyntaxHighlighter
+              {...rest}
+              PreTag="div"
+              children={String(children).replace(/\n$/, "")}
+              language={match[1]}
+              style={dark}
+            />
+          ) : (
+            <code {...rest} className={className}>
+              {children}
+            </code>
+          )
+        },
+      }}
+    >
+      {message}
+    </BaseMarkdown>
+  )
+}
+
+export default Markdown