@ermis-network/ermis-chat-react 1.0.7 → 1.0.8

package/src/components/MediaLightbox.tsx

@@ -0,0 +1,314 @@
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import { preloadImage } from '../utils';
+import { useChatClient } from '../hooks/useChatClient';
+import type { MediaLightboxProps } from '../types';
+
+/** Extract a reasonable filename from a URL or alt text */
+const getFilename = (src: string, alt?: string): string => {
+  if (alt) return alt;
+  try {
+    const pathname = new URL(src).pathname;
+    const segments = pathname.split('/');
+    return segments[segments.length - 1] || 'download';
+  } catch {
+    return 'download';
+  }
+};
+
+/**
+ * MediaLightbox – full-screen overlay for viewing images & videos.
+ * Supports prev/next navigation, keyboard controls, and image zoom.
+ * Renders via React portal into document.body.
+ */
+export const MediaLightbox: React.FC<MediaLightboxProps> = React.memo(({
+  items,
+  initialIndex = 0,
+  isOpen,
+  onClose,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const panStart = useRef({ x: 0, y: 0 });
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Reset state when opening or when items change
+  useEffect(() => {
+    if (isOpen) {
+      setCurrentIndex(initialIndex);
+      setZoom(1);
+      setPan({ x: 0, y: 0 });
+    }
+  }, [isOpen, initialIndex]);
+
+  // Preload adjacent images
+  useEffect(() => {
+    if (!isOpen) return;
+    const preloadIdx = [currentIndex - 1, currentIndex + 1];
+    preloadIdx.forEach(idx => {
+      if (idx >= 0 && idx < items.length && items[idx].type === 'image') {
+        preloadImage(items[idx].src);
+      }
+    });
+  }, [isOpen, currentIndex, items]);
+
+  // Pause video when navigating away or closing
+  useEffect(() => {
+    return () => {
+      if (videoRef.current) {
+        videoRef.current.pause();
+      }
+    };
+  }, [currentIndex]);
+
+  // Lock body scroll when open
+  useEffect(() => {
+    if (isOpen) {
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = prev; };
+    }
+  }, [isOpen]);
+
+  const goTo = useCallback((idx: number) => {
+    if (videoRef.current) videoRef.current.pause();
+    setCurrentIndex(idx);
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+
+  const goPrev = useCallback(() => {
+    if (currentIndex > 0) goTo(currentIndex - 1);
+  }, [currentIndex, goTo]);
+
+  const goNext = useCallback(() => {
+    if (currentIndex < items.length - 1) goTo(currentIndex + 1);
+  }, [currentIndex, items.length, goTo]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          onClose();
+          break;
+        case 'ArrowLeft':
+          goPrev();
+          break;
+        case 'ArrowRight':
+          goNext();
+          break;
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [isOpen, onClose, goPrev, goNext]);
+
+  // Double-click zoom toggle (image only)
+  const handleDoubleClick = useCallback(() => {
+    const current = items[currentIndex];
+    if (current?.type !== 'image') return;
+
+    if (zoom === 1) {
+      setZoom(2);
+    } else {
+      setZoom(1);
+      setPan({ x: 0, y: 0 });
+    }
+  }, [currentIndex, items, zoom]);
+
+  // Wheel zoom (image only)
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    const current = items[currentIndex];
+    if (current?.type !== 'image') return;
+    e.preventDefault();
+
+    setZoom(prev => {
+      const next = prev - e.deltaY * 0.002;
+      const clamped = Math.max(1, Math.min(3, next));
+      if (clamped === 1) setPan({ x: 0, y: 0 });
+      return clamped;
+    });
+  }, [currentIndex, items]);
+
+  // Mouse drag for panning (image zoomed)
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (zoom <= 1) return;
+    e.preventDefault();
+    setIsDragging(true);
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    panStart.current = { ...pan };
+  }, [zoom, pan]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isDragging) return;
+    const dx = e.clientX - dragStart.current.x;
+    const dy = e.clientY - dragStart.current.y;
+    setPan({ x: panStart.current.x + dx, y: panStart.current.y + dy });
+  }, [isDragging]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  // Click on backdrop closes
+  const handleBackdropClick = useCallback((e: React.MouseEvent) => {
+    if (e.target === containerRef.current) {
+      onClose();
+    }
+  }, [onClose]);
+
+  const { client } = useChatClient();
+
+  const currentItem = items[currentIndex];
+  const hasMultiple = items.length > 1;
+
+  const handleDownload = useCallback(async () => {
+    if (!currentItem) return;
+    const filename = getFilename(currentItem.src, currentItem.alt);
+
+    try {
+      const blob = await client.downloadMedia(currentItem.src);
+      const urlBlob = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = urlBlob;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(urlBlob);
+    } catch {
+      window.open(currentItem.src, '_blank', 'noopener,noreferrer');
+    }
+  }, [client, currentItem]);
+
+  const content = useMemo(() => {
+    if (!currentItem) return null;
+
+    if (currentItem.type === 'video') {
+      return (
+        <video
+          ref={videoRef}
+          className="ermis-lightbox__video"
+          src={currentItem.src}
+          poster={currentItem.posterSrc}
+          controls
+          autoPlay
+          preload="metadata"
+          onClick={(e) => e.stopPropagation()}
+        />
+      );
+    }
+
+    const imgStyle: React.CSSProperties = {
+      transform: `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`,
+      cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default',
+    };
+
+    return (
+      <img
+        className={`ermis-lightbox__image${zoom > 1 ? ' ermis-lightbox__image--zoomed' : ''}`}
+        src={currentItem.src}
+        alt={currentItem.alt || ''}
+        style={imgStyle}
+        draggable={false}
+        onDoubleClick={handleDoubleClick}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onClick={(e) => e.stopPropagation()}
+      />
+    );
+  }, [currentItem, zoom, pan, isDragging, handleDoubleClick, handleMouseDown, handleMouseMove, handleMouseUp]);
+
+  if (!isOpen || !currentItem) return null;
+
+  return ReactDOM.createPortal(
+    <div className="ermis-lightbox" onWheel={handleWheel}>
+      <div className="ermis-lightbox__backdrop" />
+
+      {/* Header: counter + actions */}
+      <div className="ermis-lightbox__header">
+        {hasMultiple && (
+          <span className="ermis-lightbox__counter">
+            {currentIndex + 1} / {items.length}
+          </span>
+        )}
+        <div className="ermis-lightbox__actions">
+          <button
+            className="ermis-lightbox__action-btn"
+            onClick={handleDownload}
+            aria-label="Download"
+            title="Download"
+          >
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+          </button>
+          <button
+            className="ermis-lightbox__action-btn"
+            onClick={onClose}
+            aria-label="Close"
+            title="Close"
+          >
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Main content area */}
+      <div
+        ref={containerRef}
+        className="ermis-lightbox__content"
+        onClick={handleBackdropClick}
+      >
+        {/* Prev button */}
+        {hasMultiple && currentIndex > 0 && (
+          <button
+            className="ermis-lightbox__nav ermis-lightbox__nav--prev"
+            onClick={(e) => { e.stopPropagation(); goPrev(); }}
+            aria-label="Previous"
+          >
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="15 18 9 12 15 6" />
+            </svg>
+          </button>
+        )}
+
+        {/* Media */}
+        {content}
+
+        {/* Next button */}
+        {hasMultiple && currentIndex < items.length - 1 && (
+          <button
+            className="ermis-lightbox__nav ermis-lightbox__nav--next"
+            onClick={(e) => { e.stopPropagation(); goNext(); }}
+            aria-label="Next"
+          >
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Filename */}
+      {currentItem.alt && (
+        <div className="ermis-lightbox__filename">{currentItem.alt}</div>
+      )}
+    </div>,
+    document.body
+  );
+});
+MediaLightbox.displayName = 'MediaLightbox';

package/src/components/MessageInput.tsx

@@ -15,6 +15,7 @@ import { EditPreview } from './EditPreview';
 import { buildUserMap, replaceMentionsForPreview, moveCaretToEnd } from '../utils';
 import { getMentionHtml } from '../hooks/useMentions';
 import { useChannelCapabilities } from '../hooks/useChannelCapabilities';
+import { CHANNEL_ROLES } from '../channelRoleUtils';
 import type { MentionMember, MessageInputProps, FilePreviewItem } from '../types';
 
 export type { MessageInputProps, SendButtonProps, AttachButtonProps, EmojiPickerProps, EmojiButtonProps } from '../types';
@@ -52,7 +53,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   const editableRef = React.useRef<HTMLDivElement>(null);
   const [hasContent, setHasContent] = useState(false);
 
-  const { role, isTeamOrMeetingChannel: isTeamChannel, hasCapability } = useChannelCapabilities();
+  const { role, isGroupChannel: isTeamChannel, hasCapability } = useChannelCapabilities();
   const isClosedTopic = activeChannel?.data?.is_closed_topic === true;
 
   // Slow Mode Logic
@@ -71,7 +72,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
     };
   }, [activeChannel]);
 
-  const isSlowModeApplied = isTeamChannel && role === 'member' && memberMessageCooldown > 0;
+  const isSlowModeApplied = isTeamChannel && role === CHANNEL_ROLES.MEMBER && memberMessageCooldown > 0;
 
   const [cooldownEnd, setCooldownEnd] = useState<number | null>(null);
   const [cooldown, setCooldown] = useState(0);

package/src/components/MessageItem.tsx

@@ -7,6 +7,7 @@ import { MessageQuickReactions } from './MessageQuickReactions';
 import { useChannelCapabilities } from '../hooks/useChannelCapabilities';
 import { useChatClient } from '../hooks/useChatClient';
 import { formatTime } from '../utils';
+import { isSystemMessage } from '../messageTypeUtils';
 
 export type { MessageItemProps, SystemMessageItemProps } from '../types';
 
@@ -176,7 +177,7 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
           </MessageBubble>
 
           {/* Actions: hover buttons + dropdown menu */}
-          {message.type !== 'system' && (
+          {!isSystemMessage(message) && (
             <MessageActionsBoxComponent
               message={message}
               isOwnMessage={isOwnMessage}

package/src/components/MessageRenderers.tsx

@@ -1,39 +1,25 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { preloadImage, isImagePreloaded } from '../utils';
 import type { FormatMessageResponse, Attachment, MessageLabel } from '@ermis-network/ermis-chat-sdk';
 import { parseSystemMessage, parseSignalMessage, CallType } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 import { buildUserMap } from '../utils';
-import type { AttachmentProps, MessageRendererProps, MessageBubbleProps } from '../types';
+import { MediaLightbox } from './MediaLightbox';
+import { getFileIcon } from './ChannelInfo/utils';
+import type { AttachmentProps, MessageRendererProps, MessageBubbleProps, MediaLightboxItem } from '../types';
 
 export type { AttachmentProps, MessageRendererProps, MessageBubbleProps } from '../types';
-
-/* ----------------------------------------------------------
-   Attachment type helpers
-   ---------------------------------------------------------- */
-function isImage(attachment: Attachment): boolean {
-  return !!(
-    attachment.type === 'image' ||
-    (!attachment.type && (attachment.mime_type?.startsWith('image/') || attachment.image_url))
-  );
-}
-
-function isVideo(attachment: Attachment): boolean {
-  return !!(attachment.type === 'video' || (!attachment.type && attachment.mime_type?.startsWith('video/')));
-}
-
-function isVoiceRecording(attachment: Attachment): boolean {
-  return attachment.type === 'voiceRecording';
-}
-
-function isLinkPreview(attachment: Attachment): boolean {
-  return attachment.type === 'linkPreview';
-}
+import {
+  isVoiceRecordingAttachment,
+  isLinkPreviewAttachment,
+  isImage,
+  isVideo
+} from '../messageTypeUtils';
 
 /* ----------------------------------------------------------
    Attachment renderers
    ---------------------------------------------------------- */
-const ImageAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) => {
+const ImageAttachment: React.FC<AttachmentProps> = React.memo(({ attachment, onClick }) => {
   const src = attachment.image_url || attachment.thumb_url || attachment.url;
   const thumbSrc = attachment.thumb_url;
   if (!src) return null;
@@ -51,8 +37,15 @@ const ImageAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
     }
   }, [loaded, src]);
 
+  const clickable = Boolean(onClick);
+
   return (
-    <div className="ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3">
+    <div
+      className={`ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3${clickable ? ' ermis-attachment--clickable' : ''}`}
+      onClick={onClick}
+      role={clickable ? 'button' : undefined}
+      tabIndex={clickable ? 0 : undefined}
+    >
       {/* Blur placeholder: use thumb if available, otherwise shimmer */}
       {!loaded && (
         thumbSrc && thumbSrc !== src ? (
@@ -74,16 +67,26 @@ const ImageAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
         loading="lazy"
         onLoad={() => setLoaded(true)}
       />
+      {clickable && (
+        <div className="ermis-attachment__overlay">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            <line x1="11" y1="8" x2="11" y2="14" />
+            <line x1="8" y1="11" x2="14" y2="11" />
+          </svg>
+        </div>
+      )}
     </div>
   );
 }, (prev, next) => {
   const prevSrc = prev.attachment.image_url || prev.attachment.thumb_url || prev.attachment.url;
   const nextSrc = next.attachment.image_url || next.attachment.thumb_url || next.attachment.url;
-  return prevSrc === nextSrc;
+  return prevSrc === nextSrc && prev.onClick === next.onClick;
 });
 (ImageAttachment as any).displayName = 'ImageAttachment';
 
-const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) => {
+const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment, onClick }) => {
   const src = attachment.asset_url || attachment.url;
   const posterSrc = attachment.image_url || attachment.thumb_url;
   const blurThumb = attachment.thumb_url;
@@ -103,6 +106,51 @@ const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
     }
   }, [loaded, posterSrc]);
 
+  const clickable = Boolean(onClick);
+
+  // When clickable (lightbox mode): show poster thumbnail + play icon overlay
+  if (clickable) {
+    return (
+      <div
+        className="ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3 ermis-attachment--clickable"
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+      >
+        {!loaded && (
+          blurThumb && blurThumb !== posterSrc ? (
+            <img className="ermis-attachment-blur-preview" src={blurThumb} alt="" aria-hidden />
+          ) : (
+            <div className="ermis-attachment-shimmer" />
+          )
+        )}
+        {posterSrc ? (
+          <img
+            ref={imgRef}
+            className={`ermis-attachment ermis-attachment--video-poster${loaded ? ' ermis-attachment--loaded' : ''}`}
+            src={posterSrc}
+            alt={attachment.file_name || 'video'}
+            loading="lazy"
+            onLoad={() => setLoaded(true)}
+          />
+        ) : (
+          <video
+            className={`ermis-attachment ermis-attachment--video${loaded ? ' ermis-attachment--loaded' : ''}`}
+            src={src}
+            preload="metadata"
+            onLoadedData={() => setLoaded(true)}
+          />
+        )}
+        <div className="ermis-attachment__overlay">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <polygon points="5 3 19 12 5 21 5 3" />
+          </svg>
+        </div>
+      </div>
+    );
+  }
+
+  // Default inline video player (no lightbox)
   return (
     <div className="ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3">
       {!loaded && (
@@ -140,7 +188,7 @@ const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
   );
 }, (prev, next) => {
   return (prev.attachment.asset_url || prev.attachment.url) ===
-    (next.attachment.asset_url || next.attachment.url);
+    (next.attachment.asset_url || next.attachment.url) && prev.onClick === next.onClick;
 });
 (VideoAttachment as any).displayName = 'VideoAttachment';
 
@@ -148,16 +196,36 @@ const FileAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =>
   const url = attachment.url || attachment.asset_url;
   const name = attachment.file_name || attachment.title || 'File';
   const size = attachment.file_size;
+  const mimeType = attachment.mime_type || attachment.type || '';
+  const ext = name.split('.').pop()?.toUpperCase() || 'FILE';
+  const { client } = useChatClient();
+
+  const handleDownload = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!url) return;
+
+    try {
+      const blob = await client.downloadMedia(url);
+      const urlBlob = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = urlBlob;
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(urlBlob);
+    } catch {
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  }, [client, url, name]);
 
   return (
-    <a
-      className="ermis-attachment ermis-attachment--file"
-      href={url}
-      download={name}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <span className="ermis-attachment__file-icon">⬇️</span>
+    <div className="ermis-attachment ermis-attachment--file">
+      <span className="ermis-attachment__file-icon">
+        {getFileIcon(mimeType, name)}
+        <span className="ermis-attachment__file-ext">{ext}</span>
+      </span>
       <span className="ermis-attachment__file-info">
         <span className="ermis-attachment__file-name">{name}</span>
         {size && (
@@ -166,7 +234,19 @@ const FileAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =>
           </span>
         )}
       </span>
-    </a>
+      <button
+        className="ermis-attachment__file-download"
+        onClick={handleDownload}
+        title="Download"
+        type="button"
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="7 10 12 15 17 10" />
+          <line x1="12" y1="15" x2="12" y2="3" />
+        </svg>
+      </button>
+    </div>
   );
 }, (prev, next) => {
   return (prev.attachment.url || prev.attachment.asset_url) ===
@@ -258,8 +338,8 @@ const LinkPreviewAttachment: React.FC<AttachmentProps> = React.memo(({ attachmen
 export const MessageAttachment: React.FC<AttachmentProps> = ({ attachment }) => {
   if (isImage(attachment)) return <ImageAttachment attachment={attachment} />;
   if (isVideo(attachment)) return <VideoAttachment attachment={attachment} />;
-  if (isVoiceRecording(attachment)) return <VoiceRecordingAttachment attachment={attachment} />;
-  if (isLinkPreview(attachment)) return <LinkPreviewAttachment attachment={attachment} />;
+  if (isVoiceRecordingAttachment(attachment)) return <VoiceRecordingAttachment attachment={attachment} />;
+  if (isLinkPreviewAttachment(attachment)) return <LinkPreviewAttachment attachment={attachment} />;
   return <FileAttachment attachment={attachment} />;
 };
 
@@ -268,9 +348,41 @@ export const AttachmentList: React.FC<{ attachments?: Attachment[] }> = React.me
 
   // Group by type
   const media = attachments.filter((a) => isImage(a) || isVideo(a));
-  const files = attachments.filter((a) => !isImage(a) && !isVideo(a) && !isVoiceRecording(a) && !isLinkPreview(a));
-  const voices = attachments.filter(isVoiceRecording);
-  const links = attachments.filter(isLinkPreview);
+  const files = attachments.filter((a) => !isImage(a) && !isVideo(a) && !isVoiceRecordingAttachment(a) && !isLinkPreviewAttachment(a));
+  const voices = attachments.filter(isVoiceRecordingAttachment);
+  const links = attachments.filter(isLinkPreviewAttachment);
+
+  // Lightbox state
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  // Build lightbox items from media attachments
+  const lightboxItems = useMemo<MediaLightboxItem[]>(() => {
+    return media.map(att => {
+      if (isImage(att)) {
+        return {
+          type: 'image' as const,
+          src: att.image_url || att.thumb_url || att.url || '',
+          alt: att.file_name || att.title,
+        };
+      }
+      return {
+        type: 'video' as const,
+        src: att.asset_url || att.url || '',
+        alt: att.file_name || att.title,
+        posterSrc: att.image_url || att.thumb_url,
+      };
+    });
+  }, [media]);
+
+  const openLightbox = useCallback((index: number) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+
+  const closeLightbox = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
 
   const mediaGridClass = media.length === 1
     ? 'ermis-attachment-grid ermis-attachment-grid--single'
@@ -283,8 +395,8 @@ export const AttachmentList: React.FC<{ attachments?: Attachment[] }> = React.me
         <div className={mediaGridClass}>
           {media.map((att, i) => (
             isImage(att)
-              ? <ImageAttachment key={att.id || `img-${i}`} attachment={att} />
-              : <VideoAttachment key={att.id || `vid-${i}`} attachment={att} />
+              ? <ImageAttachment key={att.id || `img-${i}`} attachment={att} onClick={() => openLightbox(i)} />
+              : <VideoAttachment key={att.id || `vid-${i}`} attachment={att} onClick={() => openLightbox(i)} />
           ))}
         </div>
       )}
@@ -300,6 +412,16 @@ export const AttachmentList: React.FC<{ attachments?: Attachment[] }> = React.me
       {links.map((att, i) => (
         <LinkPreviewAttachment key={att.id || `link-${i}`} attachment={att} />
       ))}
+
+      {/* Media Lightbox */}
+      {lightboxItems.length > 0 && (
+        <MediaLightbox
+          items={lightboxItems}
+          initialIndex={lightboxIndex}
+          isOpen={lightboxOpen}
+          onClose={closeLightbox}
+        />
+      )}
     </div>
   );
 }, (prev, next) => {
@@ -426,7 +548,7 @@ export const RegularMessage: React.FC<MessageRendererProps> = React.memo(({ mess
     const isOnlyUrl = URL_REGEX_STRICT.test(text);
 
     return message.attachments.filter(att => {
-      if (isLinkPreview(att)) return isOnlyUrl;
+      if (isLinkPreviewAttachment(att)) return isOnlyUrl;
       return true;
     });
   }, [message.attachments, message.text]);