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

package/src/components/FlatTopicGroupItem.tsx

@@ -0,0 +1,232 @@
+import React, { useCallback, useMemo } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from '../hooks/useChatClient';
+import { SystemMessageTranslations, SignalMessageTranslations } from '@ermis-network/ermis-chat-sdk';
+import { useTopicGroupUpdates } from '../hooks/useTopicGroupUpdates';
+import { useChannelRowUpdates } from '../hooks/useChannelRowUpdates';
+import { DefaultChannelActions, computeDefaultActions } from './ChannelActions';
+import type { AvatarProps, ChannelActionsProps, ChannelActionLabels, ChannelActionIcons, TopicPillProps } from '../types';
+
+/* ----------------------------------------------------------
+   Default TopicPill – renders a single topic preview
+   ---------------------------------------------------------- */
+const DefaultTopicPill: React.FC<TopicPillProps> = React.memo(({ topic }) => {
+  const image = topic.data?.image as string | undefined;
+
+  let emoji = '💬';
+  if (image && typeof image === 'string' && image.startsWith('emoji://')) {
+    emoji = image.replace('emoji://', '');
+  }
+
+  const name = topic.data?.name || '';
+
+  return (
+    <span className="ermis-channel-list__topic-pill">
+      <span className="ermis-channel-list__topic-pill-avatar">{emoji}</span>
+      {name && <span className="ermis-channel-list__topic-pill-name">{name}</span>}
+    </span>
+  );
+});
+DefaultTopicPill.displayName = 'DefaultTopicPill';
+
+/* ----------------------------------------------------------
+   FlatTopicGroupItem Props
+   ---------------------------------------------------------- */
+type FlatTopicGroupItemProps = {
+  channel: Channel;
+  isActive: boolean;
+  onDrillDown?: (channel: Channel) => void;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+  maxVisibleTopics?: number;
+  moreTopicsLabel?: string;
+  /** Label for the general pill (default: 'general') */
+  generalTopicLabel?: string;
+  TopicPillComponent?: React.ComponentType<TopicPillProps>;
+  PinnedIconComponent?: React.ComponentType;
+  ChannelActionsComponent?: React.ComponentType<ChannelActionsProps>;
+  onAddTopic?: (channel: Channel) => void;
+  onTruncateChannel?: (channel: Channel) => void;
+  hiddenActions?: string[];
+  actionLabels?: ChannelActionLabels;
+  actionIcons?: ChannelActionIcons;
+  deletedMessageLabel?: React.ReactNode;
+  stickerMessageLabel?: React.ReactNode;
+  photoMessageLabel?: React.ReactNode;
+  videoMessageLabel?: React.ReactNode;
+  voiceRecordingMessageLabel?: React.ReactNode;
+  fileMessageLabel?: React.ReactNode;
+  systemMessageTranslations?: SystemMessageTranslations;
+  signalMessageTranslations?: SignalMessageTranslations;
+};
+
+/* ----------------------------------------------------------
+   FlatTopicGroupItem – flat channel item with topic preview
+   Shows like a normal ChannelItem (name, last msg, timestamp,
+   unread badge) plus a row of topic pills.
+   ---------------------------------------------------------- */
+export const FlatTopicGroupItem: React.FC<FlatTopicGroupItemProps> = React.memo(({
+  channel,
+  isActive,
+  onDrillDown,
+  AvatarComponent,
+  maxVisibleTopics = 3,
+  moreTopicsLabel = '...',
+  generalTopicLabel = 'general',
+  TopicPillComponent,
+  PinnedIconComponent,
+  ChannelActionsComponent,
+  onAddTopic,
+  hiddenActions,
+  actionLabels,
+  actionIcons,
+  deletedMessageLabel,
+  stickerMessageLabel,
+  photoMessageLabel,
+  videoMessageLabel,
+  voiceRecordingMessageLabel,
+  fileMessageLabel,
+  systemMessageTranslations,
+  signalMessageTranslations,
+}) => {
+  const { client } = useChatClient();
+  const currentUserId = client.userID;
+
+  // Realtime updates for parent channel row (pin/unpin, channel.updated)
+  const { updateCount } = useChannelRowUpdates(channel, currentUserId);
+
+  // Realtime topic group data (sorted topics, aggregated unread, latest message)
+  const { topics, aggregatedUnreadCount, hasUnread, latestMessagePreview } = useTopicGroupUpdates(
+    channel,
+    currentUserId,
+    {
+      deletedMessageLabel,
+      stickerMessageLabel,
+      photoMessageLabel,
+      videoMessageLabel,
+      voiceRecordingMessageLabel,
+      fileMessageLabel,
+      systemMessageTranslations,
+      signalMessageTranslations,
+    }
+  );
+
+  const name = channel.data?.name || channel.cid;
+  const image = channel.data?.image as string | undefined;
+  const isPinned = channel.data?.is_pinned === true;
+  const showUnread = hasUnread && !isActive;
+
+  // Latest message data from the aggregated preview
+  const lastMessageText = latestMessagePreview?.text || '';
+  const lastMessageUser = latestMessagePreview?.user || '';
+  const lastMessageTimestamp = latestMessagePreview?.timestamp;
+  const lastMessageSourceName = latestMessagePreview?.sourceName || null;
+
+  const timestampText = useMemo(() => {
+    if (!lastMessageTimestamp) return null;
+    const d = new Date(lastMessageTimestamp);
+    if (isNaN(d.getTime())) return null;
+    const today = new Date();
+    const isToday = d.toDateString() === today.toDateString();
+    return isToday
+      ? d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+      : d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  }, [lastMessageTimestamp]);
+
+  // Visible topic pills: general pill + sub-topic pills (capped at maxVisibleTopics)
+  const visibleTopics = useMemo(
+    () => topics.slice(0, Math.max(0, maxVisibleTopics - 1)),
+    [topics, maxVisibleTopics],
+  );
+  const hasOverflow = (topics.length + 1) > maxVisibleTopics;  // +1 for general pill
+
+  // Actions menu (pin, create topic, delete, leave)
+  const defaultActions = useMemo(
+    () => computeDefaultActions(channel, currentUserId, { onAddTopic, actionLabels, actionIcons }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [channel, currentUserId, updateCount, onAddTopic, actionLabels, actionIcons],
+  );
+  const filteredActions = useMemo(() => {
+    if (!hiddenActions || hiddenActions.length === 0) return defaultActions;
+    return defaultActions.filter((a) => !hiddenActions.includes(a.id));
+  }, [defaultActions, hiddenActions]);
+  const ActionsComponent = ChannelActionsComponent || DefaultChannelActions;
+
+  const Pill = TopicPillComponent || DefaultTopicPill;
+
+  const handleClick = useCallback(() => {
+    if (onDrillDown) onDrillDown(channel);
+  }, [channel, onDrillDown]);
+
+  const itemClass = [
+    'ermis-channel-list__item',
+    'ermis-channel-list__item--topic-group',
+    isActive ? 'ermis-channel-list__item--active' : '',
+    showUnread ? 'ermis-channel-list__item--unread' : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={itemClass} onClick={handleClick}>
+      <div className="ermis-channel-list__item-avatar-wrapper">
+        <AvatarComponent image={image} name={name} size={40} disableLightbox className="ermis-avatar-wrapper--group" />
+      </div>
+      <div className="ermis-channel-list__item-content">
+        {/* Row 1: name + pinned + timestamp */}
+        <div className="ermis-channel-list__item-top-row">
+          <div className="ermis-channel-list__item-name">{name}</div>
+          {isPinned && PinnedIconComponent && (
+            <span className="ermis-channel-list__pinned-icon" title="Pinned">
+              <PinnedIconComponent />
+            </span>
+          )}
+          {timestampText && <div className="ermis-channel-list__item-timestamp">{timestampText}</div>}
+        </div>
+        {/* Row 2: last message + unread badge */}
+        <div className="ermis-channel-list__item-bottom-row">
+          {lastMessageText && (
+            <div className="ermis-channel-list__item-last-message">
+              {lastMessageSourceName && (
+                <span className="ermis-channel-list__item-last-message-source">
+                  #{lastMessageSourceName} · {' '}
+                </span>
+              )}
+              {lastMessageUser && (
+                <span className="ermis-channel-list__item-last-message-user">
+                  {lastMessageUser}:{' '}
+                </span>
+              )}
+              <span>{lastMessageText}</span>
+            </div>
+          )}
+          <div className="ermis-channel-list__item-badges">
+            {showUnread && aggregatedUnreadCount > 0 && (
+              <span className="ermis-channel-list__unread-badge">
+                {aggregatedUnreadCount > 99 ? '99+' : aggregatedUnreadCount}
+              </span>
+            )}
+          </div>
+        </div>
+        {/* Row 3: topic pills — always visible (at least general pill) */}
+        <div className="ermis-channel-list__item-topics-row">
+          <div className="ermis-channel-list__topic-pills">
+            {/* General pill — always first */}
+            <span className="ermis-channel-list__topic-pill">
+              <span className="ermis-channel-list__topic-pill-avatar">#</span>
+              <span className="ermis-channel-list__topic-pill-name">{generalTopicLabel}</span>
+            </span>
+            {/* Sub-topic pills */}
+            {visibleTopics.map((topic: Channel) => (
+              <Pill key={topic.cid} topic={topic} />
+            ))}
+            {hasOverflow && (
+              <span className="ermis-channel-list__topic-overflow">{moreTopicsLabel}</span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="ermis-channel-list__item-actions-wrapper">
+        <ActionsComponent channel={channel} actions={filteredActions} onClose={() => { }} />
+      </div>
+    </div>
+  );
+});
+FlatTopicGroupItem.displayName = 'FlatTopicGroupItem';

package/src/components/ForwardMessageModal.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { createForwardMessagePayload } from '@ermis-network/ermis-chat-sdk';
-import type { Channel } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
-import { Modal } from './Modal';
-import type { ForwardMessageModalProps, ForwardChannelItemProps, AvatarProps } from '../types';
+import { Modal as DefaultModal } from './Modal';
+import { useChatComponents } from '../context/ChatComponentsContext';
+import type { ForwardMessageModalProps, ForwardChannelItemProps } from '../types';
 import { isTopicChannel } from '../channelTypeUtils';
+import { useForwardMessage } from '../hooks/useForwardMessage';
 
 export type { ForwardMessageModalProps, ForwardChannelItemProps } from '../types';
 
@@ -18,12 +18,20 @@ const DefaultForwardChannelItem: React.FC<ForwardChannelItemProps> = React.memo(
   onToggle,
   AvatarComponent,
 }) => {
+  const { client } = useChatClient();
+  const isTopic = isTopicChannel(channel);
+  const parentCid = channel.data?.parent_cid as string | undefined;
+  const parent = parentCid ? client.activeChannels[parentCid] : null;
+  const parentName = parent?.data?.name || '';
+
   const name = (channel.data?.name || channel.cid) as string;
   const rawImage = channel.data?.image as string | undefined;
   // Parse emoji:// format → extract just the emoji for avatar fallback
   const isEmoji = rawImage?.startsWith('emoji://');
   const image = isEmoji ? undefined : rawImage;
-  const emojiIcon = isEmoji ? rawImage!.replace('emoji://', '') : undefined;
+
+  // Use # for topics without explicit emoji/image
+  const emojiIcon = isEmoji ? rawImage!.replace('emoji://', '') : (isTopic && !image ? '#' : undefined);
 
   return (
     <div
@@ -35,7 +43,12 @@ const DefaultForwardChannelItem: React.FC<ForwardChannelItemProps> = React.memo(
       ) : (
         <AvatarComponent image={image} name={name} size={36} />
       )}
-      <span className="ermis-forward-modal__channel-name">{name}</span>
+      <div className="ermis-forward-modal__channel-name-container">
+        {isTopic && parentName && (
+          <span className="ermis-forward-modal__channel-parent-name">{parentName}</span>
+        )}
+        <span className="ermis-forward-modal__channel-name">{name}</span>
+      </div>
       <div className={`ermis-forward-modal__checkbox ${selected ? 'ermis-forward-modal__checkbox--checked' : ''}`}>
         {selected && (
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
@@ -57,79 +70,20 @@ export const ForwardMessageModal: React.FC<ForwardMessageModalProps> = ({
   ChannelItemComponent = DefaultForwardChannelItem,
   SearchInputComponent,
 }) => {
-  const { client, activeChannel } = useChatClient();
-  const [selectedChannels, setSelectedChannels] = useState<Set<string>>(new Set());
-  const [search, setSearch] = useState('');
-  const [sending, setSending] = useState(false);
-  const [results, setResults] = useState<{ success: string[]; failed: string[] } | null>(null);
+  const { ModalComponent } = useChatComponents();
+  const Modal = ModalComponent || DefaultModal;
   const backdropRef = useRef<HTMLDivElement>(null);
 
-  /* ---------- Get channels from client state (exclude topics) ---------- */
-  const channels = useMemo(() => {
-    return (Object.values(client.activeChannels) as Channel[]).filter(
-      (ch) => !isTopicChannel(ch),
-    );
-  }, [client.activeChannels]);
-
-  /* ---------- Filter by search ---------- */
-  const filteredChannels = useMemo(() => {
-    if (!search.trim()) return channels;
-    const q = search.toLowerCase();
-    return channels.filter((ch) => {
-      const name = ((ch.data?.name || ch.cid) as string).toLowerCase();
-      return name.includes(q);
-    });
-  }, [channels, search]);
-
-  /* ---------- Toggle selection ---------- */
-  const toggleChannel = useCallback((channel: Channel) => {
-    setSelectedChannels((prev) => {
-      const next = new Set(prev);
-      if (next.has(channel.cid)) {
-        next.delete(channel.cid);
-      } else {
-        next.add(channel.cid);
-      }
-      return next;
-    });
-  }, []);
-
-  /* ---------- Send forward ---------- */
-  const handleSend = useCallback(async () => {
-    if (!activeChannel || selectedChannels.size === 0 || sending) return;
-    setSending(true);
-    const success: string[] = [];
-    const failed: string[] = [];
-
-    for (const cid of selectedChannels) {
-      const targetChannel = channels.find((c) => c.cid === cid);
-      if (!targetChannel) continue;
-      try {
-        const forwardPayload = createForwardMessagePayload(
-          message,
-          targetChannel.cid as string,
-          activeChannel.cid as string,
-        );
-
-        await activeChannel.forwardMessage(forwardPayload, {
-          type: targetChannel.type,
-          channelID: targetChannel.id!,
-        });
-        success.push((targetChannel.data?.name || targetChannel.cid) as string);
-      } catch (err) {
-        console.error(`Failed to forward to ${cid}`, err);
-        failed.push((targetChannel.data?.name || targetChannel.cid) as string);
-      }
-    }
-
-    setResults({ success, failed });
-    setSending(false);
-
-    // Auto-close after success (short delay)
-    if (failed.length === 0) {
-      setTimeout(() => onDismiss(), 1200);
-    }
-  }, [activeChannel, selectedChannels, channels, message, sending, onDismiss]);
+  const {
+    search,
+    setSearch,
+    selectedChannels,
+    toggleChannel,
+    sending,
+    results,
+    filteredChannels,
+    handleSend,
+  } = useForwardMessage(message, onDismiss);
 
   /* ---------- Keyboard / backdrop close ---------- */
   useEffect(() => {

package/src/components/MediaLightbox.tsx

@@ -1,20 +1,13 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { preloadImage } from '../utils';
-import { useChatClient } from '../hooks/useChatClient';
+import { useDownloadHandler } from '../hooks/useDownloadHandler';
 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';
-  }
-};
+/** Max retry attempts for video loading (CDN may not be ready for large uploads) */
+const VIDEO_MAX_RETRIES = 3;
+/** Base delay in ms for exponential backoff: 1s, 2s, 4s */
+const VIDEO_RETRY_BASE_DELAY = 1000;
 
 /**
  * MediaLightbox – full-screen overlay for viewing images & videos.
@@ -36,13 +29,23 @@ export const MediaLightbox: React.FC<MediaLightboxProps> = React.memo(({
   const videoRef = useRef<HTMLVideoElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // Video retry state — handles CDN not-ready for large recently-uploaded files
+  const [videoRetryCount, setVideoRetryCount] = useState(0);
+  const [videoLoading, setVideoLoading] = useState(false);
+  const videoRetryTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
   // Reset state when opening or when items change
   useEffect(() => {
     if (isOpen) {
       setCurrentIndex(initialIndex);
       setZoom(1);
       setPan({ x: 0, y: 0 });
+      setVideoRetryCount(0);
+      setVideoLoading(false);
     }
+    return () => {
+      if (videoRetryTimerRef.current) clearTimeout(videoRetryTimerRef.current);
+    };
   }, [isOpen, initialIndex]);
 
   // Preload adjacent images
@@ -76,9 +79,12 @@ export const MediaLightbox: React.FC<MediaLightboxProps> = React.memo(({
 
   const goTo = useCallback((idx: number) => {
     if (videoRef.current) videoRef.current.pause();
+    if (videoRetryTimerRef.current) clearTimeout(videoRetryTimerRef.current);
     setCurrentIndex(idx);
     setZoom(1);
     setPan({ x: 0, y: 0 });
+    setVideoRetryCount(0);
+    setVideoLoading(false);
   }, []);
 
   const goPrev = useCallback(() => {
@@ -163,45 +169,61 @@ export const MediaLightbox: React.FC<MediaLightboxProps> = React.memo(({
     }
   }, [onClose]);
 
-  const { client } = useChatClient();
+  const { downloadFile } = useDownloadHandler();
 
   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]);
+    await downloadFile(currentItem.src, currentItem.alt || 'media');
+  }, [currentItem, downloadFile]);
+
+  // Video error handler — retries loading with exponential backoff
+  // Handles CDN not-ready scenario for large recently-uploaded files
+  const handleVideoError = useCallback(() => {
+    setVideoRetryCount((prev) => {
+      if (prev >= VIDEO_MAX_RETRIES) return prev;
+      const nextAttempt = prev + 1;
+      const delay = VIDEO_RETRY_BASE_DELAY * Math.pow(2, prev); // 1s, 2s, 4s
+      setVideoLoading(true);
+      videoRetryTimerRef.current = setTimeout(() => {
+        // Force the video element to re-attempt loading by resetting src
+        if (videoRef.current) {
+          const src = videoRef.current.src;
+          videoRef.current.src = '';
+          videoRef.current.src = src;
+          videoRef.current.load();
+        }
+        setVideoLoading(false);
+      }, delay);
+      return nextAttempt;
+    });
+  }, []);
 
   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()}
-        />
+        <div className="ermis-lightbox__video-wrapper">
+          <video
+            ref={videoRef}
+            className="ermis-lightbox__video"
+            src={currentItem.src}
+            poster={currentItem.posterSrc}
+            controls
+            autoPlay
+            preload="metadata"
+            onClick={(e) => e.stopPropagation()}
+            onError={handleVideoError}
+          />
+          {videoLoading && (
+            <div className="ermis-lightbox__video-retry">
+              <div className="ermis-lightbox__video-spinner" />
+            </div>
+          )}
+        </div>
       );
     }
 
@@ -225,7 +247,7 @@ export const MediaLightbox: React.FC<MediaLightboxProps> = React.memo(({
         onClick={(e) => e.stopPropagation()}
       />
     );
-  }, [currentItem, zoom, pan, isDragging, handleDoubleClick, handleMouseDown, handleMouseMove, handleMouseUp]);
+  }, [currentItem, zoom, pan, isDragging, videoLoading, handleDoubleClick, handleVideoError, handleMouseDown, handleMouseMove, handleMouseUp]);
 
   if (!isOpen || !currentItem) return null;
 

package/src/components/MentionSuggestions.tsx

@@ -1,57 +1,69 @@
 import React, { useEffect, useRef } from 'react';
-import { VList, VListHandle } from 'virtua';
 import { Avatar } from './Avatar';
 import type { MentionSuggestionsProps } from '../types';
 
 export type { MentionSuggestionsProps } from '../types';
 
-// Estimated item height
-const ITEM_HEIGHT = 42; 
-
 export const MentionSuggestions: React.FC<MentionSuggestionsProps> = React.memo(({
   members,
   highlightIndex,
   onSelect,
 }) => {
-  const listRef = useRef<VListHandle>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemsRef = useRef<Map<number, HTMLDivElement>>(new Map());
 
   // Auto-scroll highlighted item into view
   useEffect(() => {
-    // VList uses scrollToIndex
-    listRef.current?.scrollToIndex(highlightIndex);
+    const el = itemsRef.current.get(highlightIndex);
+    if (el && containerRef.current) {
+      const container = containerRef.current;
+      const elementTop = el.offsetTop;
+      const elementBottom = elementTop + el.offsetHeight;
+      const containerTop = container.scrollTop;
+      const containerBottom = containerTop + container.clientHeight;
+
+      if (elementTop < containerTop) {
+        container.scrollTop = elementTop;
+      } else if (elementBottom > containerBottom) {
+        container.scrollTop = elementBottom - container.clientHeight;
+      }
+    }
   }, [highlightIndex]);
 
   if (members.length === 0) return null;
 
-  // Calculate dynamic height based on item count, cap at 200px
-  const listHeight = Math.min(members.length * ITEM_HEIGHT, 200);
-
   return (
-    <div className="ermis-mention-suggestions" style={{ overflow: 'hidden' }}>
-      <VList ref={listRef} style={{ height: listHeight }}>
-        {members.map((member, index) => (
-          <div
-            key={member.id}
-            className={`ermis-mention-suggestions__item${
-              index === highlightIndex ? ' ermis-mention-suggestions__item--highlighted' : ''
-            }`}
-            onMouseDown={(e) => {
-              // Use mousedown (not click) to fire before blur
-              e.preventDefault();
-              onSelect(member);
-            }}
-          >
-            {member.id === '__all__' ? (
-              <div className="ermis-mention-suggestions__all-icon">@</div>
-            ) : (
-              <Avatar image={member.avatar} name={member.name} size={24} />
-            )}
-            <span className="ermis-mention-suggestions__name">
-              {member.id === '__all__' ? 'all' : member.name}
-            </span>
-          </div>
-        ))}
-      </VList>
+    <div 
+      className="ermis-mention-suggestions" 
+      ref={containerRef}
+      style={{ overflowY: 'auto', maxHeight: '200px' }}
+    >
+      {members.map((member, index) => (
+        <div
+          key={member.id}
+          ref={(el) => {
+            if (el) itemsRef.current.set(index, el);
+            else itemsRef.current.delete(index);
+          }}
+          className={`ermis-mention-suggestions__item${
+            index === highlightIndex ? ' ermis-mention-suggestions__item--highlighted' : ''
+          }`}
+          onMouseDown={(e) => {
+            // Use mousedown (not click) to fire before blur
+            e.preventDefault();
+            onSelect(member);
+          }}
+        >
+          {member.id === '__all__' ? (
+            <div className="ermis-mention-suggestions__all-icon">@</div>
+          ) : (
+            <Avatar image={member.avatar} name={member.name} size={24} />
+          )}
+          <span className="ermis-mention-suggestions__name">
+            {member.id === '__all__' ? 'all' : member.name}
+          </span>
+        </div>
+      ))}
     </div>
   );
 });

package/src/components/MessageActionsBox.tsx

@@ -3,7 +3,8 @@ import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import { useMessageActions } from '../hooks/useMessageActions';
 import { useChatClient } from '../hooks/useChatClient';
 import type { MessageActionsBoxProps } from '../types';
-import { Dropdown, closeAllDropdowns } from './Dropdown';
+import { Dropdown as DefaultDropdown, closeAllDropdowns } from './Dropdown';
+import { useChatComponents } from '../context/ChatComponentsContext';
 
 // Aliased for backward compatibility
 export const closeAllActionBoxes = closeAllDropdowns;
@@ -26,6 +27,8 @@ export const MessageActionsBox: React.FC<MessageActionsBoxProps> = ({
   deleteForEveryoneLabel = 'Delete for everyone',
 }) => {
   const { setQuotedMessage, setEditingMessage, setForwardingMessage, activeChannel } = useChatClient();
+  const { DropdownComponent } = useChatComponents();
+  const Dropdown = DropdownComponent || DefaultDropdown;
   const [anchorRect, setAnchorRect] = React.useState<DOMRect | null>(null);
   const actions = useMessageActions(message, isOwnMessage);