UI updates

calc-frontend/src/components/ui/AskAIButtonDerivative.tsx

@@ -2,21 +2,24 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
+import { InlineMath } from "react-katex";
+import "katex/dist/katex.min.css";
 
 function AskAIButtonDerivative({
   func,
   lowerBound,
   upperBound,
   canAskAI,
+  displayFunc,
   onAIResponseComplete,
 }: {
   func: string;
   lowerBound: number;
   upperBound: number;
   canAskAI: boolean;
+  displayFunc: any;
   onAIResponseComplete: () => void;
-}) 
-{
+}) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [markdownText, setMarkdownText] = useState(
@@ -42,7 +45,6 @@ function AskAIButtonDerivative({
 
       setMarkdownText(response.data.message);
       onAIResponseComplete();
-
     } catch (error) {
       setMarkdownText(`### ❌ An error occured, please try again`);
       console.error(error);
@@ -53,10 +55,10 @@ function AskAIButtonDerivative({
 
   // the user has created a new graph
   useEffect(() => {
-    if(func !== ''){
+    if (func !== "") {
       setMarkdownText(`### 🤖 Ask AI\n### Click above for an explanation!`);
     }
-  },[])
+  }, []);
 
   return (
     <>
@@ -78,12 +80,17 @@ function AskAIButtonDerivative({
           <div className="absolute inset-0 bg-black/50"></div>
 
           {/* Modal Content */}
-          <div className="relative bg-gray-800 text-white max-w-2xl max-h-[80vh] w-full rounded-xl p-4 pt-2
-            shadow-lg overflow-y-auto mr-[20px] ml-[20px]">
+          <div
+            className="relative bg-gray-800 text-white max-w-2xl max-h-[80vh] w-full rounded-xl p-4 pt-2
+            shadow-lg overflow-y-auto mr-[20px] ml-[20px]"
+          >
             <div className="flex justify-between items-center mb-2 border-b-2 border-solid gap-2">
               {canAskAI ? (
                 <button onClick={handleAskAI} className="cursor-pointer pb-1">
-                  <h3 className="font-semibold">{`Ask AI About: ${func}`}</h3>
+                  <h3 className="font-semibold">
+                    Ask AI About:&nbsp;
+                    <InlineMath math={displayFunc} renderError={() => <span>{func}</span>} />
+                  </h3>
                 </button>
               ) : (
                 <button

calc-frontend/src/components/ui/AskAIButtonIntegral.tsx

@@ -2,18 +2,22 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
+import { InlineMath } from "react-katex";
+import "katex/dist/katex.min.css";
 
 function AskAIButtonIntegral({
   func,
   lowerBound,
   upperBound,
   canAskAI,
+  displayFunc,
   onAIResponseComplete,
 }: {
   func: string;
   lowerBound: number;
   upperBound: number;
   canAskAI: boolean;
+  displayFunc: any;
   onAIResponseComplete: () => void;
 }) 
 {
@@ -83,7 +87,10 @@ function AskAIButtonIntegral({
             <div className="flex justify-between items-center mb-2 border-b-2 border-solid gap-2">
               {canAskAI ? (
                 <button onClick={handleAskAI} className="cursor-pointer pb-1">
-                  <h3 className="font-semibold">{`Ask AI About: ${func}`}</h3>
+                  <h3 className="font-semibold">
+                    Ask AI About:&nbsp;
+                  <InlineMath math={displayFunc} renderError={() => <span>{func}</span>}/>
+                  </h3>
                 </button>
               ) : (
                 <button

calc-frontend/src/components/ui/FunctionCard.tsx

@@ -45,7 +45,7 @@ function FunctionCard({
   return (
     <div className="bg-[#f6f6f7] p-4 pt-2 rounded-2xl shadow-md text-center w-[240px]">
       <p className="text-xl mb-2">
-        <InlineMath>{equation}</InlineMath>
+        <InlineMath math={equation} renderError={() => <span>{equation}</span>}/>
       </p>
       <img
         src={""}

calc-frontend/src/pages/CustomDerivative.tsx

@@ -42,6 +42,7 @@ function CustomDeriv() {
 
   const [canAskAI, setCanAskAI] = useState<boolean>(false);
   const [JSFunc, setJSFunc] = useState<string>('');
+  const [LatexFunc, setLatexFunc] = useState<any>();
 
   const handleSave = () => {
     setEnableSave(false)
@@ -136,6 +137,7 @@ function CustomDeriv() {
     setFunc(newFunc)
     setJSFunc(newJSFunc);
     setBounds([newLowerBound, newUpperBound])
+    setLatexFunc(editMF.current.innerFields[0].latex());
 
     newFuncKey = newFunc + newLowerBound + newUpperBound
     // check that new graph is different from old one
@@ -214,7 +216,7 @@ function CustomDeriv() {
         <div></div>
 
         <AskAIButtonDerivative func={JSFunc} lowerBound={bounds[0]} upperBound={bounds[0]} key={funcKey} 
-        canAskAI={canAskAI} onAIResponseComplete={handleAIResponseComplete}
+        canAskAI={canAskAI} displayFunc={LatexFunc} onAIResponseComplete={handleAIResponseComplete}
         />
       </div>
 

calc-frontend/src/pages/CustomIntegral.tsx

@@ -44,6 +44,7 @@ function CustomInt() {
   const [saving, setSaving] = useState<boolean>(false);
   const [enableSave, setEnableSave] = useState<boolean>(false);
   const [funcKey, setFuncKey] = useState<string>('');
+  const [latexFunc, setLatexFunc] = useState<any>();
 
   const handleAIResponseComplete = () => {
     setCanAskAI(false);
@@ -138,6 +139,7 @@ function CustomInt() {
     setFunc(newFunc)
     setJSFunc(newJSFunc)
     setBounds([newLowerBound, newUpperBound])
+    setLatexFunc(editMF.current.latex())
 
     newFuncKey = newFunc + newLowerBound + newUpperBound
     // check that new graph is different from old one
@@ -226,7 +228,7 @@ function CustomInt() {
           <div></div>
 
           <AskAIButton func={JSFunc} lowerBound={bounds[0]} upperBound={bounds[1]} key={funcKey} 
-              canAskAI={canAskAI} onAIResponseComplete={handleAIResponseComplete}/>
+              canAskAI={canAskAI} displayFunc={latexFunc} onAIResponseComplete={handleAIResponseComplete}/>
         </div>
 
     </div>