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

package/src/components/MessageRenderers.tsx

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

package/src/components/PendingOverlay.tsx

@@ -10,6 +10,10 @@ export type PendingOverlayProps = {
   rejectLabel: string;
   onAccept: () => void;
   onReject: () => void;
+  /** Label for the skip button (direct messaging channels) */
+  skipLabel?: string;
+  /** Handler for the skip action (direct messaging channels) */
+  onSkip?: () => void;
   AvatarComponent: React.ComponentType<AvatarProps>;
 };
 
@@ -22,6 +26,8 @@ export const PendingOverlay: React.FC<PendingOverlayProps> = React.memo(({
   rejectLabel,
   onAccept,
   onReject,
+  skipLabel,
+  onSkip,
   AvatarComponent,
 }) => (
   <div className="ermis-message-list__pending-overlay">
@@ -31,7 +37,11 @@ export const PendingOverlay: React.FC<PendingOverlayProps> = React.memo(({
       <div className="ermis-message-list__pending-channel-name">{channelName}</div>
       <span className="ermis-message-list__pending-overlay-subtitle">{subtitle}</span>
       <div className="ermis-message-list__pending-actions">
-        <button className="ermis-message-list__reject-btn" onClick={onReject}>{rejectLabel}</button>
+        {onSkip ? (
+          <button className="ermis-message-list__reject-btn" onClick={onSkip}>{skipLabel || 'Skip'}</button>
+        ) : (
+          <button className="ermis-message-list__reject-btn" onClick={onReject}>{rejectLabel}</button>
+        )}
         <button className="ermis-message-list__accept-btn" onClick={onAccept}>{acceptLabel}</button>
       </div>
     </div>

package/src/components/PinnedMessages.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
+import { isStickerMessage } from '../messageTypeUtils';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import type { PinnedMessageItemProps, PinnedMessagesProps } from '../types';
@@ -25,7 +26,7 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
   }, [activeChannel?.state]);
 
   let previewText = message.text || '';
-  const isSticker = message.type === 'sticker';
+  const isSticker = isStickerMessage(message);
 
   if (!previewText && hasAttachments) {
     const firstAttach = message.attachments![0];

package/src/components/ReplyPreview.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
+import { isStickerMessage } from '../messageTypeUtils';
 import type { ReplyPreviewProps } from '../types';
 
 const MAX_PREVIEW_LENGTH = 120;
@@ -53,7 +54,7 @@ export const ReplyPreview: React.FC<ReplyPreviewProps> = React.memo(({
   const formattedText = useMemo(() => replaceMentionsForPreview(rawText, message, userMap), [rawText, message, userMap]);
   const hasText = !!formattedText.trim();
   const hasAttachments = message.attachments && message.attachments.length > 0;
-  const isSticker = message.type === 'sticker';
+  const isSticker = isStickerMessage(message);
   const attachmentSummary = hasAttachments ? getAttachmentSummary(message.attachments!) : '';
 
   // Build preview content

package/src/components/SkippedOverlay.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { AvatarProps } from '../types';
+
+export type SkippedOverlayProps = {
+  channelImage?: string;
+  channelName?: string;
+  title: string;
+  subtitle: string;
+  acceptLabel: string;
+  onAccept: () => void;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+};
+
+export const SkippedOverlay: React.FC<SkippedOverlayProps> = React.memo(({
+  channelImage,
+  channelName,
+  title,
+  subtitle,
+  acceptLabel,
+  onAccept,
+  AvatarComponent,
+}) => (
+  <div className="ermis-message-list__pending-overlay">
+    <div className="ermis-message-list__pending-card">
+      <AvatarComponent image={channelImage} name={channelName} size={64} className="ermis-message-list__pending-avatar" />
+      <span className="ermis-message-list__pending-overlay-title">{title}</span>
+      <div className="ermis-message-list__pending-channel-name">{channelName}</div>
+      <span className="ermis-message-list__pending-overlay-subtitle">{subtitle}</span>
+      <div className="ermis-message-list__pending-actions">
+        <button className="ermis-message-list__accept-btn" onClick={onAccept}>{acceptLabel}</button>
+      </div>
+    </div>
+  </div>
+));
+
+SkippedOverlay.displayName = 'SkippedOverlay';

package/src/components/UserPicker.tsx

@@ -256,7 +256,7 @@ export const UserPicker: React.FC<UserPickerProps> = ({
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [search, localFilteredUsers.length, client, excludeSet]);
+  }, [search, localFilteredUsers.length, client]);
 
   /* ---------- 5. Derived display list ---------- */
   const usersToDisplay = (search.trim() && localFilteredUsers.length === 0)

package/src/components/VirtualMessageList.tsx

@@ -12,6 +12,8 @@ import { useChannelProfile } from '../hooks/useChannelData';
 import { Avatar } from './Avatar';
 import { MessageItem } from './MessageItem';
 import { SystemMessageItem } from './MessageItem';
+import { isPublicGroupChannel, isDirectChannel } from '../channelTypeUtils';
+import { canManageChannel, isSkippedMember, isPendingMember } from '../channelRoleUtils';
 import {
   defaultMessageRenderers,
   type MessageBubbleProps,
@@ -22,6 +24,7 @@ import { PinnedMessages } from './PinnedMessages';
 import { ReadReceipts } from './ReadReceipts';
 import { TypingIndicator } from './TypingIndicator';
 import { PendingOverlay } from './PendingOverlay';
+import { SkippedOverlay } from './SkippedOverlay';
 import { BannedOverlay } from './BannedOverlay';
 import { ClosedTopicOverlay } from './ClosedTopicOverlay';
 import type { MessageListProps } from '../types';
@@ -78,6 +81,23 @@ const DefaultBubble: React.FC<MessageBubbleProps> = React.memo(({
 ));
 (DefaultBubble as any).displayName = 'DefaultBubble';
 
+const DefaultPendingInviteeNotification = React.memo(({ inviteeName, label }: { inviteeName?: string, label?: string }) => {
+  const defaultLabel = inviteeName ? `${inviteeName} needs to accept your invitation to see the messages you've sent` : 'The invited user needs to accept your invitation to see the messages you\'ve sent';
+  return (
+    <div className="ermis-message-list__pending-invitee">
+      <div className="ermis-message-list__pending-invitee-content">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="8" x2="12" y2="12" />
+          <line x1="12" y1="16" x2="12.01" y2="16" />
+        </svg>
+        <span>{label || defaultLabel}</span>
+      </div>
+    </div>
+  );
+});
+DefaultPendingInviteeNotification.displayName = 'DefaultPendingInviteeNotification';
+
 /* ----------------------------------------------------------
    VirtualMessageList
    ---------------------------------------------------------- */
@@ -115,14 +135,26 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   pendingOverlaySubtitle = 'Accept the invitation to view messages and interact',
   pendingAcceptLabel = 'Accept',
   pendingRejectLabel = 'Reject',
+  pendingSkipLabel = 'Skip',
+  skippedOverlayTitle = 'You skipped this conversation',
+  skippedOverlaySubtitle = 'Accept the invitation to start chatting',
+  skippedAcceptLabel = 'Accept',
   closedTopicOverlayTitle = 'This topic has been closed',
   closedTopicOverlaySubtitle = 'You can no longer read or send messages in this topic.',
   closedTopicReopenLabel = 'Reopen Topic',
+  PendingInviteeNotificationComponent = DefaultPendingInviteeNotification,
+  pendingInviteeLabel,
 }) => {
-  const { client, messages, readState, activeChannel, jumpToMessageId, setJumpToMessageId } = useChatClient();
+  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)
+    : false;
+
   const isClosedTopic = activeChannel?.data?.is_closed_topic === true;
   const parentCid = activeChannel?.data?.parent_cid as string | undefined;
   const parentChannel = parentCid && client ? client.activeChannels[parentCid] : undefined;
@@ -134,7 +166,20 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   messagesRef.current = messages;
   const currentUserId = client.userID;
   const currentUserRole = currentUserId ? activeChannel?.state?.members?.[currentUserId]?.channel_role : undefined;
-  const canManageTopic = currentUserRole === 'owner' || currentUserRole === 'moder';
+  const canManageTopic = canManageChannel(currentUserRole);
+
+  const pendingInviteeName = useMemo(() => {
+    if (!activeChannel || !currentUserId) return null;
+    if (!isDirectChannel(activeChannel)) return null;
+    const membersList = Object.values(activeChannel.state?.members || {});
+    if (membersList.length === 2 && !isPending) {
+      const otherUser = membersList.find(m => m.user_id !== currentUserId);
+      if (otherUser && isPendingMember(otherUser.channel_role)) {
+        return otherUser.user?.name || otherUser.user?.id || 'User';
+      }
+    }
+    return null;
+  }, [activeChannel, currentUserId, isPending]);
 
   // Ref to scope DOM queries (safe for multiple instances)
   const containerRef = useRef<HTMLDivElement>(null);
@@ -145,7 +190,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   const handleAcceptInvite = useCallback(async () => {
     if (!activeChannel) return;
     try {
-      const isPublicTeamOrMeeting = (activeChannel.type === 'team' || activeChannel.type === 'meeting') && Boolean(activeChannel.data?.public);
+      const isPublicTeamOrMeeting = isPublicGroupChannel(activeChannel);
       const action = isPublicTeamOrMeeting ? 'join' : 'accept';
       await activeChannel.acceptInvite(action);
     } catch (e: any) {
@@ -153,10 +198,25 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     }
   }, [activeChannel]);
 
-  const handleRejectInvite = useCallback(() => {
+  const handleRejectInvite = useCallback(async () => {
     if (!activeChannel) return;
-    activeChannel.rejectInvite().catch((e: any) => console.error('Error rejecting invite', e));
-  }, [activeChannel]);
+    try {
+      await activeChannel.rejectInvite();
+      if (setActiveChannel) setActiveChannel(null);
+    } catch (e: any) {
+      console.error('Error rejecting invite', e);
+    }
+  }, [activeChannel, setActiveChannel]);
+
+  const handleSkipInvite = useCallback(async () => {
+    if (!activeChannel) return;
+    try {
+      await activeChannel.skipInvite();
+      if (setActiveChannel) setActiveChannel(null);
+    } catch (e: any) {
+      console.error('Error skipping invite', e);
+    }
+  }, [activeChannel, setActiveChannel]);
 
   const scrollToBottom = useCallback((smooth = false, attempts = 0) => {
     const handle = vlistRef.current;
@@ -223,7 +283,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     }, [setHasMore, setHasNewer]),
   });
 
-  const hasOverlay = Boolean(isClosedTopic || isPending || isBanned || isBlocked);
+  const hasOverlay = Boolean(isClosedTopic || isPending || isBanned || isBlocked || isSkipped);
   const prevOverlayRef = useRef(hasOverlay);
 
   useEffect(() => {
@@ -393,6 +453,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   }
 
   if (isPending) {
+    const isDirect = activeChannel ? isDirectChannel(activeChannel) : false;
     return (
       <PendingOverlay
         channelImage={channelImage}
@@ -403,6 +464,22 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
         acceptLabel={pendingAcceptLabel}
         onReject={handleRejectInvite}
         onAccept={handleAcceptInvite}
+        skipLabel={isDirect ? pendingSkipLabel : undefined}
+        onSkip={isDirect ? handleSkipInvite : undefined}
+        AvatarComponent={AvatarComponent}
+      />
+    );
+  }
+
+  if (isSkipped) {
+    return (
+      <SkippedOverlay
+        channelImage={channelImage}
+        channelName={channelName}
+        title={skippedOverlayTitle}
+        subtitle={skippedOverlaySubtitle}
+        acceptLabel={skippedAcceptLabel}
+        onAccept={handleAcceptInvite}
         AvatarComponent={AvatarComponent}
       />
     );
@@ -430,6 +507,13 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
           : <EmptyStateIndicator />
       )}
 
+      {pendingInviteeName && (
+        <PendingInviteeNotificationComponent 
+          inviteeName={pendingInviteeName} 
+          label={typeof pendingInviteeLabel === 'function' ? pendingInviteeLabel(pendingInviteeName) : pendingInviteeLabel} 
+        />
+      )}
+
       <VList
         key={activeChannel?.cid || 'empty'}
         ref={vlistRef}

package/src/hooks/useBlockedState.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { isDirectChannel } from '../channelTypeUtils';
 
 /**
  * Hook that tracks whether the current user has blocked the other party
@@ -17,12 +18,12 @@ import type { Channel } from '@ermis-network/ermis-chat-sdk';
  */
 export function useBlockedState(channel: Channel | null | undefined, currentUserId?: string) {
   const [isBlocked, setIsBlocked] = useState<boolean>(() => {
-    if (channel?.type !== 'messaging') return false;
+    if (!isDirectChannel(channel)) return false;
     return Boolean(channel?.state?.membership?.blocked);
   });
 
   useEffect(() => {
-    if (!channel || channel.type !== 'messaging') {
+    if (!channel || !isDirectChannel(channel)) {
       setIsBlocked(false);
       return;
     }