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

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 React, { useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
+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';
@@ -18,6 +21,7 @@ import {
   defaultMessageRenderers,
   type MessageBubbleProps,
 } from './MessageRenderers';
+import { isStickerMessage } from '../messageTypeUtils';
 import { getDateKey, formatDateLabel, getMessageUserId, formatReadTimestamp } from '../utils';
 import { QuotedMessagePreview } from './QuotedMessagePreview';
 import { PinnedMessages } from './PinnedMessages';
@@ -41,6 +45,20 @@ const DefaultDateSeparator: React.FC<{ label: string }> = React.memo(({ label })
 ));
 (DefaultDateSeparator as any).displayName = 'DefaultDateSeparator';
 
+/** Time gap threshold in ms: messages more than 5 minutes apart get a time separator */
+const TIME_GAP_THRESHOLD_MS = 5 * 60 * 1000;
+
+function getTimestamp(date: Date | string | undefined): number {
+  if (!date) return 0;
+  return date instanceof Date ? date.getTime() : new Date(date).getTime();
+}
+
+function formatTimeSeparator(date: Date | string | undefined): string {
+  if (!date) return '';
+  const d = date instanceof Date ? date : new Date(date);
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
 const DefaultJumpToLatest = React.memo(({ onClick, label = '↓ Jump to latest' }: any) => (
   <button className="ermis-message-list__jump-latest" onClick={onClick}>
     {label}
@@ -110,6 +128,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   messageRenderers: customRenderers,
   loadMoreLimit = 25,
   DateSeparatorComponent = DefaultDateSeparator,
+  dateLocale,
   MessageItemComponent = MessageItem,
   SystemMessageItemComponent = SystemMessageItem,
   JumpToLatestButton = DefaultJumpToLatest,
@@ -144,15 +163,34 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   closedTopicReopenLabel = 'Reopen Topic',
   PendingInviteeNotificationComponent = DefaultPendingInviteeNotification,
   pendingInviteeLabel,
+  pinnedMessagesLabel,
+  seeAllLabel,
+  collapseLabel,
+  unpinLabel,
+  stickerLabel,
+  attachmentLabel = 'Attachment',
+  unavailableMessageLabel = 'Message unavailable',
+  encryptedMessageLabel,
+  encryptedMessageFailedLabel,
+  encryptedMessageDecryptingLabel,
+  encryptedMessageUnavailableLabel,
+  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 +217,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 +228,49 @@ 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);
+      }
+
     } catch (e: any) {
       console.error('Error accepting invite', e);
     }
-  }, [activeChannel]);
+  }, [activeChannel, currentUserId]);
 
   const handleRejectInvite = useCallback(async () => {
     if (!activeChannel) return;
@@ -218,11 +292,13 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     }
   }, [activeChannel, setActiveChannel]);
 
+  const elementsCountRef = useRef(0);
+
   const scrollToBottom = useCallback((smooth = false, attempts = 0) => {
     const handle = vlistRef.current;
     if (!handle) return;
 
-    const count = messagesRef.current.length;
+    const count = elementsCountRef.current;
     if (count === 0) return;
 
     // Ensure virtua has measured the viewport via ResizeObserver.
@@ -232,11 +308,26 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
       return;
     }
 
+    if (!smooth && handle.scrollSize > handle.viewportSize) {
+      handle.scrollTo(Math.max(0, handle.scrollSize - handle.viewportSize));
+    }
     handle.scrollToIndex(count - 1, { align: 'end', smooth });
   }, []);
 
   // Shared guard: skip scroll-triggered loads during jump transitions
   const jumpingRef = useRef(false);
+  const scrollLoadLockRef = useRef(false);
+  const scrollLoadLockTokenRef = useRef(0);
+  const holdScrollLoadLock = useCallback((duration = 750) => {
+    const token = scrollLoadLockTokenRef.current + 1;
+    scrollLoadLockTokenRef.current = token;
+    scrollLoadLockRef.current = true;
+    setTimeout(() => {
+      if (scrollLoadLockTokenRef.current === token) {
+        scrollLoadLockRef.current = false;
+      }
+    }, duration);
+  }, []);
 
   /* ---------- Hooks ---------- */
   const {
@@ -250,9 +341,23 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     vlistRef,
     messagesRef,
     jumpingRef,
+    scrollLoadLockRef,
     loadMoreLimit,
   });
 
+  const isNearBottom = useCallback(() => {
+    const handle = vlistRef.current;
+    if (!handle) return isAtBottomRef.current;
+
+    const { scrollOffset, scrollSize, viewportSize } = handle;
+    if (!Number.isFinite(scrollOffset) || !Number.isFinite(scrollSize) || !Number.isFinite(viewportSize)) {
+      return isAtBottomRef.current;
+    }
+    if (scrollSize <= viewportSize || viewportSize <= 0) return true;
+
+    return scrollSize - (scrollOffset + viewportSize) <= 160;
+  }, [isAtBottomRef]);
+
   const { highlightedId, scrollToMessage, jumpToLatest } = useScrollToMessage({
     vlistRef,
     messagesRef,
@@ -273,6 +378,8 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
 
   useChannelMessages({
     scrollToBottom,
+    isNearBottom,
+    holdScrollLoadLock,
     jumpingRef,
     isAtBottomRef,
     onChannelSwitch: useCallback(() => {
@@ -281,8 +388,38 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
       loadingMoreRef.current = false;
       loadingNewerRef.current = false;
     }, [setHasMore, setHasNewer]),
+    includeHiddenMessages,
+    containerRef,
   });
 
+  const lastAutoScrollKeyRef = useRef<string | null>(null);
+
+  useLayoutEffect(() => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage?.id || !currentUserId) return;
+
+    const key = `${activeChannel?.cid || ''}:${lastMessage.id}`;
+    if (lastAutoScrollKeyRef.current === key) return;
+
+    const isOwnLastMessage =
+      lastMessage.user_id === currentUserId || lastMessage.user?.id === currentUserId;
+    if (!isOwnLastMessage && !isAtBottomRef.current && !isNearBottom()) return;
+    if (!isOwnLastMessage && jumpingRef.current) return;
+    if (loadingMoreRef.current || loadingNewerRef.current) return;
+
+    lastAutoScrollKeyRef.current = key;
+    isAtBottomRef.current = true;
+    holdScrollLoadLock(750);
+
+    scrollToBottom(false);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => scrollToBottom(false));
+    });
+    setTimeout(() => scrollToBottom(false), 80);
+    setTimeout(() => scrollToBottom(false), 180);
+    setTimeout(() => scrollToBottom(false), 360);
+  }, [activeChannel?.cid, currentUserId, messages, scrollToBottom, isNearBottom, holdScrollLoadLock]);
+
   const hasOverlay = Boolean(isClosedTopic || isPending || isBanned || isBlocked || isSkipped);
   const prevOverlayRef = useRef(hasOverlay);
 
@@ -326,97 +463,245 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
 
   /* ---------- Memoized message elements ---------- */
   const messageElements = useMemo(() => {
-    return messages.map((message, index) => {
+    const elements: React.ReactNode[] = [];
+
+    // Pre-compute per-message data
+    type MsgEntry = {
+      message: typeof messages[0];
+      index: number;
+      isOwnMessage: boolean;
+      messageType: MessageLabel;
+      showDateSeparator: boolean;
+      isFirstInGroup: boolean;
+      isLastInGroup: boolean;
+      validReaders: Array<{ id: string; name?: string; avatar?: string; last_read?: Date | string }>;
+      hasReaders: boolean;
+    };
+    const entries: MsgEntry[] = messages.map((message, index) => {
       const isOwnMessage =
         message.user_id === currentUserId || message.user?.id === currentUserId;
-      const messageType = (message.type || 'regular') as MessageLabel;
+      const messageType = (
+        isStickerMessage(message) ? 'sticker' : (message.type || 'regular')
+      ) as MessageLabel;
 
       // Date separator
       const prevMsg = index > 0 ? messages[index - 1] : null;
       const showDateSeparator =
         !prevMsg || getDateKey(message.created_at) !== getDateKey(prevMsg.created_at);
-      const dateSeparator = showDateSeparator ? (
-        <DateSeparatorComponent label={formatDateLabel(message.created_at)} />
-      ) : null;
-
-      if (renderMessage) {
-        return (
-          <div key={message.id || `msg-${index}`}>
-            {dateSeparator}
-            <div>{renderMessage(message, isOwnMessage)}</div>
-          </div>
-        );
-      }
-
-      if (messageType === 'system') {
-        return (
-          <div key={message.id || `msg-${index}`}>
-            {dateSeparator}
-            <SystemMessageItemComponent
-              message={message}
-              isOwnMessage={isOwnMessage}
-              SystemRenderer={renderers.system}
-            />
-          </div>
-        );
-      }
-
-      // Message grouping
       const prevType = (prevMsg?.type || 'regular') as MessageLabel;
+      const prevTimeGap = prevMsg
+        ? Math.abs(getTimestamp(message.created_at) - getTimestamp(prevMsg.created_at)) > TIME_GAP_THRESHOLD_MS
+        : false;
       const isFirstInGroup =
         showDateSeparator ||
         !prevMsg ||
         prevType === 'system' ||
         prevType === 'signal' ||
-        getMessageUserId(prevMsg) !== getMessageUserId(message);
-
+        getMessageUserId(prevMsg) !== getMessageUserId(message) ||
+        prevTimeGap;
       const nextMsg = index < messages.length - 1 ? messages[index + 1] : null;
       const nextType = (nextMsg?.type || 'regular') as MessageLabel;
       const nextShowDateSeparator = nextMsg
         ? 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 nextTimeGap = nextMsg
+        ? Math.abs(getTimestamp(nextMsg.created_at) - getTimestamp(message.created_at)) > TIME_GAP_THRESHOLD_MS
+        : false;
       const isLastInGroup =
         !nextMsg ||
         nextShowDateSeparator ||
         nextType === 'system' ||
         nextType === 'signal' ||
-        getMessageUserId(nextMsg) !== getMessageUserId(message);
-
-      const MessageRenderer = renderers[messageType] || renderers.regular;
-
-      return (
-        <div key={message.id || `msg-${index}`}>
-          {dateSeparator}
-          <MessageItemComponent
-            message={message}
-            isOwnMessage={isOwnMessage}
-            isFirstInGroup={isFirstInGroup}
-            isLastInGroup={isLastInGroup}
-            isHighlighted={highlightedId === message.id}
-            AvatarComponent={AvatarComponent}
-            MessageBubble={MessageBubble}
-            MessageRenderer={MessageRenderer}
-            onClickQuote={scrollToMessage}
-            QuotedMessagePreviewComponent={QuotedMessagePreviewComponent}
-            MessageActionsBoxComponent={MessageActionsBoxComponent}
-            MessageReactionsComponent={MessageReactionsComponent}
-          />
-          {/* Read receipts — full width, right-aligned */}
-          {showReadReceipts && (
-            <ReadReceiptsComponent
-              readers={readByMap[message.id!] || []}
-              maxAvatars={readReceiptsMaxAvatars}
-              AvatarComponent={AvatarComponent}
-              TooltipComponent={ReadReceiptsTooltipComponent}
-              isOwnMessage={isOwnMessage}
-              isLastInGroup={isLastInGroup}
-              status={message.status}
+        getMessageUserId(nextMsg) !== getMessageUserId(message) ||
+        nextTimeGap;
+      return { message, index, isOwnMessage, messageType, showDateSeparator, isFirstInGroup, isLastInGroup, validReaders, hasReaders };
+    });
+
+    // Build groups: consecutive regular messages from same user
+    let i = 0;
+    while (i < entries.length) {
+      const entry = entries[i];
+
+      // Date separator before any message
+      if (entry.showDateSeparator) {
+        elements.push(
+          <div key={`date-${getDateKey(entry.message.created_at)}`}>
+            <DateSeparatorComponent label={formatDateLabel(entry.message.created_at, dateLocale)} />
+          </div>
+        );
+      }
+
+      // Custom renderMessage
+      if (renderMessage) {
+        elements.push(
+          <div key={entry.message.id || `msg-${entry.index}`}>
+            <div>{renderMessage(entry.message, entry.isOwnMessage)}</div>
+          </div>
+        );
+        i++;
+        continue;
+      }
+
+      // System messages — standalone
+      if (entry.messageType === 'system') {
+        elements.push(
+          <div key={entry.message.id || `msg-${entry.index}`}>
+            <SystemMessageItemComponent
+              message={entry.message}
+              isOwnMessage={entry.isOwnMessage}
+              SystemRenderer={renderers.system}
+              systemMessageTranslations={systemMessageTranslations}
             />
-          )}
+          </div>
+        );
+        i++;
+        continue;
+      }
+
+      // Collect consecutive regular/signal messages from the same user into a group
+      // Break group on: different user, system message, date separator, or time gap > 5min
+      const groupEntries: MsgEntry[] = [entry];
+      let j = i + 1;
+      while (j < entries.length) {
+        const nextEntry = entries[j];
+        const prevEntry = entries[j - 1];
+        const timeGap = Math.abs(
+          getTimestamp(nextEntry.message.created_at) - getTimestamp(prevEntry.message.created_at)
+        );
+        // Break group if: different user, system message, date separator, or time gap
+        if (
+          nextEntry.showDateSeparator ||
+          nextEntry.messageType === 'system' ||
+          getMessageUserId(nextEntry.message) !== getMessageUserId(entry.message) ||
+          timeGap > TIME_GAP_THRESHOLD_MS
+        ) {
+          break;
+        }
+        groupEntries.push(nextEntry);
+        j++;
+      }
+
+      const isOwn = entry.isOwnMessage;
+      const userName = entry.message.user?.name || entry.message.user_id;
+      const userAvatar = entry.message.user?.avatar;
+      const groupKey = `group-${entry.message.id || `g-${entry.index}`}`;
+
+      // Check if we need a time separator BEFORE this group
+      // (when previous group was from same user but time gap split them)
+      if (i > 0) {
+        const prevEntry = entries[i - 1];
+        const timeGap = Math.abs(
+          getTimestamp(entry.message.created_at) - getTimestamp(prevEntry.message.created_at)
+        );
+        if (
+          !entry.showDateSeparator &&
+          prevEntry.messageType !== 'system' &&
+          getMessageUserId(prevEntry.message) === getMessageUserId(entry.message) &&
+          timeGap > TIME_GAP_THRESHOLD_MS
+        ) {
+          elements.push(
+            <div key={`timesep-${entry.message.id}`}>
+              <div className="ermis-message-list__time-separator">
+                <span className="ermis-message-list__time-separator-label">
+                  {formatTimeSeparator(entry.message.created_at)}
+                </span>
+              </div>
+            </div>
+          );
+        }
+      }
+
+      // Render group wrapper with sticky avatar
+      elements.push(
+        <div key={groupKey}>
+          <div className={`ermis-message-group ${isOwn ? 'ermis-message-group--own' : 'ermis-message-group--other'}`}>
+            {/* Avatar column — sticky for scroll tracking */}
+            {!isOwn && (
+              <div className="ermis-message-group__avatar-col">
+                <AvatarComponent image={userAvatar} name={userName} size={36} />
+              </div>
+            )}
+            {/* Messages column */}
+            <div className="ermis-message-group__messages-col">
+              {groupEntries.map((ge) => {
+                const MessageRenderer = renderers[ge.messageType] || renderers.regular;
+                return (
+                  <React.Fragment key={ge.message.id || `msg-${ge.index}`}>
+                    {/* Date separators within group (if needed for mid-group entries) */}
+                    {ge !== entry && ge.showDateSeparator && (
+                      <DateSeparatorComponent label={formatDateLabel(ge.message.created_at, dateLocale)} />
+                    )}
+                    <MessageItemComponent
+                      message={ge.message}
+                      isOwnMessage={ge.isOwnMessage}
+                      isFirstInGroup={ge.isFirstInGroup}
+                      isLastInGroup={ge.isLastInGroup}
+                      isHighlighted={highlightedId === ge.message.id}
+                      AvatarComponent={AvatarComponent}
+                      MessageBubble={MessageBubble}
+                      MessageRenderer={MessageRenderer}
+                      onClickQuote={scrollToMessage}
+                      QuotedMessagePreviewComponent={QuotedMessagePreviewComponent}
+                      MessageActionsBoxComponent={MessageActionsBoxComponent}
+                      MessageReactionsComponent={MessageReactionsComponent}
+                      deletedMessageLabel={deletedMessageLabel}
+                      attachmentLabel={attachmentLabel}
+                      unavailableMessageLabel={unavailableMessageLabel}
+                      stickerLabel={stickerLabel}
+                      encryptedMessageLabel={encryptedMessageLabel}
+                      encryptedMessageFailedLabel={encryptedMessageFailedLabel}
+                      encryptedMessageDecryptingLabel={encryptedMessageDecryptingLabel}
+                      systemMessageTranslations={systemMessageTranslations}
+                      signalMessageTranslations={signalMessageTranslations}
+                      onMentionClick={onMentionClick}
+                      onUserNameClick={onUserNameClick}
+                      onAddReactionClick={onAddReactionClick}
+                      hideAvatar
+                    />
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          </div>
+          {/* Read receipts — consolidated: merge all readers in this group into one row */}
+          {(() => {
+            if (!showReadReceipts) return null;
+            const allReaders: Array<{ id: string; name?: string; avatar?: string; last_read?: Date | string }> = [];
+            const seen = new Set<string>();
+            for (const ge of groupEntries) {
+              for (const r of ge.validReaders) {
+                if (!seen.has(r.id)) {
+                  seen.add(r.id);
+                  allReaders.push(r);
+                }
+              }
+            }
+            if (allReaders.length === 0) return null;
+            const lastEntry = groupEntries[groupEntries.length - 1];
+            return (
+              <ReadReceiptsComponent
+                key={`receipt-${lastEntry.message.id}`}
+                readers={allReaders}
+                maxAvatars={readReceiptsMaxAvatars}
+                AvatarComponent={AvatarComponent}
+                TooltipComponent={ReadReceiptsTooltipComponent}
+                isOwnMessage={lastEntry.isOwnMessage}
+                isLastInGroup={lastEntry.isLastInGroup}
+                status={lastEntry.message.status}
+              />
+            );
+          })()}
         </div>
       );
-    });
+
+      i = j;
+    }
+
+
+    elementsCountRef.current = elements.length;
+    return elements;
   }, [
     messages,
     currentUserId,
@@ -437,6 +722,13 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     ReadReceiptsComponent,
     ReadReceiptsTooltipComponent,
     readReceiptsMaxAvatars,
+    dateLocale,
+    onMentionClick,
+    onUserNameClick,
+    onAddReactionClick,
+    encryptedMessageLabel,
+    encryptedMessageFailedLabel,
+    encryptedMessageDecryptingLabel,
   ]);
 
   if (isBanned || isBlocked) {
@@ -498,42 +790,56 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   }
 
   return (
-    <div ref={containerRef} className={`ermis-message-list${className ? ` ${className}` : ''}`}>
-      {showPinnedMessages && <PinnedMessagesComponent onClickMessage={scrollToMessage} AvatarComponent={AvatarComponent} />}
-
-      {messages.length === 0 && (
-        EmptyStateIndicator === DefaultEmpty
-          ? <DefaultEmpty title={emptyTitle} subtitle={emptySubtitle} />
-          : <EmptyStateIndicator />
-      )}
-
-      {pendingInviteeName && (
-        <PendingInviteeNotificationComponent 
-          inviteeName={pendingInviteeName} 
-          label={typeof pendingInviteeLabel === 'function' ? pendingInviteeLabel(pendingInviteeName) : pendingInviteeLabel} 
-        />
-      )}
-
-      <VList
-        key={activeChannel?.cid || 'empty'}
-        ref={vlistRef}
-        shift={shiftMode}
-        onScroll={handleScroll}
-        className="ermis-message-list__vlist"
-      >
-        {messageElements}
-      </VList>
-
-      {/* Typing indicator */}
-      {showTypingIndicator && <TypingIndicatorComponent />}
-
-      {/* Jump to latest button */}
-      {hasNewer && (
-        JumpToLatestButton === DefaultJumpToLatest
-          ? <DefaultJumpToLatest onClick={jumpToLatest} label={jumpToLatestLabel} />
-          : <JumpToLatestButton onClick={jumpToLatest} />
-      )}
-    </div>
+    <>
+      <div ref={containerRef} className={`ermis-message-list${className ? ` ${className}` : ''}`}>
+        {showPinnedMessages && (
+          <PinnedMessagesComponent
+            onClickMessage={scrollToMessage}
+            AvatarComponent={AvatarComponent}
+            pinnedMessagesLabel={pinnedMessagesLabel}
+            seeAllLabel={seeAllLabel}
+            collapseLabel={collapseLabel}
+            unpinLabel={unpinLabel}
+            stickerLabel={stickerLabel}
+            attachmentLabel={attachmentLabel}
+            unavailableMessageLabel={unavailableMessageLabel}
+          />
+        )}
+
+        {messages.length === 0 && (
+          EmptyStateIndicator === DefaultEmpty
+            ? <DefaultEmpty title={emptyTitle} subtitle={emptySubtitle} />
+            : <EmptyStateIndicator />
+        )}
+
+        {pendingInviteeName && (
+          <PendingInviteeNotificationComponent
+            inviteeName={pendingInviteeName}
+            label={typeof pendingInviteeLabel === 'function' ? pendingInviteeLabel(pendingInviteeName) : pendingInviteeLabel}
+          />
+        )}
+
+        <VList
+          key={activeChannel?.cid || 'empty'}
+          ref={vlistRef}
+          shift={shiftMode}
+          onScroll={handleScroll}
+          className="ermis-message-list__vlist"
+        >
+          {messageElements}
+        </VList>
+
+        {/* Jump to latest button */}
+        {hasNewer && (
+          JumpToLatestButton === DefaultJumpToLatest
+            ? <DefaultJumpToLatest onClick={jumpToLatest} label={jumpToLatestLabel} />
+            : <JumpToLatestButton onClick={jumpToLatest} />
+        )}
+      </div>
+
+      {/* Typing indicator — outside message list, flows between messages and input */}
+      {showTypingIndicator && <TypingIndicatorComponent typingIndicatorLabel={typingIndicatorLabel} />}
+    </>
   );
 });