feat(app): improve payment and paywall UX

src/app/chat/components/message-content.tsx

@@ -17,11 +17,13 @@ export interface MessageContentProps {
   messageId?: string;
   content: string;
   imageUrl?: string | null;
+  imagePaywalled?: boolean;
   isFromAI: boolean;
   privateLocked?: boolean | null;
   privateHint?: string | null;
   isUnlockingPrivate?: boolean;
   onUnlockPrivateMessage?: (messageId: string) => void;
+  onUnlockImagePaywall?: () => void;
 }
 
 const IMAGE_PLACEHOLDER = "[图片]";
@@ -30,11 +32,13 @@ export function MessageContent({
   messageId,
   content,
   imageUrl,
+  imagePaywalled,
   isFromAI,
   privateLocked,
   privateHint,
   isUnlockingPrivate = false,
   onUnlockPrivateMessage,
+  onUnlockImagePaywall,
 }: MessageContentProps) {
   const hasImage = imageUrl != null && imageUrl.length > 0;
   const hasText = content.length > 0 && content !== IMAGE_PLACEHOLDER;
@@ -65,7 +69,13 @@ export function MessageContent({
         />
       ) : (
         <>
-          {hasImage && imageUrl && <ImageBubble imageUrl={imageUrl} />}
+          {hasImage && imageUrl && (
+            <ImageBubble
+              imageUrl={imageUrl}
+              imagePaywalled={imagePaywalled}
+              onUnlockImagePaywall={onUnlockImagePaywall}
+            />
+          )}
           {hasText && <TextBubble content={content} isFromAI={isFromAI} />}
         </>
       )}