feat(app): improve payment and paywall UX

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

@@ -17,9 +17,15 @@ import styles from "./image-bubble.module.css";
 
 export interface ImageBubbleProps {
   imageUrl: string; // base64 data URI 或 URL
+  imagePaywalled?: boolean;
+  onUnlockImagePaywall?: () => void;
 }
 
-export function ImageBubble({ imageUrl }: ImageBubbleProps) {
+export function ImageBubble({
+  imageUrl,
+  imagePaywalled = false,
+  onUnlockImagePaywall,
+}: ImageBubbleProps) {
   const [open, setOpen] = useState(false);
   const [error, setError] = useState(false);
 
@@ -53,7 +59,14 @@ export function ImageBubble({ imageUrl }: ImageBubbleProps) {
           />
         )}
       </div>
-      {open && <FullscreenImageViewer imageUrl={imageUrl} onClose={() => setOpen(false)} />}
+      {open && (
+        <FullscreenImageViewer
+          imageUrl={imageUrl}
+          imagePaywalled={imagePaywalled}
+          onUnlockImagePaywall={onUnlockImagePaywall}
+          onClose={() => setOpen(false)}
+        />
+      )}
     </>
   );
 }