feat(chat): restore image viewer after payment

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

@@ -27,7 +27,6 @@ export interface ChatAreaProps {
   isReplyingAI: boolean;
   isGuest: boolean;
   onUnlockPrivateMessage?: () => void;
-  onUnlockImagePaywall?: () => void;
   onUnlockVoiceMessage?: () => void;
 }
 
@@ -35,7 +34,6 @@ export function ChatArea({
   messages,
   isReplyingAI,
   onUnlockPrivateMessage,
-  onUnlockImagePaywall,
   onUnlockVoiceMessage,
 }: ChatAreaProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -59,7 +57,6 @@ export function ChatArea({
       {renderMessagesWithDateHeaders(
         messages,
         onUnlockPrivateMessage,
-        onUnlockImagePaywall,
         onUnlockVoiceMessage,
       )}
 
@@ -72,7 +69,6 @@ export function ChatArea({
 function renderMessagesWithDateHeaders(
   messages: readonly UiMessage[],
   onUnlockPrivateMessage?: () => void,
-  onUnlockImagePaywall?: () => void,
   onUnlockVoiceMessage?: () => void,
 ) {
   const items: Array<{ type: "date"; date: string; key: string } | { type: "msg"; message: UiMessage; key: string }> = [];
@@ -90,6 +86,7 @@ function renderMessagesWithDateHeaders(
     ) : (
       <MessageBubble
         key={item.key}
+        messageId={item.message.id}
         content={item.message.content}
         imageUrl={item.message.imageUrl}
         imagePaywalled={item.message.imagePaywalled}
@@ -100,7 +97,6 @@ function renderMessagesWithDateHeaders(
         lockedPrivate={item.message.lockedPrivate}
         privateMessageHint={item.message.privateMessageHint}
         onUnlockPrivateMessage={onUnlockPrivateMessage}
-        onUnlockImagePaywall={onUnlockImagePaywall}
         onUnlockVoiceMessage={onUnlockVoiceMessage}
       />
     ),