import { useState, useRef, useEffect, useCallback } from "react"; import type { UserMessageEntry, AssistantMessageEntry, UserMessageImage } from "../../src/lib/types"; import { cn, esc } from "../../src/lib/utils"; import { MessageResponse } from "../ai-elements/message"; import { Reasoning, ReasoningTrigger, ReasoningContent } from "../ai-elements/reasoning"; import { ChevronDown } from "lucide-react"; // 用户消息折叠最大高度（px） const COLLAPSED_MAX_HEIGHT = 200; // ============================================================================= // 用户消息 — 右对齐，品牌色淡底，可折叠 // ============================================================================= interface UserBubbleProps { entry: UserMessageEntry; } export function UserBubble({ entry }: UserBubbleProps) { const [expanded, setExpanded] = useState(false); const [overflowing, setOverflowing] = useState(false); const contentRef = useRef(null); const checkOverflow = useCallback(() => { const el = contentRef.current; if (!el) return; setOverflowing(el.scrollHeight > COLLAPSED_MAX_HEIGHT + 4); }, []); useEffect(() => { checkOverflow(); }, [checkOverflow, entry.content]); return (
{/* 图片附件 */} {entry.images && entry.images.length > 0 && (
{entry.images.map((img, i) => ( ))}
)} {/* 文本内容 — 品牌色淡底 + 折叠 */} {entry.content && (
{esc(entry.content)}
{/* 折叠渐变遮罩 + 展开按钮 */} {!expanded && overflowing && (
)}
)}
); } // ============================================================================= // 助手消息 — 左对齐，无背景卡片，编辑式排版 // ============================================================================= interface AssistantBubbleProps { entry: AssistantMessageEntry; isStreaming?: boolean; } export function AssistantBubble({ entry, isStreaming }: AssistantBubbleProps) { return (
{/* Orange triangle avatar */}
{/* 内容 — 无卡片背景，直接排版 */}
{/* Sender label */} Claude {entry.chunks.map((chunk, i) => { if (chunk.type === "thought") { const isLastChunk = i === entry.chunks.length - 1; const isThoughtStreaming = isStreaming && isLastChunk; return (
{chunk.text}
); } // 普通消息块 — 直接输出，无包裹卡片 return (
{chunk.text}
); })}
); } // ============================================================================= // 图片缩略图 — 点击放大 // ============================================================================= function ImageThumbnail({ image }: { image: UserMessageImage }) { const dataUrl = `data:${image.mimeType};base64,${image.data}`; return ( ); }