129 lines
4.3 KiB
TypeScript
129 lines
4.3 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useRef } from "react";
|
||
import { Check, Plus, X } from "lucide-react";
|
||
|
||
import { ThinkingIndicator } from "@/components/ThinkingIndicator";
|
||
import { Button } from "@/components/ui/Button";
|
||
import { SectionHeader } from "@/components/ui/SectionHeader";
|
||
import { StatusNote } from "@/components/ui/StatusNote";
|
||
import { useContinue } from "@/lib/workbench/useContinue";
|
||
import type { AiTurnInput } from "@/lib/workbench/useAiConversation";
|
||
|
||
interface ContinuePanelProps {
|
||
projectId: string;
|
||
chapterNo: number;
|
||
// 插入选中候选到正文（追加到章末）。
|
||
onInsert: (text: string) => void;
|
||
// 留痕：每条候选记一条 ai 气泡（续写无作者输入，故无 author 气泡）。
|
||
appendMessages: (turn: AiTurnInput) => void;
|
||
onClose: () => void;
|
||
}
|
||
|
||
// 续写结果卡（内联，非模态）：打开即读该章前文续写一条候选；可「再来一个」累加多候选，
|
||
// 作者点某条「插入正文」才落回草稿（HITL，不静默写入）。
|
||
export function ContinuePanel({
|
||
projectId,
|
||
chapterNo,
|
||
onInsert,
|
||
appendMessages,
|
||
onClose,
|
||
}: ContinuePanelProps) {
|
||
const { status, candidates, generate } = useContinue();
|
||
const ranRef = useRef(false);
|
||
// 本面板一次会话 = 一个 thread；多条候选归此组，candidate_index 本地累加。
|
||
const threadId = useRef(crypto.randomUUID()).current;
|
||
const candidateIdxRef = useRef(0);
|
||
|
||
// 生成一条候选并（成功时）留痕：ai-only，meta 存候选序号。
|
||
const runGenerate = useCallback(async (): Promise<void> => {
|
||
const text = await generate(projectId, chapterNo);
|
||
if (!text) return;
|
||
const candidateIndex = candidateIdxRef.current;
|
||
candidateIdxRef.current += 1;
|
||
appendMessages({
|
||
threadId,
|
||
kind: "continue",
|
||
toolKey: "continue",
|
||
chapterNo,
|
||
messages: [
|
||
{ role: "ai", content: text, meta: { candidate_index: candidateIndex } },
|
||
],
|
||
});
|
||
}, [generate, projectId, chapterNo, appendMessages, threadId]);
|
||
|
||
useEffect(() => {
|
||
if (ranRef.current) return;
|
||
ranRef.current = true;
|
||
void runGenerate();
|
||
}, [runGenerate]);
|
||
|
||
const busy = status === "generating";
|
||
|
||
return (
|
||
<div className="border-b border-line bg-panel px-4 py-3 sm:px-6">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<SectionHeader
|
||
title="续写候选"
|
||
description="承接本章前文续写；点「再来一个」多生成几版，选中意的加到章末。"
|
||
/>
|
||
<Button onClick={onClose} variant="ghost" size="icon" aria-label="关闭续写">
|
||
<X className="h-4 w-4" aria-hidden="true" />
|
||
</Button>
|
||
</div>
|
||
|
||
{candidates.length === 0 && busy ? (
|
||
<div className="mt-3">
|
||
<ThinkingIndicator label="续写中" className="text-xs text-cinnabar" />
|
||
</div>
|
||
) : null}
|
||
|
||
{candidates.length === 0 && status === "error" ? (
|
||
<StatusNote variant="danger" className="mt-3 text-xs" title="续写失败">
|
||
<button
|
||
type="button"
|
||
onClick={() => void runGenerate()}
|
||
className="mt-1 inline-flex items-center gap-1 text-cinnabar hover:underline"
|
||
>
|
||
重试
|
||
</button>
|
||
</StatusNote>
|
||
) : null}
|
||
|
||
<ul className="mt-3 space-y-2">
|
||
{candidates.map((text, i) => (
|
||
<li
|
||
key={i}
|
||
className="rounded border border-line bg-bg p-3"
|
||
>
|
||
<div className="mb-1 flex items-center justify-between gap-2">
|
||
<span className="text-2xs text-ink-soft">候选 {i + 1}</span>
|
||
<Button
|
||
onClick={() => onInsert(text)}
|
||
variant="primary"
|
||
size="sm"
|
||
>
|
||
<Check className="h-4 w-4" aria-hidden="true" />
|
||
采用（加到章末）
|
||
</Button>
|
||
</div>
|
||
<p className="whitespace-pre-wrap text-sm text-ink">{text}</p>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<div className="mt-3">
|
||
<Button
|
||
onClick={() => void runGenerate()}
|
||
disabled={busy}
|
||
variant="secondary"
|
||
size="sm"
|
||
>
|
||
<Plus className="h-4 w-4" aria-hidden="true" />
|
||
再来一个候选
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|