feat(chat): add private message unlock flow

src/app/chat/components/chat-area.tsx

@@ -28,9 +28,16 @@ export interface ChatAreaProps {
   messages: readonly UiMessage[];
   isReplyingAI: boolean;
   isGuest: boolean;
+  unlockingPrivateMessageId?: string | null;
+  onUnlockPrivateMessage?: (messageId: string) => void;
 }
 
-export function ChatArea({ messages, isReplyingAI }: ChatAreaProps) {
+export function ChatArea({
+  messages,
+  isReplyingAI,
+  unlockingPrivateMessageId,
+  onUnlockPrivateMessage,
+}: ChatAreaProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const prevLengthRef = useRef(messages.length);
 
@@ -49,7 +56,11 @@ export function ChatArea({ messages, isReplyingAI }: ChatAreaProps) {
     <main ref={scrollRef} className={styles.area} aria-label="Chat messages">
       <AiDisclosureBanner />
 
-      {renderMessagesWithDateHeaders(messages)}
+      {renderMessagesWithDateHeaders(
+        messages,
+        unlockingPrivateMessageId,
+        onUnlockPrivateMessage,
+      )}
 
       {isReplyingAI && <LottieMessageBubble />}
     </main>
@@ -57,7 +68,11 @@ export function ChatArea({ messages, isReplyingAI }: ChatAreaProps) {
 }
 
 /** 渲染消息列表（按日期分组插入分隔条） */
-function renderMessagesWithDateHeaders(messages: readonly UiMessage[]) {
+function renderMessagesWithDateHeaders(
+  messages: readonly UiMessage[],
+  unlockingPrivateMessageId?: string | null,
+  onUnlockPrivateMessage?: (messageId: string) => void,
+) {
   const items: Array<{ type: "date"; date: string; key: string } | { type: "msg"; message: UiMessage; key: string }> = [];
 
   messages.forEach((m, i) => {
@@ -73,9 +88,17 @@ function renderMessagesWithDateHeaders(messages: readonly UiMessage[]) {
     ) : (
       <MessageBubble
         key={item.key}
+        id={item.message.id}
         content={item.message.content}
         imageUrl={item.message.imageUrl}
         isFromAI={item.message.isFromAI}
+        privateLocked={item.message.privateLocked}
+        privateHint={item.message.privateHint}
+        isUnlockingPrivate={
+          item.message.id != null &&
+          item.message.id === unlockingPrivateMessageId
+        }
+        onUnlockPrivateMessage={onUnlockPrivateMessage}
       />
     ),
   );