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,51 +133,43 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
               )}
             </div>
           ) : (
-            <>
+            <ReactMarkdown
-              <ReactMarkdown
+              className="prose dark:prose-invert"
-                className="prose dark:prose-invert"
+              remarkPlugins={[remarkGfm, remarkMath]}
-                remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeMathjax]}
-                components={{
+              components={{
-                  code({ node, inline, className, children, ...props }) {
+                code({ node, inline, className, children, ...props }) {
-                    const match = /language-(\w+)/.exec(className || "");
+                  const match = /language-(\w+)/.exec(className || "");
-                    return !inline && match ? (
+                  return !inline && match ? (
-                      <CodeBlock
+                    <CodeBlock
-                        key={Math.random()}
+                      key={Math.random()}
-                        language={match[1]}
+                      language={match[1]}
-                        value={String(children).replace(/\n$/, "")}
+                      value={String(children).replace(/\n$/, "")}
-                        lightMode={lightMode}
+                      lightMode={lightMode}
-                        {...props}
+                      {...props}
-                      />
+                    />
-                    ) : (
+                  ) : (
-                      <code
+                    <code
-                        className={className}
+                      className={className}
-                        {...props}
+                      {...props}
-                      >
+                    >
-                        {children}
+                      {children}
-                      </code>
+                    </code>
-                    );
+                  );
-                  },
+                },
-                  table({ children }) {
+                table({ children }) {
-                    return <table className="border-collapse border border-black dark:border-white py-1 px-3">{children}</table>;
+                  return <table className="border-collapse border border-black dark:border-white py-1 px-3">{children}</table>;
-                  },
+                },
-                  th({ children }) {
+                th({ children }) {
-                    return <th className="border border-black dark:border-white break-words py-1 px-3 bg-gray-500 text-white">{children}</th>;
+                  return <th className="border border-black dark:border-white break-words py-1 px-3 bg-gray-500 text-white">{children}</th>;
-                  },
+                },
-                  td({ children }) {
+                td({ children }) {
-                    return <td className="border border-black dark:border-white break-words py-1 px-3">{children}</td>;
+                  return <td className="border border-black dark:border-white break-words py-1 px-3">{children}</td>;
-                  }
+                }
-                }}
+              }}
-              >
+            >
-                {message.content}
+              {message.content}
-              </ReactMarkdown>
+            </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"
   }
 }