import type { ThreadEntry, ToolCallEntry, PlanDisplayEntry } from "../../src/lib/types";
import { cn } from "../../src/lib/utils";
import { UserBubble, AssistantBubble } from "./MessageBubble";
import { ToolCallGroup } from "./ToolCallGroup";
import { PlanDisplay } from "./PlanView";
import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButtons } from "../ai-elements/conversation";
// =============================================================================
// 统一聊天视图 — Anthropic 编辑式排版
// 无气泡间距，用垂直 rhythm 区分消息块
// =============================================================================
interface ChatViewProps {
entries: ThreadEntry[];
isLoading?: boolean;
onPermissionRespond?: (requestId: string, optionId: string | null, optionKind: string | null) => void;
emptyTitle?: string;
emptyDescription?: string;
}
export function ChatView({
entries,
isLoading = false,
onPermissionRespond,
emptyTitle = "开始对话",
emptyDescription = "输入消息开始聊天",
}: ChatViewProps) {
// 将相邻的 ToolCallEntry 合并为一组
const grouped = groupToolCalls(entries);
const hasMessages = entries.length > 0;
// 检查是否正在加载（最后一个条目是用户消息）
const showThinking = isLoading && entries.length > 0 && entries[entries.length - 1]?.type === "user_message";
return (
{!hasMessages ? (
) : (
<>
{grouped.map((item, i) => {
if (item.type === "single") {
return (
);
}
// 工具调用组 — 紧贴在助手消息下方
return (
);
})}
{/* 思考指示器 — Anthropic 打字动画 */}
{showThinking && (
)}
)}
e.type === "user_message")} />
);
}
// =============================================================================
// 间距逻辑 — 用户消息前后间距大，工具调用紧贴
// =============================================================================
function entrySpacing(entries: ThreadEntry[], index: number): string {
const entry = entries[index];
// 用户消息前后大留白 — Claude.ai 式宽松间距
if (entry?.type === "user_message") {
return "pt-10 pb-3";
}
// 助手消息 — 工具调用紧贴，否则多留白
if (entry?.type === "assistant_message") {
const next = entries[index + 1];
if (next?.type === "tool_call") {
return "pt-3 pb-1";
}
return "pt-3 pb-8";
}
// Plan 条目
if (entry?.type === "plan") {
return "pt-3 pb-3";
}
return "py-2";
}
// =============================================================================
// 单条目渲染器
// =============================================================================
function EntryRenderer({
entry,
isLoading,
onPermissionRespond,
}: {
entry: ThreadEntry;
isLoading: boolean;
onPermissionRespond?: (requestId: string, optionId: string | null, optionKind: string | null) => void;
}) {
switch (entry.type) {
case "user_message":
return ;
case "assistant_message":
return ;
case "tool_call":
return (
);
case "plan":
return ;
default:
return null;
}
}
// =============================================================================
// 工具调用分组逻辑
// =============================================================================
type GroupedItem =
| { type: "single"; entry: ThreadEntry }
| { type: "tool_group"; entries: ToolCallEntry[] };
function groupToolCalls(entries: ThreadEntry[]): GroupedItem[] {
const result: GroupedItem[] = [];
let currentToolGroup: ToolCallEntry[] = [];
const flushToolGroup = () => {
if (currentToolGroup.length === 1) {
result.push({ type: "single", entry: currentToolGroup[0] });
} else if (currentToolGroup.length > 1) {
result.push({ type: "tool_group", entries: currentToolGroup });
}
currentToolGroup = [];
};
for (const entry of entries) {
if (entry.type === "tool_call") {
currentToolGroup.push(entry);
} else {
flushToolGroup();
result.push({ type: "single", entry });
}
}
flushToolGroup();
return result;
}