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

package/src/components/TopicList.tsx

@@ -0,0 +1,221 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { VList as _VList, type VListHandle } from 'virtua';
+const VList = _VList as any;
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from '../hooks/useChatClient';
+import { useTopicGroupUpdates } from '../hooks/useTopicGroupUpdates';
+import { ChannelRow } from './ChannelList';
+import { ChannelItem } from './ChannelList';
+import { Avatar } from './Avatar';
+import { DefaultPinnedIcon } from './ChannelList';
+import { TopicModal } from './TopicModal';
+import { isPendingMember, isSkippedMember } from '../channelRoleUtils';
+import type { TopicListProps } from '../types';
+
+/* ----------------------------------------------------------
+   Default avatars for general and topic items
+   ---------------------------------------------------------- */
+const DefaultGeneralAvatar = React.memo(() => (
+  <div className="ermis-channel-list__topic-hashtag">#</div>
+));
+DefaultGeneralAvatar.displayName = 'DefaultGeneralAvatar';
+
+const DefaultTopicEmojiAvatar = React.memo(({ image }: { image?: string | null }) => {
+  let emoji = '💬';
+  if (image && typeof image === 'string' && image.startsWith('emoji://')) {
+    emoji = image.replace('emoji://', '');
+  }
+  return <div className="ermis-channel-list__topic-hashtag">{emoji}</div>;
+});
+DefaultTopicEmojiAvatar.displayName = 'DefaultTopicEmojiAvatar';
+
+/* ----------------------------------------------------------
+   TopicList – headless virtualized list of topics
+   ---------------------------------------------------------- */
+export const TopicList: React.FC<TopicListProps> = React.memo(({
+  channel,
+  ChannelItemComponent = ChannelItem,
+  AvatarComponent = Avatar,
+  GeneralAvatarComponent,
+  TopicAvatarComponent,
+  generalTopicLabel = 'general',
+  PinnedIconComponent = DefaultPinnedIcon,
+  ChannelActionsComponent,
+  onSelectTopic,
+  onEditTopic,
+  onToggleCloseTopic,
+  onDeleteTopic,
+  hiddenActions,
+  actionLabels,
+  actionIcons,
+  closedTopicIcon,
+  pendingBadgeLabel,
+  blockedBadgeLabel,
+  scrollToTopOnOwnMessage = true,
+  deletedMessageLabel,
+  stickerMessageLabel,
+  photoMessageLabel,
+  videoMessageLabel,
+  voiceRecordingMessageLabel,
+  fileMessageLabel,
+  systemMessageTranslations,
+  signalMessageTranslations,
+}) => {
+  const { client, activeChannel, setActiveChannel } = useChatClient();
+  const currentUserId = client.userID;
+  const { topics } = useTopicGroupUpdates(channel, currentUserId);
+
+  // Ref for imperative scroll control on the virtualized list
+  const vlistRef = useRef<VListHandle>(null);
+
+  // Auto-scroll to top when the current user sends a message in any topic
+  useEffect(() => {
+    if (!scrollToTopOnOwnMessage || !currentUserId) return;
+
+    const subs: { unsubscribe: () => void }[] = [];
+
+    const handleNewMessage = (event: { user?: { id?: string } }) => {
+      if (event.user?.id === currentUserId) {
+        setTimeout(() => vlistRef.current?.scrollToIndex(0), 0);
+      }
+    };
+
+    // Listen on parent channel
+    subs.push(channel.on('message.new', handleNewMessage));
+
+    // Listen on all sub-topics
+    const currentTopics = channel.state?.topics || [];
+    currentTopics.forEach((t: Channel) => {
+      subs.push(t.on('message.new', handleNewMessage));
+    });
+
+    return () => {
+      subs.forEach((s) => s.unsubscribe());
+    };
+  }, [channel, channel.state?.topics, currentUserId, scrollToTopOnOwnMessage]);
+
+  // Default edit topic handler: open built-in TopicModal when no custom handler is provided
+  const [editingTopic, setEditingTopic] = useState<Channel | null>(null);
+
+  const handleEditTopic = useCallback((topic: Channel) => {
+    if (onEditTopic) {
+      onEditTopic(topic);
+    } else {
+      setEditingTopic(topic);
+    }
+  }, [onEditTopic]);
+
+  // General channel proxy — display parent channel as the general topic
+  const generalProxy = useMemo(() => {
+    return new Proxy(channel, {
+      get(target, prop, receiver) {
+        if (prop === 'data') {
+          return { ...target.data, name: generalTopicLabel, is_pinned: false };
+        }
+        const value = Reflect.get(target, prop, receiver);
+        return typeof value === 'function' ? value.bind(target) : value;
+      }
+    });
+  }, [channel, generalTopicLabel]);
+
+  const markChannelRead = useCallback((ch: Channel) => {
+    const ms = ch.state?.membership as Record<string, unknown> | undefined;
+    const chState = ch.state as unknown as Record<string, unknown> | undefined;
+    const isBannedInChannel = Boolean(ms?.banned);
+    const isPending = isPendingMember(ms?.channel_role as string);
+    const isSkipped = isSkippedMember(ms?.channel_role as string);
+
+    if (!isBannedInChannel && !isPending && !isSkipped && (chState?.unreadCount as number) > 0) {
+      ch.markRead().catch(() => { });
+      if (chState) chState.unreadCount = 0;
+    }
+  }, []);
+
+  const handleSelectGeneral = useCallback(() => {
+    if (onSelectTopic) {
+      onSelectTopic(channel);
+    } else {
+      setActiveChannel(channel);
+    }
+    markChannelRead(channel);
+  }, [channel, onSelectTopic, setActiveChannel, markChannelRead]);
+
+  const handleSelectTopic = useCallback((topic: Channel) => {
+    if (onSelectTopic) {
+      onSelectTopic(topic);
+    } else {
+      setActiveChannel(topic);
+    }
+    markChannelRead(topic);
+  }, [onSelectTopic, setActiveChannel, markChannelRead]);
+
+  /** Null actions component for the general item */
+  const NoActions = useCallback(() => null, []);
+
+  return (
+    <>
+    <VList ref={vlistRef} style={{ height: '100%' }}>
+      {/* General (parent channel) — no actions menu */}
+      <ChannelRow
+        channel={generalProxy as Channel}
+        isActive={activeChannel?.cid === channel.cid}
+        handleSelect={handleSelectGeneral}
+        ChannelItemComponent={ChannelItemComponent}
+        AvatarComponent={GeneralAvatarComponent || DefaultGeneralAvatar as any}
+        currentUserId={currentUserId}
+        pendingBadgeLabel={pendingBadgeLabel}
+        blockedBadgeLabel={blockedBadgeLabel}
+        ChannelActionsComponent={NoActions}
+        hiddenActions={hiddenActions}
+        deletedMessageLabel={deletedMessageLabel}
+        stickerMessageLabel={stickerMessageLabel}
+        photoMessageLabel={photoMessageLabel}
+        videoMessageLabel={videoMessageLabel}
+        voiceRecordingMessageLabel={voiceRecordingMessageLabel}
+        fileMessageLabel={fileMessageLabel}
+        systemMessageTranslations={systemMessageTranslations}
+        signalMessageTranslations={signalMessageTranslations}
+      />
+      {/* Sub-topics — with full data (last msg, unread, timestamp, pin icon) */}
+      {topics.map((topic: Channel) => (
+        <ChannelRow
+          key={topic.cid}
+          channel={topic}
+          isActive={activeChannel?.cid === topic.cid}
+          handleSelect={handleSelectTopic}
+          ChannelItemComponent={ChannelItemComponent}
+          AvatarComponent={TopicAvatarComponent || DefaultTopicEmojiAvatar as any}
+          currentUserId={currentUserId}
+          pendingBadgeLabel={pendingBadgeLabel}
+          blockedBadgeLabel={blockedBadgeLabel}
+          closedTopicIcon={closedTopicIcon}
+          PinnedIconComponent={PinnedIconComponent}
+          ChannelActionsComponent={ChannelActionsComponent}
+          onEditTopic={handleEditTopic}
+          onToggleCloseTopic={onToggleCloseTopic}
+          onDeleteTopic={onDeleteTopic}
+          hiddenActions={hiddenActions}
+          actionLabels={actionLabels}
+          actionIcons={actionIcons}
+          deletedMessageLabel={deletedMessageLabel}
+          stickerMessageLabel={stickerMessageLabel}
+          photoMessageLabel={photoMessageLabel}
+          videoMessageLabel={videoMessageLabel}
+          voiceRecordingMessageLabel={voiceRecordingMessageLabel}
+          fileMessageLabel={fileMessageLabel}
+          systemMessageTranslations={systemMessageTranslations}
+          signalMessageTranslations={signalMessageTranslations}
+        />
+      ))}
+    </VList>
+    {editingTopic && (
+      <TopicModal
+        isOpen={true}
+        onClose={() => setEditingTopic(null)}
+        topic={editingTopic}
+      />
+    )}
+  </>
+  );
+});
+TopicList.displayName = 'TopicList';

package/src/components/TopicModal.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import type { CreateTopicData, EditTopicData } from '@ermis-network/ermis-chat-sdk';
-import { Modal } from './Modal';
+import { Modal as DefaultModal } from './Modal';
 import { useChatClient } from '../hooks/useChatClient';
+import { useChatComponents } from '../context/ChatComponentsContext';
 import type { TopicModalProps } from '../types';
 
 const DEFAULT_TOPIC_ICONS = ['💬', '🔥', '🚀', '⭐', '💡', '🎉', '📌', '📁', '🎨', '💻', '📈', '🤝'];
@@ -24,6 +25,8 @@ export const TopicModal: React.FC<TopicModalProps> = React.memo(({
   savingButtonLabel = topic ? 'Saving...' : 'Creating...',
 }) => {
   const { activeChannel, client } = useChatClient();
+  const { ModalComponent } = useChatComponents();
+  const Modal = ModalComponent || DefaultModal;
   
   const originalName = (topic?.data?.name as string) || '';
   const originalImage = (topic?.data?.image as string) || '';

package/src/components/TypingIndicator.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { useTypingIndicator, type TypingUser } from '../hooks/useTypingIndicator';
 
 export type TypingIndicatorProps = {
-  /** Custom render function for the typing text */
+  /** Custom render function for the typing text (I18n) */
+  typingIndicatorLabel?: (users: TypingUser[]) => string;
+  /** Custom render function for the typing text (JSX) */
   renderText?: (users: TypingUser[]) => React.ReactNode;
 };
 
@@ -10,14 +12,21 @@ export type TypingIndicatorProps = {
  * Displays a "X is typing..." indicator below the message list.
  * Automatically subscribes to typing events via the useTypingIndicator hook.
  */
-export const TypingIndicator: React.FC<TypingIndicatorProps> = React.memo(({ renderText }) => {
+export const TypingIndicator: React.FC<TypingIndicatorProps> = React.memo(({ typingIndicatorLabel, renderText }) => {
   const { typingUsers } = useTypingIndicator();
 
   const isActive = typingUsers.length > 0;
 
-  const text = isActive
-    ? (renderText ? renderText(typingUsers) : formatTypingText(typingUsers))
-    : null;
+  let text: React.ReactNode = null;
+  if (isActive) {
+    if (renderText) {
+      text = renderText(typingUsers);
+    } else if (typingIndicatorLabel) {
+      text = typingIndicatorLabel(typingUsers);
+    } else {
+      text = formatTypingText(typingUsers);
+    }
+  }
 
   return (
     <div className={`ermis-typing-indicator${isActive ? ' ermis-typing-indicator--active' : ''}`}>

package/src/components/UserPicker.tsx

@@ -1,13 +1,16 @@
 import React, { useState, useEffect, useMemo, useCallback, useRef, useTransition } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
-import { VList, type VListHandle } from 'virtua';
+import { VList as _VList, type VListHandle } from 'virtua';
+const VList = _VList as any;
 import type {
   UserPickerProps,
   UserPickerItemProps,
   UserPickerSelectedBoxProps,
   UserPickerUser,
 } from '../types';
+import { isFriendChannel } from '../channelRoleUtils';
+import { removeAccents } from '../utils';
 
 /* ---------- Constants ---------- */
 const DEFAULT_PAGE_SIZE = 30;
@@ -113,6 +116,9 @@ DefaultSelectedBox.displayName = 'DefaultSelectedBox';
    UserPicker Component
    ========================================================== */
 
+// Global cache to persist users across UserPicker unmounts/remounts (e.g. during tab switch)
+const globalUsersCache: Record<string, { users: UserPickerUser[], page: number, hasMore: boolean }> = {};
+
 export const UserPicker: React.FC<UserPickerProps> = ({
   mode,
   onSelectionChange,
@@ -128,6 +134,7 @@ export const UserPicker: React.FC<UserPickerProps> = ({
   emptyText = 'No users found.',
   loadingMoreText = 'Loading more...',
   selectedEmptyLabel,
+  friendsOnly,
 }) => {
   const { client } = useChatClient();
   const currentUserId = client?.userID;
@@ -176,6 +183,55 @@ export const UserPicker: React.FC<UserPickerProps> = ({
     let active = true;
     const fetchUsers = async () => {
       if (!client) return;
+
+      const cacheKey = friendsOnly 
+        ? `${client.userID || 'anon'}-friends` 
+        : `${client.userID || 'anon'}-${pageSize}`;
+
+      if (globalUsersCache[cacheKey] && globalUsersCache[cacheKey].users.length > 0) {
+        const cached = globalUsersCache[cacheKey];
+        setAllUsers(cached.users);
+        setHasMore(cached.hasMore);
+        setPage(cached.page);
+        setLoading(false);
+        return;
+      }
+
+      if (friendsOnly) {
+        const friends: UserPickerUser[] = [];
+        const seenIds = new Set<string>();
+        
+        for (const channel of Object.values(client.activeChannels)) {
+          const members = channel.state?.members;
+          if (!members) continue;
+
+          for (const [memberId, member] of Object.entries(members)) {
+            if (memberId === client.userID) continue;
+            
+            if (isFriendChannel(channel, memberId, client.userID as string) && !seenIds.has(memberId)) {
+              if (member.user) {
+                friends.push(member.user as UserPickerUser);
+                seenIds.add(memberId);
+              }
+            }
+          }
+        }
+        
+        if (active) {
+          setAllUsers(friends);
+          setHasMore(false);
+          setPage(1);
+          setLoading(false);
+
+          globalUsersCache[cacheKey] = {
+            users: friends,
+            page: 1,
+            hasMore: false,
+          };
+        }
+        return;
+      }
+
       try {
         setLoading(true);
         const response = await client.queryUsers(String(pageSize), 1);
@@ -183,6 +239,12 @@ export const UserPicker: React.FC<UserPickerProps> = ({
           setAllUsers(response.data);
           setHasMore(response.data.length >= pageSize);
           setPage(1);
+
+          globalUsersCache[cacheKey] = {
+            users: response.data,
+            page: 1,
+            hasMore: response.data.length >= pageSize
+          };
         }
       } catch (err) {
         console.error('[UserPicker] Error fetching users:', err);
@@ -205,7 +267,18 @@ export const UserPicker: React.FC<UserPickerProps> = ({
         setAllUsers(prev => {
           const existingIds = new Set(prev.map(u => u.id));
           const newUsers = response.data.filter((u: UserPickerUser) => !existingIds.has(u.id));
-          return [...prev, ...newUsers];
+          const combined = [...prev, ...newUsers];
+
+          if (client) {
+            const cacheKey = `${client.userID || 'anon'}-${pageSize}`;
+            globalUsersCache[cacheKey] = {
+              users: combined,
+              page: nextPage,
+              hasMore: response.data.length >= pageSize
+            };
+          }
+
+          return combined;
         });
         setHasMore(response.data.length >= pageSize);
         setPage(nextPage);
@@ -219,19 +292,19 @@ export const UserPicker: React.FC<UserPickerProps> = ({
 
   /* ---------- 3. Local filter ---------- */
   const localFilteredUsers = useMemo(() => {
-    const term = search.toLowerCase().trim();
+    const term = removeAccents(search.toLowerCase().trim());
     if (!term) return allUsers;
     return allUsers.filter(u => {
-      const name = (u.name || '').toLowerCase();
-      const email = (u.email || '').toLowerCase();
-      const phone = (u.phone || '').toLowerCase();
+      const name = removeAccents((u.name || '').toLowerCase());
+      const email = removeAccents((u.email || '').toLowerCase());
+      const phone = removeAccents((u.phone || '').toLowerCase());
       return name.includes(term) || email.includes(term) || phone.includes(term);
     });
   }, [search, allUsers]);
 
   /* ---------- 4. Remote search fallback ---------- */
   useEffect(() => {
-    if (!search.trim() || localFilteredUsers.length > 0) {
+    if (!search.trim() || localFilteredUsers.length > 0 || friendsOnly) {
       setRemoteUsers([]);
       setIsSearching(false);
       return;
@@ -259,9 +332,13 @@ export const UserPicker: React.FC<UserPickerProps> = ({
   }, [search, localFilteredUsers.length, client]);
 
   /* ---------- 5. Derived display list ---------- */
-  const usersToDisplay = (search.trim() && localFilteredUsers.length === 0)
-    ? remoteUsers
-    : localFilteredUsers;
+  const usersToDisplay = useMemo(() => {
+    const list = (search.trim() && localFilteredUsers.length === 0)
+      ? remoteUsers
+      : localFilteredUsers;
+    return list.filter(u => !excludeSet.has(u.id));
+  }, [search, localFilteredUsers, remoteUsers, excludeSet]);
+
   const isListLoading = loading || isSearching || isPendingFilter;
 
   /* ---------- 6. Selection handlers ---------- */

package/src/components/VirtualMessageList.tsx

@@ -1,5 +1,8 @@
 import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
-import { VList, type VListHandle } from 'virtua';
+import { VList as _VList, type VListHandle } from 'virtua';
+
+// Workaround for React 19 JSX element type mismatch with virtua's VList
+const VList = _VList as any;
 import type { MessageLabel } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 import { useBannedState } from '../hooks/useBannedState';
@@ -110,6 +113,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   messageRenderers: customRenderers,
   loadMoreLimit = 25,
   DateSeparatorComponent = DefaultDateSeparator,
+  dateLocale,
   MessageItemComponent = MessageItem,
   SystemMessageItemComponent = SystemMessageItem,
   JumpToLatestButton = DefaultJumpToLatest,
@@ -144,15 +148,28 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   closedTopicReopenLabel = 'Reopen Topic',
   PendingInviteeNotificationComponent = DefaultPendingInviteeNotification,
   pendingInviteeLabel,
+  pinnedMessagesLabel,
+  seeAllLabel,
+  collapseLabel,
+  unpinLabel,
+  stickerLabel,
+  typingIndicatorLabel,
+  deletedMessageLabel = 'This message was deleted',
+  systemMessageTranslations,
+  signalMessageTranslations,
+  includeHiddenMessages = true,
+  onMentionClick,
+  onUserNameClick,
+  onAddReactionClick,
 }) => {
   const { client, messages, readState, activeChannel, setActiveChannel, jumpToMessageId, setJumpToMessageId } = useChatClient();
   const { isBanned } = useBannedState(activeChannel, client.userID);
   const { isBlocked } = useBlockedState(activeChannel, client.userID);
-  const { isPending } = usePendingState(activeChannel, client.userID);
-  
-  const isSkipped = client.userID 
-    ? isSkippedMember(activeChannel?.state?.members?.[client.userID]?.channel_role as string) || 
-      isSkippedMember(activeChannel?.state?.membership?.channel_role as string)
+  const { isPending, inviteUpdateCount } = usePendingState(activeChannel, client.userID);
+
+  const isSkipped = client.userID
+    ? isSkippedMember(activeChannel?.state?.members?.[client.userID]?.channel_role as string) ||
+    isSkippedMember(activeChannel?.state?.membership?.channel_role as string)
     : false;
 
   const isClosedTopic = activeChannel?.data?.is_closed_topic === true;
@@ -179,7 +196,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
       }
     }
     return null;
-  }, [activeChannel, currentUserId, isPending]);
+  }, [activeChannel, currentUserId, isPending, inviteUpdateCount]);
 
   // Ref to scope DOM queries (safe for multiple instances)
   const containerRef = useRef<HTMLDivElement>(null);
@@ -190,13 +207,51 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   const handleAcceptInvite = useCallback(async () => {
     if (!activeChannel) return;
     try {
-      const isPublicTeamOrMeeting = isPublicGroupChannel(activeChannel);
-      const action = isPublicTeamOrMeeting ? 'join' : 'accept';
+      let action: 'join' | 'accept' = 'accept';
+      if (isPublicGroupChannel(activeChannel)) {
+        const isMember = !!(currentUserId && activeChannel.state?.members?.[currentUserId]);
+        action = isMember ? 'accept' : 'join';
+      }
       await activeChannel.acceptInvite(action);
+
+      // Optimistically update local membership so React picks up the change immediately.
+      // The async _handleChannelEvent in the SDK races with client listeners,
+      // so the WS event alone is not reliable for updating React state in time.
+      if (activeChannel.state && currentUserId) {
+        const updatedMembership = {
+          ...activeChannel.state.membership,
+          channel_role: 'member',
+          user_id: currentUserId,
+        } as Record<string, unknown>;
+        activeChannel.state.membership = updatedMembership;
+
+        if (activeChannel.state.members?.[currentUserId]) {
+          activeChannel.state.members[currentUserId] = {
+            ...activeChannel.state.members[currentUserId],
+            channel_role: 'member',
+          };
+        }
+
+        // Dispatch synthetic event so all React listeners update
+        const clientObj = activeChannel.getClient();
+        const eventType = action === 'join' ? 'member.joined' : 'notification.invite_accepted';
+        clientObj.dispatchEvent({
+          type: eventType,
+          cid: activeChannel.cid,
+          channel_type: activeChannel.type,
+          channel_id: activeChannel.id,
+          channel: activeChannel.data,
+          member: updatedMembership,
+          user: clientObj.user,
+        } as any);
+      }
+
+      // Re-watch to get full fresh state from server
+      activeChannel.watch().catch(() => {});
     } catch (e: any) {
       console.error('Error accepting invite', e);
     }
-  }, [activeChannel]);
+  }, [activeChannel, currentUserId]);
 
   const handleRejectInvite = useCallback(async () => {
     if (!activeChannel) return;
@@ -281,6 +336,8 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
       loadingMoreRef.current = false;
       loadingNewerRef.current = false;
     }, [setHasMore, setHasNewer]),
+    includeHiddenMessages,
+    containerRef,
   });
 
   const hasOverlay = Boolean(isClosedTopic || isPending || isBanned || isBlocked || isSkipped);
@@ -336,7 +393,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
       const showDateSeparator =
         !prevMsg || getDateKey(message.created_at) !== getDateKey(prevMsg.created_at);
       const dateSeparator = showDateSeparator ? (
-        <DateSeparatorComponent label={formatDateLabel(message.created_at)} />
+        <DateSeparatorComponent label={formatDateLabel(message.created_at, dateLocale)} />
       ) : null;
 
       if (renderMessage) {
@@ -356,6 +413,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
               message={message}
               isOwnMessage={isOwnMessage}
               SystemRenderer={renderers.system}
+              systemMessageTranslations={systemMessageTranslations}
             />
           </div>
         );
@@ -363,12 +421,16 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
 
       // Message grouping
       const prevType = (prevMsg?.type || 'regular') as MessageLabel;
+      const prevValidReaders = prevMsg?.id && readByMap[prevMsg.id] ? readByMap[prevMsg.id].filter(r => r.id !== getMessageUserId(prevMsg)) : [];
+      const prevHasReaders = showReadReceipts && prevValidReaders.length > 0;
+      
       const isFirstInGroup =
         showDateSeparator ||
         !prevMsg ||
         prevType === 'system' ||
         prevType === 'signal' ||
-        getMessageUserId(prevMsg) !== getMessageUserId(message);
+        getMessageUserId(prevMsg) !== getMessageUserId(message) ||
+        prevHasReaders;
 
       const nextMsg = index < messages.length - 1 ? messages[index + 1] : null;
       const nextType = (nextMsg?.type || 'regular') as MessageLabel;
@@ -376,12 +438,16 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
         ? getDateKey(nextMsg.created_at) !== getDateKey(message.created_at)
         : false;
 
+      const validReaders = message.id && readByMap[message.id] ? readByMap[message.id].filter(r => r.id !== getMessageUserId(message)) : [];
+      const hasReaders = showReadReceipts && validReaders.length > 0;
+
       const isLastInGroup =
         !nextMsg ||
         nextShowDateSeparator ||
         nextType === 'system' ||
         nextType === 'signal' ||
-        getMessageUserId(nextMsg) !== getMessageUserId(message);
+        getMessageUserId(nextMsg) !== getMessageUserId(message) ||
+        hasReaders;
 
       const MessageRenderer = renderers[messageType] || renderers.regular;
 
@@ -401,11 +467,17 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
             QuotedMessagePreviewComponent={QuotedMessagePreviewComponent}
             MessageActionsBoxComponent={MessageActionsBoxComponent}
             MessageReactionsComponent={MessageReactionsComponent}
+            deletedMessageLabel={deletedMessageLabel}
+            systemMessageTranslations={systemMessageTranslations}
+            signalMessageTranslations={signalMessageTranslations}
+            onMentionClick={onMentionClick}
+            onUserNameClick={onUserNameClick}
+            onAddReactionClick={onAddReactionClick}
           />
           {/* Read receipts — full width, right-aligned */}
-          {showReadReceipts && (
+          {showReadReceipts && validReaders.length > 0 && (
             <ReadReceiptsComponent
-              readers={readByMap[message.id!] || []}
+              readers={validReaders}
               maxAvatars={readReceiptsMaxAvatars}
               AvatarComponent={AvatarComponent}
               TooltipComponent={ReadReceiptsTooltipComponent}
@@ -437,6 +509,10 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     ReadReceiptsComponent,
     ReadReceiptsTooltipComponent,
     readReceiptsMaxAvatars,
+    dateLocale,
+    onMentionClick,
+    onUserNameClick,
+    onAddReactionClick,
   ]);
 
   if (isBanned || isBlocked) {
@@ -499,7 +575,17 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
 
   return (
     <div ref={containerRef} className={`ermis-message-list${className ? ` ${className}` : ''}`}>
-      {showPinnedMessages && <PinnedMessagesComponent onClickMessage={scrollToMessage} AvatarComponent={AvatarComponent} />}
+      {showPinnedMessages && (
+        <PinnedMessagesComponent
+          onClickMessage={scrollToMessage}
+          AvatarComponent={AvatarComponent}
+          pinnedMessagesLabel={pinnedMessagesLabel}
+          seeAllLabel={seeAllLabel}
+          collapseLabel={collapseLabel}
+          unpinLabel={unpinLabel}
+          stickerLabel={stickerLabel}
+        />
+      )}
 
       {messages.length === 0 && (
         EmptyStateIndicator === DefaultEmpty
@@ -508,9 +594,9 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
       )}
 
       {pendingInviteeName && (
-        <PendingInviteeNotificationComponent 
-          inviteeName={pendingInviteeName} 
-          label={typeof pendingInviteeLabel === 'function' ? pendingInviteeLabel(pendingInviteeName) : pendingInviteeLabel} 
+        <PendingInviteeNotificationComponent
+          inviteeName={pendingInviteeName}
+          label={typeof pendingInviteeLabel === 'function' ? pendingInviteeLabel(pendingInviteeName) : pendingInviteeLabel}
         />
       )}
 
@@ -525,7 +611,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
       </VList>
 
       {/* Typing indicator */}
-      {showTypingIndicator && <TypingIndicatorComponent />}
+      {showTypingIndicator && <TypingIndicatorComponent typingIndicatorLabel={typingIndicatorLabel} />}
 
       {/* Jump to latest button */}
       {hasNewer && (