refactor(chat): show images in page overlay

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

@@ -28,6 +28,7 @@ export interface MessageBubbleProps {
   isUnlockingMessage?: boolean;
   onUnlockPrivateMessage?: (messageId: string) => void;
   onUnlockVoiceMessage?: (messageId: string) => void;
+  onOpenImage?: (messageId: string) => void;
 }
 
 export function MessageBubble({
@@ -44,6 +45,7 @@ export function MessageBubble({
   isUnlockingMessage,
   onUnlockPrivateMessage,
   onUnlockVoiceMessage,
+  onOpenImage,
 }: MessageBubbleProps) {
   const { avatarUrl } = useUserState();
 
@@ -70,6 +72,7 @@ export function MessageBubble({
           isUnlockingMessage={isUnlockingMessage}
           onUnlockPrivateMessage={onUnlockPrivateMessage}
           onUnlockVoiceMessage={onUnlockVoiceMessage}
+          onOpenImage={onOpenImage}
         />
         <div className={styles.bubbleAvatarSpacer} aria-hidden="true" />
       </div>
@@ -97,6 +100,7 @@ export function MessageBubble({
         isUnlockingMessage={isUnlockingMessage}
         onUnlockPrivateMessage={onUnlockPrivateMessage}
         onUnlockVoiceMessage={onUnlockVoiceMessage}
+        onOpenImage={onOpenImage}
       />
       <div className={styles.bubbleInlineSpacer} aria-hidden="true" />
       <MessageAvatar isFromAI={false} userAvatarUrl={avatarUrl} />