ceae24740a
回答用户原话「我怎么和 AI 对话」（docs/design/ux-exploration.md §4 P0-1/2/4/5）。 P0-2 把折叠的「本章写作指令[可选]」原地提升为正文正上方常驻输入条：标题 「告诉 AI 这章想怎么写」、去「可选」徽标、空章默认展开、「AI 写作诉求」→ 「你的写作要求」、邀请式 placeholder；发送键即「写本章」（streaming 时切 「停」），复用 composeDirective + 文风/剧情 chips + 流式打字机，不改成聊天气泡。 P0-1 底栏「AI 对话」→「对话记录」（只读日志正名），抽屉标题/aria/空态同改。 P0-4「润色选段」常驻可点，无选区点击弹 toast 提示（去 hover-only title）。 P0-5 输入条旁常驻 HITL 微文案 +「?这是什么」可再发现弹层（非一次性 coach）。
285 lines
8.8 KiB
TypeScript
285 lines
8.8 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useRef, type RefObject } from "react";
|
||
import { MessagesSquare, X } from "lucide-react";
|
||
|
||
import { ThinkingIndicator } from "@/components/ThinkingIndicator";
|
||
import { Badge } from "@/components/ui/Badge";
|
||
import { Button } from "@/components/ui/Button";
|
||
import { EmptyState } from "@/components/ui/EmptyState";
|
||
import { StatusNote } from "@/components/ui/StatusNote";
|
||
import { handleTabTrap } from "@/lib/a11y/focusTrap";
|
||
import { useRestoreFocus } from "@/lib/a11y/useRestoreFocus";
|
||
import { useBodyScrollLock } from "@/lib/ui/useBodyScrollLock";
|
||
import { overlayScrim } from "@/lib/ui/variants";
|
||
import type { AiMessageView } from "@/lib/api/types";
|
||
import {
|
||
acceptActionFor,
|
||
groupByThread,
|
||
kindBadge,
|
||
kindLabel,
|
||
partitionByScope,
|
||
type AcceptAction,
|
||
type AiThread,
|
||
} from "@/lib/workbench/aiConversation";
|
||
import { readSegment } from "@/lib/workbench/inlineConversation";
|
||
import type { UseAiConversation } from "@/lib/workbench/useAiConversation";
|
||
import { ConversationThread } from "./ConversationThread";
|
||
|
||
// AI 对话总开关：一键关闭即回滚（触发按钮据此隐藏），仿 CONTEXT_DRAWER_ENABLED。
|
||
export const AI_CONVERSATION_ENABLED = true;
|
||
|
||
interface AiConversationDrawerProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
conversation: UseAiConversation;
|
||
currentChapterNo: number;
|
||
// 从历史再接受（复用编辑器既有 DRAFT-only HITL 回调）；返回 true=成功则关抽屉。
|
||
onReplaceChapter: (content: string) => boolean;
|
||
onAppendDraft: (content: string) => boolean;
|
||
onRefillSegment: (segment: string, refined: string) => boolean;
|
||
triggerRef?: RefObject<HTMLElement | null>;
|
||
}
|
||
|
||
// 每章「对话记录」抽屉（只读往复日志，气泡视图）：本章对话 + 项目级生成两段，作者右 / AI 左，kind 徽标 + 线程归组。
|
||
// 结构克隆 ContextDrawer：右侧 slide-over + overlayScrim + role=dialog + Esc + focus trap + scroll lock + 还原焦点。
|
||
// append-only 只读展示；对 ai 产出可「从历史再接受」——只回填编辑器草稿，不绕开验收事务（守不变量 #3）。
|
||
export function AiConversationDrawer({
|
||
open,
|
||
onClose,
|
||
conversation,
|
||
currentChapterNo,
|
||
onReplaceChapter,
|
||
onAppendDraft,
|
||
onRefillSegment,
|
||
triggerRef,
|
||
}: AiConversationDrawerProps) {
|
||
const panelRef = useRef<HTMLDivElement>(null);
|
||
const closeRef = useRef<HTMLButtonElement>(null);
|
||
|
||
useBodyScrollLock(open);
|
||
useRestoreFocus(open, triggerRef);
|
||
|
||
// 打开即懒加载（Workbench 级 hook，append 早已可能触发过——已加载则空操作）。
|
||
useEffect(() => {
|
||
if (open) conversation.ensureLoaded();
|
||
}, [open, conversation]);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const onKey = (e: KeyboardEvent): void => {
|
||
if (e.key === "Escape") {
|
||
e.preventDefault();
|
||
onClose();
|
||
}
|
||
};
|
||
window.addEventListener("keydown", onKey);
|
||
closeRef.current?.focus();
|
||
return () => window.removeEventListener("keydown", onKey);
|
||
}, [open, onClose]);
|
||
|
||
if (!open) return null;
|
||
|
||
const threads = groupByThread(conversation.messages);
|
||
const { chapterThreads, projectThreads } = partitionByScope(
|
||
threads,
|
||
currentChapterNo,
|
||
);
|
||
const summary = `本章 ${chapterThreads.length} 段对话，项目级 ${projectThreads.length} 项生成`;
|
||
|
||
// 再接受成功则关抽屉揭示改动后的编辑器；失败（如原选段漂移）保留抽屉与漂移提示。
|
||
const accept = (action: AcceptAction, m: AiMessageView): void => {
|
||
let ok = false;
|
||
if (action === "replace_chapter") ok = onReplaceChapter(m.content);
|
||
else if (action === "append_draft") ok = onAppendDraft(m.content);
|
||
else if (action === "refill_segment")
|
||
ok = onRefillSegment(readSegment(m.meta), m.content);
|
||
if (ok) onClose();
|
||
};
|
||
|
||
return (
|
||
<div className={overlayScrim} onClick={onClose}>
|
||
<div
|
||
ref={panelRef}
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label="对话记录"
|
||
onClick={(e) => e.stopPropagation()}
|
||
onKeyDown={(e) => {
|
||
if (panelRef.current) handleTabTrap(panelRef.current, e);
|
||
}}
|
||
className="absolute right-0 top-0 flex h-full w-96 max-w-[90vw] flex-col border-l border-line bg-panel shadow-paper outline-none motion-safe:transition-transform"
|
||
>
|
||
<header className="flex items-center justify-between border-b border-line px-4 py-3">
|
||
<span className="flex items-center gap-2 font-serif text-base text-ink">
|
||
<MessagesSquare
|
||
className="h-4 w-4 text-cinnabar"
|
||
aria-hidden="true"
|
||
/>
|
||
对话记录
|
||
</span>
|
||
<Button
|
||
ref={closeRef}
|
||
onClick={onClose}
|
||
aria-label="关闭对话记录"
|
||
variant="ghost"
|
||
size="icon"
|
||
>
|
||
<X className="h-5 w-5" aria-hidden="true" />
|
||
</Button>
|
||
</header>
|
||
|
||
<div
|
||
role="log"
|
||
aria-live="polite"
|
||
aria-relevant="additions"
|
||
aria-label={summary}
|
||
className="flex-1 overflow-auto overscroll-contain px-4 py-4"
|
||
>
|
||
<DrawerBody
|
||
status={conversation.status}
|
||
chapterThreads={chapterThreads}
|
||
projectThreads={projectThreads}
|
||
onRetry={conversation.reload}
|
||
onAccept={accept}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface DrawerBodyProps {
|
||
status: UseAiConversation["status"];
|
||
chapterThreads: AiThread[];
|
||
projectThreads: AiThread[];
|
||
onRetry: () => void;
|
||
onAccept: (action: AcceptAction, m: AiMessageView) => void;
|
||
}
|
||
|
||
function DrawerBody({
|
||
status,
|
||
chapterThreads,
|
||
projectThreads,
|
||
onRetry,
|
||
onAccept,
|
||
}: DrawerBodyProps) {
|
||
if (status === "loading" || status === "idle") {
|
||
return (
|
||
<div className="py-6 text-center">
|
||
<ThinkingIndicator label="加载中" className="text-sm text-ink-soft" />
|
||
</div>
|
||
);
|
||
}
|
||
if (status === "error") {
|
||
return (
|
||
<StatusNote variant="danger" title="加载失败">
|
||
<p>AI 对话暂不可用。</p>
|
||
<Button
|
||
onClick={onRetry}
|
||
variant="secondary"
|
||
size="sm"
|
||
className="mt-2"
|
||
>
|
||
重试
|
||
</Button>
|
||
</StatusNote>
|
||
);
|
||
}
|
||
if (chapterThreads.length === 0 && projectThreads.length === 0) {
|
||
return (
|
||
<EmptyState
|
||
icon={MessagesSquare}
|
||
title="这里留存你和 AI 的往复记录"
|
||
description="润色、整章重写、续写、工具箱生成的往复会自动留痕，重开也不丢。"
|
||
/>
|
||
);
|
||
}
|
||
return (
|
||
<div className="space-y-5">
|
||
<ThreadSection
|
||
heading="本章对话"
|
||
threads={chapterThreads}
|
||
onAccept={onAccept}
|
||
emptyText="本章还没有对话。"
|
||
/>
|
||
<ThreadSection
|
||
heading="项目级生成"
|
||
threads={projectThreads}
|
||
onAccept={onAccept}
|
||
emptyText="还没有项目级（工具箱）生成。"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface ThreadSectionProps {
|
||
heading: string;
|
||
threads: AiThread[];
|
||
onAccept: (action: AcceptAction, m: AiMessageView) => void;
|
||
emptyText: string;
|
||
}
|
||
|
||
function ThreadSection({
|
||
heading,
|
||
threads,
|
||
onAccept,
|
||
emptyText,
|
||
}: ThreadSectionProps) {
|
||
return (
|
||
<section>
|
||
<h3 className="mb-2 text-2xs font-medium uppercase tracking-wide text-ink-soft">
|
||
{heading}
|
||
</h3>
|
||
{threads.length === 0 ? (
|
||
<p className="text-xs text-ink-soft">{emptyText}</p>
|
||
) : (
|
||
<ul className="space-y-3">
|
||
{threads.map((thread) => (
|
||
<li key={thread.threadId}>
|
||
<ThreadBlock thread={thread} onAccept={onAccept} />
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
interface ThreadBlockProps {
|
||
thread: AiThread;
|
||
onAccept: (action: AcceptAction, m: AiMessageView) => void;
|
||
}
|
||
|
||
function ThreadBlock({ thread, onAccept }: ThreadBlockProps) {
|
||
const action = acceptActionFor(thread);
|
||
const headAt = thread.messages[0]?.created_at ?? "";
|
||
return (
|
||
<div className="rounded border border-line bg-bg/50 p-3">
|
||
<div className="mb-2 flex items-center gap-2">
|
||
<Badge variant={kindBadge(thread.kind)}>{kindLabel(thread.kind)}</Badge>
|
||
{thread.toolKey ? (
|
||
<span className="font-mono text-2xs text-ink-soft">
|
||
{thread.toolKey}
|
||
</span>
|
||
) : null}
|
||
<span className="ml-auto font-mono text-2xs text-ink-soft">
|
||
{formatBubbleTime(headAt)}
|
||
</span>
|
||
</div>
|
||
<ConversationThread
|
||
messages={thread.messages}
|
||
action={action}
|
||
onAccept={onAccept}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 气泡时间戳：本地 HH:MM（显示用，与自动保存「保存于 HH:MM」风格一致）。
|
||
function formatBubbleTime(iso: string): string {
|
||
const d = new Date(iso);
|
||
if (Number.isNaN(d.getTime())) return "";
|
||
return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||
}
|