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

package/src/components/ClosedTopicOverlay.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export type ClosedTopicOverlayProps = {
+  title: string;
+  subtitle: string;
+  canManageTopic: boolean;
+  reopenLabel: string;
+  onReopen?: () => void;
+};
+
+export const ClosedTopicOverlay: React.FC<ClosedTopicOverlayProps> = React.memo(({
+  title,
+  subtitle,
+  canManageTopic,
+  reopenLabel,
+  onReopen,
+}) => (
+  <div className="ermis-message-list__closed-overlay">
+    <div className="ermis-message-list__closed-overlay-icon">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+      </svg>
+    </div>
+    <span className="ermis-message-list__closed-overlay-title">{title}</span>
+    <span className="ermis-message-list__closed-overlay-subtitle">{subtitle}</span>
+    {canManageTopic && onReopen && (
+      <button
+        className="ermis-message-list__reopen-btn"
+        onClick={onReopen}
+      >
+        {reopenLabel}
+      </button>
+    )}
+  </div>
+));
+
+ClosedTopicOverlay.displayName = 'ClosedTopicOverlay';

package/src/components/CreateChannelModal.tsx

@@ -4,6 +4,7 @@ import { UserPicker } from './UserPicker';
 import { Avatar } from './Avatar';
 import { useChatClient } from '../hooks/useChatClient';
 import type { CreateChannelModalProps, UserPickerUser } from '../types';
+import { isDirectChannel } from '../channelTypeUtils';
 
 
 export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
@@ -24,8 +25,9 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   cancelButtonLabel = 'Cancel',
   createButtonLabel = 'Create',
   creatingButtonLabel = 'Creating...',
+  messageButtonLabel = 'Message',
 }) => {
-  const { client } = useChatClient();
+  const { client, setActiveChannel } = useChatClient();
   const currentUserId = client?.userID;
 
   /* ---------- State ---------- */
@@ -45,19 +47,20 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   const [error, setError] = useState<string | null>(null);
 
   /* ---------- Exclude IDs for Direct ---------- */
-  const existingDirectUserIds = useMemo(() => {
-    if (!client || !currentUserId || tab !== 'messaging') return [];
-
-    const ids = new Set<string>();
-    Object.values(client.activeChannels).forEach((channel: any) => {
-      if (channel.type === 'messaging' && channel.state?.members) {
-        Object.keys(channel.state.members).forEach(uid => {
-          if (uid !== currentUserId) ids.add(uid);
-        });
+  const hasExistingDirectChannel = useMemo(() => {
+    if (!client || !currentUserId || tab !== 'messaging' || selectedUsers.length === 0) return false;
+    const targetUserId = selectedUsers[0].id;
+
+    return Object.values(client.activeChannels).some((ch: any) => {
+      if (isDirectChannel(ch) && ch.state?.members) {
+        const membersList = Object.keys(ch.state.members);
+        return membersList.length === 2 && 
+               membersList.includes(currentUserId) && 
+               membersList.includes(targetUserId);
       }
+      return false;
     });
-    return Array.from(ids);
-  }, [client, currentUserId, tab]);
+  }, [client, currentUserId, tab, selectedUsers]);
 
   /* ---------- Handlers ---------- */
   const handleCreate = useCallback(async () => {
@@ -82,10 +85,37 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
 
       if (tab === 'messaging') {
         const targetUserId = selectedUsers[0].id;
+
+        // Try to find an existing direct channel locally
+        const existingChannel = Object.values(client.activeChannels).find((ch: any) => {
+          if (isDirectChannel(ch) && ch.state?.members) {
+            const membersList = Object.keys(ch.state.members);
+            return membersList.length === 2 && 
+                   membersList.includes(currentUserId) && 
+                   membersList.includes(targetUserId);
+          }
+          return false;
+        });
+
+        if (existingChannel) {
+          if (setActiveChannel) setActiveChannel(existingChannel as any);
+          if (onSuccess) {
+            onSuccess(existingChannel as any);
+          } else {
+            onClose();
+          }
+          setIsCreating(false);
+          return;
+        }
+
         createdChannel = client.channel('messaging', {
           members: [currentUserId, targetUserId],
         } as any);
-        await createdChannel.create();
+        const response = (await createdChannel.create()) as any;
+        if (response?.channel?.id) {
+          createdChannel = client.channel('messaging', response.channel.id);
+          await createdChannel.watch();
+        }
       } else {
         // Group Channel
         const memberIds = selectedUsers.map(member => member.id);
@@ -105,7 +135,15 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         }
 
         createdChannel = client.channel('team', payload);
-        await createdChannel.create();
+        const response = (await createdChannel.create()) as any;
+        if (response?.channel?.id) {
+          createdChannel = client.channel('team', response.channel.id);
+          await createdChannel.watch();
+        }
+      }
+
+      if (setActiveChannel) {
+        setActiveChannel(createdChannel);
       }
 
       // Cleanup and execute callback
@@ -136,7 +174,7 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
       <div className="ermis-create-channel__footer">
         <button className="ermis-create-channel__btn ermis-create-channel__btn--cancel" onClick={onClose} disabled={isCreating}>{cancelButtonLabel}</button>
         <button className="ermis-create-channel__btn ermis-create-channel__btn--create" onClick={handleCreate} disabled={isCreating || !isValid}>
-          {isCreating ? creatingButtonLabel : createButtonLabel}
+          {isCreating ? creatingButtonLabel : (hasExistingDirectChannel ? messageButtonLabel : createButtonLabel)}
         </button>
       </div>
     );
@@ -247,7 +285,6 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
               <UserPicker
                 mode={tab === 'messaging' ? 'radio' : 'checkbox'}
                 onSelectionChange={setSelectedUsers}
-                excludeUserIds={tab === 'messaging' ? existingDirectUserIds : []}
                 initialSelectedUsers={selectedUsers}
                 AvatarComponent={AvatarComponent}
                 UserItemComponent={UserItemComponent as any}

package/src/components/EditPreview.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 { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 
 const MAX_PREVIEW_LENGTH = 120;
@@ -57,7 +58,7 @@ export const EditPreview: React.FC<{
   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/ForwardMessageModal.tsx

@@ -5,6 +5,7 @@ import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
 import { Modal } from './Modal';
 import type { ForwardMessageModalProps, ForwardChannelItemProps, AvatarProps } from '../types';
+import { isTopicChannel } from '../channelTypeUtils';
 
 export type { ForwardMessageModalProps, ForwardChannelItemProps } from '../types';
 
@@ -66,7 +67,7 @@ export const ForwardMessageModal: React.FC<ForwardMessageModalProps> = ({
   /* ---------- Get channels from client state (exclude topics) ---------- */
   const channels = useMemo(() => {
     return (Object.values(client.activeChannels) as Channel[]).filter(
-      (ch) => ch.type !== 'topic',
+      (ch) => !isTopicChannel(ch),
     );
   }, [client.activeChannels]);
 

package/src/components/MediaLightbox.tsx

@@ -0,0 +1,314 @@
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import { preloadImage } from '../utils';
+import { useChatClient } from '../hooks/useChatClient';
+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';
+  }
+};
+
+/**
+ * MediaLightbox – full-screen overlay for viewing images & videos.
+ * Supports prev/next navigation, keyboard controls, and image zoom.
+ * Renders via React portal into document.body.
+ */
+export const MediaLightbox: React.FC<MediaLightboxProps> = React.memo(({
+  items,
+  initialIndex = 0,
+  isOpen,
+  onClose,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const panStart = useRef({ x: 0, y: 0 });
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Reset state when opening or when items change
+  useEffect(() => {
+    if (isOpen) {
+      setCurrentIndex(initialIndex);
+      setZoom(1);
+      setPan({ x: 0, y: 0 });
+    }
+  }, [isOpen, initialIndex]);
+
+  // Preload adjacent images
+  useEffect(() => {
+    if (!isOpen) return;
+    const preloadIdx = [currentIndex - 1, currentIndex + 1];
+    preloadIdx.forEach(idx => {
+      if (idx >= 0 && idx < items.length && items[idx].type === 'image') {
+        preloadImage(items[idx].src);
+      }
+    });
+  }, [isOpen, currentIndex, items]);
+
+  // Pause video when navigating away or closing
+  useEffect(() => {
+    return () => {
+      if (videoRef.current) {
+        videoRef.current.pause();
+      }
+    };
+  }, [currentIndex]);
+
+  // Lock body scroll when open
+  useEffect(() => {
+    if (isOpen) {
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = prev; };
+    }
+  }, [isOpen]);
+
+  const goTo = useCallback((idx: number) => {
+    if (videoRef.current) videoRef.current.pause();
+    setCurrentIndex(idx);
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+
+  const goPrev = useCallback(() => {
+    if (currentIndex > 0) goTo(currentIndex - 1);
+  }, [currentIndex, goTo]);
+
+  const goNext = useCallback(() => {
+    if (currentIndex < items.length - 1) goTo(currentIndex + 1);
+  }, [currentIndex, items.length, goTo]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          onClose();
+          break;
+        case 'ArrowLeft':
+          goPrev();
+          break;
+        case 'ArrowRight':
+          goNext();
+          break;
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [isOpen, onClose, goPrev, goNext]);
+
+  // Double-click zoom toggle (image only)
+  const handleDoubleClick = useCallback(() => {
+    const current = items[currentIndex];
+    if (current?.type !== 'image') return;
+
+    if (zoom === 1) {
+      setZoom(2);
+    } else {
+      setZoom(1);
+      setPan({ x: 0, y: 0 });
+    }
+  }, [currentIndex, items, zoom]);
+
+  // Wheel zoom (image only)
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    const current = items[currentIndex];
+    if (current?.type !== 'image') return;
+    e.preventDefault();
+
+    setZoom(prev => {
+      const next = prev - e.deltaY * 0.002;
+      const clamped = Math.max(1, Math.min(3, next));
+      if (clamped === 1) setPan({ x: 0, y: 0 });
+      return clamped;
+    });
+  }, [currentIndex, items]);
+
+  // Mouse drag for panning (image zoomed)
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (zoom <= 1) return;
+    e.preventDefault();
+    setIsDragging(true);
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    panStart.current = { ...pan };
+  }, [zoom, pan]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isDragging) return;
+    const dx = e.clientX - dragStart.current.x;
+    const dy = e.clientY - dragStart.current.y;
+    setPan({ x: panStart.current.x + dx, y: panStart.current.y + dy });
+  }, [isDragging]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  // Click on backdrop closes
+  const handleBackdropClick = useCallback((e: React.MouseEvent) => {
+    if (e.target === containerRef.current) {
+      onClose();
+    }
+  }, [onClose]);
+
+  const { client } = useChatClient();
+
+  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]);
+
+  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()}
+        />
+      );
+    }
+
+    const imgStyle: React.CSSProperties = {
+      transform: `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`,
+      cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default',
+    };
+
+    return (
+      <img
+        className={`ermis-lightbox__image${zoom > 1 ? ' ermis-lightbox__image--zoomed' : ''}`}
+        src={currentItem.src}
+        alt={currentItem.alt || ''}
+        style={imgStyle}
+        draggable={false}
+        onDoubleClick={handleDoubleClick}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onClick={(e) => e.stopPropagation()}
+      />
+    );
+  }, [currentItem, zoom, pan, isDragging, handleDoubleClick, handleMouseDown, handleMouseMove, handleMouseUp]);
+
+  if (!isOpen || !currentItem) return null;
+
+  return ReactDOM.createPortal(
+    <div className="ermis-lightbox" onWheel={handleWheel}>
+      <div className="ermis-lightbox__backdrop" />
+
+      {/* Header: counter + actions */}
+      <div className="ermis-lightbox__header">
+        {hasMultiple && (
+          <span className="ermis-lightbox__counter">
+            {currentIndex + 1} / {items.length}
+          </span>
+        )}
+        <div className="ermis-lightbox__actions">
+          <button
+            className="ermis-lightbox__action-btn"
+            onClick={handleDownload}
+            aria-label="Download"
+            title="Download"
+          >
+            <svg width="22" height="22" 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>
+          <button
+            className="ermis-lightbox__action-btn"
+            onClick={onClose}
+            aria-label="Close"
+            title="Close"
+          >
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Main content area */}
+      <div
+        ref={containerRef}
+        className="ermis-lightbox__content"
+        onClick={handleBackdropClick}
+      >
+        {/* Prev button */}
+        {hasMultiple && currentIndex > 0 && (
+          <button
+            className="ermis-lightbox__nav ermis-lightbox__nav--prev"
+            onClick={(e) => { e.stopPropagation(); goPrev(); }}
+            aria-label="Previous"
+          >
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="15 18 9 12 15 6" />
+            </svg>
+          </button>
+        )}
+
+        {/* Media */}
+        {content}
+
+        {/* Next button */}
+        {hasMultiple && currentIndex < items.length - 1 && (
+          <button
+            className="ermis-lightbox__nav ermis-lightbox__nav--next"
+            onClick={(e) => { e.stopPropagation(); goNext(); }}
+            aria-label="Next"
+          >
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Filename */}
+      {currentItem.alt && (
+        <div className="ermis-lightbox__filename">{currentItem.alt}</div>
+      )}
+    </div>,
+    document.body
+  );
+});
+MediaLightbox.displayName = 'MediaLightbox';

package/src/components/MessageInput.tsx

@@ -15,6 +15,7 @@ import { EditPreview } from './EditPreview';
 import { buildUserMap, replaceMentionsForPreview, moveCaretToEnd } from '../utils';
 import { getMentionHtml } from '../hooks/useMentions';
 import { useChannelCapabilities } from '../hooks/useChannelCapabilities';
+import { CHANNEL_ROLES } from '../channelRoleUtils';
 import type { MentionMember, MessageInputProps, FilePreviewItem } from '../types';
 
 export type { MessageInputProps, SendButtonProps, AttachButtonProps, EmojiPickerProps, EmojiButtonProps } from '../types';
@@ -35,7 +36,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   EmojiButtonComponent = DefaultEmojiButton,
   ReplyPreviewComponent = ReplyPreview,
   EditPreviewComponent = EditPreview,
-  bannedLabel = 'You have been blocked from this channel',
+  bannedLabel = 'You have been banned from this channel',
   blockedLabel = 'You have blocked this user. Unblock to send messages.',
   linksDisabledLabel = 'Message blocked: Sending links is disabled for members.',
   keywordBlockedLabel = (match: string) => `Message blocked: Contains restricted word "${match}".`,
@@ -43,6 +44,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   slowModeLabel = (cooldown: number) => (
     <>Slow mode is active. You can send another message in <strong>{cooldown}s</strong>.</>
   ),
+  closedTopicLabel = 'This topic is closed.',
 }) => {
   const { client, activeChannel, syncMessages, quotedMessage, setQuotedMessage, editingMessage, setEditingMessage } = useChatClient();
   const { isBanned } = useBannedState(activeChannel, client.userID);
@@ -51,7 +53,8 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   const editableRef = React.useRef<HTMLDivElement>(null);
   const [hasContent, setHasContent] = useState(false);
 
-  const { role, isTeamChannel, hasCapability } = useChannelCapabilities();
+  const { role, isGroupChannel: isTeamChannel, hasCapability } = useChannelCapabilities();
+  const isClosedTopic = activeChannel?.data?.is_closed_topic === true;
 
   // Slow Mode Logic
   const [memberMessageCooldown, setMemberMessageCooldown] = useState(Number(activeChannel?.data?.member_message_cooldown) || 0);
@@ -69,7 +72,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
     };
   }, [activeChannel]);
 
-  const isSlowModeApplied = isTeamChannel && role === 'member' && memberMessageCooldown > 0;
+  const isSlowModeApplied = isTeamChannel && role === CHANNEL_ROLES.MEMBER && memberMessageCooldown > 0;
 
   const [cooldownEnd, setCooldownEnd] = useState<number | null>(null);
   const [cooldown, setCooldown] = useState(0);
@@ -398,6 +401,21 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
     );
   }
 
+  // Show closed topic banner instead of input
+  if (isClosedTopic) {
+    return (
+      <div className={`ermis-message-input ermis-message-input--closed${className ? ` ${className}` : ''}`}>
+        <div className="ermis-message-input__closed-banner">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+          <span>{closedTopicLabel}</span>
+        </div>
+      </div>
+    );
+  }
+
   const isStillUploading = files.some((f) => f.status === 'uploading');
 
   return (

package/src/components/MessageItem.tsx

@@ -7,6 +7,7 @@ import { MessageQuickReactions } from './MessageQuickReactions';
 import { useChannelCapabilities } from '../hooks/useChannelCapabilities';
 import { useChatClient } from '../hooks/useChatClient';
 import { formatTime } from '../utils';
+import { isSystemMessage } from '../messageTypeUtils';
 
 export type { MessageItemProps, SystemMessageItemProps } from '../types';
 
@@ -155,9 +156,7 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
           />
         )}
         <div className="ermis-message-list__bubble-wrapper">
-          <div style={!canReact ? { opacity: 0.5, pointerEvents: 'none' } : {}}>
-            <MessageQuickReactions message={message} isOwnMessage={isOwnMessage} />
-          </div>
+          <MessageQuickReactions message={message} isOwnMessage={isOwnMessage} disabled={!canReact} />
           <MessageBubble message={message} isOwnMessage={isOwnMessage}>
             {isForwarded && (
               <span className="ermis-message-list__forwarded-indicator">{forwardedLabel}</span>
@@ -178,7 +177,7 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
           </MessageBubble>
 
           {/* Actions: hover buttons + dropdown menu */}
-          {message.type !== 'system' && (
+          {!isSystemMessage(message) && (
             <MessageActionsBoxComponent
               message={message}
               isOwnMessage={isOwnMessage}
@@ -187,14 +186,13 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
 
           {/* Message Reactions */}
           {MessageReactionsComponent && (
-            <div style={!canReact ? { opacity: 0.8, pointerEvents: 'none' } : {}}>
-              <MessageReactionsComponent
-                reactionCounts={(message as any).reaction_counts}
-                ownReactions={(message as any).own_reactions}
-                latestReactions={(message as any).latest_reactions}
-                onClickReaction={handleReactionToggle}
-              />
-            </div>
+            <MessageReactionsComponent
+              reactionCounts={(message as any).reaction_counts}
+              ownReactions={(message as any).own_reactions}
+              latestReactions={(message as any).latest_reactions}
+              onClickReaction={handleReactionToggle}
+              disabled={!canReact}
+            />
           )}
         </div>
       </div>

package/src/components/MessageQuickReactions.tsx

@@ -14,7 +14,8 @@ const EMOJI_MAP: Record<string, string> = {
 export const MessageQuickReactions: React.FC<{
   message: FormatMessageResponse;
   isOwnMessage: boolean;
-}> = React.memo(({ message, isOwnMessage }) => {
+  disabled?: boolean;
+}> = React.memo(({ message, isOwnMessage, disabled }) => {
   const { activeChannel, client } = useChatClient();
   const currentUserId = client?.userID;
 
@@ -41,7 +42,7 @@ export const MessageQuickReactions: React.FC<{
   );
 
   return (
-    <div className={`ermis-message-quick-reactions ${isOwnMessage ? 'ermis-message-quick-reactions--own' : ''}`}>
+    <div className={`ermis-message-quick-reactions ${isOwnMessage ? 'ermis-message-quick-reactions--own' : ''} ${disabled ? 'ermis-message-quick-reactions--disabled' : ''}`}>
       {QUICK_REACTIONS.map((type) => {
         const isOwn =
           (message as any).own_reactions?.some((r: any) => r.type === type) ||

package/src/components/MessageReactions.tsx

@@ -16,6 +16,7 @@ export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
   ownReactions,
   latestReactions,
   onClickReaction,
+  disabled,
 }) => {
   const { client } = useChatClient();
   const currentUserId = client?.userID;
@@ -23,18 +24,22 @@ export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
   if (!reactionCounts || Object.keys(reactionCounts).length === 0) return null;
 
   return (
-    <div className="ermis-message-reactions">
+    <div className={`ermis-message-reactions${disabled ? ' ermis-message-reactions--disabled' : ''}`}>
       {Object.entries(reactionCounts).map(([type, count]) => {
         const isOwn = 
           ownReactions?.some((r) => r.type === type) ||
           latestReactions?.some((r) => r.type === type && (r.user?.id === currentUserId || (r as any).user_id === currentUserId));
         
         // Find users who reacted with this type for the tooltip
-        const userNames = latestReactions
+        const rawUserNames = latestReactions
           ?.filter((r) => r.type === type)
           .map((r: any) => r.user?.name || r.user?.id || r.user_id || 'Someone');
         
-        const tooltip = userNames && userNames.length > 0 ? userNames.join('\n') : type;
+        const userNames = Array.from(new Set(rawUserNames || []))
+          .map((n: any) => typeof n === 'string' ? n.replace(/&lrm;|\u200E/gi, '').trim() : n)
+          .filter(Boolean);
+
+        const tooltip = userNames.length > 0 ? userNames.join(', ') : type;
         const emoji = defaultReactionEmojiMap[type] || type;
 
         return (