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

package/src/components/ChannelInfo/MemberListItem.tsx

@@ -74,9 +74,8 @@ export const MemberListItem = React.memo(({
     </div>
   );
 }, (prev, next) => {
-  return prev.member?.user_id === next.member?.user_id &&
-         prev.member?.channel_role === next.member?.channel_role &&
-         prev.member?.banned === next.member?.banned &&
+  return prev.member === next.member &&
+         prev.AvatarComponent === next.AvatarComponent &&
          prev.canRemove === next.canRemove &&
          prev.canBan === next.canBan &&
          prev.canUnban === next.canUnban &&

package/src/components/ChannelInfo/MessageSearchPanel.tsx

@@ -1,17 +1,19 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useRef, useCallback, useMemo, useEffect } from 'react';
 import type { Channel } from '@ermis-network/ermis-chat-sdk';
-import { useChatClient } from '../../hooks/useChatClient';
-import { replaceMentionsForPreview, buildUserMap, formatRelativeDate } from '../../utils';
+import { replaceMentionsForPreview, formatRelativeDate } from '../../utils';
 import { Avatar } from '../Avatar';
-import { Panel } from '../Panel';
-import type { AvatarProps, SearchResultMessage, MessageSearchPanelProps } from '../../types';
+import { Panel as DefaultPanel } from '../Panel';
+import { useChatComponents } from '../../context/ChatComponentsContext';
+import { useChatClient } from '../../hooks/useChatClient';
+import type { MessageSearchPanelProps } from '../../types';
+import { useMessageSearch } from './useMessageSearch';
+import { removeAccents } from '../../utils';
 
 /* ----------------------------------------------------------
    Highlight utility (Accent-insensitive)
    ---------------------------------------------------------- */
-const removeAccents = (str: string) => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 
-const HighlightedText: React.FC<{ text: string; term: string }> = React.memo(({ text, term }) => {
+export const HighlightedText: React.FC<{ text: string; term: string }> = React.memo(({ text, term }) => {
   if (!term.trim()) return <>{text}</>;
 
   const cleanTerm = removeAccents(term).toLowerCase();
@@ -58,136 +60,40 @@ export const MessageSearchPanel: React.FC<MessageSearchPanelProps> = React.memo(
   AvatarComponent = Avatar,
   placeholder = 'Search messages...',
   title = 'Search Messages',
-  emptyText = 'No messages found',
+  emptyText = 'No messages found.',
   loadingText = 'Searching...',
   debounceMs = 500,
 }) => {
   const { setJumpToMessageId } = useChatClient();
-
-  const [query, setQuery] = useState('');
-  const [results, setResults] = useState<SearchResultMessage[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
-
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const offsetRef = useRef(0);
-  const queryRef = useRef('');
-
-  // Reset all state when the channel changes (or panel closes)
-  useEffect(() => {
-    setQuery('');
-    setResults([]);
-    setLoading(false);
-    setHasMore(false);
-    setLoadingMore(false);
-    offsetRef.current = 0;
-    queryRef.current = '';
-  }, [channel?.cid, isOpen]);
+  const { PanelComponent } = useChatComponents();
+  const Panel = PanelComponent || DefaultPanel;
+
+  const {
+    query,
+    setQuery,
+    results,
+    loading,
+    hasMore,
+    loadingMore,
+    handleInputChange,
+    handleScroll,
+    resetSearch,
+    userMaps,
+  } = useMessageSearch({ channel, isOpen, debounceMs });
 
   // Auto-focus the input when panel opens
+  const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     if (isOpen) {
       setTimeout(() => inputRef.current?.focus(), 300);
     }
   }, [isOpen]);
 
-  // Debounced search
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setQuery(value);
-
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-
-    if (!value.trim()) {
-      setResults([]);
-      setLoading(false);
-      setHasMore(false);
-      offsetRef.current = 0;
-      queryRef.current = '';
-      return;
-    }
-
-    setLoading(true);
-
-    debounceRef.current = setTimeout(async () => {
-      queryRef.current = value;
-      offsetRef.current = 0;
-
-      try {
-        const response = await channel.searchMessage(value, 0);
-        // Only apply if this is still the latest query
-        if (queryRef.current !== value) return;
-
-        if (!response) {
-          setResults([]);
-          setHasMore(false);
-        } else {
-          setResults(response.messages || []);
-          setHasMore((response.messages?.length || 0) >= 25);
-        }
-      } catch (err) {
-        console.error('Search failed:', err);
-        setResults([]);
-        setHasMore(false);
-      } finally {
-        setLoading(false);
-      }
-    }, debounceMs);
-  }, [channel, debounceMs]);
-
-  // Infinite scroll: load more results
-  const handleLoadMore = useCallback(async () => {
-    if (loadingMore || !hasMore || !queryRef.current) return;
-
-    setLoadingMore(true);
-    const nextOffset = offsetRef.current + 25; // offset skips records, limit is 25
-
-    try {
-      const response = await channel.searchMessage(queryRef.current, nextOffset);
-
-      if (!response || !response.messages?.length) {
-        setHasMore(false);
-      } else {
-        offsetRef.current = nextOffset;
-        setResults((prev) => [...prev, ...response.messages]);
-        setHasMore(response.messages.length >= 25);
-      }
-    } catch (err) {
-      console.error('Load more search results failed:', err);
-    } finally {
-      setLoadingMore(false);
-    }
-  }, [channel, hasMore, loadingMore]);
-
-  // Scroll handler for infinite scroll
-  const handleScroll = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-
-    const threshold = 100;
-    if (el.scrollTop + el.clientHeight >= el.scrollHeight - threshold) {
-      handleLoadMore();
-    }
-  }, [handleLoadMore]);
-
   // Click a result -> jump to that message
   const handleResultClick = useCallback((messageId: string) => {
     setJumpToMessageId(messageId);
   }, [setJumpToMessageId]);
 
-  // Derived userMap for resolving mentions, with a lowercase variant for fast lookup
-  const userMaps = useMemo(() => {
-    const original = buildUserMap(channel.state);
-    const lower: typeof original = {};
-    for (const [id, name] of Object.entries(original)) {
-      lower[id.toLowerCase()] = name;
-    }
-    return { original, lower };
-  }, [channel.state]);
-
   return (
     <Panel isOpen={isOpen} onClose={onClose} title={title} className="ermis-search-panel">
       {/* Search Input now inside body */}
@@ -209,11 +115,7 @@ export const MessageSearchPanel: React.FC<MessageSearchPanelProps> = React.memo(
             <button
               className="ermis-search-panel__input-clear"
               onClick={() => {
-                setQuery('');
-                setResults([]);
-                setHasMore(false);
-                offsetRef.current = 0;
-                queryRef.current = '';
+                resetSearch();
                 inputRef.current?.focus();
               }}
               aria-label="Clear"
@@ -228,7 +130,6 @@ export const MessageSearchPanel: React.FC<MessageSearchPanelProps> = React.memo(
       </div>
 
       <div
-        ref={scrollRef}
         className="ermis-search-panel__results"
         onScroll={handleScroll}
       >

package/src/components/ChannelInfo/States.tsx

@@ -28,7 +28,7 @@ export const TabEmptyState: React.FC<{ label: string }> = React.memo(({ label })
 ));
 (TabEmptyState as any).displayName = 'TabEmptyState';
 
-export const TabLoadingState: React.FC = React.memo(() => (
+export const TabLoadingState: React.FC<{ tab?: string }> = React.memo(() => (
   <div className="ermis-channel-info__media-loading">
     <div className="ermis-channel-info__media-spinner" />
   </div>

package/src/components/ChannelInfo/index.ts

@@ -1,10 +1,13 @@
 export * from './ChannelInfo';
 export * from './ChannelInfoTabs';
+export * from './useChannelInfoTabs';
 export * from './EditChannelModal';
 export * from './MessageSearchPanel';
+export * from './useMessageSearch';
 export * from './MediaGridItem';
 export * from './LinkListItem';
 export * from './FileListItem';
 export * from './MemberListItem';
 export * from './States';
 export * from './ChannelSettingsPanel';
+export * from './useChannelSettings';

package/src/components/ChannelInfo/useChannelInfoTabs.tsx

@@ -0,0 +1,386 @@
+import React, { useState, useEffect, useMemo, useCallback, startTransition, useRef } from 'react';
+import { ROLE_WEIGHTS, MESSAGING_TABS, ALL_TABS } from './utils';
+import { useBannedState } from '../../hooks/useBannedState';
+import { useBlockedState } from '../../hooks/useBlockedState';
+import { MediaGridItem, MediaRow } from './MediaGridItem';
+import { LinkListItem } from './LinkListItem';
+import { FileListItem } from './FileListItem';
+import { MemberListItem } from './MemberListItem';
+import { TabEmptyState, TabLoadingState } from './States';
+import { useDownloadHandler } from '../../hooks/useDownloadHandler';
+import type { ChannelInfoTabsProps, MediaTab, AttachmentItem, MediaLightboxItem } from '../../types';
+import { isDirectChannel } from '../../channelTypeUtils';
+import {
+  CHANNEL_ROLES,
+  canRemoveTargetMember,
+  canBanTargetMember,
+  canPromoteTargetMember,
+  canDemoteTargetMember
+} from '../../channelRoleUtils';
+
+export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
+  const {
+    channel,
+    members,
+    AvatarComponent,
+    currentUserId,
+    currentUserRole,
+    onAddMemberClick,
+    onRemoveMember,
+    onBanMember,
+    onUnbanMember,
+    onPromoteMember,
+    onDemoteMember,
+    addMemberButtonLabel = 'Add Member',
+    AddMemberButtonComponent,
+    MemberItemComponent,
+    MediaItemComponent,
+    LinkItemComponent,
+    FileItemComponent,
+    EmptyStateComponent,
+    LoadingComponent,
+    isVisible = true,
+    isPreviewMode = false,
+  } = props;
+
+  const isMessaging = isDirectChannel(channel);
+  const isTopic = Boolean(channel?.data?.parent_cid);
+
+  const { isBanned } = useBannedState(channel, currentUserId);
+  const { isBlocked } = useBlockedState(channel, currentUserId);
+
+  const availableTabs: MediaTab[] = useMemo(() => {
+    let tabs = isMessaging ? MESSAGING_TABS : ALL_TABS;
+    if (isTopic) {
+      tabs = tabs.filter(t => t !== 'members');
+    }
+    return tabs;
+  }, [isMessaging, isTopic]);
+
+  const [activeTab, setActiveTab] = useState<MediaTab>(availableTabs[0]);
+  const [contentTab, setContentTab] = useState<MediaTab>(availableTabs[0]);
+  const [isPending, setIsPending] = useState(false);
+
+  const [attachmentsFetchedForCid, setAttachmentsFetchedForCid] = useState<string | null>(null);
+  const lastFetchedCidRef = useRef<string | null>(null);
+  const transitionRafRef = useRef<any>(null);
+
+  const handleTabChange = useCallback((tab: MediaTab) => {
+    if (tab === activeTab) return;
+
+    // 1. Instant UI update for the tab button
+    setActiveTab(tab);
+
+    if (transitionRafRef.current) clearTimeout(transitionRafRef.current);
+
+    // 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(() => {
+        setContentTab(tab);
+        setIsPending(false);
+        setAttachmentsFetchedForCid((prev) => prev || channel?.cid || null);
+      }, 350);
+    }
+  }, [activeTab, channel?.cid, attachmentsFetchedForCid]);
+
+  // Reset tab when user switches channels
+  useEffect(() => {
+    if (transitionRafRef.current) clearTimeout(transitionRafRef.current);
+    setActiveTab(availableTabs[0]);
+    setContentTab(availableTabs[0]);
+    setIsPending(false);
+    setAttachmentsFetchedForCid(null);
+    setAllAttachments([]);
+    lastFetchedCidRef.current = null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel?.cid, availableTabs]);
+
+  // Auto-trigger fetch for channels where default tab needs attachment data
+  useEffect(() => {
+    if (!isVisible) return;
+    if (availableTabs[0] === 'members') return;
+    const rafId = requestAnimationFrame(() => {
+      setAttachmentsFetchedForCid(channel?.cid || null);
+    });
+    return () => cancelAnimationFrame(rafId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel?.cid, availableTabs, isVisible]);
+
+  // Resolve sub-components with defaults
+  const MemberItem = MemberItemComponent || MemberListItem;
+  const MediaItem = MediaItemComponent || MediaGridItem;
+  const LinkItem = LinkItemComponent || LinkListItem;
+  const FileItem = FileItemComponent || FileListItem;
+  const EmptyState = EmptyStateComponent || TabEmptyState;
+  const Loading = LoadingComponent || TabLoadingState;
+
+  const [allAttachments, setAllAttachments] = useState<AttachmentItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshAttachmentsCount, setRefreshAttachmentsCount] = useState(0);
+
+  const forceRefreshAttachments = useCallback(() => {
+    lastFetchedCidRef.current = null;
+    setRefreshAttachmentsCount(c => c + 1);
+  }, []);
+
+  const sortedMembers = useMemo(() => {
+    return [...members].sort((a, b) => {
+      const aWeight = ROLE_WEIGHTS[a.channel_role || CHANNEL_ROLES.MEMBER] || 0;
+      const bWeight = ROLE_WEIGHTS[b.channel_role || CHANNEL_ROLES.MEMBER] || 0;
+      return bWeight - aWeight;
+    });
+  }, [members]);
+
+  // Categorize attachments by type
+  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 fileItems = useMemo(() =>
+    allAttachments.filter(a => a.attachment_type === 'file' || a.attachment_type === 'voiceRecording'),
+    [allAttachments]
+  );
+
+  useEffect(() => {
+    if (!isVisible) return;
+    if (!attachmentsFetchedForCid || attachmentsFetchedForCid !== channel?.cid) {
+      setLoading(false);
+      return;
+    }
+    if (lastFetchedCidRef.current === channel?.cid) return;
+
+    let active = true;
+
+    if (isBanned || isBlocked || isPreviewMode) {
+      setAllAttachments([]);
+      setLoading(false);
+      return;
+    }
+
+    const fetchMedia = async () => {
+      setLoading(true);
+      try {
+        const response: any = await channel.queryAttachmentMessages();
+        if (active) {
+          const items = response?.attachments || [];
+          startTransition(() => {
+            setAllAttachments(items);
+          });
+          lastFetchedCidRef.current = channel?.cid || null;
+        }
+      } catch (err) {
+        console.error("Failed to query media for channel info", err);
+        if (active) setAllAttachments([]);
+      } finally {
+        if (active) setLoading(false);
+      }
+    };
+
+    fetchMedia();
+    return () => { active = false; };
+  }, [channel, isBanned, isBlocked, isPreviewMode, attachmentsFetchedForCid, isVisible, refreshAttachmentsCount]);
+
+  // Listen to realtime events to automatically refresh attachments
+  useEffect(() => {
+    if (!channel || !isVisible) return;
+
+    const handleEvent = (event: any) => {
+      if (event.message?.attachments && event.message.attachments.length > 0) {
+        forceRefreshAttachments();
+      }
+    };
+
+    channel.on('message.new', handleEvent);
+    channel.on('message.deleted', handleEvent);
+    channel.on('message.updated', handleEvent);
+
+    return () => {
+      channel.off('message.new', handleEvent);
+      channel.off('message.deleted', handleEvent);
+      channel.off('message.updated', handleEvent);
+    };
+  }, [channel, isVisible, forceRefreshAttachments]);
+
+  const { downloadFile } = useDownloadHandler();
+
+  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,
+    }));
+  }, [mediaItems]);
+
+  const handleMediaClick = useCallback((url: string) => {
+    const idx = mediaItems.findIndex(item => item.url === url);
+    if (idx >= 0) {
+      setLightboxIndex(idx);
+      setLightboxOpen(true);
+    }
+  }, [mediaItems]);
+
+  const closeLightbox = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+
+  // Group media into rows of 3 for grid layout inside VList
+  const mediaRows = useMemo(() => {
+    const rows: AttachmentItem[][] = [];
+    for (let i = 0; i < mediaItems.length; i += 3) {
+      rows.push(mediaItems.slice(i, i + 3));
+    }
+    return rows;
+  }, [mediaItems]);
+
+  // Build VList data array based on contentTab (deferred)
+  const vlistData = useMemo(() => {
+    switch (contentTab) {
+      case 'members': {
+        const items: any[] = [];
+        if (onAddMemberClick) {
+          items.push({ type: 'add-member' });
+        }
+        sortedMembers.forEach(member => {
+          items.push({ type: 'member', data: member });
+        });
+        return items;
+      }
+      case 'media':
+        return mediaRows.map(row => ({ type: 'media-row', data: row }));
+      case 'links':
+        return linkItems.map(item => ({ type: 'link', data: item }));
+      case 'files':
+        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) {
+          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">
+            <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;
+    }
+  }, [
+    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;
+
+  return {
+    availableTabs,
+    activeTab,
+    contentTab,
+    handleTabChange,
+    isPending,
+    loading,
+    isTabEmpty,
+    emptyLabel,
+    vlistData,
+    renderVlistItem,
+    lightboxItems,
+    lightboxOpen,
+    lightboxIndex,
+    handleMediaClick,
+    closeLightbox,
+    EmptyState,
+    Loading,
+  };
+};