Remove edit button when default text present (#748)

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>