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

package/src/components/TopicList.tsx

@@ -0,0 +1,236 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { VList as _VList, type VListHandle } from 'virtua';
+const VList = _VList as any;
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from '../hooks/useChatClient';
+import { useTopicGroupUpdates } from '../hooks/useTopicGroupUpdates';
+import { ChannelRow } from './ChannelList';
+import { ChannelItem } from './ChannelList';
+import { Avatar } from './Avatar';
+import { DefaultPinnedIcon } from './ChannelList';
+import { TopicModal } from './TopicModal';
+import { isPendingMember, isSkippedMember } from '../channelRoleUtils';
+import type { TopicListProps } from '../types';
+
+/* ----------------------------------------------------------
+   Default avatars for general and topic items
+   ---------------------------------------------------------- */
+const DefaultGeneralAvatar = React.memo(() => (
+  <div className="ermis-channel-list__topic-hashtag">#</div>
+));
+DefaultGeneralAvatar.displayName = 'DefaultGeneralAvatar';
+
+const DefaultTopicEmojiAvatar = React.memo(({ image }: { image?: string | null }) => {
+  let emoji = '💬';
+  if (image && typeof image === 'string' && image.startsWith('emoji://')) {
+    emoji = image.replace('emoji://', '');
+  }
+  return <div className="ermis-channel-list__topic-hashtag">{emoji}</div>;
+});
+DefaultTopicEmojiAvatar.displayName = 'DefaultTopicEmojiAvatar';
+
+/* ----------------------------------------------------------
+   TopicList – headless virtualized list of topics
+   ---------------------------------------------------------- */
+export const TopicList: React.FC<TopicListProps> = React.memo(({
+  channel,
+  ChannelItemComponent = ChannelItem,
+  AvatarComponent = Avatar,
+  GeneralAvatarComponent,
+  TopicAvatarComponent,
+  generalTopicLabel = 'general',
+  PinnedIconComponent = DefaultPinnedIcon,
+  ChannelActionsComponent,
+  onSelectTopic,
+  onEditTopic,
+  onToggleCloseTopic,
+  onDeleteTopic,
+  hiddenActions,
+  actionLabels,
+  actionIcons,
+  closedTopicIcon,
+  pendingBadgeLabel,
+  blockedBadgeLabel,
+  scrollToTopOnOwnMessage = true,
+  deletedMessageLabel,
+  stickerMessageLabel,
+  photoMessageLabel,
+  videoMessageLabel,
+  voiceRecordingMessageLabel,
+  fileMessageLabel,
+  encryptedMessageLabel,
+  encryptedMessageUnavailableLabel,
+  systemMessageTranslations,
+  signalMessageTranslations,
+}) => {
+  const { client, activeChannel, setActiveChannel } = useChatClient();
+  const currentUserId = client.userID;
+  const { topics } = useTopicGroupUpdates(channel, currentUserId);
+
+  // Ref for imperative scroll control on the virtualized list
+  const vlistRef = useRef<VListHandle>(null);
+
+  // Auto-scroll to top when the current user sends a message in any topic
+  useEffect(() => {
+    if (!scrollToTopOnOwnMessage || !currentUserId) return;
+
+    const subs: { unsubscribe: () => void }[] = [];
+
+    const handleNewMessage = (event: { user?: { id?: string } }) => {
+      if (event.user?.id === currentUserId) {
+        setTimeout(() => vlistRef.current?.scrollToIndex(0), 0);
+      }
+    };
+
+    // Listen on parent channel
+    subs.push(channel.on('message.new', handleNewMessage));
+
+    // Listen on all sub-topics
+    const currentTopics = channel.state?.topics || [];
+    currentTopics.forEach((t: Channel) => {
+      subs.push(t.on('message.new', handleNewMessage));
+    });
+
+    return () => {
+      subs.forEach((s) => s.unsubscribe());
+    };
+  }, [channel, channel.state?.topics, currentUserId, scrollToTopOnOwnMessage]);
+
+  // Default edit topic handler: open built-in TopicModal when no custom handler is provided
+  const [editingTopic, setEditingTopic] = useState<Channel | null>(null);
+
+  const handleEditTopic = useCallback((topic: Channel) => {
+    if (onEditTopic) {
+      onEditTopic(topic);
+    } else {
+      setEditingTopic(topic);
+    }
+  }, [onEditTopic]);
+
+  // General channel proxy — display parent channel as the general topic
+  const generalProxy = useMemo(() => {
+    return new Proxy(channel, {
+      get(target, prop, receiver) {
+        if (prop === 'data') {
+          return { ...target.data, name: generalTopicLabel, is_pinned: false };
+        }
+        const value = Reflect.get(target, prop, receiver);
+        return typeof value === 'function' ? value.bind(target) : value;
+      }
+    });
+  }, [channel, generalTopicLabel]);
+
+  const markChannelRead = useCallback((ch: Channel) => {
+    const client = ch.getClient();
+    const activeCh = client.activeChannels[ch.cid] || ch;
+    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 isPending = isPendingMember(ms?.channel_role as string);
+    const isSkipped = isSkippedMember(ms?.channel_role as string);
+
+    if (!isBannedInChannel && !isPending && !isSkipped) {
+      if ((chState?.unreadCount as number) > 0) {
+        activeCh.markRead().catch(() => { });
+        if (chState) chState.unreadCount = 0;
+      }
+      
+      // Always clear the stale channel just in case to fix UI ghost badges
+      if (ch.state && (ch.state as any).unreadCount > 0) {
+        (ch.state as any).unreadCount = 0;
+      }
+    }
+  }, []);
+
+  const handleSelectGeneral = useCallback(() => {
+    if (onSelectTopic) {
+      onSelectTopic(channel);
+    } else {
+      setActiveChannel(channel);
+    }
+    markChannelRead(channel);
+  }, [channel, onSelectTopic, setActiveChannel, markChannelRead]);
+
+  const handleSelectTopic = useCallback((topic: Channel) => {
+    if (onSelectTopic) {
+      onSelectTopic(topic);
+    } else {
+      setActiveChannel(topic);
+    }
+    markChannelRead(topic);
+  }, [onSelectTopic, setActiveChannel, markChannelRead]);
+
+  /** Null actions component for the general item */
+  const NoActions = useCallback(() => null, []);
+
+  return (
+    <>
+    <VList ref={vlistRef} style={{ height: '100%' }}>
+      {/* General (parent channel) — no actions menu */}
+      <ChannelRow
+        channel={generalProxy as Channel}
+        isActive={activeChannel?.cid === channel.cid}
+        handleSelect={handleSelectGeneral}
+        ChannelItemComponent={ChannelItemComponent}
+        AvatarComponent={GeneralAvatarComponent || DefaultGeneralAvatar as any}
+        currentUserId={currentUserId}
+        pendingBadgeLabel={pendingBadgeLabel}
+        blockedBadgeLabel={blockedBadgeLabel}
+        ChannelActionsComponent={NoActions}
+        hiddenActions={hiddenActions}
+        deletedMessageLabel={deletedMessageLabel}
+        stickerMessageLabel={stickerMessageLabel}
+        photoMessageLabel={photoMessageLabel}
+        videoMessageLabel={videoMessageLabel}
+        voiceRecordingMessageLabel={voiceRecordingMessageLabel}
+        fileMessageLabel={fileMessageLabel}
+        encryptedMessageLabel={encryptedMessageLabel}
+        encryptedMessageUnavailableLabel={encryptedMessageUnavailableLabel}
+        systemMessageTranslations={systemMessageTranslations}
+        signalMessageTranslations={signalMessageTranslations}
+      />
+      {/* Sub-topics — with full data (last msg, unread, timestamp, pin icon) */}
+      {topics.map((topic: Channel) => (
+        <ChannelRow
+          key={topic.cid}
+          channel={topic}
+          isActive={activeChannel?.cid === topic.cid}
+          handleSelect={handleSelectTopic}
+          ChannelItemComponent={ChannelItemComponent}
+          AvatarComponent={TopicAvatarComponent || DefaultTopicEmojiAvatar as any}
+          currentUserId={currentUserId}
+          pendingBadgeLabel={pendingBadgeLabel}
+          blockedBadgeLabel={blockedBadgeLabel}
+          closedTopicIcon={closedTopicIcon}
+          PinnedIconComponent={PinnedIconComponent}
+          ChannelActionsComponent={ChannelActionsComponent}
+          onEditTopic={handleEditTopic}
+          onToggleCloseTopic={onToggleCloseTopic}
+          onDeleteTopic={onDeleteTopic}
+          hiddenActions={hiddenActions}
+          actionLabels={actionLabels}
+          actionIcons={actionIcons}
+          deletedMessageLabel={deletedMessageLabel}
+          stickerMessageLabel={stickerMessageLabel}
+          photoMessageLabel={photoMessageLabel}
+          videoMessageLabel={videoMessageLabel}
+          voiceRecordingMessageLabel={voiceRecordingMessageLabel}
+          fileMessageLabel={fileMessageLabel}
+          encryptedMessageLabel={encryptedMessageLabel}
+          encryptedMessageUnavailableLabel={encryptedMessageUnavailableLabel}
+          systemMessageTranslations={systemMessageTranslations}
+          signalMessageTranslations={signalMessageTranslations}
+        />
+      ))}
+    </VList>
+    {editingTopic && (
+      <TopicModal
+        isOpen={true}
+        onClose={() => setEditingTopic(null)}
+        topic={editingTopic}
+      />
+    )}
+  </>
+  );
+});
+TopicList.displayName = 'TopicList';

package/src/components/TopicModal.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import type { CreateTopicData, EditTopicData } from '@ermis-network/ermis-chat-sdk';
-import { Modal } from './Modal';
+import { Modal as DefaultModal } from './Modal';
 import { useChatClient } from '../hooks/useChatClient';
+import { useChatComponents } from '../context/ChatComponentsContext';
 import type { TopicModalProps } from '../types';
 
 const DEFAULT_TOPIC_ICONS = ['💬', '🔥', '🚀', '⭐', '💡', '🎉', '📌', '📁', '🎨', '💻', '📈', '🤝'];
@@ -24,6 +25,8 @@ export const TopicModal: React.FC<TopicModalProps> = React.memo(({
   savingButtonLabel = topic ? 'Saving...' : 'Creating...',
 }) => {
   const { activeChannel, client } = useChatClient();
+  const { ModalComponent } = useChatComponents();
+  const Modal = ModalComponent || DefaultModal;
   
   const originalName = (topic?.data?.name as string) || '';
   const originalImage = (topic?.data?.image as string) || '';

package/src/components/TypingIndicator.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { useTypingIndicator, type TypingUser } from '../hooks/useTypingIndicator';
 
 export type TypingIndicatorProps = {
-  /** Custom render function for the typing text */
+  /** Custom render function for the typing text (I18n) */
+  typingIndicatorLabel?: (users: TypingUser[]) => string;
+  /** Custom render function for the typing text (JSX) */
   renderText?: (users: TypingUser[]) => React.ReactNode;
 };
 
@@ -10,26 +12,33 @@ export type TypingIndicatorProps = {
  * Displays a "X is typing..." indicator below the message list.
  * Automatically subscribes to typing events via the useTypingIndicator hook.
  */
-export const TypingIndicator: React.FC<TypingIndicatorProps> = React.memo(({ renderText }) => {
+export const TypingIndicator: React.FC<TypingIndicatorProps> = React.memo(({ typingIndicatorLabel, renderText }) => {
   const { typingUsers } = useTypingIndicator();
 
   const isActive = typingUsers.length > 0;
 
-  const text = isActive
-    ? (renderText ? renderText(typingUsers) : formatTypingText(typingUsers))
-    : null;
+  let text: React.ReactNode = null;
+  if (isActive) {
+    if (renderText) {
+      text = renderText(typingUsers);
+    } else if (typingIndicatorLabel) {
+      text = typingIndicatorLabel(typingUsers);
+    } else {
+      text = formatTypingText(typingUsers);
+    }
+  }
 
   return (
-    <div className={`ermis-typing-indicator${isActive ? ' ermis-typing-indicator--active' : ''}`}>
+    <div className={`ermis-typing-indicator-wrapper`}>
       {isActive && (
-        <>
+        <div className="ermis-typing-indicator ermis-typing-indicator--active">
           <div className="ermis-typing-indicator__dots">
             <span className="ermis-typing-indicator__dot" />
             <span className="ermis-typing-indicator__dot" />
             <span className="ermis-typing-indicator__dot" />
           </div>
           <span className="ermis-typing-indicator__text">{text}</span>
-        </>
+        </div>
       )}
     </div>
   );

package/src/components/UserPicker.tsx

@@ -1,13 +1,16 @@
 import React, { useState, useEffect, useMemo, useCallback, useRef, useTransition } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
-import { VList, type VListHandle } from 'virtua';
+import { VList as _VList, type VListHandle } from 'virtua';
+const VList = _VList as any;
 import type {
   UserPickerProps,
   UserPickerItemProps,
   UserPickerSelectedBoxProps,
   UserPickerUser,
 } from '../types';
+import { isFriendChannel } from '../channelRoleUtils';
+import { removeAccents } from '../utils';
 
 /* ---------- Constants ---------- */
 const DEFAULT_PAGE_SIZE = 30;
@@ -113,6 +116,9 @@ DefaultSelectedBox.displayName = 'DefaultSelectedBox';
    UserPicker Component
    ========================================================== */
 
+// Global cache to persist users across UserPicker unmounts/remounts (e.g. during tab switch)
+const globalUsersCache: Record<string, { users: UserPickerUser[], page: number, hasMore: boolean }> = {};
+
 export const UserPicker: React.FC<UserPickerProps> = ({
   mode,
   onSelectionChange,
@@ -128,6 +134,7 @@ export const UserPicker: React.FC<UserPickerProps> = ({
   emptyText = 'No users found.',
   loadingMoreText = 'Loading more...',
   selectedEmptyLabel,
+  friendsOnly,
 }) => {
   const { client } = useChatClient();
   const currentUserId = client?.userID;
@@ -176,13 +183,64 @@ export const UserPicker: React.FC<UserPickerProps> = ({
     let active = true;
     const fetchUsers = async () => {
       if (!client) return;
+
+      // For friendsOnly mode, always read fresh data from activeChannels.
+      // Do NOT use globalUsersCache here — the friend list can change at any
+      // time (e.g. a new friend request was accepted) and caching would
+      // return stale results, hiding the newly added friend.
+      if (friendsOnly) {
+        const friends: UserPickerUser[] = [];
+        const seenIds = new Set<string>();
+        
+        for (const channel of Object.values(client.activeChannels)) {
+          const members = channel.state?.members;
+          if (!members) continue;
+
+          for (const [memberId, member] of Object.entries(members)) {
+            if (memberId === client.userID) continue;
+            
+            if (isFriendChannel(channel, memberId, client.userID as string) && !seenIds.has(memberId)) {
+              if (member.user) {
+                friends.push(member.user as UserPickerUser);
+                seenIds.add(memberId);
+              }
+            }
+          }
+        }
+        
+        if (active) {
+          setAllUsers(friends);
+          setHasMore(false);
+          setPage(1);
+          setLoading(false);
+        }
+        return;
+      }
+
+      const cacheKey = `${client.userID || 'anon'}-${pageSize}`;
+
+      if (globalUsersCache[cacheKey] && globalUsersCache[cacheKey].users.length > 0) {
+        const cached = globalUsersCache[cacheKey];
+        setAllUsers(cached.users);
+        setHasMore(cached.hasMore);
+        setPage(cached.page);
+        setLoading(false);
+        return;
+      }
+
       try {
         setLoading(true);
-        const response = await client.queryUsers(String(pageSize), 1);
+        const response = await client.queryUsers(pageSize, 1);
         if (active && response.data) {
           setAllUsers(response.data);
           setHasMore(response.data.length >= pageSize);
           setPage(1);
+
+          globalUsersCache[cacheKey] = {
+            users: response.data,
+            page: 1,
+            hasMore: response.data.length >= pageSize
+          };
         }
       } catch (err) {
         console.error('[UserPicker] Error fetching users:', err);
@@ -192,7 +250,7 @@ export const UserPicker: React.FC<UserPickerProps> = ({
     };
     fetchUsers();
     return () => { active = false; };
-  }, [client, pageSize]);
+  }, [client, pageSize, friendsOnly]);
 
   /* ---------- 2. Load more (infinite scroll) ---------- */
   const loadMore = useCallback(async () => {
@@ -200,12 +258,23 @@ export const UserPicker: React.FC<UserPickerProps> = ({
     const nextPage = page + 1;
     setLoadingMore(true);
     try {
-      const response = await client.queryUsers(String(pageSize), nextPage);
+      const response = await client.queryUsers(pageSize, nextPage);
       if (response.data) {
         setAllUsers(prev => {
           const existingIds = new Set(prev.map(u => u.id));
           const newUsers = response.data.filter((u: UserPickerUser) => !existingIds.has(u.id));
-          return [...prev, ...newUsers];
+          const combined = [...prev, ...newUsers];
+
+          if (client) {
+            const cacheKey = `${client.userID || 'anon'}-${pageSize}`;
+            globalUsersCache[cacheKey] = {
+              users: combined,
+              page: nextPage,
+              hasMore: response.data.length >= pageSize
+            };
+          }
+
+          return combined;
         });
         setHasMore(response.data.length >= pageSize);
         setPage(nextPage);
@@ -219,19 +288,24 @@ export const UserPicker: React.FC<UserPickerProps> = ({
 
   /* ---------- 3. Local filter ---------- */
   const localFilteredUsers = useMemo(() => {
-    const term = search.toLowerCase().trim();
+    const term = removeAccents(search.toLowerCase().trim());
     if (!term) return allUsers;
-    return allUsers.filter(u => {
-      const name = (u.name || '').toLowerCase();
-      const email = (u.email || '').toLowerCase();
-      const phone = (u.phone || '').toLowerCase();
-      return name.includes(term) || email.includes(term) || phone.includes(term);
-    });
+    const result: UserPickerUser[] = [];
+    for (const u of allUsers) {
+      const name = removeAccents((u.name || '').toLowerCase());
+      const email = removeAccents((u.email || '').toLowerCase());
+      const phone = removeAccents((u.phone || '').toLowerCase());
+      if (name.startsWith(term) || email.startsWith(term) || phone.startsWith(term)) {
+        result.push(u);
+        if (result.length >= 100) break; // optimize for large room
+      }
+    }
+    return result;
   }, [search, allUsers]);
 
   /* ---------- 4. Remote search fallback ---------- */
   useEffect(() => {
-    if (!search.trim() || localFilteredUsers.length > 0) {
+    if (!search.trim() || localFilteredUsers.length > 0 || friendsOnly) {
       setRemoteUsers([]);
       setIsSearching(false);
       return;
@@ -259,9 +333,13 @@ export const UserPicker: React.FC<UserPickerProps> = ({
   }, [search, localFilteredUsers.length, client]);
 
   /* ---------- 5. Derived display list ---------- */
-  const usersToDisplay = (search.trim() && localFilteredUsers.length === 0)
-    ? remoteUsers
-    : localFilteredUsers;
+  const usersToDisplay = useMemo(() => {
+    const list = (search.trim() && localFilteredUsers.length === 0)
+      ? remoteUsers
+      : localFilteredUsers;
+    return list.filter(u => !excludeSet.has(u.id));
+  }, [search, localFilteredUsers, remoteUsers, excludeSet]);
+
   const isListLoading = loading || isSearching || isPendingFilter;
 
   /* ---------- 6. Selection handlers ---------- */