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?