feat(app): improve payment and paywall UX

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

@@ -18,22 +18,26 @@ export interface MessageBubbleProps {
   id?: string;
   content: string;
   imageUrl?: string | null;
+  imagePaywalled?: boolean;
   isFromAI: boolean;
   privateLocked?: boolean | null;
   privateHint?: string | null;
   isUnlockingPrivate?: boolean;
   onUnlockPrivateMessage?: (messageId: string) => void;
+  onUnlockImagePaywall?: () => void;
 }
 
 export function MessageBubble({
   id,
   content,
   imageUrl,
+  imagePaywalled,
   isFromAI,
   privateLocked,
   privateHint,
   isUnlockingPrivate,
   onUnlockPrivateMessage,
+  onUnlockImagePaywall,
 }: MessageBubbleProps) {
   const { avatarUrl } = useUserState();
 
@@ -46,11 +50,13 @@ export function MessageBubble({
           messageId={id}
           content={content}
           imageUrl={imageUrl}
+          imagePaywalled={imagePaywalled}
           isFromAI={true}
           privateLocked={privateLocked}
           privateHint={privateHint}
           isUnlockingPrivate={isUnlockingPrivate}
           onUnlockPrivateMessage={onUnlockPrivateMessage}
+          onUnlockImagePaywall={onUnlockImagePaywall}
         />
         <div style={{ width: 43 }} /> {/* 占位：保持与头像宽度一致 */}
       </div>
@@ -64,11 +70,13 @@ export function MessageBubble({
         messageId={id}
         content={content}
         imageUrl={imageUrl}
+        imagePaywalled={imagePaywalled}
         isFromAI={false}
         privateLocked={privateLocked}
         privateHint={privateHint}
         isUnlockingPrivate={isUnlockingPrivate}
         onUnlockPrivateMessage={onUnlockPrivateMessage}
+        onUnlockImagePaywall={onUnlockImagePaywall}
       />
       <div style={{ width: 8 }} />
       <MessageAvatar isFromAI={false} userAvatarUrl={avatarUrl} />