From dfc73a1fb28bea836fa389585cb3e165ee857383 Mon Sep 17 00:00:00 2001
From: Ismail Pelaseyed <homanp@gmail.com>
Date: Mon, 24 Apr 2023 10:49:24 +0200
Subject: [PATCH] Refactor chat (#81)

* Add `code blocks` to markdown

* Refactor messages

* Add autofocus to textarea
---
 app/api/v1/chatbots/[chatbotId]/route.js |   1 +
 components/chat/index.js                 |   5 +-
 components/chat/input.js                 |  15 ++-
 components/chat/message.js               | 100 ++++++++++++++++
 components/chat/output.js                | 125 ++------------------
 lib/chain.js                             |   2 +-
 lib/markdown.js                          |   7 ++
 lib/prisma.js                            |   2 +
 lib/prompt-template.js                   |  15 ++-
 package-lock.json                        | 141 +++++++++++++++++++++++
 package.json                             |   1 +
 11 files changed, 291 insertions(+), 123 deletions(-)
 create mode 100644 components/chat/message.js
 create mode 100644 lib/markdown.js

diff --git a/app/api/v1/chatbots/[chatbotId]/route.js b/app/api/v1/chatbots/[chatbotId]/route.js
index 2020d2d..d5ed47c 100644
--- a/app/api/v1/chatbots/[chatbotId]/route.js
+++ b/app/api/v1/chatbots/[chatbotId]/route.js
@@ -32,6 +32,7 @@ export async function POST(request, { params }) {
     : undefined;
 
   const handleNewToken = async (token) => {
+    const match = /\r|\n/.exec(token);
     await writer.ready;
     await writer.write(encoder.encode(`data: ${token}\n\n`));
   };
diff --git a/components/chat/index.js b/components/chat/index.js
index 3f17d7a..aa06369 100644
--- a/components/chat/index.js
+++ b/components/chat/index.js
@@ -10,6 +10,7 @@ export default function Chat({ id, ...properties }) {
   const [messages, setMessages] = useState([]);
   const [newMessage, setNewMessage] = useState();
   const [isSendingMessage, setIsSendingMessage] = useState();
+  const decoder = new TextDecoder();
 
   const onSubmit = useCallback(
     async (values) => {
@@ -35,8 +36,8 @@ export default function Chat({ id, ...properties }) {
           message: values,
         }),
         async onmessage(event) {
-          if (event.data !== "" && event.data !== "CLOSE") {
-            message += event.data;
+          if (event.data !== "CLOSE") {
+            message += event.data === "" ? `${event.data} \n` : event.data;
             setNewMessage(message);
           }
 
diff --git a/components/chat/input.js b/components/chat/input.js
index ddbcb75..9bacaba 100644
--- a/components/chat/input.js
+++ b/components/chat/input.js
@@ -49,20 +49,33 @@ export default function ChatInput({ isLoading, onSubmit, ...properties }) {
     };
   }, []);
 
+  useEffect(() => {
+    const ref = textareaReference?.current;
+
+    if (!isLoading) {
+      ref.focus();
+    }
+  }, [isLoading]);
+
   return (
     <Box {...properties} bgGradient={backgroundGradient}>
       <Container alignSelf="center" maxWidth="4xl">
         <HStack
           backgroundColor={backgroundColor}
           borderWidth="1px"
-          padding={4}
+          paddingY={2}
+          paddingLeft={4}
+          paddingRight={2}
           borderRadius="md"
           alignItems="center"
         >
           <Textarea
             ref={textareaReference}
+            isDisabled={isLoading}
+            autoFocus={!isLoading && true}
             variant="unstyled"
             value={message}
+            fontWeight={500}
             placeholder="Send a message"
             onKeyDown={handleKeyDown}
             backgroundColor="transparent"
diff --git a/components/chat/message.js b/components/chat/message.js
new file mode 100644
index 0000000..5adebd4
--- /dev/null
+++ b/components/chat/message.js
@@ -0,0 +1,100 @@
+import React, { useRef } from "react";
+import {
+  Avatar,
+  Box,
+  Code,
+  HStack,
+  Icon,
+  IconButton,
+  Stack,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import remarkGfm from "remark-gfm";
+import PropTypes from "prop-types";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { BeatLoader } from "react-spinners";
+import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { TbCopy } from "react-icons/tb";
+import { MemoizedReactMarkdown } from "@/lib/markdown";
+
+export default function Message({ agent, message, isLastMessage }) {
+  const loaderColor = useColorModeValue("gray.100", "white");
+  const lastMessageReference = useRef();
+  const unevenBackgroundColor = useColorModeValue("gray.100", "gray.700");
+
+  return (
+    <Box
+      ref={isLastMessage ? lastMessageReference : undefined}
+      backgroundColor={agent && unevenBackgroundColor}
+      padding={4}
+    >
+      <HStack spacing={6} maxWidth="4xl" marginX="auto" alignItems="center">
+        <Avatar
+          src={agent ? "/chatbot.png" : "/user.png"}
+          size="xs"
+          alignSelf="flex-start"
+        />
+        <Stack spacing={4} fontSize="sm" flex={1}>
+          {message ? (
+            <MemoizedReactMarkdown
+              components={{
+                code({ node, inline, className, children, ...props }) {
+                  const value = String(children).replace(/\n$/, "");
+                  const match = /language-(\w+)/.exec(className || "");
+
+                  const handleCopyCode = () => {
+                    navigator.clipboard.writeText(value);
+                  };
+
+                  return !inline ? (
+                    <Box position="relative">
+                      <HStack position="absolute" top={2} right={2}>
+                        <Text fontSize="xs">{match && match[1]}</Text>
+                        <IconButton
+                          size="sm"
+                          icon={<Icon as={TbCopy} fontSize="lg" />}
+                          onClick={() => handleCopyCode()}
+                        />
+                      </HStack>
+                      <SyntaxHighlighter
+                        customStyle={{
+                          fontSize: "12px",
+                        }}
+                        codeTagProps={{
+                          style: {
+                            lineHeight: "inherit",
+                            fontSize: "inherit",
+                          },
+                        }}
+                        style={dracula}
+                        language={(match && match[1]) || ""}
+                      >
+                        {value}
+                      </SyntaxHighlighter>
+                    </Box>
+                  ) : (
+                    <Code fontSize="sm" className={className} {...props}>
+                      {children}
+                    </Code>
+                  );
+                },
+              }}
+              remarkPlugins={[remarkGfm]}
+            >
+              {message}
+            </MemoizedReactMarkdown>
+          ) : (
+            <BeatLoader color={loaderColor} size={8} />
+          )}
+        </Stack>
+      </HStack>
+    </Box>
+  );
+}
+
+Message.propTypes = {
+  agent: PropTypes.string,
+  message: PropTypes.string,
+  isLastMessage: PropTypes.bool,
+};
diff --git a/components/chat/output.js b/components/chat/output.js
index 9f92409..ac262e8 100644
--- a/components/chat/output.js
+++ b/components/chat/output.js
@@ -1,21 +1,7 @@
 import React, { useEffect, useRef } from "react";
-import {
-  Avatar,
-  Box,
-  HStack,
-  Icon,
-  IconButton,
-  Stack,
-  useColorModeValue,
-} from "@chakra-ui/react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { Box, Stack } from "@chakra-ui/react";
 import PropTypes from "prop-types";
-
-import SyntaxHighlighter from "react-syntax-highlighter";
-import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { TbCopy } from "react-icons/tb";
-import { BeatLoader } from "react-spinners";
+import Message from "./message";
 
 export default function ChatOuput({
   messages,
@@ -23,8 +9,6 @@ export default function ChatOuput({
   isLoading,
   ...properties
 }) {
-  const loaderColor = useColorModeValue("gray.100", "white");
-  const unevenBackgroundColor = useColorModeValue("gray.100", "gray.600");
   const lastMessageReference = useRef();
 
   useEffect(() => {
@@ -33,107 +17,22 @@ export default function ChatOuput({
     }
   }, [messages]);
 
+  const showAIMessage = isLoading || newMessage;
+
   return (
     <Stack flex={1} maxWidth="100%" {...properties}>
       <Stack spacing={0}>
         {messages.map(({ agent, data: { response } }, index) => (
-          <Box
-            ref={
-              index + 1 === messages.length ? lastMessageReference : undefined
-            }
-            padding={4}
+          <Message
             key={index}
-            backgroundColor={index % 2 !== 0 && unevenBackgroundColor}
-          >
-            <HStack
-              spacing={6}
-              maxWidth="4xl"
-              marginX="auto"
-              alignItems="flex-start"
-            >
-              <Avatar src={agent ? "/chatbot.png" : "/user.png"} size="xs" />
-              <Stack spacing={4} fontSize="sm">
-                <ReactMarkdown
-                  components={{
-                    pre: (pre) => {
-                      const codeChunk = pre.node.children[0].children[0].value;
-
-                      const handleCopyCode = () => {
-                        navigator.clipboard.writeText(codeChunk);
-                      };
-
-                      return (
-                        <Box position="relative">
-                          <IconButton
-                            position="absolute"
-                            top={4}
-                            right={2}
-                            size="sm"
-                            icon={<Icon as={TbCopy} fontSize="lg" />}
-                            onClick={() => handleCopyCode()}
-                          />
-                          <SyntaxHighlighter style={dracula}>
-                            {pre.children[0].props.children[0]}
-                          </SyntaxHighlighter>
-                        </Box>
-                      );
-                    },
-                  }}
-                  remarkPlugins={[remarkGfm]}
-                >
-                  {response}
-                </ReactMarkdown>
-              </Stack>
-            </HStack>
-          </Box>
+            agent={agent}
+            message={response}
+            isLastMessage={index + 1 === messages.length}
+          />
         ))}
-        {isLoading && (
-          <Box padding={4} backgroundColor={unevenBackgroundColor}>
-            <HStack
-              spacing={6}
-              maxWidth="4xl"
-              marginX="auto"
-              alignItems="flex-start"
-            >
-              <Avatar src="/chatbot.png" size="xs" />
-              <Stack spacing={4} fontSize="sm">
-                {newMessage ? (
-                  <ReactMarkdown
-                    components={{
-                      pre: (pre) => {
-                        const codeChunk =
-                          pre.node.children[0].children[0].value;
-
-                        const handleCopyCode = () => {
-                          navigator.clipboard.writeText(codeChunk);
-                        };
-
-                        return (
-                          <Box position="relative">
-                            <IconButton
-                              position="absolute"
-                              top={4}
-                              right={2}
-                              size="sm"
-                              icon={<Icon as={TbCopy} fontSize="lg" />}
-                              onClick={() => handleCopyCode()}
-                            />
-                            <SyntaxHighlighter style={dracula}>
-                              {pre.children[0].props.children[0]}
-                            </SyntaxHighlighter>
-                          </Box>
-                        );
-                      },
-                    }}
-                    remarkPlugins={[remarkGfm]}
-                  >
-                    {newMessage}
-                  </ReactMarkdown>
-                ) : (
-                  <BeatLoader color={loaderColor} size={8} />
-                )}
-              </Stack>
-            </HStack>
+        {showAIMessage && (
+          <Box ref={lastMessageReference}>
+            <Message agent="ai" message={newMessage} isLastMessage={true} />
           </Box>
         )}
       </Stack>
diff --git a/lib/chain.js b/lib/chain.js
index e9e9aaf..575fe5e 100644
--- a/lib/chain.js
+++ b/lib/chain.js
@@ -1,4 +1,4 @@
-import { ChatOpenAI } from "langchain/chat_models";
+import { ChatOpenAI } from "langchain/chat_models/openai";
 import { ConversationChain } from "langchain/chains";
 import { CallbackManager } from "langchain/callbacks";
 import { BufferMemory, ChatMessageHistory } from "langchain/memory";
diff --git a/lib/markdown.js b/lib/markdown.js
new file mode 100644
index 0000000..45b566f
--- /dev/null
+++ b/lib/markdown.js
@@ -0,0 +1,7 @@
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+
+export const MemoizedReactMarkdown = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
diff --git a/lib/prisma.js b/lib/prisma.js
index 6b08096..3362c3e 100644
--- a/lib/prisma.js
+++ b/lib/prisma.js
@@ -9,3 +9,5 @@ export const prismaClient = globalPrisma.prisma || new PrismaClient();
 if (process.env.NODE_ENV !== "production") {
   globalPrisma.prisma = prismaClient;
 }
+
+if (process.env.NODE_ENV !== "production") globalPrisma.prisma = prismaClient;
diff --git a/lib/prompt-template.js b/lib/prompt-template.js
index a25da49..99081b6 100644
--- a/lib/prompt-template.js
+++ b/lib/prompt-template.js
@@ -1,14 +1,17 @@
 export const DEFAULT_PROMPT_TEMPLATE = `
 Assistant is a large language model trained by OpenAI.
+Assistant is designed to be able to assist with a wide range of tasks, from answering simple questions to providing in-depth explanations and discussions on a wide range of topics. 
+As a language model, Assistant is able to generate human-like text based on the input it receives, allowing it to engage in natural-sounding conversations and provide responses that are coherent and relevant to the topic at hand.
+Assistant is constantly learning and improving, and its capabilities are constantly evolving. 
+It is able to process and understand large amounts of text, and can use this knowledge to provide accurate and informative responses to a wide range of questions. 
+Additionally, Assistant is able to generate its own text based on the input it receives, allowing it to engage in discussions and provide explanations and descriptions on a wide range of topics.
+Overall, Assistant is a powerful tool that can help with a wide range of tasks and provide valuable insights and information on a wide range of topics. 
+Whether you need help with a specific question or just want to have a conversation about a particular topic, Assistant is here to assist.
 
-Assistant is designed to be able to assist with a wide range of tasks, from answering simple questions to providing in-depth explanations and discussions on a wide range of topics. As a language model, Assistant is able to generate human-like text based on the input it receives, allowing it to engage in natural-sounding conversations and provide responses that are coherent and relevant to the topic at hand.
-
-Assistant is constantly learning and improving, and its capabilities are constantly evolving. It is able to process and understand large amounts of text, and can use this knowledge to provide accurate and informative responses to a wide range of questions. Additionally, Assistant is able to generate its own text based on the input it receives, allowing it to engage in discussions and provide explanations and descriptions on a wide range of topics.
-
-Overall, Assistant is a powerful tool that can help with a wide range of tasks and provide valuable insights and information on a wide range of topics. Whether you need help with a specific question or just want to have a conversation about a particular topic, Assistant is here to assist.
+Make sure you answer in markdown and include line breaks in the output.
 
 {history}
 
 Human: {message}
-Assitant:
+Assitant answer in Markdown:
 `;
diff --git a/package-lock.json b/package-lock.json
index b40ddbd..ea5e60f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "react-spinners": "^0.13.8",
         "react-syntax-highlighter": "^15.5.0",
         "react-use": "^17.4.0",
+        "rehype-raw": "^6.1.1",
         "remark-gfm": "^3.0.1",
         "typeorm": "^0.3.12"
       },
@@ -2323,6 +2324,11 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "node_modules/@types/parse5": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
+      "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -4477,6 +4483,52 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hast-util-from-parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-7.1.2.tgz",
+      "integrity": "sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0",
+        "hastscript": "^7.0.0",
+        "property-information": "^6.0.0",
+        "vfile": "^5.0.0",
+        "vfile-location": "^4.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/hast-util-parse-selector": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz",
+      "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==",
+      "dependencies": {
+        "@types/hast": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/hastscript": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz",
+      "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^3.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-parse-selector": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
@@ -4486,6 +4538,50 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-raw": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-7.2.3.tgz",
+      "integrity": "sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/parse5": "^6.0.0",
+        "hast-util-from-parse5": "^7.0.0",
+        "hast-util-to-parse5": "^7.0.0",
+        "html-void-elements": "^2.0.0",
+        "parse5": "^6.0.0",
+        "unist-util-position": "^4.0.0",
+        "unist-util-visit": "^4.0.0",
+        "vfile": "^5.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw/node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-7.1.0.tgz",
+      "integrity": "sha512-YNRgAJkH2Jky5ySkIqFXTQiaqcAtJyVE+D5lkN6CdtOqrnkLfGYYrEcKuHOJZlp+MwjSwuD3fZuawI+sic/RBw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
@@ -4557,6 +4653,15 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz",
+      "integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/hyphenate-style-name": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
@@ -9923,6 +10028,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/rehype-raw": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.1.1.tgz",
+      "integrity": "sha512-d6AKtisSRtDRX4aSPsJGTfnzrX2ZkHQLE5kiUuGOeEoLpbEulFF4hj0mLPbsa+7vmguDKOVVEQdHKDSwoaIDsQ==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "hast-util-raw": "^7.2.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-3.0.1.tgz",
@@ -11015,6 +11134,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-location": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-4.1.0.tgz",
+      "integrity": "sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "vfile": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz",
@@ -11033,6 +11165,15 @@
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
       "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg=="
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/package.json b/package.json
index f1f38f2..63b0a34 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react-spinners": "^0.13.8",
     "react-syntax-highlighter": "^15.5.0",
     "react-use": "^17.4.0",
+    "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
     "typeorm": "^0.3.12"
   },