Remove edit button when default text present (#748)

tone-row · Oct 9, 2024 · 5ab23bf · 5ab23bf
1 parent 8473836
commit 5ab23bf
Showing 1 changed file with 30 additions and 15 deletions.
diff --git 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) => (
-              <Button2
-                key={mode}
-                color={mode === currentMode && isOpen ? "purple" : "default"}
-                size="xs"
-                onClick={() => handleModeChange(mode)}
-                className={cx({
-                  "dark:hover:bg-neutral-700": mode !== currentMode,
-                  "dark:bg-purple-700 dark:text-purple-100":
-                    mode === currentMode && isOpen,
-                })}
-              >
-                {getModeTitle(mode)}
-              </Button2>
-            ))
+            (["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 (
+                <Button2
+                  key={mode}
+                  color={mode === currentMode && isOpen ? "purple" : "default"}
+                  size="xs"
+                  onClick={() => 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)}
+                </Button2>
+              );
+            })
           ) : (
             <span className="text-sm text-purple-600 dark:text-white">
               <Trans>Keep changes?</Trans>