fix the MathJax does not rerender after changes

xyTom · Apr 23, 2024 · eca24ca · eca24ca
1 parent 2c36e23
commit eca24ca
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -35,7 +35,7 @@ declare global {
 
 function App() {
   const [screenShotResult, setscreenShotResult] = useState(null);
-  const [result, setResult] = useState("null");
+  const [result, setResult] = useState(null);
   const [loading, setLoading] = useState(false);
 
   //retry button
@@ -309,7 +309,9 @@ function App() {
           {screenShotResult && <img src={`data:image/png;base64,${screenShotResult}`} alt="screenshot" className="mb-2 rounded-lg object-center border border-gray-100 dark:border-gray-800 mx-auto" />}
 
           <div className="flex space-x-2 mb-2 justify-center">
-            <PromptSelect handlePromptChange={handlePromptChange} model={model} />
+            <PromptSelect handlePromptChange={handlePromptChange} model={model} disabled={loading}/>
+            {/* <button onClick={() => setLoading(!loading)} className="btn" 
+            >set loading</button> */}
 
             {/* When there is result or onError, show the retry button */}
             {(result)

diff --git a/src/renderer/components/displayLatex.tsx b/src/renderer/components/displayLatex.tsx
@@ -1,8 +1,19 @@
 import { MathJax } from "better-react-mathjax"
-import React from "react"
+import React, { useEffect } from "react"
 
+declare global {
+  interface Window {
+    MathJax: any;
+  }
+}
 export default function displayLatexResult(props: { latex: string}) {
-
+  //rerender the latex result when props.latex is changed
+  useEffect(() => {
+    // Assuming MathJax object is available globally
+    if (window.MathJax) {
+      window.MathJax.typesetPromise();
+    }
+  }, [props.latex]);
   return (
     <div className="grid w-full gap-2 pb-3 min-w-60">
         <MathJax>

diff --git a/src/renderer/components/promptSelect.tsx b/src/renderer/components/promptSelect.tsx
@@ -2,13 +2,13 @@ import React from "react"
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs"
 import { promptOptions } from "../lib/models"
 
-export default function promptSelect(props: { handlePromptChange: Function, model: string}) {
+export default function promptSelect(props: { handlePromptChange: Function, model: string, disabled: boolean}) {
     const options = promptOptions as { [key: string]: { value: string; label: string; prompt: string; }[] };
     return (
         <Tabs defaultValue="Auto" onValueChange={(value) => props.handlePromptChange(value)}>
             <TabsList>
                 {options[props.model].map((prompt,index) => (
-                    <TabsTrigger key={index} value={prompt.value}>{prompt.label}</TabsTrigger>
+                    <TabsTrigger disabled={props.disabled} key={index} value={prompt.value}>{prompt.label}</TabsTrigger>
                 ))}
             </TabsList>
         </Tabs>