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

package/src/context/ChatComponentsContext.tsx

@@ -0,0 +1,14 @@
+import React, { createContext, useContext } from 'react';
+import type { ModalProps, DropdownProps, PanelProps, ForwardMessageModalProps } from '../types';
+
+export type ChatComponentsContextValue = {
+  ModalComponent?: React.ComponentType<ModalProps>;
+  DropdownComponent?: React.ComponentType<DropdownProps>;
+  PanelComponent?: React.ComponentType<PanelProps>;
+  ForwardMessageModalComponent?: React.ComponentType<ForwardMessageModalProps>;
+  ChannelListErrorIndicator?: React.ComponentType<{ text?: string; onRetry?: () => void }>;
+};
+
+export const ChatComponentsContext = createContext<ChatComponentsContextValue>({});
+
+export const useChatComponents = () => useContext(ChatComponentsContext);

package/src/context/ChatProvider.tsx

@@ -1,8 +1,9 @@
-import React, { createContext, useState, useCallback } from 'react';
+import React, { createContext, useState, useCallback, useRef, useMemo } from 'react';
 import type { Channel, FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import type { Theme, ChatContextValue, ChatProviderProps, ReadStateEntry } from '../types';
 import { ErmisCallProvider } from '../components/ErmisCallProvider';
 import { ErmisCallUI } from '../components/ErmisCallUI';
+import { ChatComponentsContext } from './ChatComponentsContext';
 
 export type { Theme, ChatContextValue, ChatProviderProps } from '../types';
 
@@ -11,6 +12,7 @@ export const ChatContext = createContext<ChatContextValue | null>(null);
 export const ChatProvider: React.FC<ChatProviderProps> = ({
   client,
   children,
+  components = {},
   initialTheme = 'light',
   enableCall = false,
   callSessionId,
@@ -36,18 +38,22 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   const [jumpToMessageId, setJumpToMessageId] = useState<string | null>(null);
 
   const activeChannel = activeChannelRaw;
+  const activeChannelCidRef = useRef<string | null>(null);
+
+  // In-memory draft storage — Map<cid, { html: string; files: any[] }>
+  // O(1) lookup/insert/delete, bounded by number of visited channels per session
+  const draftsRef = useRef<Map<string, { html: string; files: any[] }>>(new Map());
 
   const setActiveChannel = useCallback((channel: Channel | null) => {
+    const newCid = channel?.cid || null;
+    if (activeChannelCidRef.current === newCid) return;
+    
+    activeChannelCidRef.current = newCid;
     setActiveChannelRaw(channel);
     setQuotedMessage(null);
     setEditingMessage(null);
-    if (channel) {
-      setMessages([...channel.state.latestMessages]);
-      setReadState({ ...channel.state.read });
-    } else {
-      setMessages([]);
-      setReadState({});
-    }
+    setMessages([]);
+    setReadState({});
   }, []);
 
   /** Re-read messages from SDK state into React state */
@@ -57,6 +63,25 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     }
   }, [activeChannel]);
 
+  /** Save a draft message (innerHTML and files) for a specific channel */
+  const setDraft = useCallback((cid: string, draft: { html: string; files: any[] }) => {
+    if ((draft.html && draft.html.trim()) || (draft.files && draft.files.length > 0)) {
+      draftsRef.current.set(cid, draft);
+    } else {
+      draftsRef.current.delete(cid);
+    }
+  }, []);
+
+  /** Retrieve the saved draft for a specific channel */
+  const getDraft = useCallback((cid: string): { html: string; files: any[] } | undefined => {
+    return draftsRef.current.get(cid);
+  }, []);
+
+  /** Clear all saved drafts (e.g. on logout) */
+  const clearAllDrafts = useCallback(() => {
+    draftsRef.current.clear();
+  }, []);
+
   const value: ChatContextValue = {
     client,
     activeChannel,
@@ -77,6 +102,9 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     jumpToMessageId,
     setJumpToMessageId,
     enableCall,
+    setDraft,
+    getDraft,
+    clearAllDrafts,
   };
 
   const CallUIView = CallUIComponent ? <CallUIComponent /> : (
@@ -87,12 +115,14 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   );
 
   const content = (
-    <ChatContext.Provider value={value}>
-      <div className={`ermis-chat ermis-chat--${theme}`}>
-        {children}
-        {enableCall && CallUIView}
-      </div>
-    </ChatContext.Provider>
+    <ChatComponentsContext.Provider value={components}>
+      <ChatContext.Provider value={value}>
+        <div className={`ermis-chat ermis-chat--${theme}`}>
+          {children}
+          {enableCall && CallUIView}
+        </div>
+      </ChatContext.Provider>
+    </ChatComponentsContext.Provider>
   );
 
   if (enableCall) {

package/src/context/ErmisCallContext.tsx

@@ -32,6 +32,10 @@ export type CallContextValue = {
   isRemoteVideoMuted: boolean;
   upgradeCall: () => Promise<void>;
   callDuration: number;
+  isAccepting: boolean;
+  isRejecting: boolean;
+  isEnding: boolean;
+  resetCall: () => void;
 };
 
 export const ErmisCallContext = React.createContext<CallContextValue | undefined>(undefined);

package/src/hooks/useChannelCapabilities.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useChatClient } from './useChatClient';
+import { usePreviewState } from './usePreviewState';
 import { isGroupChannel } from '../channelTypeUtils';
 import { canManageChannel, CHANNEL_ROLES } from '../channelRoleUtils';
 
@@ -19,18 +20,20 @@ export const useChannelCapabilities = () => {
   }, [activeChannel]);
 
   const currentUserId = client?.userID || '';
+  const { isPreviewMode } = usePreviewState(activeChannel, currentUserId);
   const isGroupCh = isGroupChannel(activeChannel);
   const role = (activeChannel?.state as any)?.members?.[currentUserId]?.channel_role;
   
-  const isOwner = role === CHANNEL_ROLES.OWNER || activeChannel?.data?.created_by_id === currentUserId;
-  const isModerator = role === CHANNEL_ROLES.MODERATOR;
-  const isOwnerOrModerator = isOwner || isModerator || canManageChannel(role);
+  const isOwner = isPreviewMode ? false : (role === CHANNEL_ROLES.OWNER || activeChannel?.data?.created_by_id === currentUserId);
+  const isModerator = isPreviewMode ? false : (role === CHANNEL_ROLES.MODERATOR);
+  const isOwnerOrModerator = isOwner || isModerator || (!isPreviewMode && canManageChannel(role));
 
   const capabilities: string[] = isGroupCh ? (activeChannel?.data as any)?.member_capabilities || [] : [];
 
   const hasCapability = useCallback((cap: string) => {
+    if (isPreviewMode) return false;
     return !isGroupCh || isOwnerOrModerator || capabilities.includes(cap);
-  }, [isGroupCh, isOwnerOrModerator, capabilities, updateTick]); // React to updateTick correctly
+  }, [isGroupCh, isOwnerOrModerator, capabilities, updateTick, isPreviewMode]);
 
   return {
     isGroupChannel: isGroupCh,

package/src/hooks/useChannelData.ts

@@ -43,13 +43,20 @@ export const useChannelProfile = (channel: Channel | null | undefined) => {
   useEffect(() => {
     if (!channel) return;
     const updateChannel = () => setChannelUpdateCount(c => c + 1);
-    const sub = channel.on('channel.updated', updateChannel);
-    return () => sub.unsubscribe();
+    const sub1 = channel.on('channel.updated', updateChannel);
+    const sub2 = channel.on('channel.pinned', updateChannel);
+    const sub3 = channel.on('channel.unpinned', updateChannel);
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+      sub3.unsubscribe();
+    };
   }, [channel]);
 
   const channelName = useMemo(() => channel?.data?.name || channel?.cid || 'Unknown Channel', [channel?.data?.name, channel?.cid, channel?.type, channelUpdateCount]);
   const channelImage = useMemo(() => channel?.data?.image as string | undefined, [channel?.data?.image, channelUpdateCount]);
   const channelDescription = useMemo(() => channel?.data?.description as string | undefined, [channel?.data?.description, channelUpdateCount]);
+  const isPinned = useMemo(() => channel?.data?.is_pinned === true, [channel?.data?.is_pinned, channelUpdateCount]);
 
-  return { channelName, channelImage, channelDescription };
+  return { channelName, channelImage, channelDescription, isPinned };
 };

package/src/hooks/useChannelListUpdates.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import type { Channel, Event } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from './useChatClient';
-import { isDirectChannel } from '../channelTypeUtils';
+import { isDirectChannel, isGroupChannel } from '../channelTypeUtils';
 import { isPendingMember } from '../channelRoleUtils';
 
 /**
@@ -18,6 +18,7 @@ import { isPendingMember } from '../channelRoleUtils';
 export function useChannelListUpdates(
   channels: Channel[],
   setChannels: React.Dispatch<React.SetStateAction<Channel[]>>,
+  onOwnMessageNew?: () => void,
 ): void {
   const { client, activeChannel, setActiveChannel } = useChatClient();
 
@@ -25,17 +26,23 @@ export function useChannelListUpdates(
   const activeChannelRef = useRef(activeChannel);
   activeChannelRef.current = activeChannel;
 
+  // Ref to always have the latest callback without re-subscribing
+  const onOwnMessageNewRef = useRef(onOwnMessageNew);
+  onOwnMessageNewRef.current = onOwnMessageNew;
+
   useEffect(() => {
     // --- message.new: re-sort + auto mark-read ---
     const handleNewMessage = (event: Event) => {
       const eventCid = event.cid;
       if (!eventCid) return;
 
+      const isOwnMessage = event.user?.id === client.userID;
+
       // If the new message is on the active channel and from someone else,
       // mark it as read immediately so unreadCount resets to 0.
       // Skip markRead if the current user is banned, blocked, or pending in that channel.
       const active = activeChannelRef.current;
-      if (active?.cid === eventCid && event.user?.id !== client.userID) {
+      if (active?.cid === eventCid && !isOwnMessage) {
         const isBannedInActive = Boolean(active.state?.membership?.banned);
         const isBlockedInActive = isDirectChannel(active) && Boolean(active.state?.membership?.blocked);
         const isPendingActive = isPendingMember(active.state?.membership?.channel_role as string);
@@ -48,13 +55,23 @@ export function useChannelListUpdates(
       }
 
       setChannels((prev) => {
-        const idx = prev.findIndex((ch) => ch.cid === eventCid);
-        if (idx <= 0) {
+        let targetIdx = prev.findIndex((ch) => ch.cid === eventCid);
+
+        // If not found directly, check if this is a topic message — move the parent channel to top
+        if (targetIdx < 0) {
+          const topicChannel = client.activeChannels[eventCid];
+          const parentCid = topicChannel?.data?.parent_cid as string | undefined;
+          if (parentCid) {
+            targetIdx = prev.findIndex((ch) => ch.cid === parentCid);
+          }
+        }
+
+        if (targetIdx <= 0) {
           // Already at top or not found — just create a new reference
-          return idx === 0 ? [...prev] : prev;
+          return targetIdx === 0 ? [...prev] : prev;
         }
 
-        const channel = prev[idx];
+        const channel = prev[targetIdx];
 
         // Don't move banned channels to the top
         if (channel.state?.membership?.banned) {
@@ -63,10 +80,17 @@ export function useChannelListUpdates(
 
         // Move channel to the top
         const updated = [...prev];
-        const [ch] = updated.splice(idx, 1);
+        const [ch] = updated.splice(targetIdx, 1);
         updated.unshift(ch);
         return updated;
       });
+
+      // Notify the component layer that the current user sent a message
+      // so it can scroll to top. Use setTimeout(0) to ensure React has
+      // flushed the setChannels state update before the scroll fires.
+      if (isOwnMessage && onOwnMessageNewRef.current) {
+        setTimeout(() => onOwnMessageNewRef.current?.(), 0);
+      }
     };
 
     // --- channel.deleted: remove from list and reset active ---
@@ -178,32 +202,74 @@ export function useChannelListUpdates(
       }
     };
 
-    // --- notification.invite_accepted: force re-grouping ---
-    const handleMemberUpdated = (event: Event) => {
+    // --- notification.invite_accepted / member.joined: force re-grouping or add to list ---
+    const handleMemberUpdated = async (event: Event) => {
       const updatedUserId = event.member?.user_id || event.member?.user?.id || event.user?.id;
       if (updatedUserId === client.userID) {
-        setChannels((prev) => {
-          // Defensively mutate the channel's membership before grouping logic runs
-          const eventCid =
-            event.cid ||
-            event.channel?.cid ||
-            ((event as Record<string, unknown>).channel_id
-              ? `${(event as Record<string, unknown>).channel_type}:${(event as Record<string, unknown>).channel_id}`
-              : undefined);
+        const eventCid =
+          event.cid ||
+          event.channel?.cid ||
+          ((event as Record<string, unknown>).channel_id
+            ? `${(event as Record<string, unknown>).channel_type}:${(event as Record<string, unknown>).channel_id}`
+            : undefined);
 
+        setChannels((prev) => {
           if (eventCid && event.member) {
             const targetChannel = prev.find((c) => c.cid === eventCid);
-            // We forcefully map the updated incoming member data into the static channel representation
             if (targetChannel && targetChannel.state) {
+              // Channel already in list — just update membership for re-grouping
               targetChannel.state.membership = {
                 ...targetChannel.state.membership,
                 ...event.member,
               } as unknown as Record<string, unknown>;
             }
           }
-
-          return [...prev]; // Force react map to regenerate
+          return [...prev];
         });
+
+        // For team channels with topics: re-watch to load topics from server.
+        // When the user was pending, queryChannels did not return topics.
+        // After accepting the invite, we need a fresh query to hydrate them.
+        if (eventCid) {
+          const existingChannel = client.activeChannels[eventCid];
+          if (existingChannel && isGroupChannel(existingChannel) && existingChannel.data?.topics_enabled) {
+            existingChannel.watch().then(() => {
+              // Notify React hooks (useTopicGroupUpdates) that topics have been loaded
+              existingChannel._callChannelListeners({
+                type: 'channel.updated',
+                cid: existingChannel.cid,
+                channel: existingChannel.data,
+              } as any);
+              // Also trigger channel list re-render
+              setChannels((p) => [...p]);
+            }).catch((err) => {
+              console.error('Failed to re-watch team channel after invite accepted:', err);
+            });
+          }
+        }
+
+        // If the channel is NOT in the list yet (e.g. user just joined a public channel
+        // from search), add it — same logic as handleChannelCreated
+        if (eventCid) {
+          setChannels((prev) => {
+            if (prev.some((c) => c.cid === eventCid)) return prev; // already in list
+            const type = event.channel?.type || (event as Record<string, unknown>).channel_type;
+            const id = event.channel?.id || (event as Record<string, unknown>).channel_id;
+            if (!type || !id) return prev;
+            const channelInstance = client.channel(type as string, id as string);
+            if (channelInstance.state) {
+              channelInstance.state.membership = {
+                ...channelInstance.state.membership,
+                ...event.member,
+              } as unknown as Record<string, unknown>;
+            }
+            // Watch if not initialized so we get full state
+            if (!channelInstance.initialized) {
+              channelInstance.watch().catch(() => {});
+            }
+            return [channelInstance, ...prev];
+          });
+        }
       }
     };
 
@@ -215,7 +281,10 @@ export function useChannelListUpdates(
     const sub1 = client.on('message.new', handleNewMessage);
     const sub2 = client.on('channel.deleted', handleChannelDeleted);
     const sub3 = client.on('member.removed', handleMemberRemoved);
-    const sub4 = client.on('channel.created', (event) => handleChannelCreated(event, true));
+    const sub4 = client.on('channel.created', (event) => {
+      const isCreator = event.user?.id === client.userID || event.user_id === client.userID;
+      handleChannelCreated(event, !isCreator);
+    });
     const sub5 = client.on('member.added', handleMemberAdded);
     const sub6 = client.on('notification.added_to_channel', handleMemberAdded);
     const sub7 = client.on('notification.invite_rejected', handleMemberRemoved);
@@ -226,6 +295,9 @@ export function useChannelListUpdates(
     const sub12 = client.on('channel.pinned', handleGenericUpdate);
     const sub13 = client.on('channel.unpinned', handleGenericUpdate);
     const sub14 = client.on('notification.invite_messaging_skipped', handleMemberUpdated);
+    // When a user joins a public channel (action='join'), the server sends member.joined
+    // instead of notification.invite_accepted — handle it to re-group the channel list
+    const sub15 = client.on('member.joined', handleMemberUpdated);
 
     return () => {
       sub1.unsubscribe();
@@ -242,6 +314,7 @@ export function useChannelListUpdates(
       sub12.unsubscribe();
       sub13.unsubscribe();
       sub14.unsubscribe();
+      sub15.unsubscribe();
     };
   }, [client, setChannels, setActiveChannel]);
 }