From 66ab515962fe9c365590166a60588b7a533adfc2 Mon Sep 17 00:00:00 2001
From: yude <i@yude.jp>
Date: Tue, 5 Mar 2024 09:31:57 +0900
Subject: [PATCH] Add KaTeX support into chat

---
 package.json            | 2 ++
 src/components/Chat.tsx | 7 ++++++-
 src/main.tsx            | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2293f88..2ea65c5 100644
--- a/package.json
+++ b/package.json
@@ -16,11 +16,13 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@heroicons/vue": "^2.1.1",
+    "@types/react-katex": "^3.0.4",
     "autoprefixer": "^10.4.16",
     "date-fns": "^3.3.1",
     "postcss": "^8.4.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-katex": "^3.0.1",
     "react-scroll-percentage": "^4.3.2",
     "recoil": "^0.7.7",
     "tailwindcss": "^3.4.1"
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 53bf01e..d4c622b 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
 import { formatDistance } from 'date-fns'
 import { ja } from 'date-fns/locale/ja'
+import { InlineMath } from 'react-katex';
 
 export default function Chat() {
     const [page, _] = useRecoilState(currentPage);
@@ -110,7 +111,11 @@ export default function Chat() {
                                     formatDistance(Date.parse(message.createdAt), new Date(), { addSuffix: true, locale: ja })
                                 }
                             </p>
-                            <p className="font-serif text-2xl">{message.body}</p>
+                            <p className="font-serif text-2xl">
+                                <InlineMath>
+                                    {message.body}
+                                </InlineMath>
+                            </p>
                         </div>
                     )
                 })
diff --git a/src/main.tsx b/src/main.tsx
index 3d7150d..13c980c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import 'katex/dist/katex.min.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>