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

package/src/components/ChannelInfo/useChannelInfoTabs.tsx

@@ -15,7 +15,7 @@ import {
   canRemoveTargetMember,
   canBanTargetMember,
   canPromoteTargetMember,
-  canDemoteTargetMember
+  canDemoteTargetMember,
 } from '../../channelRoleUtils';
 
 export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
@@ -52,7 +52,7 @@ export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
   const availableTabs: MediaTab[] = useMemo(() => {
     let tabs = isMessaging ? MESSAGING_TABS : ALL_TABS;
     if (isTopic) {
-      tabs = tabs.filter(t => t !== 'members');
+      tabs = tabs.filter((t) => t !== 'members');
     }
     return tabs;
   }, [isMessaging, isTopic]);
@@ -65,31 +65,34 @@ export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
   const lastFetchedCidRef = useRef<string | null>(null);
   const transitionRafRef = useRef<any>(null);
 
-  const handleTabChange = useCallback((tab: MediaTab) => {
-    if (tab === activeTab) return;
+  const handleTabChange = useCallback(
+    (tab: MediaTab) => {
+      if (tab === activeTab) return;
 
-    // 1. Instant UI update for the tab button
-    setActiveTab(tab);
+      // 1. Instant UI update for the tab button
+      setActiveTab(tab);
 
-    if (transitionRafRef.current) clearTimeout(transitionRafRef.current);
+      if (transitionRafRef.current) clearTimeout(transitionRafRef.current);
+
+      // Check if data is already available for this channel
+      const hasData = tab === 'members' || attachmentsFetchedForCid === channel?.cid;
 
-    // Check if data is already available for this channel
-    const hasData = tab === 'members' || attachmentsFetchedForCid === channel?.cid;
-
-    if (hasData) {
-      // If data exists, switch content immediately without loading state
-      setContentTab(tab);
-      setIsPending(false);
-    } else {
-      // If no data, use isPending to show Skeleton while waiting for API
-      setIsPending(true);
-      transitionRafRef.current = setTimeout(() => {
+      if (hasData) {
+        // If data exists, switch content immediately without loading state
         setContentTab(tab);
         setIsPending(false);
-        setAttachmentsFetchedForCid((prev) => prev || channel?.cid || null);
-      }, 350);
-    }
-  }, [activeTab, channel?.cid, attachmentsFetchedForCid]);
+      } else {
+        // If no data, use isPending to show Skeleton while waiting for API
+        setIsPending(true);
+        transitionRafRef.current = setTimeout(() => {
+          setContentTab(tab);
+          setIsPending(false);
+          setAttachmentsFetchedForCid((prev) => prev || channel?.cid || null);
+        }, 350);
+      }
+    },
+    [activeTab, channel?.cid, attachmentsFetchedForCid],
+  );
 
   // Reset tab when user switches channels
   useEffect(() => {
@@ -128,7 +131,7 @@ export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
 
   const forceRefreshAttachments = useCallback(() => {
     lastFetchedCidRef.current = null;
-    setRefreshAttachmentsCount(c => c + 1);
+    setRefreshAttachmentsCount((c) => c + 1);
   }, []);
 
   const sortedMembers = useMemo(() => {
@@ -140,19 +143,16 @@ export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
   }, [members]);
 
   // Categorize attachments by type
-  const mediaItems = useMemo(() =>
-    allAttachments.filter(a => a.attachment_type === 'image' || a.attachment_type === 'video'),
-    [allAttachments]
+  const mediaItems = useMemo(
+    () => allAttachments.filter((a) => a.attachment_type === 'image' || a.attachment_type === 'video'),
+    [allAttachments],
   );
 
-  const linkItems = useMemo(() =>
-    allAttachments.filter(a => a.attachment_type === 'linkPreview'),
-    [allAttachments]
-  );
+  const linkItems = useMemo(() => allAttachments.filter((a) => a.attachment_type === 'linkPreview'), [allAttachments]);
 
-  const fileItems = useMemo(() =>
-    allAttachments.filter(a => a.attachment_type === 'file' || a.attachment_type === 'voiceRecording'),
-    [allAttachments]
+  const fileItems = useMemo(
+    () => allAttachments.filter((a) => a.attachment_type === 'file' || a.attachment_type === 'voiceRecording'),
+    [allAttachments],
   );
 
   useEffect(() => {
@@ -183,7 +183,7 @@ export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
           lastFetchedCidRef.current = channel?.cid || null;
         }
       } catch (err) {
-        console.error("Failed to query media for channel info", err);
+        console.error('Failed to query media for channel info', err);
         if (active) setAllAttachments([]);
       } finally {
         if (active) setLoading(false);
@@ -191,7 +191,9 @@ export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
     };
 
     fetchMedia();
-    return () => { active = false; };
+    return () => {
+      active = false;
+    };
   }, [channel, isBanned, isBlocked, isPreviewMode, attachmentsFetchedForCid, isVisible, refreshAttachmentsCount]);
 
   // Listen to realtime events to automatically refresh attachments
@@ -217,30 +219,40 @@ export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
 
   const { downloadFile } = useDownloadHandler();
 
-  const handleDownloadFile = useCallback(async (url: string, filename?: string) => {
-    await downloadFile(url, filename);
-  }, [downloadFile]);
+  const handleDownloadFile = useCallback(
+    async (url: string, filename?: string) => {
+      await downloadFile(url, filename);
+    },
+    [downloadFile],
+  );
 
   // Lightbox state for media tab
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
 
   const lightboxItems = useMemo<MediaLightboxItem[]>(() => {
-    return mediaItems.map(item => ({
-      type: (item.attachment_type === 'video' ? 'video' : 'image') as 'image' | 'video',
-      src: item.url,
-      alt: item.file_name,
-      posterSrc: item.thumb_url || undefined,
-    }));
+    return mediaItems
+      .filter((item) => !item.e2ee_manifest && !item.e2ee_manifest_missing)
+      .map((item) => ({
+        type: (item.attachment_type === 'video' ? 'video' : 'image') as 'image' | 'video',
+        src: item.url,
+        alt: item.file_name,
+        posterSrc: item.thumb_url || undefined,
+      }));
   }, [mediaItems]);
 
-  const handleMediaClick = useCallback((url: string) => {
-    const idx = mediaItems.findIndex(item => item.url === url);
-    if (idx >= 0) {
-      setLightboxIndex(idx);
-      setLightboxOpen(true);
-    }
-  }, [mediaItems]);
+  const handleMediaClick = useCallback(
+    (url: string) => {
+      const idx = mediaItems
+        .filter((item) => !item.e2ee_manifest && !item.e2ee_manifest_missing)
+        .findIndex((item) => item.url === url);
+      if (idx >= 0) {
+        setLightboxIndex(idx);
+        setLightboxOpen(true);
+      }
+    },
+    [mediaItems],
+  );
 
   const closeLightbox = useCallback(() => {
     setLightboxOpen(false);
@@ -263,103 +275,132 @@ export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
         if (onAddMemberClick) {
           items.push({ type: 'add-member' });
         }
-        sortedMembers.forEach(member => {
+        sortedMembers.forEach((member) => {
           items.push({ type: 'member', data: member });
         });
         return items;
       }
       case 'media':
-        return mediaRows.map(row => ({ type: 'media-row', data: row }));
+        return mediaRows.map((row) => ({ type: 'media-row', data: row }));
       case 'links':
-        return linkItems.map(item => ({ type: 'link', data: item }));
+        return linkItems.map((item) => ({ type: 'link', data: item }));
       case 'files':
-        return fileItems.map(item => ({ type: 'file', data: item }));
+        return fileItems.map((item) => ({ type: 'file', data: item }));
       default:
         return [];
     }
   }, [contentTab, sortedMembers, mediaRows, mediaItems, linkItems, fileItems, onAddMemberClick]);
 
   // Render function for VList items
-  const renderVlistItem = useCallback((item: any, index: number) => {
-    switch (item.type) {
-      case 'add-member':
-        if (AddMemberButtonComponent) {
+  const renderVlistItem = useCallback(
+    (item: any, index: number) => {
+      switch (item.type) {
+        case 'add-member':
+          if (AddMemberButtonComponent) {
+            return (
+              <div key="__add-member__" className="ermis-channel-info__add-member-wrap">
+                <AddMemberButtonComponent onClick={onAddMemberClick!} label={addMemberButtonLabel} />
+              </div>
+            );
+          }
           return (
             <div key="__add-member__" className="ermis-channel-info__add-member-wrap">
-              <AddMemberButtonComponent onClick={onAddMemberClick!} label={addMemberButtonLabel} />
+              <button className="ermis-channel-info__add-member-btn" onClick={onAddMemberClick}>
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                  <circle cx="8.5" cy="7" r="4"></circle>
+                  <line x1="20" y1="8" x2="20" y2="14"></line>
+                  <line x1="23" y1="11" x2="17" y2="11"></line>
+                </svg>
+                {addMemberButtonLabel}
+              </button>
             </div>
           );
+        case 'member': {
+          const member = item.data;
+          const role = member.channel_role || CHANNEL_ROLES.MEMBER;
+          const isTargetRemovable = canRemoveTargetMember(currentUserRole, role);
+          const canRemove = Boolean(isTargetRemovable && member.user_id !== currentUserId);
+          const canBan = Boolean(
+            canBanTargetMember(currentUserRole, role) && member.user_id !== currentUserId && !member.banned,
+          );
+          const canUnban = Boolean(
+            canBanTargetMember(currentUserRole, role) && member.user_id !== currentUserId && member.banned,
+          );
+          const canPromote = canPromoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
+          const canDemote = canDemoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
+
+          return (
+            <MemberItem
+              key={member?.user_id || index}
+              member={member}
+              AvatarComponent={AvatarComponent}
+              onRemove={onRemoveMember}
+              canRemove={canRemove}
+              onBan={onBanMember}
+              canBan={canBan}
+              onUnban={onUnbanMember}
+              canUnban={canUnban}
+              onPromote={onPromoteMember}
+              canPromote={canPromote}
+              onDemote={onDemoteMember}
+              canDemote={canDemote}
+            />
+          );
         }
-        return (
-          <div key="__add-member__" className="ermis-channel-info__add-member-wrap">
-            <button className="ermis-channel-info__add-member-btn" onClick={onAddMemberClick}>
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-                <circle cx="8.5" cy="7" r="4"></circle>
-                <line x1="20" y1="8" x2="20" y2="14"></line>
-                <line x1="23" y1="11" x2="17" y2="11"></line>
-              </svg>
-              {addMemberButtonLabel}
-            </button>
-          </div>
-        );
-      case 'member': {
-        const member = item.data;
-        const role = member.channel_role || CHANNEL_ROLES.MEMBER;
-        const isTargetRemovable = canRemoveTargetMember(currentUserRole, role);
-        const canRemove = Boolean(isTargetRemovable && member.user_id !== currentUserId);
-        const canBan = Boolean(canBanTargetMember(currentUserRole, role) && member.user_id !== currentUserId && !member.banned);
-        const canUnban = Boolean(canBanTargetMember(currentUserRole, role) && member.user_id !== currentUserId && member.banned);
-        const canPromote = canPromoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
-        const canDemote = canDemoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
-
-        return (
-          <MemberItem
-            key={member?.user_id || index}
-            member={member}
-            AvatarComponent={AvatarComponent}
-            onRemove={onRemoveMember}
-            canRemove={canRemove}
-            onBan={onBanMember}
-            canBan={canBan}
-            onUnban={onUnbanMember}
-            canUnban={canUnban}
-            onPromote={onPromoteMember}
-            canPromote={canPromote}
-            onDemote={onDemoteMember}
-            canDemote={canDemote}
-          />
-        );
+        case 'media-row':
+          return (
+            <MediaRow
+              key={item.data[0]?.id || index}
+              row={item.data}
+              onClick={handleMediaClick}
+              MediaItemComponent={MediaItem}
+            />
+          );
+        case 'link':
+          return <LinkItem key={item.data.id || index} item={item.data} />;
+        case 'file':
+          const fileItem = item.data as AttachmentItem;
+          return (
+            <FileItem
+              key={fileItem.id || index}
+              item={fileItem}
+              onClick={(url: string) => handleDownloadFile(url, fileItem.file_name)}
+            />
+          );
+        default:
+          return null;
       }
-      case 'media-row':
-        return (
-          <MediaRow
-            key={item.data[0]?.id || index}
-            row={item.data}
-            onClick={handleMediaClick}
-            MediaItemComponent={MediaItem}
-          />
-        );
-      case 'link':
-        return <LinkItem key={item.data.id || index} item={item.data} />;
-      case 'file':
-        const fileItem = item.data as AttachmentItem;
-        return (
-          <FileItem
-            key={fileItem.id || index}
-            item={fileItem}
-            onClick={(url: string) => handleDownloadFile(url, fileItem.file_name)}
-          />
-        );
-      default:
-        return null;
-    }
-  }, [
-    onAddMemberClick, AddMemberButtonComponent, addMemberButtonLabel,
-    currentUserRole, currentUserId, AvatarComponent, onRemoveMember, onBanMember, onUnbanMember, onPromoteMember, onDemoteMember,
-    handleMediaClick, MediaItem, handleDownloadFile,
-    MemberItem, LinkItem, FileItem
-  ]);
+    },
+    [
+      onAddMemberClick,
+      AddMemberButtonComponent,
+      addMemberButtonLabel,
+      currentUserRole,
+      currentUserId,
+      AvatarComponent,
+      onRemoveMember,
+      onBanMember,
+      onUnbanMember,
+      onPromoteMember,
+      onDemoteMember,
+      handleMediaClick,
+      MediaItem,
+      handleDownloadFile,
+      MemberItem,
+      LinkItem,
+      FileItem,
+    ],
+  );
 
   const isTabEmpty = vlistData.length === 0 && !(loading && contentTab !== 'members');
   const emptyLabel = contentTab === 'members' ? 'members' : contentTab;

package/src/components/ChannelList.tsx

@@ -89,8 +89,28 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
   }, [defaultActions, hiddenActions]);
   const ActionsComponent = ChannelActionsComponent || DefaultChannelActions;
 
-  const name = channel.data?.name || channel.cid;
-  const image = channel.data?.image as string | undefined;
+  // For DM channels, resolve name/image from the other member if channel.data.name is missing
+  const resolvedNameImage = useMemo(() => {
+    if (channel.data?.name) {
+      return { name: channel.data.name as string, image: channel.data.image as string | undefined };
+    }
+    // For DM (messaging) channels, find the other member's info
+    if (isDirectChannel(channel) && currentUserId && channel.state?.members) {
+      const members = Object.values(channel.state.members) as any[];
+      const other = members.find((m: any) => (m.user_id || m.user?.id) !== currentUserId);
+      if (other) {
+        const otherUser = other.user || other;
+        return {
+          name: otherUser.name || otherUser.id || channel.cid,
+          image: otherUser.image || otherUser.avatar || otherUser.avatar_url,
+        };
+      }
+    }
+    return { name: channel.cid, image: channel.data?.image as string | undefined };
+  }, [channel.data?.name, channel.data?.image, channel.state?.members, currentUserId, channel.cid, updateCount]);
+
+  const name = resolvedNameImage.name;
+  const image = resolvedNameImage.image;
   const showUnread = hasUnread && !isActive;
   const avatarClassName = isGroupChannel(channel) ? 'ermis-avatar-wrapper--group' : undefined;
 
@@ -119,10 +139,15 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
   return (
     <div className={itemClass} onClick={handleClick}>
       <div className="ermis-channel-list__item-avatar-wrapper">
-        <AvatarComponent image={image} name={name} size={40} disableLightbox className={avatarClassName} />
+        <AvatarComponent image={image} name={name} size={45} disableLightbox className={avatarClassName} />
         {isOnline !== undefined && (
           <span className={`ermis-channel-list__online-dot ermis-channel-list__online-dot--${isOnline ? 'online' : 'offline'}`} />
         )}
+        {showUnread && unreadCount > 0 && (
+          <span className="ermis-channel-list__avatar-unread-badge">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        )}
       </div>
       <div className="ermis-channel-list__item-content">
         <div className="ermis-channel-list__item-top-row">
@@ -261,6 +286,8 @@ type ChannelRowProps = {
   videoMessageLabel?: React.ReactNode;
   voiceRecordingMessageLabel?: React.ReactNode;
   fileMessageLabel?: React.ReactNode;
+  encryptedMessageLabel?: React.ReactNode;
+  encryptedMessageUnavailableLabel?: React.ReactNode;
   systemMessageTranslations?: SystemMessageTranslations;
   signalMessageTranslations?: SignalMessageTranslations;
 };
@@ -293,6 +320,8 @@ export const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
   videoMessageLabel,
   voiceRecordingMessageLabel,
   fileMessageLabel,
+  encryptedMessageLabel,
+  encryptedMessageUnavailableLabel,
   systemMessageTranslations,
   signalMessageTranslations,
 }) => {
@@ -320,6 +349,8 @@ export const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
         videoMessageLabel,
         voiceRecordingMessageLabel,
         fileMessageLabel,
+        encryptedMessageLabel,
+        encryptedMessageUnavailableLabel,
         systemMessageTranslations,
         signalMessageTranslations,
       }),
@@ -335,6 +366,8 @@ export const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
       videoMessageLabel,
       voiceRecordingMessageLabel,
       fileMessageLabel,
+      encryptedMessageLabel,
+      encryptedMessageUnavailableLabel,
       systemMessageTranslations,
       signalMessageTranslations,
     ]
@@ -433,8 +466,11 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
   videoMessageLabel,
   voiceRecordingMessageLabel,
   fileMessageLabel,
+  encryptedMessageLabel,
+  encryptedMessageUnavailableLabel,
   systemMessageTranslations,
   signalMessageTranslations,
+  showTopicPills = false,
 }) => {
   const { client, activeChannel, setActiveChannel } = useChatClient();
   const { ChannelListErrorIndicator } = useChatComponents();
@@ -573,18 +609,32 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
       onChannelSelect?.(channel);
 
       // Mark as read when user selects a channel (skip if banned, blocked, or pending)
-      const ms = channel.state?.membership as Record<string, unknown> | undefined;
-      const chState = channel.state as unknown as Record<string, unknown> | undefined;
+      const activeCh = client.activeChannels[channel.cid] || channel;
+      const ms = activeCh.state?.membership as Record<string, unknown> | undefined;
+      const chState = activeCh.state as unknown as Record<string, unknown> | undefined;
       const isBannedInChannel = Boolean(ms?.banned);
-      const isBlockedInChannel = isDirectChannel(channel) && Boolean(ms?.blocked);
+      const isBlockedInChannel = isDirectChannel(activeCh) && Boolean(ms?.blocked);
       const isPending = isPendingMember(ms?.channel_role as string);
       const isSkipped = isSkippedMember(ms?.channel_role as string);
 
-      if (!isBannedInChannel && !isBlockedInChannel && !isPending && !isSkipped && (chState?.unreadCount as number) > 0) {
-        channel.markRead().catch(() => { });
-        // Optimistically reset unread to update UI immediately
-        if (chState) chState.unreadCount = 0;
-        setChannels((prev) => [...prev]);
+      if (!isBannedInChannel && !isBlockedInChannel && !isPending && !isSkipped) {
+        let shouldUpdate = false;
+        if ((chState?.unreadCount as number) > 0) {
+          activeCh.markRead().catch(() => { });
+          // Optimistically reset unread to update UI immediately
+          if (chState) chState.unreadCount = 0;
+          shouldUpdate = true;
+        }
+        
+        // Also optimistic update on the stale channel just in case
+        if (channel.state && (channel.state as any).unreadCount > 0) {
+          (channel.state as any).unreadCount = 0;
+          shouldUpdate = true;
+        }
+
+        if (shouldUpdate) {
+          setChannels((prev) => [...prev]);
+        }
       }
     },
     [setActiveChannel, onChannelSelect, setChannels],
@@ -649,6 +699,8 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
               videoMessageLabel={videoMessageLabel}
               voiceRecordingMessageLabel={voiceRecordingMessageLabel}
               fileMessageLabel={fileMessageLabel}
+              encryptedMessageLabel={encryptedMessageLabel}
+              encryptedMessageUnavailableLabel={encryptedMessageUnavailableLabel}
               systemMessageTranslations={systemMessageTranslations}
               signalMessageTranslations={signalMessageTranslations}
             />
@@ -660,7 +712,8 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
           </div>
         )} */}
         {regularChannels.map((channel: Channel) => {
-          const isActive = activeChannel?.cid === channel.cid;
+          const isActive = activeChannel?.cid === channel.cid ||
+            (activeChannel?.data?.parent_cid === channel.cid);
           const isTeamWithTopics = hasTopicsEnabled(channel);
 
           if (isTeamWithTopics) {
@@ -671,7 +724,10 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
                 key={channel.cid}
                 channel={channel}
                 isActive={isActive}
-                onDrillDown={onTopicDrillDown}
+                onDrillDown={(c) => {
+                  handleSelect(c);
+                  if (onTopicDrillDown) onTopicDrillDown(c);
+                }}
                 AvatarComponent={AvatarComponent}
                 maxVisibleTopics={maxVisibleTopics}
                 moreTopicsLabel={moreTopicsLabel}
@@ -692,6 +748,7 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
                 fileMessageLabel={fileMessageLabel}
                 systemMessageTranslations={systemMessageTranslations}
                 signalMessageTranslations={signalMessageTranslations}
+                showTopicPills={showTopicPills}
               />
             );
           }
@@ -726,6 +783,8 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
               videoMessageLabel={videoMessageLabel}
               voiceRecordingMessageLabel={voiceRecordingMessageLabel}
               fileMessageLabel={fileMessageLabel}
+              encryptedMessageLabel={encryptedMessageLabel}
+              encryptedMessageUnavailableLabel={encryptedMessageUnavailableLabel}
               systemMessageTranslations={systemMessageTranslations}
               signalMessageTranslations={signalMessageTranslations}
             />