Add KaTeX support into chat

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"

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>
                     )
                 })

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>