feat(frontend): handle LaTeX in message thread (#3040)

# Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
QuivrHQ · Aug 21, 2024 · 1a718ba · 1a718ba
1 parent aebc7d2
commit 1a718ba
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/...nts/ChatItem/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx b/...nts/ChatItem/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
@@ -1,3 +1,4 @@
+import "katex/dist/katex.min.css";
 import Prism from "prismjs";
 import "prismjs/components/prism-bash";
 import "prismjs/components/prism-basic";
@@ -18,6 +19,7 @@ import "prismjs/components/prism-sql";
 import "prismjs/components/prism-swift";
 import "prismjs/components/prism-typescript";
 import { useEffect, useState } from "react";
+import { BlockMath, InlineMath } from "react-katex";
 import ReactMarkdown from "react-markdown";
 import gfm from "remark-gfm";
 
@@ -85,6 +87,17 @@ export const MessageContent = ({
               const language = match[1];
               const code = String(children).trim();
 
+              if (
+                language === "math" ||
+                language === "latex" ||
+                language === "katex" ||
+                language === "katex-error"
+              ) {
+                return <BlockMath math={code} />;
+              } else if (language === "inline-math") {
+                return <InlineMath math={code} />;
+              }
+
               if (Prism.languages[language]) {
                 const html = Prism.highlight(
                   code,

diff --git a/frontend/package.json b/frontend/package.json
@@ -78,6 +78,7 @@
     "heroicons": "2.0.18",
     "i18next": "23.4.2",
     "i18next-http-backend": "2.2.1",
+    "katex": "^0.16.11",
     "lodash": "4.17.21",
     "marked": "9.0.3",
     "next": "^14.1.0",
@@ -96,6 +97,7 @@
     "react-ga4": "2.1.0",
     "react-hook-form": "7.45.4",
     "react-i18next": "13.0.3",
+    "react-katex": "^3.0.1",
     "react-markdown": "9.0.0",
     "react-use": "17.4.0",
     "rehype-highlight": "6.0.0",
@@ -116,6 +118,7 @@
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@types/prismjs": "^1.26.4",
+    "@types/react-katex": "^3.0.4",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "4.0.4",
     "dotenv": "16.3.1",

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2695,6 +2695,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-katex@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/@types/react-katex/-/react-katex-3.0.4.tgz"
+  integrity sha512-aLkykKzSKLpXI6REJ3uClao6P47HAFfR1gcHOZwDeTuALsyjgMhz+oynLV4gX0kiJVnvHrBKF/TLXqyNTpHDUg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/[email protected]":
   version "4.1.8"
   resolved "https://registry.npmjs.org/@types/react-mentions/-/react-mentions-4.1.8.tgz"
@@ -3542,6 +3549,11 @@ commander@^4.0.0:
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
@@ -5827,6 +5839,13 @@ jsonc-parser@^3.2.0:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+katex@^0.16.0, katex@^0.16.11:
+  version "0.16.11"
+  resolved "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz"
+  integrity sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==
+  dependencies:
+    commander "^8.3.0"
+
 language-subtag-registry@~0.3.2:
   version "0.3.22"
   resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz"
@@ -7606,6 +7625,13 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-katex@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/react-katex/-/react-katex-3.0.1.tgz"
+  integrity sha512-wIUW1fU5dHlkKvq4POfDkHruQsYp3fM8xNb/jnc8dnQ+nNCnaj0sx5pw7E6UyuEdLRyFKK0HZjmXBo+AtXXy0A==
+  dependencies:
+    katex "^0.16.0"
+
 [email protected]:
   version "9.0.0"
   resolved "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.0.tgz"
@@ -7681,7 +7707,7 @@ [email protected]:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
-react@*, "react@^16 || ^17 || ^18", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0  || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0", "react@^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", "react@>= 16.8 || 18.0.0", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.6.0, react@>=16.8.0, react@>=18, "[email protected] || 16.x || 17.x || 18.x", "[email protected] || 17.x || 18.x":
+react@*, "react@^16 || ^17 || ^18", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0  || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0", "react@^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", "react@>= 16.8 || 18.0.0", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=15.3.2 <=18", react@>=16, react@>=16.6.0, react@>=16.8.0, react@>=18, "[email protected] || 16.x || 17.x || 18.x", "[email protected] || 17.x || 18.x":
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==