storing analytics data

resources/js/components/messaging/MessageBubble.jsx

@@ -10,7 +10,7 @@ const QUICK_REACTIONS = ['👍', '❤️', '🔥', '😂', '👏', '😮']
  * - Inline edit for own messages
  * - Soft-delete display
  */
-export default function MessageBubble({ message, isMine, showAvatar, onReact, onUnreact, onEdit, onReport = null, seenText = null }) {
+export default function MessageBubble({ message, isMine, showAvatar, onReact, onUnreact, onEdit, onReport = null, onOpenImage = null, seenText = null }) {
   const [showPicker, setShowPicker] = useState(false)
   const [editing, setEditing]       = useState(false)
   const [editBody, setEditBody]     = useState(message.body ?? '')
@@ -119,14 +119,18 @@ export default function MessageBubble({ message, isMine, showAvatar, onReact, on
                       {message.attachments.map(att => (
                         <div key={att.id}>
                           {att.type === 'image' ? (
-                            <a href={`/messages/attachments/${att.id}`} target="_blank" rel="noopener noreferrer">
+                            <button
+                              type="button"
+                              onClick={() => onOpenImage?.({ id: att.id, original_name: att.original_name, url: `/messages/attachments/${att.id}` })}
+                              className="block"
+                            >
                               <img
                                 src={`/messages/attachments/${att.id}`}
                                 alt={att.original_name}
                                 className="max-h-44 rounded-lg border border-white/20"
                                 loading="lazy"
                               />
-                            </a>
+                            </button>
                           ) : (
                             <a
                               href={`/messages/attachments/${att.id}`}