+ {/* Header */}
+
+
+
+ AI 改写
+
+
+
+
+ {/* ── Loading state ──────────────────────────────────────── */}
+ {isLoading && (
+
+ {/* Bouncing dots */}
+
+ {[0, 160, 320].map((delay) => (
+
+ ))}
+ AI 正在生成…
+
+
+ {/* Stop button — breathing animation */}
+
+
+ )}
+
+ {/* ── Error state ─────────────────────────────────────────── */}
+ {isError && (
+
+
+
+ {error ?? "改写失败"}
+
+
+
+ )}
+
+ {/* ── Idle state: input + action list ─────────────────────── */}
+ {!isLoading && !isError && (
+ <>
+ {/* Custom instruction input */}
+
+ setInstruction(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleInputEnter();
+ }
+ }}
+ placeholder="告诉 AI 你想要什么…"
+ className={cn(
+ "w-full text-xs rounded-md px-2.5 py-1.5 outline-none transition-colors",
+ "bg-muted/50 border border-input focus:border-primary/60",
+ "placeholder:text-muted-foreground/50",
+ )}
+ />
+
+
+ {/* Divider */}
+
+
+ {/* Preset actions */}
+
+ {ACTION_ROWS.map(({ action, label, icon: Icon }) => {
+ const isTone = action === "tone";
+ const isTonesOpen = isTone && toneOpen;
+ return (
+
+
+
+ {/* Tone sub-list */}
+ {isTonesOpen && (
+
+ {TONE_OPTIONS.map(({ value, label: toneLabel }) => (
+
+ ))}
+
+ )}
+
+ );
+ })}
+
+
+ )}
+