393 lines
15 KiB
TypeScript
393 lines
15 KiB
TypeScript
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||
import { createPortal } from "react-dom";
|
||
import {
|
||
Sparkles,
|
||
Wand2,
|
||
Expand,
|
||
Shrink,
|
||
Mic2,
|
||
BookCopy,
|
||
AlertCircle,
|
||
RefreshCw,
|
||
ChevronRight,
|
||
X,
|
||
Square,
|
||
Send,
|
||
} from "lucide-react";
|
||
import { cn } from "@/lib/utils";
|
||
import type { RewriteAction, RewriteTone } from "../../api/rewrite";
|
||
import type { RewriteStatus } from "../../hooks/useWritingRewrite";
|
||
|
||
// ── Types ─────────────────────────────────────────────────────────────────────
|
||
|
||
interface MenuPos {
|
||
x: number;
|
||
y: number;
|
||
}
|
||
|
||
// ── Tone options ───────────────────────────────────────────────────────────────
|
||
|
||
const TONE_OPTIONS: { value: RewriteTone; label: string }[] = [
|
||
{ value: "professional", label: "更专业" },
|
||
{ value: "casual", label: "更口语化" },
|
||
{ value: "readable", label: "更易读" },
|
||
{ value: "academic", label: "更学术" },
|
||
{ value: "expressive", label: "更有文采" },
|
||
];
|
||
|
||
// ── Action rows ────────────────────────────────────────────────────────────────
|
||
|
||
const ACTION_ROWS: {
|
||
action: RewriteAction;
|
||
label: string;
|
||
icon: React.ElementType;
|
||
}[] = [
|
||
{ action: "polish", label: "润色", icon: Wand2 },
|
||
{ action: "expand", label: "扩写", icon: Expand },
|
||
{ action: "shorten", label: "缩写", icon: Shrink },
|
||
{ action: "tone", label: "改语气", icon: Mic2 },
|
||
{ action: "imitate", label: "仿写", icon: BookCopy },
|
||
];
|
||
|
||
// ── Main component ─────────────────────────────────────────────────────────────
|
||
|
||
interface WritingAiMenuProps {
|
||
pos: MenuPos;
|
||
status: RewriteStatus;
|
||
error: string | null;
|
||
onAction: (action: RewriteAction, tone?: RewriteTone, customInstruction?: string, referenceText?: string) => void;
|
||
onAbort: () => void;
|
||
onRetry: () => void;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export function WritingAiMenu({
|
||
pos,
|
||
status,
|
||
error,
|
||
onAction,
|
||
onAbort,
|
||
onRetry,
|
||
onClose,
|
||
}: WritingAiMenuProps) {
|
||
const [toneOpen, setToneOpen] = useState(false);
|
||
const [imitateDialogOpen, setImitateDialogOpen] = useState(false);
|
||
const [referenceText, setReferenceText] = useState("");
|
||
const [instruction, setInstruction] = useState("");
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
const imitateTextareaRef = useRef<HTMLTextAreaElement>(null);
|
||
|
||
// autoFocus is unreliable when the menu opens during a mousedown event sequence;
|
||
// explicit focus via setTimeout(0) runs after the browser finishes that sequence.
|
||
useEffect(() => {
|
||
const id = setTimeout(() => inputRef.current?.focus(), 0);
|
||
return () => clearTimeout(id);
|
||
}, []);
|
||
|
||
// Focus the dialog textarea when the imitate dialog opens.
|
||
useEffect(() => {
|
||
if (!imitateDialogOpen) return;
|
||
const id = setTimeout(() => imitateTextareaRef.current?.focus(), 0);
|
||
return () => clearTimeout(id);
|
||
}, [imitateDialogOpen]);
|
||
|
||
const isLoading = status === "loading";
|
||
const isError = status === "error";
|
||
|
||
// Measure actual height after render and compute safe position before browser paint
|
||
const menuWidth = 240;
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
const [computedPos, setComputedPos] = useState<{ left: number; top: number } | null>(null);
|
||
|
||
useLayoutEffect(() => {
|
||
const el = containerRef.current;
|
||
if (!el) return;
|
||
const h = el.getBoundingClientRect().height;
|
||
const safeX = Math.min(Math.max(pos.x, 8), window.innerWidth - menuWidth - 8);
|
||
const spaceBelow = window.innerHeight - pos.y - 8;
|
||
const spaceAbove = pos.y - 8;
|
||
let safeY: number;
|
||
if (spaceBelow >= h) {
|
||
safeY = pos.y + 4;
|
||
} else if (spaceAbove >= h) {
|
||
safeY = pos.y - h - 4;
|
||
} else if (spaceBelow >= spaceAbove) {
|
||
safeY = Math.max(8, window.innerHeight - h - 8);
|
||
} else {
|
||
safeY = 8;
|
||
}
|
||
setComputedPos({ left: safeX, top: safeY });
|
||
}, [pos.x, pos.y]);
|
||
|
||
const fireAction = (action: RewriteAction, tone?: RewriteTone) => {
|
||
onAction(action, tone, instruction.trim() || undefined);
|
||
};
|
||
|
||
const fireImitate = () => {
|
||
const ref = referenceText.trim();
|
||
if (!ref) return;
|
||
setImitateDialogOpen(false);
|
||
onAction("imitate", undefined, instruction.trim() || undefined, ref);
|
||
};
|
||
|
||
const handleInputEnter = () => {
|
||
const trimmed = instruction.trim();
|
||
onAction("polish", undefined, trimmed || undefined);
|
||
};
|
||
|
||
return createPortal(
|
||
<>
|
||
{/* Backdrop */}
|
||
<div className="fixed inset-0 z-[9990]" onMouseDown={onClose} />
|
||
|
||
<div
|
||
ref={containerRef}
|
||
style={{
|
||
position: "fixed",
|
||
left: computedPos?.left ?? pos.x,
|
||
top: computedPos?.top ?? (pos.y + 4),
|
||
width: menuWidth,
|
||
zIndex: 9999,
|
||
visibility: computedPos ? "visible" : "hidden",
|
||
}}
|
||
className="rounded-xl border bg-popover shadow-lg animate-in fade-in zoom-in-95 duration-100 overflow-hidden"
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30">
|
||
<span className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
|
||
<Sparkles className="h-3.5 w-3.5 text-amber-500" />
|
||
AI 改写
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
<X className="h-3.5 w-3.5" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* ── Loading state ──────────────────────────────────────── */}
|
||
{isLoading && (
|
||
<div className="flex flex-col items-center gap-4 px-4 py-6">
|
||
{/* Bouncing dots */}
|
||
<div className="flex items-center gap-2">
|
||
{[0, 160, 320].map((delay) => (
|
||
<span
|
||
key={delay}
|
||
className="h-1.5 w-1.5 rounded-full bg-primary animate-bouncing"
|
||
style={{ animationDelay: `${delay}ms` }}
|
||
/>
|
||
))}
|
||
<span className="ml-1 text-xs text-muted-foreground">AI 正在生成…</span>
|
||
</div>
|
||
|
||
{/* Stop button — breathing animation */}
|
||
<button
|
||
type="button"
|
||
onClick={onAbort}
|
||
className={cn(
|
||
"animate-breathe-stop",
|
||
"flex items-center gap-1.5 px-5 py-2 text-xs font-medium rounded-lg",
|
||
"border border-red-300/70 bg-red-50/60 text-red-600",
|
||
"dark:border-red-800/50 dark:bg-red-950/20 dark:text-red-400",
|
||
"hover:bg-red-100/90 dark:hover:bg-red-950/40 transition-colors",
|
||
)}
|
||
>
|
||
<Square className="h-3 w-3 fill-current" />
|
||
停止生成
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Error state ─────────────────────────────────────────── */}
|
||
{isError && (
|
||
<div className="px-3 py-3 space-y-2">
|
||
<p className="flex items-center gap-1.5 text-xs text-destructive">
|
||
<AlertCircle className="h-3.5 w-3.5 shrink-0" />
|
||
{error ?? "改写失败"}
|
||
</p>
|
||
<button
|
||
type="button"
|
||
onClick={onRetry}
|
||
className="flex items-center gap-1.5 text-xs text-primary hover:underline"
|
||
>
|
||
<RefreshCw className="h-3 w-3" />
|
||
重试
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Idle state: input + action list ─────────────────────── */}
|
||
{!isLoading && !isError && (
|
||
<>
|
||
{/* Custom instruction input */}
|
||
<div className="px-2.5 pt-2.5 pb-2">
|
||
<input
|
||
ref={inputRef}
|
||
type="text"
|
||
value={instruction}
|
||
onChange={(e) => 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",
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
{/* Divider */}
|
||
<div className="border-t border-border/50 mx-1" />
|
||
|
||
{/* Preset actions */}
|
||
<div className="p-1 space-y-0.5">
|
||
{ACTION_ROWS.map(({ action, label, icon: Icon }) => {
|
||
const isTone = action === "tone";
|
||
const isImitate = action === "imitate";
|
||
const hasSub = isTone;
|
||
const isExpanded = isTone && toneOpen;
|
||
return (
|
||
<div key={action}>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (isTone) {
|
||
setToneOpen((v) => !v);
|
||
} else if (isImitate) {
|
||
setToneOpen(false);
|
||
setImitateDialogOpen(true);
|
||
} else {
|
||
fireAction(action);
|
||
}
|
||
}}
|
||
className={cn(
|
||
"flex w-full items-center gap-2 px-2.5 py-1.5 text-xs rounded-md transition-colors text-left",
|
||
"hover:bg-accent hover:text-accent-foreground",
|
||
isExpanded && "bg-accent text-accent-foreground",
|
||
)}
|
||
>
|
||
<Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||
<span className="flex-1">{label}</span>
|
||
{hasSub && (
|
||
<ChevronRight
|
||
className={cn(
|
||
"h-3.5 w-3.5 text-muted-foreground transition-transform duration-200",
|
||
isExpanded && "rotate-90",
|
||
)}
|
||
/>
|
||
)}
|
||
</button>
|
||
|
||
{/* Tone sub-list */}
|
||
{isTone && toneOpen && (
|
||
<div className="ml-5 border-l pl-2 my-0.5 space-y-0.5">
|
||
{TONE_OPTIONS.map(({ value, label: toneLabel }) => (
|
||
<button
|
||
key={value}
|
||
type="button"
|
||
onClick={() => fireAction("tone", value)}
|
||
className="flex w-full items-center px-2 py-1.5 text-xs rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
|
||
>
|
||
{toneLabel}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* ── Imitate dialog：弹窗内多行输入范文，回车 / 发送即仿写 ───────────── */}
|
||
{imitateDialogOpen && (
|
||
<div className="fixed inset-0 z-[10000] flex items-center justify-center p-4">
|
||
<div
|
||
className="absolute inset-0 bg-black/40 animate-in fade-in duration-100"
|
||
onMouseDown={() => setImitateDialogOpen(false)}
|
||
/>
|
||
<div
|
||
className="relative w-full max-w-md rounded-xl border bg-popover shadow-2xl animate-in fade-in zoom-in-95 duration-100 overflow-hidden"
|
||
onMouseDown={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
|
||
<span className="flex items-center gap-1.5 text-sm font-semibold text-foreground">
|
||
<BookCopy className="h-4 w-4 text-amber-500" />
|
||
仿写
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setImitateDialogOpen(false)}
|
||
className="rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Body */}
|
||
<div className="p-4 space-y-3">
|
||
<textarea
|
||
ref={imitateTextareaRef}
|
||
value={referenceText}
|
||
onChange={(e) => setReferenceText(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
// Enter 提交，Shift+Enter 换行
|
||
if (e.key === "Enter" && !e.shiftKey) {
|
||
e.preventDefault();
|
||
fireImitate();
|
||
} else if (e.key === "Escape") {
|
||
e.preventDefault();
|
||
setImitateDialogOpen(false);
|
||
}
|
||
}}
|
||
rows={8}
|
||
placeholder="粘贴范文，AI 将模仿其文风、句式与语气改写所选文字…（回车提交，Shift+Enter 换行）"
|
||
className={cn(
|
||
"w-full resize-none text-sm rounded-md px-3 py-2 outline-none transition-colors leading-relaxed",
|
||
"bg-muted/50 border border-input focus:border-primary/60",
|
||
"placeholder:text-muted-foreground/50",
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="flex items-center justify-end gap-2 px-4 py-3 border-t bg-muted/20">
|
||
<button
|
||
type="button"
|
||
onClick={() => setImitateDialogOpen(false)}
|
||
className="px-3 py-1.5 text-xs font-medium rounded-md border border-input hover:bg-accent hover:text-accent-foreground transition-colors"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={fireImitate}
|
||
disabled={!referenceText.trim()}
|
||
className={cn(
|
||
"flex items-center justify-center gap-1.5 px-4 py-1.5 text-xs font-medium rounded-md transition-colors",
|
||
"bg-primary text-primary-foreground hover:bg-primary/90",
|
||
"disabled:opacity-40 disabled:cursor-not-allowed",
|
||
)}
|
||
>
|
||
<Send className="h-3.5 w-3.5" />
|
||
发送
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>,
|
||
document.body,
|
||
);
|
||
}
|