add remark gfm

src/components/Gemini.css

@@ -39,4 +39,28 @@
     50% {
       border-color: #000;
     }
-  }
+  }
+
+  /* Apply basic styles to the table */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+/* Add styling to the table header */
+th, td {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}
+
+/* Style the table header */
+th {
+  background-color: #f2f2f2;
+}
+
+/* Add some hover effect to the table rows */
+tr:hover {
+  background-color: #f5f5f5;
+}

src/components/Gemini.js

@@ -1,17 +1,54 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { query, collection, onSnapshot, addDoc, where, getDocs, orderBy } from 'firebase/firestore';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
+import MathJax from 'react-mathjax';
+import RemarkMathPlugin from 'remark-math';
+import remarkGfm from 'remark-gfm';
+// import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 import './Gemini.css'; // Make sure to have your CSS styles for the typewriter effect
 import db from '../firebase';
 
-function Gemini() {
+import 'katex/dist/katex.min.css';
+
+function Gemini(props) {
     const [messages, setMessages] = useState([]);
     const [newMessage, setNewMessage] = useState('');
     const [isTyping, setIsTyping] = useState(false);
 
     const scrollRef = useRef(null);
 
+    const newProps = {
+        ...props,
+        options: {
+            ...props.options,
+            inlineMath: [['$', '$'], ['\\(', '\\)']],  // Adjust delimiters if needed
+            displayMath: [['$$', '$$'], ['\\[', '\\]']],  // Adjust delimiters if needed
+        },
+        remarkPlugins: [
+            RemarkMathPlugin,
+            remarkGfm,
+        ],
+        // renderers: {
+        //     ...props.renderers,
+        //     math: (props) =>
+        //         <MathJax.Node formula={props.value} />,
+        //     inlineMath: (props) =>
+        //         <MathJax.Node inline formula={props.value} />
+        // }
+    };
+
+    const newComponents = {
+        ...props.components,
+        math: (props) => (
+            <MathJax.Node formula={props.value} />
+        ),
+        inlineMath: (props) => (
+            <MathJax.Node inline formula={props.value} />
+        )
+    };
+
+
     useEffect(() => {
         const loadChatHistory = async () => {
             const uid = 'uid'; // Replace with your user ID
@@ -30,6 +67,7 @@ function Gemini() {
                     loadedMessages.push({ text: data.prompt, sender: 'user' });
 
                     if (data.response) {
+                        // console.log(data.response)
                         // Simulate delay for typewriter effect
                         setTimeout(() => {
                             // Update the state with the Gemini's response
@@ -87,6 +125,7 @@ function Gemini() {
         const unsub = onSnapshot(docRef, (doc) => {
             const data = doc.data();
             if (data && data.response) {
+                // console.log(data.response)
                 // Start typewriter animation
                 // setIsTyping(true);
 
@@ -114,13 +153,13 @@ function Gemini() {
         <div>
             <div style={{ height: '500px', overflowY: 'scroll', border: '1px solid #ccc' }} ref={scrollRef}>
                 {messages.map((message, index) => (
-                    <div key={index} className={message.sender === 'user' ? 'user-message' : 'other-message'}>
+                    <div className={message.sender === 'user' ? 'user-message' : 'other-message'}>
                         {message.sender === 'gemini' && isTyping ? (
-                            // Display typing animation for Gemini's response
                             <div className="typing-animation">Gemini is typing...</div>
                         ) : (
-                            // Display the actual message
-                            <ReactMarkdown>{message.text}</ReactMarkdown>
+                            <MathJax.Provider input="tex">
+                                <Markdown components={newComponents} {...newProps}>{message.text}</Markdown>
+                            </MathJax.Provider>
                         )}
                     </div>
                 ))}