feat(app): improve payment and paywall UX

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

@@ -30,6 +30,7 @@ export interface ChatAreaProps {
   isGuest: boolean;
   unlockingPrivateMessageId?: string | null;
   onUnlockPrivateMessage?: (messageId: string) => void;
+  onUnlockImagePaywall?: () => void;
 }
 
 export function ChatArea({
@@ -37,6 +38,7 @@ export function ChatArea({
   isReplyingAI,
   unlockingPrivateMessageId,
   onUnlockPrivateMessage,
+  onUnlockImagePaywall,
 }: ChatAreaProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const prevLengthRef = useRef(messages.length);
@@ -60,6 +62,7 @@ export function ChatArea({
         messages,
         unlockingPrivateMessageId,
         onUnlockPrivateMessage,
+        onUnlockImagePaywall,
       )}
 
       {isReplyingAI && <LottieMessageBubble />}
@@ -72,6 +75,7 @@ function renderMessagesWithDateHeaders(
   messages: readonly UiMessage[],
   unlockingPrivateMessageId?: string | null,
   onUnlockPrivateMessage?: (messageId: string) => void,
+  onUnlockImagePaywall?: () => void,
 ) {
   const items: Array<{ type: "date"; date: string; key: string } | { type: "msg"; message: UiMessage; key: string }> = [];
 
@@ -91,6 +95,7 @@ function renderMessagesWithDateHeaders(
         id={item.message.id}
         content={item.message.content}
         imageUrl={item.message.imageUrl}
+        imagePaywalled={item.message.imagePaywalled}
         isFromAI={item.message.isFromAI}
         privateLocked={item.message.privateLocked}
         privateHint={item.message.privateHint}
@@ -99,6 +104,7 @@ function renderMessagesWithDateHeaders(
           item.message.id === unlockingPrivateMessageId
         }
         onUnlockPrivateMessage={onUnlockPrivateMessage}
+        onUnlockImagePaywall={onUnlockImagePaywall}
       />
     ),
   );