diff --git a/app/src/components/AiToolbar.tsx b/app/src/components/AiToolbar.tsx index 3b1451c6..2c1fae57 100644 --- a/app/src/components/AiToolbar.tsx +++ b/app/src/components/AiToolbar.tsx @@ -13,6 +13,9 @@ import { usePromptStore, useRunAiWithStore, } from "../lib/usePromptStore"; +import { getDefaultText } from "../lib/getDefaultText"; +import { useMemo } from "react"; +import { useDoc } from "../lib/useDoc"; function getModeDescription(mode: Mode): string { const prompts = createExamples(); @@ -57,6 +60,11 @@ export function AiToolbar() { const currentText = usePromptStore((state) => state.currentText); + const text = useDoc((state) => state.text); + const defaultText = useMemo(() => { + return getDefaultText(); + }, []); + const isTextEditable = Boolean(text) && text !== defaultText; const showAcceptDiffButton = diff && !isRunning; return ( @@ -72,21 +80,28 @@ export function AiToolbar() { })} /> {!showAcceptDiffButton ? ( - (["prompt", "convert", "edit"] as Mode[]).map((mode) => ( - handleModeChange(mode)} - className={cx({ - "dark:hover:bg-neutral-700": mode !== currentMode, - "dark:bg-purple-700 dark:text-purple-100": - mode === currentMode && isOpen, - })} - > - {getModeTitle(mode)} - - )) + (["prompt", "convert", "edit"] as Mode[]).map((mode) => { + // If the mode is edit and the text is not editable, don't show the button + if (mode === "edit" && !isTextEditable) { + return null; + } + + return ( + handleModeChange(mode)} + className={cx("disabled:opacity-50", { + "dark:hover:bg-neutral-700": mode !== currentMode, + "dark:bg-purple-700 dark:text-purple-100": + mode === currentMode && isOpen, + })} + > + {getModeTitle(mode)} + + ); + }) ) : ( Keep changes?