Latex plugin (#165)

components/Chat/ChatMessage.tsx

@@ -3,9 +3,10 @@ import { IconEdit } from "@tabler/icons-react";
 import { useTranslation } from "next-i18next";
 import { FC, useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
+import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
 import { CodeBlock } from "../Markdown/CodeBlock";
-import { CopyButton } from "./CopyButton";
 
 interface Props {
   message: Message;
@@ -132,10 +133,10 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
               )}
             </div>
           ) : (
-            <>
             <ReactMarkdown
               className="prose dark:prose-invert"
-                remarkPlugins={[remarkGfm]}
+              remarkPlugins={[remarkGfm, remarkMath]}
+              rehypePlugins={[rehypeMathjax]}
               components={{
                 code({ node, inline, className, children, ...props }) {
                   const match = /language-(\w+)/.exec(className || "");
@@ -169,14 +170,6 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
             >
               {message.content}
             </ReactMarkdown>
-
-              {(isHovering || window.innerWidth < 640) && (
-                <CopyButton
-                  messagedCopied={messagedCopied}
-                  copyOnClick={copyOnClick}
-                />
-              )}
-            </>
           )}
         </div>
       </div>

package.json

@@ -21,19 +21,21 @@
     "react-i18next": "^12.2.0",
     "react-markdown": "^8.0.5",
     "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^3.0.1"
+    "rehype-mathjax": "^4.0.2",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
-    "@types/react-syntax-highlighter": "^15.5.6",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7",
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "autoprefixer": "^10.4.14",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
     "typescript": "4.9.5"
   }
 }