diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index d1b8da1..b9321fb 100644 --- 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 index b17b16f..0878702 100644 --- 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 index 81af8b1..77b41dd 100644 --- 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>