feat(chat): unlock paid messages before payment

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

@@ -26,13 +26,17 @@ export interface ChatAreaProps {
   messages: readonly UiMessage[];
   isReplyingAI: boolean;
   isGuest: boolean;
-  onUnlockPrivateMessage?: () => void;
-  onUnlockVoiceMessage?: () => void;
+  isUnlockingMessage?: boolean;
+  unlockingMessageId?: string | null;
+  onUnlockPrivateMessage?: (messageId: string) => void;
+  onUnlockVoiceMessage?: (messageId: string) => void;
 }
 
 export function ChatArea({
   messages,
   isReplyingAI,
+  isUnlockingMessage,
+  unlockingMessageId,
   onUnlockPrivateMessage,
   onUnlockVoiceMessage,
 }: ChatAreaProps) {
@@ -56,6 +60,8 @@ export function ChatArea({
 
       {renderMessagesWithDateHeaders(
         messages,
+        isUnlockingMessage,
+        unlockingMessageId,
         onUnlockPrivateMessage,
         onUnlockVoiceMessage,
       )}
@@ -68,8 +74,10 @@ export function ChatArea({
 /** 渲染消息列表（按日期分组插入分隔条） */
 function renderMessagesWithDateHeaders(
   messages: readonly UiMessage[],
-  onUnlockPrivateMessage?: () => void,
-  onUnlockVoiceMessage?: () => void,
+  isUnlockingMessage?: boolean,
+  unlockingMessageId?: string | null,
+  onUnlockPrivateMessage?: (messageId: string) => void,
+  onUnlockVoiceMessage?: (messageId: string) => void,
 ) {
   const items: Array<{ type: "date"; date: string; key: string } | { type: "msg"; message: UiMessage; key: string }> = [];
 
@@ -96,6 +104,10 @@ function renderMessagesWithDateHeaders(
         lockReason={item.message.lockReason}
         lockedPrivate={item.message.lockedPrivate}
         privateMessageHint={item.message.privateMessageHint}
+        isUnlockingMessage={
+          isUnlockingMessage === true &&
+          item.message.id === unlockingMessageId
+        }
         onUnlockPrivateMessage={onUnlockPrivateMessage}
         onUnlockVoiceMessage={onUnlockVoiceMessage}
       />