@ermis-network/ermis-chat-react 1.0.9 → 2.0.1

package/src/components/MessageRenderers.tsx

@@ -1,436 +1,1045 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { preloadImage, isImagePreloaded } from '../utils';
-import type { FormatMessageResponse, Attachment, MessageLabel } from '@ermis-network/ermis-chat-sdk';
+import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { preloadImage, isImagePreloaded, formatTime } from '../utils';
+import type {
+  FormatMessageResponse,
+  Attachment,
+  MessageLabel,
+  E2eeAttachmentManifest,
+} from '@ermis-network/ermis-chat-sdk';
 import { parseSystemMessage, parseSignalMessage, CallType } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
+import { useDownloadHandler } from '../hooks/useDownloadHandler';
+import { E2EE_PREVIEW_MAX_CONCURRENT, useE2eeAttachmentRenderer } from '../hooks/useE2eeAttachmentRenderer';
 import { buildUserMap } from '../utils';
 import { MediaLightbox } from './MediaLightbox';
 import { getFileIcon } from './ChannelInfo/utils';
 import type { AttachmentProps, MessageRendererProps, MessageBubbleProps, MediaLightboxItem } from '../types';
 
 export type { AttachmentProps, MessageRendererProps, MessageBubbleProps } from '../types';
-import {
-  isVoiceRecordingAttachment,
-  isLinkPreviewAttachment,
-  isImage,
-  isVideo
-} from '../messageTypeUtils';
+import { isVoiceRecordingAttachment, isLinkPreviewAttachment, isImage, isVideo, isAudio } from '../messageTypeUtils';
 
 /* ----------------------------------------------------------
    Attachment renderers
    ---------------------------------------------------------- */
-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;
+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;
+
+    const alreadyCached = isImagePreloaded(src);
+    const [loaded, setLoaded] = useState(alreadyCached);
+    const imgRef = React.useRef<HTMLImageElement>(null);
+
+    // Trigger background preload (no-op if already cached)
+    useMemo(() => {
+      preloadImage(src);
+    }, [src]);
+
+    React.useEffect(() => {
+      if (!loaded && imgRef.current?.complete) {
+        setLoaded(true);
+      }
+    }, [loaded, src]);
 
-  const alreadyCached = isImagePreloaded(src);
-  const [loaded, setLoaded] = useState(alreadyCached);
-  const imgRef = React.useRef<HTMLImageElement>(null);
+    const clickable = Boolean(onClick);
+
+    return (
+      <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 ? (
+            <img className="ermis-attachment-blur-preview" src={thumbSrc} alt="" aria-hidden />
+          ) : (
+            <div className="ermis-attachment-shimmer" />
+          ))}
+        <img
+          ref={imgRef}
+          className={`ermis-attachment ermis-attachment--image${loaded ? ' ermis-attachment--loaded' : ''}`}
+          src={src}
+          alt={attachment.file_name || attachment.title || 'image'}
+          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>
+        )}
+        <LocalUploadOverlay attachment={attachment} />
+      </div>
+    );
+  },
+  (prev, next) => {
+    return (
+      attachmentRenderKey(prev.attachment) === attachmentRenderKey(next.attachment) && prev.onClick === next.onClick
+    );
+  },
+);
 
-  // Trigger background preload (no-op if already cached)
-  useMemo(() => { preloadImage(src); }, [src]);
+function isE2eeAttachmentManifest(attachment: unknown): attachment is E2eeAttachmentManifest {
+  return Boolean(
+    attachment &&
+      typeof attachment === 'object' &&
+      (attachment as E2eeAttachmentManifest).version === 1 &&
+      typeof (attachment as E2eeAttachmentManifest).attachment_id === 'string' &&
+      Array.isArray((attachment as E2eeAttachmentManifest).assets),
+  );
+}
 
-  React.useEffect(() => {
-    if (!loaded && imgRef.current?.complete) {
-      setLoaded(true);
-    }
-  }, [loaded, src]);
+function e2eeDisplayString(display: Record<string, unknown> | undefined, key: string): string | undefined {
+  const value = display?.[key];
+  return typeof value === 'string' && value.trim() ? value : undefined;
+}
 
-  const clickable = Boolean(onClick);
+function e2eeDisplayNumber(display: Record<string, unknown> | undefined, key: string): number | undefined {
+  const value = display?.[key];
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+function formatE2eeProgress(progress?: {
+  phase: string;
+  loaded: number;
+  total: number;
+  percentage?: number;
+}): string | undefined {
+  if (!progress) return undefined;
+  const phaseLabel =
+    progress.phase === 'granting'
+      ? 'Getting access'
+      : progress.phase === 'downloading'
+      ? 'Downloading'
+      : progress.phase === 'verifying'
+      ? 'Verifying'
+      : progress.phase === 'decrypting'
+      ? 'Decrypting'
+      : 'Loading';
+  if (typeof progress.percentage === 'number') return `${phaseLabel} ${progress.percentage}%`;
+  return phaseLabel;
+}
 
+function getLocalUploadProgress(attachment: Attachment): number | undefined {
+  const value = (attachment as any).upload_progress;
+  return typeof value === 'number' && Number.isFinite(value)
+    ? Math.max(0, Math.min(100, Math.round(value)))
+    : undefined;
+}
+
+function attachmentRenderKey(attachment: Attachment | E2eeAttachmentManifest): string {
+  const anyAttachment = attachment as any;
+  const id = isE2eeAttachmentManifest(attachment)
+    ? attachment.attachment_id
+    : anyAttachment.id || anyAttachment.asset_url || anyAttachment.url || anyAttachment.file_name || '';
+  return [
+    id,
+    anyAttachment.type || '',
+    anyAttachment.upload_status || '',
+    typeof anyAttachment.upload_progress === 'number' ? Math.round(anyAttachment.upload_progress) : '',
+    anyAttachment.local_object_url || '',
+  ].join('|');
+}
+
+function LocalUploadOverlay({ attachment }: { attachment: Attachment }) {
+  const progress = getLocalUploadProgress(attachment);
+  const status = (attachment as any).upload_status;
+  if (progress === undefined && !status) return null;
   return (
-    <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 ? (
-          <img
-            className="ermis-attachment-blur-preview"
-            src={thumbSrc}
-            alt=""
-            aria-hidden
-          />
-        ) : (
-          <div className="ermis-attachment-shimmer" />
-        )
-      )}
-      <img
-        ref={imgRef}
-        className={`ermis-attachment ermis-attachment--image${loaded ? ' ermis-attachment--loaded' : ''}`}
-        src={src}
-        alt={attachment.file_name || attachment.title || 'image'}
-        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>
+    <span className="ermis-attachment-upload-overlay">
+      <span className="ermis-e2ee-attachment-spinner" />
+      <span>{progress !== undefined ? `${progress}%` : 'Sending'}</span>
+    </span>
   );
-}, (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 && prev.onClick === next.onClick;
-});
-(ImageAttachment as any).displayName = 'ImageAttachment';
+}
 
-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;
-  if (!src) return null;
+function e2eeAspectStyle(width?: number, height?: number): React.CSSProperties {
+  const ratio = width && height && width > 0 && height > 0 ? width / height : 4 / 3;
+  const maxWidth = 340;
+  const maxHeight = 420;
+  const targetWidth = Math.max(160, Math.min(maxWidth, Math.round(maxHeight * ratio)));
+  return {
+    aspectRatio: `${width && height ? width : 4} / ${width && height ? height : 3}`,
+    width: `min(100%, ${targetWidth}px)`,
+    maxWidth: `${maxWidth}px`,
+    maxHeight: `${maxHeight}px`,
+  };
+}
 
-  const alreadyCached = posterSrc ? isImagePreloaded(posterSrc) : true;
-  const [loaded, setLoaded] = useState(alreadyCached);
-  const imgRef = React.useRef<HTMLImageElement>(null);
+function formatFileSize(size?: number): string | undefined {
+  if (!size || size <= 0) return undefined;
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
 
-  useMemo(() => {
-    if (posterSrc) preloadImage(posterSrc);
-  }, [posterSrc]);
+function extensionForName(name: string): string {
+  const ext = name.split('.').pop();
+  return ext && ext !== name ? ext.toUpperCase() : 'E2EE';
+}
 
-  React.useEffect(() => {
-    if (!loaded && imgRef.current?.complete) {
-      setLoaded(true);
+function isLikelyImage(name: string, mimeType?: string): boolean {
+  return Boolean(mimeType?.startsWith('image/') || /\.(apng|avif|gif|jpe?g|png|webp)$/i.test(name));
+}
+
+function isLikelyVideo(name: string, mimeType?: string): boolean {
+  return Boolean(mimeType?.startsWith('video/') || /\.(mov|m4v|mp4|mpeg|mpg|ogv|webm)$/i.test(name));
+}
+
+function isLikelyAudio(name: string, mimeType?: string, attachmentType?: string): boolean {
+  return Boolean(
+    attachmentType === 'voiceRecording' ||
+      mimeType?.startsWith('audio/') ||
+      /\.(aac|flac|m4a|mp3|oga|ogg|opus|wav|webm)$/i.test(name),
+  );
+}
+
+function E2eePlayIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M8 5v14l11-7z" />
+    </svg>
+  );
+}
+
+let activeE2eePreviewLoads = 0;
+const queuedE2eePreviewLoads: Array<() => void> = [];
+
+function scheduleE2eePreviewLoad(load: () => Promise<unknown>): void {
+  const run = () => {
+    activeE2eePreviewLoads += 1;
+    void load().finally(() => {
+      activeE2eePreviewLoads = Math.max(0, activeE2eePreviewLoads - 1);
+      const next = queuedE2eePreviewLoads.shift();
+      if (next) next();
+    });
+  };
+  if (activeE2eePreviewLoads < E2EE_PREVIEW_MAX_CONCURRENT) run();
+  else queuedE2eePreviewLoads.push(run);
+}
+
+const E2eeAttachment: React.FC<{ attachment: E2eeAttachmentManifest; grantReady?: boolean }> = React.memo(
+  ({ attachment, grantReady = true }) => {
+    const { activeChannel } = useChatClient();
+    const original = useE2eeAttachmentRenderer(activeChannel, attachment, 'original');
+    const preview = useE2eeAttachmentRenderer(activeChannel, attachment, 'preview');
+    const [mediaError, setMediaError] = useState(false);
+    const [lightboxOpen, setLightboxOpen] = useState(false);
+    const [naturalPreviewSize, setNaturalPreviewSize] = useState<{ width: number; height: number } | undefined>();
+    const previewRef = useRef<HTMLDivElement | null>(null);
+    const asset = attachment.assets.find((item) => item.kind === 'original') || attachment.assets[0];
+    const previewAsset = attachment.assets.find((item) => item.kind === 'preview');
+    const hasPreview = Boolean(previewAsset);
+    const display = asset?.display;
+    const previewDisplay = previewAsset?.display;
+    const title = e2eeDisplayString(display, 'name') || 'Encrypted attachment';
+    const mimeType = e2eeDisplayString(display, 'mime_type');
+    const attachmentType = e2eeDisplayString(display, 'attachment_type');
+    const size = e2eeDisplayNumber(display, 'size') || asset?.plaintext_size || asset?.cipher_size;
+    const ext = extensionForName(title);
+    const sizeLabel = formatFileSize(size);
+    const isImageAsset = isLikelyImage(title, mimeType);
+    const isVideoAsset = isLikelyVideo(title, mimeType);
+    const isAudioAsset = isLikelyAudio(title, mimeType, attachmentType);
+    const loadedUrl = preview.url || original.url;
+    const loading = original.loading || preview.loading;
+    const error = original.error || preview.error;
+    const width =
+      e2eeDisplayNumber(display, 'width') || e2eeDisplayNumber(previewDisplay, 'width') || naturalPreviewSize?.width;
+    const height =
+      e2eeDisplayNumber(display, 'height') || e2eeDisplayNumber(previewDisplay, 'height') || naturalPreviewSize?.height;
+    const aspectStyle = e2eeAspectStyle(width, height);
+    const progressLabel = formatE2eeProgress(original.progress || preview.progress);
+    const statusLabel = mediaError
+      ? 'Preview unavailable, download file'
+      : !grantReady
+      ? 'Sending'
+      : progressLabel
+      ? progressLabel
+      : error
+      ? 'Unavailable'
+      : original.url
+      ? 'Ready'
+      : preview.url
+      ? 'Preview ready'
+      : 'Encrypted';
+
+    useEffect(() => {
+      if (!grantReady) return;
+      if (!hasPreview || !(isImageAsset || isVideoAsset) || preview.url || preview.loading || preview.error) return;
+      const element = previewRef.current;
+      if (!element || typeof IntersectionObserver === 'undefined') {
+        scheduleE2eePreviewLoad(preview.load);
+        return;
+      }
+      let scheduled = false;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (scheduled) return;
+          if (entries.some((entry) => entry.isIntersecting)) {
+            scheduled = true;
+            observer.disconnect();
+            scheduleE2eePreviewLoad(preview.load);
+          }
+        },
+        { rootMargin: '160px' },
+      );
+      observer.observe(element);
+      return () => observer.disconnect();
+    }, [grantReady, hasPreview, isImageAsset, isVideoAsset, preview.error, preview.load, preview.loading, preview.url]);
+
+    const ensureOriginal = useCallback(() => {
+      if (!grantReady) return;
+      setMediaError(false);
+      if (isVideoAsset && !original.streamUrl && !original.streamLoading) {
+        void original.loadStream().then((streamUrl) => {
+          if (!streamUrl && !original.url && !original.loading) void original.load();
+        });
+        return;
+      }
+      if (!original.url && !original.loading && !original.streamUrl) void original.load();
+    }, [grantReady, isVideoAsset, original]);
+
+    const openViewer = useCallback(
+      (event?: React.MouseEvent) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        setLightboxOpen(true);
+        ensureOriginal();
+      },
+      [ensureOriginal],
+    );
+
+    const handleLoad = useCallback(
+      (event?: React.MouseEvent) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        ensureOriginal();
+      },
+      [ensureOriginal],
+    );
+
+    const handleDownload = useCallback(
+      (event?: React.MouseEvent) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        if (!grantReady) return;
+        void original.download(title);
+      },
+      [grantReady, original, title],
+    );
+
+    const lightboxItems = useMemo<MediaLightboxItem[]>(
+      () => [
+        {
+          type: isVideoAsset ? 'video' : 'image',
+          src: original.streamUrl || original.url,
+          posterSrc: preview.url,
+          alt: title,
+          loading: original.loading || (lightboxOpen && !original.streamUrl && !original.url && !original.error),
+          progressLabel: formatE2eeProgress(original.progress),
+          download: async () => {
+            await original.download(title);
+          },
+          onPlaybackError: async () => {
+            await original.disposeStream();
+            if (!original.url && !original.loading) await original.load();
+          },
+          onDispose: original.disposeStream,
+        },
+      ],
+      [isVideoAsset, lightboxOpen, original, preview.url, title],
+    );
+
+    if (isAudioAsset) {
+      const durationSec = e2eeDisplayNumber(display, 'duration') || 0;
+      const mins = Math.floor(durationSec / 60);
+      const secs = Math.round(durationSec % 60);
+      const durationLabel = `${mins}:${secs.toString().padStart(2, '0')}`;
+
+      return (
+        <div className="ermis-e2ee-voice-attachment">
+          {original.url ? (
+            <CustomAudioPlayer src={original.url} durationLabel={durationLabel} fileName={title} />
+          ) : (
+            <button
+              type="button"
+              className="ermis-custom-audio-player ermis-custom-audio-player--placeholder"
+              onClick={handleLoad}
+              disabled={loading || !grantReady}
+            >
+              <span className="ermis-custom-audio-play-btn" aria-hidden>
+                {loading ? <span className="ermis-e2ee-attachment-spinner" /> : <PlayIcon />}
+              </span>
+              <span className="ermis-custom-audio-progress-container">
+                <span className="ermis-custom-audio-progress-bg">
+                  <span
+                    className="ermis-custom-audio-progress-fill"
+                    style={{ width: `${original.progress?.percentage || 0}%` }}
+                  />
+                </span>
+              </span>
+              <span className="ermis-custom-audio-duration">{progressLabel || durationLabel}</span>
+              <span className="ermis-custom-audio-download-btn" aria-hidden>
+                <DownloadIcon />
+              </span>
+            </button>
+          )}
+        </div>
+      );
+    }
+
+    if ((isImageAsset || isVideoAsset) && loadedUrl && !mediaError) {
+      return (
+        <div className="ermis-e2ee-attachment-media" ref={previewRef}>
+          <button
+            className="ermis-e2ee-attachment-placeholder ermis-attachment-aspect-box ermis-attachment-aspect-box--e2ee"
+            style={aspectStyle}
+            type="button"
+            onClick={openViewer}
+            disabled={!grantReady}
+          >
+            <img
+              className="ermis-attachment ermis-attachment--image ermis-attachment--loaded"
+              src={loadedUrl}
+              alt={title}
+              loading="lazy"
+              onLoad={(event) => {
+                const img = event.currentTarget;
+                if (img.naturalWidth && img.naturalHeight) {
+                  setNaturalPreviewSize({ width: img.naturalWidth, height: img.naturalHeight });
+                }
+              }}
+              onError={() => setMediaError(true)}
+            />
+            {(isVideoAsset || original.loading) && (
+              <span className="ermis-e2ee-attachment-placeholder__icon">
+                {original.loading ? <span className="ermis-e2ee-attachment-spinner" /> : <E2eePlayIcon />}
+              </span>
+            )}
+            {original.loading && (
+              <span className="ermis-e2ee-attachment-progress">
+                {formatE2eeProgress(original.progress) || 'Loading'}
+              </span>
+            )}
+          </button>
+          <div className="ermis-e2ee-attachment-actions">
+            <span className="ermis-e2ee-attachment-actions__label">{title}</span>
+            <button
+              className="ermis-attachment__file-download"
+              onClick={handleDownload}
+              title="Download decrypted file"
+              type="button"
+              disabled={!grantReady}
+            >
+              <DownloadIcon />
+            </button>
+          </div>
+          {lightboxOpen && (
+            <MediaLightbox items={lightboxItems} isOpen={lightboxOpen} onClose={() => setLightboxOpen(false)} />
+          )}
+        </div>
+      );
     }
-  }, [loaded, posterSrc]);
 
-  const clickable = Boolean(onClick);
+    if (isImageAsset || isVideoAsset) {
+      return (
+        <div className="ermis-e2ee-attachment-media" ref={previewRef}>
+          <button
+            type="button"
+            className="ermis-e2ee-attachment-placeholder ermis-attachment-aspect-box ermis-attachment-aspect-box--e2ee"
+            style={aspectStyle}
+            onClick={handleLoad}
+            disabled={loading || !grantReady}
+          >
+            <span className="ermis-attachment-shimmer" />
+            <span className="ermis-e2ee-attachment-placeholder__center">
+              <span className="ermis-e2ee-attachment-placeholder__icon">
+                {loading ? (
+                  <span className="ermis-e2ee-attachment-spinner" />
+                ) : isVideoAsset ? (
+                  <E2eePlayIcon />
+                ) : (
+                  getFileIcon(mimeType || 'image/*', title)
+                )}
+              </span>
+              <span className="ermis-e2ee-attachment-placeholder__title">{title}</span>
+              <span className="ermis-e2ee-attachment-placeholder__meta">{statusLabel}</span>
+            </span>
+          </button>
+          <div className="ermis-e2ee-attachment-actions">
+            <span className="ermis-e2ee-attachment-actions__label">{sizeLabel || 'Encrypted media'}</span>
+            <button
+              className="ermis-attachment__file-download"
+              onClick={handleDownload}
+              title="Download decrypted file"
+              type="button"
+              disabled={loading || !grantReady}
+            >
+              <DownloadIcon />
+            </button>
+          </div>
+        </div>
+      );
+    }
 
-  // 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 ? (
+      <div className="ermis-attachment ermis-attachment--file ermis-attachment--e2ee">
+        <span className="ermis-attachment__file-icon">
+          {getFileIcon(mimeType || '', title)}
+          <span className="ermis-attachment__file-ext">{ext}</span>
+        </span>
+        <button
+          type="button"
+          className="ermis-attachment__file-info ermis-e2ee-attachment__open"
+          onClick={handleLoad}
+          disabled={loading || !grantReady}
+        >
+          <span className="ermis-attachment__file-name">{title}</span>
+          <span className="ermis-attachment__file-size">
+            {sizeLabel ? `${sizeLabel} · ${statusLabel}` : statusLabel}
+          </span>
+        </button>
+        <button
+          className="ermis-attachment__file-download"
+          onClick={handleDownload}
+          title="Download decrypted file"
+          type="button"
+          disabled={loading || !grantReady}
+        >
+          <DownloadIcon />
+        </button>
+      </div>
+    );
+  },
+  (prev, next) => prev.attachment === next.attachment && prev.grantReady === next.grantReady,
+);
+(E2eeAttachment as any).displayName = 'E2eeAttachment';
+(ImageAttachment as any).displayName = 'ImageAttachment';
+
+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;
+    if (!src) return null;
+
+    const alreadyCached = posterSrc ? isImagePreloaded(posterSrc) : true;
+    const [loaded, setLoaded] = useState(alreadyCached);
+    const imgRef = React.useRef<HTMLImageElement>(null);
+
+    useMemo(() => {
+      if (posterSrc) preloadImage(posterSrc);
+    }, [posterSrc]);
+
+    React.useEffect(() => {
+      if (!loaded && imgRef.current?.complete) {
+        setLoaded(true);
+      }
+    }, [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>
+          <LocalUploadOverlay attachment={attachment} />
+        </div>
+      );
+    }
+
+    // Default inline video player (no lightbox)
+    return (
+      <div className="ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3">
+        {!loaded &&
+          (blurThumb && blurThumb !== posterSrc ? (
             <img className="ermis-attachment-blur-preview" src={blurThumb} alt="" aria-hidden />
           ) : (
             <div className="ermis-attachment-shimmer" />
-          )
-        )}
-        {posterSrc ? (
+          ))}
+        {posterSrc && !loaded && (
           <img
             ref={imgRef}
-            className={`ermis-attachment ermis-attachment--video-poster${loaded ? ' ermis-attachment--loaded' : ''}`}
             src={posterSrc}
-            alt={attachment.file_name || 'video'}
-            loading="lazy"
+            className="ermis-attachment--hidden-loader"
             onLoad={() => setLoaded(true)}
-          />
-        ) : (
-          <video
-            className={`ermis-attachment ermis-attachment--video${loaded ? ' ermis-attachment--loaded' : ''}`}
-            src={src}
-            preload="metadata"
-            onLoadedData={() => setLoaded(true)}
+            alt="poster-loader"
           />
         )}
-        <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" />
+        <video
+          className={`ermis-attachment ermis-attachment--video${
+            loaded || !posterSrc ? ' ermis-attachment--loaded' : ''
+          }`}
+          src={src}
+          poster={posterSrc}
+          controls
+          preload="metadata"
+          onLoadedData={() => {
+            if (!posterSrc) setLoaded(true);
+          }}
+        />
+        <LocalUploadOverlay attachment={attachment} />
+      </div>
+    );
+  },
+  (prev, next) => {
+    return (
+      attachmentRenderKey(prev.attachment) === attachmentRenderKey(next.attachment) && prev.onClick === next.onClick
+    );
+  },
+);
+(VideoAttachment as any).displayName = 'VideoAttachment';
+
+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 { downloadFile } = useDownloadHandler();
+
+    const handleDownload = useCallback(
+      async (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        await downloadFile(url, name);
+      },
+      [downloadFile, url, name],
+    );
+
+    return (
+      <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 && (
+            <span className="ermis-attachment__file-size">
+              {typeof size === 'number' ? `${(size / 1024).toFixed(1)} KB` : size}
+              {getLocalUploadProgress(attachment) !== undefined ? ` · ${getLocalUploadProgress(attachment)}%` : ''}
+            </span>
+          )}
+        </span>
+        <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>
-        </div>
+        </button>
       </div>
     );
-  }
+  },
+  (prev, next) => {
+    return attachmentRenderKey(prev.attachment) === attachmentRenderKey(next.attachment);
+  },
+);
+(FileAttachment as any).displayName = 'FileAttachment';
 
-  // Default inline video player (no lightbox)
-  return (
-    <div className="ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3">
-      {!loaded && (
-        blurThumb && blurThumb !== posterSrc ? (
-          <img
-            className="ermis-attachment-blur-preview"
-            src={blurThumb}
-            alt=""
-            aria-hidden
-          />
-        ) : (
-          <div className="ermis-attachment-shimmer" />
-        )
-      )}
-      {posterSrc && !loaded && (
-        <img
-          ref={imgRef}
-          src={posterSrc}
-          className="ermis-attachment--hidden-loader"
-          onLoad={() => setLoaded(true)}
-          alt="poster-loader"
-        />
-      )}
-      <video
-        className={`ermis-attachment ermis-attachment--video${loaded || !posterSrc ? ' ermis-attachment--loaded' : ''}`}
-        src={src}
-        poster={posterSrc}
-        controls
-        preload="metadata"
-        onLoadedData={() => {
-          if (!posterSrc) setLoaded(true);
-        }}
-      />
-    </div>
-  );
-}, (prev, next) => {
-  return (prev.attachment.asset_url || prev.attachment.url) ===
-    (next.attachment.asset_url || next.attachment.url) && prev.onClick === next.onClick;
-});
-(VideoAttachment as any).displayName = 'VideoAttachment';
+const PlayIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M8 5v14l11-7z" />
+  </svg>
+);
 
-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 PauseIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+  </svg>
+);
+
+const MicIcon = () => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+    <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+    <line x1="12" x2="12" y1="19" y2="22" />
+  </svg>
+);
 
-  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');
+const DownloadIcon = () => (
+  <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>
+);
+
+const CustomAudioPlayer: React.FC<{ src: string; durationLabel: string; fileName?: string }> = ({
+  src,
+  durationLabel,
+  fileName,
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [dynamicDuration, setDynamicDuration] = useState(durationLabel);
+  const audioRef = React.useRef<HTMLAudioElement>(null);
+  const { downloadFile } = useDownloadHandler();
+
+  const handleDownload = useCallback(
+    async (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      await downloadFile(src, fileName || 'audio.mp3');
+    },
+    [downloadFile, src, fileName],
+  );
+
+  React.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const updateProgress = () => {
+      setProgress((audio.currentTime / audio.duration) * 100 || 0);
+    };
+    const onEnded = () => {
+      setIsPlaying(false);
+      setProgress(0);
+    };
+    const onLoadedMetadata = () => {
+      if (audio.duration && audio.duration !== Infinity && durationLabel === '0:00') {
+        const mins = Math.floor(audio.duration / 60);
+        const secs = Math.floor(audio.duration % 60);
+        setDynamicDuration(`${mins}:${secs.toString().padStart(2, '0')}`);
+      }
+    };
+    audio.addEventListener('timeupdate', updateProgress);
+    audio.addEventListener('ended', onEnded);
+    audio.addEventListener('loadedmetadata', onLoadedMetadata);
+    return () => {
+      audio.removeEventListener('timeupdate', updateProgress);
+      audio.removeEventListener('ended', onEnded);
+      audio.removeEventListener('loadedmetadata', onLoadedMetadata);
+    };
+  }, [durationLabel]);
+
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play().catch((e) => console.error(e));
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, x / rect.width));
+    if (audioRef.current && audioRef.current.duration) {
+      audioRef.current.currentTime = percentage * audioRef.current.duration;
+      setProgress(percentage * 100);
     }
-  }, [client, url, name]);
+  };
 
   return (
-    <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 && (
-          <span className="ermis-attachment__file-size">
-            {typeof size === 'number' ? `${(size / 1024).toFixed(1)} KB` : size}
-          </span>
-        )}
-      </span>
-      <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>
+    <div className="ermis-custom-audio-player">
+      <button className="ermis-custom-audio-play-btn" onClick={togglePlay} aria-label={isPlaying ? 'Pause' : 'Play'}>
+        {isPlaying ? <PauseIcon /> : <PlayIcon />}
       </button>
+      <div className="ermis-custom-audio-progress-container">
+        <div className="ermis-custom-audio-progress-bg" onClick={handleSeek}>
+          <div className="ermis-custom-audio-progress-fill" style={{ width: `${progress}%` }} />
+          <div className="ermis-custom-audio-progress-thumb" style={{ left: `${progress}%` }} />
+        </div>
+      </div>
+      <span className="ermis-custom-audio-duration">{dynamicDuration}</span>
+      <button className="ermis-custom-audio-download-btn" onClick={handleDownload} title="Download" type="button">
+        <DownloadIcon />
+      </button>
+      <audio ref={audioRef} src={src} preload="metadata" className="ermis-custom-audio-hidden" />
     </div>
   );
-}, (prev, next) => {
-  return (prev.attachment.url || prev.attachment.asset_url) ===
-    (next.attachment.url || next.attachment.asset_url);
-});
-(FileAttachment as any).displayName = 'FileAttachment';
+};
 
-const VoiceRecordingAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) => {
-  const src = attachment.asset_url || attachment.url;
-  if (!src) return null;
+const VoiceRecordingAttachment: React.FC<AttachmentProps> = React.memo(
+  ({ attachment }) => {
+    const src = attachment.asset_url || attachment.url;
+    if (!src) return null;
 
-  const durationSec = attachment.duration ?? 0;
-  const mins = Math.floor(durationSec / 60);
-  const secs = Math.round(durationSec % 60);
-  const durationLabel = `${mins}:${secs.toString().padStart(2, '0')}`;
+    const durationSec = attachment.duration ?? 0;
+    const mins = Math.floor(durationSec / 60);
+    const secs = Math.round(durationSec % 60);
+    const durationLabel = `${mins}:${secs.toString().padStart(2, '0')}`;
+    const fileName = attachment.file_name || attachment.title || 'audio.mp3';
+    const uploadProgress = getLocalUploadProgress(attachment);
 
-  return (
-    <div className="ermis-attachment ermis-attachment--voice">
-      <span className="ermis-attachment__voice-icon">🎙️</span>
-      <audio src={src} controls preload="metadata" className="ermis-attachment__voice-player" />
-      <span className="ermis-attachment__voice-duration">{durationLabel}</span>
-    </div>
-  );
-}, (prev, next) => {
-  return (prev.attachment.asset_url || prev.attachment.url) ===
-    (next.attachment.asset_url || next.attachment.url);
-});
+    return (
+      <div className="ermis-voice-upload-wrap">
+        <CustomAudioPlayer src={src} durationLabel={durationLabel} fileName={fileName} />
+        {uploadProgress !== undefined && <span className="ermis-voice-upload-progress">{uploadProgress}%</span>}
+      </div>
+    );
+  },
+  (prev, next) => {
+    return (
+      (prev.attachment.asset_url || prev.attachment.url) === (next.attachment.asset_url || next.attachment.url) &&
+      getLocalUploadProgress(prev.attachment) === getLocalUploadProgress(next.attachment)
+    );
+  },
+);
 (VoiceRecordingAttachment as any).displayName = 'VoiceRecordingAttachment';
 
-const LinkPreviewAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) => {
-  const url = attachment.link_url || attachment.og_scrape_url || attachment.title_link || attachment.url;
-  const title = attachment.title;
-  const description = attachment.text;
-  const image = attachment.image_url;
+const LinkPreviewAttachment: React.FC<AttachmentProps> = React.memo(
+  ({ attachment }) => {
+    const url = attachment.link_url || attachment.og_scrape_url || attachment.title_link || attachment.url;
+    const title = attachment.title;
+    const description = attachment.text;
+    const image = attachment.image_url;
 
-  const alreadyCached = image ? isImagePreloaded(image) : false;
-  const [loaded, setLoaded] = useState(alreadyCached);
-  const imgRef = React.useRef<HTMLImageElement>(null);
+    const alreadyCached = image ? isImagePreloaded(image) : false;
+    const [loaded, setLoaded] = useState(alreadyCached);
+    const imgRef = React.useRef<HTMLImageElement>(null);
 
-  useMemo(() => {
-    if (image) preloadImage(image);
-  }, [image]);
+    useMemo(() => {
+      if (image) preloadImage(image);
+    }, [image]);
 
-  React.useEffect(() => {
-    if (!loaded && imgRef.current?.complete) {
-      setLoaded(true);
-    }
-  }, [loaded, image]);
+    React.useEffect(() => {
+      if (!loaded && imgRef.current?.complete) {
+        setLoaded(true);
+      }
+    }, [loaded, image]);
 
-  if (!title) return null;
+    if (!title) return null;
 
-  return (
-    <a
-      className="ermis-attachment ermis-attachment--link-preview"
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {image && (
-        <div className="ermis-attachment__link-image-wrapper">
-          {!loaded && <div className="ermis-attachment-shimmer" />}
-          <img
-            ref={imgRef}
-            className={`ermis-attachment__link-image${loaded ? ' ermis-attachment--loaded' : ''}`}
-            src={image}
-            alt={title || 'preview'}
-            loading="lazy"
-            onLoad={() => setLoaded(true)}
-          />
-        </div>
-      )}
-      <div className="ermis-attachment__link-info">
-        {title && <span className="ermis-attachment__link-title">{title}</span>}
-        {description && <span className="ermis-attachment__link-description">{description}</span>}
-        {url && (
-          <span className="ermis-attachment__link-url">
-            {new URL(url).hostname}
-          </span>
+    return (
+      <a
+        className="ermis-attachment ermis-attachment--link-preview"
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {image && (
+          <div className="ermis-attachment__link-image-wrapper">
+            {!loaded && <div className="ermis-attachment-shimmer" />}
+            <img
+              ref={imgRef}
+              className={`ermis-attachment__link-image${loaded ? ' ermis-attachment--loaded' : ''}`}
+              src={image}
+              alt={title || 'preview'}
+              loading="lazy"
+              onLoad={() => setLoaded(true)}
+            />
+          </div>
         )}
-      </div>
-    </a>
-  );
-}, (prev, next) => {
-  return (prev.attachment.link_url || prev.attachment.og_scrape_url || prev.attachment.url) ===
-    (next.attachment.link_url || next.attachment.og_scrape_url || next.attachment.url);
-});
+        <div className="ermis-attachment__link-info">
+          {title && <span className="ermis-attachment__link-title">{title}</span>}
+          {description && <span className="ermis-attachment__link-description">{description}</span>}
+          {url && <span className="ermis-attachment__link-url">{new URL(url).hostname}</span>}
+        </div>
+      </a>
+    );
+  },
+  (prev, next) => {
+    return (
+      (prev.attachment.link_url || prev.attachment.og_scrape_url || prev.attachment.url) ===
+      (next.attachment.link_url || next.attachment.og_scrape_url || next.attachment.url)
+    );
+  },
+);
 (LinkPreviewAttachment as any).displayName = 'LinkPreviewAttachment';
 
 export const MessageAttachment: React.FC<AttachmentProps> = ({ attachment }) => {
   if (isImage(attachment)) return <ImageAttachment attachment={attachment} />;
   if (isVideo(attachment)) return <VideoAttachment attachment={attachment} />;
-  if (isVoiceRecordingAttachment(attachment)) return <VoiceRecordingAttachment attachment={attachment} />;
+  if (isAudio(attachment)) return <VoiceRecordingAttachment attachment={attachment} />;
   if (isLinkPreviewAttachment(attachment)) return <LinkPreviewAttachment attachment={attachment} />;
   return <FileAttachment attachment={attachment} />;
 };
 
-export const AttachmentList: React.FC<{ attachments?: Attachment[] }> = React.memo(({ attachments }) => {
-  if (!attachments || attachments.length === 0) return null;
-
-  // Group by type
-  const media = attachments.filter((a) => isImage(a) || isVideo(a));
-  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)) {
+export const AttachmentList: React.FC<{
+  attachments?: Array<Attachment | E2eeAttachmentManifest>;
+  e2eeGrantReady?: boolean;
+}> = React.memo(
+  ({ attachments, e2eeGrantReady = true }) => {
+    if (!attachments || attachments.length === 0) return null;
+
+    // Group by type
+    const e2eeAttachments = attachments.filter(isE2eeAttachmentManifest);
+    const standardAttachments = attachments.filter((a): a is Attachment => !isE2eeAttachmentManifest(a));
+    const media = standardAttachments.filter((a) => isImage(a) || isVideo(a));
+    const files = standardAttachments.filter(
+      (a) => !isImage(a) && !isVideo(a) && !isVoiceRecordingAttachment(a) && !isLinkPreviewAttachment(a),
+    );
+    const voices = standardAttachments.filter(isVoiceRecordingAttachment);
+    const links = standardAttachments.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: 'image' as const,
-          src: att.image_url || att.thumb_url || att.url || '',
+          type: 'video' as const,
+          src: att.asset_url || att.url || '',
           alt: att.file_name || att.title,
+          posterSrc: att.image_url || att.thumb_url,
         };
-      }
-      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]);
+      });
+    }, [media]);
 
-  const openLightbox = useCallback((index: number) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
+    const openLightbox = useCallback((index: number) => {
+      setLightboxIndex(index);
+      setLightboxOpen(true);
+    }, []);
 
-  const closeLightbox = useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
+    const closeLightbox = useCallback(() => {
+      setLightboxOpen(false);
+    }, []);
 
-  const mediaGridClass = media.length === 1
-    ? 'ermis-attachment-grid ermis-attachment-grid--single'
-    : 'ermis-attachment-grid ermis-attachment-grid--multi';
+    const mediaGridClass =
+      media.length === 1
+        ? 'ermis-attachment-grid ermis-attachment-grid--single'
+        : 'ermis-attachment-grid ermis-attachment-grid--multi';
 
-  return (
-    <div className="ermis-attachment-list">
-      {/* Media group: images + videos in grid */}
-      {media.length > 0 && (
-        <div className={mediaGridClass}>
-          {media.map((att, i) => (
-            isImage(att)
-              ? <ImageAttachment key={att.id || `img-${i}`} attachment={att} onClick={() => openLightbox(i)} />
-              : <VideoAttachment key={att.id || `vid-${i}`} attachment={att} onClick={() => openLightbox(i)} />
-          ))}
-        </div>
-      )}
-      {/* File group */}
-      {files.map((att, i) => (
-        <FileAttachment key={att.id || `file-${i}`} attachment={att} />
-      ))}
-      {/* Voice recording group */}
-      {voices.map((att, i) => (
-        <VoiceRecordingAttachment key={att.id || `voice-${i}`} attachment={att} />
-      ))}
-      {/* Link preview group */}
-      {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) => {
-  // Skip re-render if same attachment array reference
-  if (prev.attachments === next.attachments) return true;
-  if (!prev.attachments || !next.attachments) return false;
-  if (prev.attachments.length !== next.attachments.length) return false;
-  return prev.attachments.every((a, i) => a.id === next.attachments![i].id);
-});
+    return (
+      <div className="ermis-attachment-list">
+        {/* Media group: images + videos in grid */}
+        {media.length > 0 && (
+          <div className={mediaGridClass}>
+            {media.map((att, i) =>
+              isImage(att) ? (
+                <ImageAttachment key={att.id || `img-${i}`} attachment={att} onClick={() => openLightbox(i)} />
+              ) : (
+                <VideoAttachment key={att.id || `vid-${i}`} attachment={att} onClick={() => openLightbox(i)} />
+              ),
+            )}
+          </div>
+        )}
+        {/* File group */}
+        {e2eeAttachments.map((att) => (
+          <E2eeAttachment key={att.attachment_id} attachment={att} grantReady={e2eeGrantReady} />
+        ))}
+        {files.map((att, i) => (
+          <FileAttachment key={att.id || `file-${i}`} attachment={att} />
+        ))}
+        {/* Voice recording group */}
+        {voices.map((att, i) => (
+          <VoiceRecordingAttachment key={att.id || `voice-${i}`} attachment={att} />
+        ))}
+        {/* Link preview group */}
+        {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) => {
+    // Skip re-render if same attachment array reference
+    if (prev.attachments === next.attachments && prev.e2eeGrantReady === next.e2eeGrantReady) return true;
+    if (prev.e2eeGrantReady !== next.e2eeGrantReady) return false;
+    if (!prev.attachments || !next.attachments) return false;
+    if (prev.attachments.length !== next.attachments.length) return false;
+    return prev.attachments.every((a, i) => {
+      const b = next.attachments![i];
+      return attachmentRenderKey(a) === attachmentRenderKey(b);
+    });
+  },
+);
 (AttachmentList as any).displayName = 'AttachmentList';
 
 /* ----------------------------------------------------------
@@ -452,7 +1061,7 @@ function linkifyText(text: string, keyPrefix: string): React.ReactNode[] {
       // Reset lastIndex since we reuse the regex
       URL_REGEX.lastIndex = 0;
       const isEmail = part.includes('@') && !part.startsWith('http');
-      const href = isEmail ? `mailto:${part}` : (part.startsWith('http') ? part : `https://${part}`);
+      const href = isEmail ? `mailto:${part}` : part.startsWith('http') ? part : `https://${part}`;
       return (
         <a
           key={`${keyPrefix}-link-${i}`}
@@ -479,8 +1088,9 @@ function renderTextWithMentions(
   text: string,
   message: FormatMessageResponse,
   userMap: Record<string, string>,
+  onMentionClick?: (userId: string) => void,
 ): React.ReactNode {
-  const mentionedUsers: string[] = (message as any).mentioned_users ?? [];
+  const mentionedUsers: any[] = (message as any).mentioned_users ?? [];
   const mentionedAll: boolean = (message as any).mentioned_all ?? false;
 
   // If no mentions, just linkify the text
@@ -489,37 +1099,54 @@ function renderTextWithMentions(
   }
 
   // Build a list of patterns to replace: @userId → @userName
-  const replacements: { pattern: string; label: string }[] = [];
+  const replacements: { pattern: string; label: string; id: string }[] = [];
+
+  for (const userItem of mentionedUsers) {
+    if (!userItem) continue;
+    const userId = typeof userItem === 'string' ? userItem : userItem.id;
+    if (!userId) continue;
+
+    const itemObjName = typeof userItem === 'object' ? userItem.name : undefined;
+    const name = userMap[userId] ?? itemObjName ?? userId;
 
-  for (const userId of mentionedUsers) {
     replacements.push({
       pattern: `@${userId}`,
-      label: `@${userMap[userId] ?? userId}`,
+      label: `@${name}`,
+      id: userId,
     });
   }
 
   if (mentionedAll) {
-    replacements.push({ pattern: '@all', label: '@all' });
+    replacements.push({ pattern: '@all', label: '@all', id: 'all' });
   }
 
   // Build a regex that matches any of the mention patterns
-  const escaped = replacements.map((r) =>
-    r.pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'),
-  );
+  const escaped = replacements.map((r) => r.pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
   const regex = new RegExp(`(${escaped.join('|')})`, 'g');
 
   const parts = text.split(regex);
 
   // Map from pattern → label for quick lookup
-  const patternToLabel = new Map(replacements.map((r) => [r.pattern, r.label]));
+  const patternToLabel = new Map(replacements.map((r) => [r.pattern, r]));
 
   return parts.flatMap((part, i) => {
-    const label = patternToLabel.get(part);
-    if (label) {
+    const info = patternToLabel.get(part);
+    if (info) {
       // Mention — render as span, do NOT linkify
       return (
-        <span key={`mention-${i}`} className="ermis-mention">
-          {label}
+        <span
+          key={`mention-${i}`}
+          className={`ermis-mention${onMentionClick && info.id !== 'all' ? ' ermis-mention--clickable' : ''}`}
+          onClick={
+            onMentionClick && info.id !== 'all'
+              ? (e) => {
+                  e.stopPropagation();
+                  onMentionClick(info.id);
+                }
+              : undefined
+          }
+        >
+          {info.label}
         </span>
       );
     }
@@ -529,60 +1156,98 @@ function renderTextWithMentions(
 }
 
 /** Regular message: text with @mentions + attachments */
-export const RegularMessage: React.FC<MessageRendererProps> = React.memo(({ message }) => {
-  const { activeChannel } = useChatClient();
-
-  const userMap = useMemo<Record<string, string>>(() => {
-    return buildUserMap(activeChannel?.state);
-  }, [activeChannel?.state]);
-
-  const textContent = message.text
-    ? renderTextWithMentions(message.text, message, userMap)
-    : null;
-
-  const attachmentsToRender = useMemo(() => {
-    if (!message.attachments || message.attachments.length === 0) return [];
-
-    const text = (message.text || '').trim();
-    const URL_REGEX_STRICT = /^(https?:\/\/[^\s<>]+|www\.[^\s<>]+)$/;
-    const isOnlyUrl = URL_REGEX_STRICT.test(text);
-
-    return message.attachments.filter(att => {
-      if (isLinkPreviewAttachment(att)) return isOnlyUrl;
-      return true;
-    });
-  }, [message.attachments, message.text]);
+export const RegularMessage: React.FC<MessageRendererProps> = React.memo(
+  ({
+    message,
+    onMentionClick,
+    encryptedMessageLabel = 'Encrypted message',
+    encryptedMessageFailedLabel = 'Encrypted message could not be decrypted',
+    encryptedMessageDecryptingLabel = 'Decrypting encrypted message...',
+  }) => {
+    const { activeChannel } = useChatClient();
+
+    const isEncrypted = message.content_type === 'mls' || Boolean((message as any).mls_ciphertext);
+    const hasRawAttachments = Boolean(message.attachments?.length);
+    const rawText = message.text || '';
+    const isEncryptedSentinelText =
+      hasRawAttachments &&
+      (rawText === 'Encrypted message' ||
+        rawText === 'Encrypted message unavailable' ||
+        rawText === encryptedMessageLabel);
+
+    const userMap = useMemo<Record<string, string>>(() => {
+      return buildUserMap(activeChannel?.state);
+    }, [activeChannel?.state]);
+
+    const textContent =
+      rawText && !isEncryptedSentinelText ? renderTextWithMentions(rawText, message, userMap, onMentionClick) : null;
+
+    const attachmentsToRender = useMemo(() => {
+      if (!message.attachments || message.attachments.length === 0) return [];
+
+      const text = (message.text || '').trim();
+      const URL_REGEX_STRICT = /^(https?:\/\/[^\s<>]+|www\.[^\s<>]+)$/;
+      const isOnlyUrl = URL_REGEX_STRICT.test(text);
+
+      return message.attachments.filter((att) => {
+        if (isLinkPreviewAttachment(att)) return isOnlyUrl;
+        return true;
+      });
+    }, [message.attachments, message.text]);
+
+    const hasAttachments = attachmentsToRender.length > 0;
+    const hasE2eeAttachments = attachmentsToRender.some(isE2eeAttachmentManifest);
+    const messageStatus = (message as any).status;
+    const e2eeGrantReady = !['sending', 'error', 'failed_offline'].includes(messageStatus);
+    const encryptedPlaceholder =
+      isEncrypted && !message.text && !hasAttachments ? (
+        <span className="ermis-message-list__item-text ermis-message-list__item-text--encrypted">
+          {(message as any).e2ee_status === 'failed'
+            ? encryptedMessageFailedLabel
+            : (message as any).e2ee_status === 'decrypting'
+            ? encryptedMessageDecryptingLabel
+            : encryptedMessageLabel}
+        </span>
+      ) : null;
 
-  const hasAttachments = attachmentsToRender.length > 0;
+    if (hasAttachments) {
+      return (
+        <div
+          className={`ermis-message-content--with-attachments${
+            hasE2eeAttachments ? ' ermis-message-content--with-e2ee-attachments' : ''
+          }`}
+        >
+          {textContent && <span className="ermis-message-list__item-text">{textContent}</span>}
+          {encryptedPlaceholder}
+          <AttachmentList attachments={attachmentsToRender} e2eeGrantReady={e2eeGrantReady} />
+        </div>
+      );
+    }
 
-  if (hasAttachments) {
     return (
-      <div className="ermis-message-content--with-attachments">
-        {textContent && (
-          <span className="ermis-message-list__item-text">{textContent}</span>
-        )}
-        <AttachmentList attachments={attachmentsToRender} />
-      </div>
+      <>
+        {textContent && <span className="ermis-message-list__item-text">{textContent}</span>}
+        {encryptedPlaceholder}
+      </>
     );
-  }
-
-  return (
-    <>
-      {textContent && (
-        <span className="ermis-message-list__item-text">{textContent}</span>
-      )}
-    </>
-  );
-}, (prev, next) => {
-  return prev.message.id === next.message.id &&
-    prev.message.updated_at === next.message.updated_at &&
-    prev.message.text === next.message.text &&
-    prev.isOwnMessage === next.isOwnMessage;
-});
+  },
+  (prev, next) => {
+    return (
+      prev.message.id === next.message.id &&
+      prev.message.updated_at === next.message.updated_at &&
+      prev.message.text === next.message.text &&
+      prev.message.content_type === next.message.content_type &&
+      (prev.message as any).status === (next.message as any).status &&
+      (prev.message as any).e2ee_status === (next.message as any).e2ee_status &&
+      prev.message.attachments === next.message.attachments &&
+      prev.isOwnMessage === next.isOwnMessage
+    );
+  },
+);
 RegularMessage.displayName = 'RegularMessage';
 
 /** System message: centered info text, parsed from raw format */
-export const SystemMessage: React.FC<MessageRendererProps> = ({ message }) => {
+export const SystemMessage: React.FC<MessageRendererProps> = ({ message, systemMessageTranslations }) => {
   const { activeChannel } = useChatClient();
 
   const userMap = useMemo<Record<string, string>>(() => {
@@ -590,30 +1255,22 @@ export const SystemMessage: React.FC<MessageRendererProps> = ({ message }) => {
   }, [activeChannel?.state]);
 
   const parsedText = useMemo(
-    () => (message.text ? parseSystemMessage(message.text, userMap) : ''),
-    [message.text, userMap],
+    () => (message.text ? parseSystemMessage(message.text, userMap, systemMessageTranslations) : ''),
+    [message.text, userMap, systemMessageTranslations],
   );
 
-  return (
-    <span className="ermis-message-list__system-text">
-      {parsedText || message.text}
-    </span>
-  );
+  return <span className="ermis-message-list__system-text">{parsedText || message.text}</span>;
 };
 
 /** Signal message: call events */
-export const SignalMessage: React.FC<MessageRendererProps> = ({ message }) => {
+export const SignalMessage: React.FC<MessageRendererProps> = ({ message, signalMessageTranslations }) => {
   const { client } = useChatClient();
 
   const rawText = message.text ?? '';
-  const result = rawText ? parseSignalMessage(rawText, client.userID || '') : null;
+  const result = rawText ? parseSignalMessage(rawText, client.userID || '', signalMessageTranslations) : null;
 
   if (!result) {
-    return (
-      <span className="ermis-message-list__signal-text">
-        {rawText}
-      </span>
-    );
+    return <span className="ermis-message-list__signal-text">{rawText}</span>;
   }
 
   const isSuccess = !!result.duration;
@@ -624,24 +1281,39 @@ export const SignalMessage: React.FC<MessageRendererProps> = ({ message }) => {
     <div className="ermis-signal-message">
       <div className={`ermis-signal-message__icon ermis-signal-message__icon--${colorModifier}`}>
         {isAudio ? (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
             <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
           </svg>
         ) : (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
             <polygon points="23 7 16 12 23 17 23 7" />
             <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
           </svg>
         )}
       </div>
       <div className="ermis-signal-message__body">
-        <span className={`ermis-signal-message__text ermis-signal-message__text--${colorModifier}`}>
-          {result.text}
-        </span>
-        {result.duration && (
-          <span className="ermis-signal-message__duration">{result.duration}</span>
-        )}
+        <span className={`ermis-signal-message__text ermis-signal-message__text--${colorModifier}`}>{result.text}</span>
+        {result.duration && <span className="ermis-signal-message__duration">{result.duration}</span>}
       </div>
+      <span className="ermis-signal-message__time">{formatTime(message.created_at)}</span>
     </div>
   );
 };
@@ -699,10 +1371,7 @@ export const ErrorMessage: React.FC<MessageRendererProps> = ({ message }) => (
  * Map from MessageLabel → component.
  * Consumer can override individual renderers via the `messageRenderers` prop.
  */
-export const defaultMessageRenderers: Record<
-  MessageLabel,
-  React.ComponentType<MessageRendererProps>
-> = {
+export const defaultMessageRenderers: Record<MessageLabel, React.ComponentType<MessageRendererProps>> = {
   regular: RegularMessage,
   system: SystemMessage,
   signal: SignalMessage,