@ermis-network/ermis-chat-react 1.0.0

package/src/hooks/useChannelData.ts

@@ -0,0 +1,55 @@
+import { useState, useEffect, useMemo } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+
+export const useChannelMembers = (channel: Channel | null | undefined) => {
+  const [memberUpdateCount, setMemberUpdateCount] = useState(0);
+
+  useEffect(() => {
+    if (!channel) return;
+    const updateMembers = () => setMemberUpdateCount(c => c + 1);
+
+    const sub1 = channel.on('member.added', updateMembers);
+    const sub2 = channel.on('member.removed', updateMembers);
+    const sub3 = channel.on('member.updated', updateMembers);
+    const sub4 = channel.on('member.promoted', updateMembers);
+    const sub5 = channel.on('member.demoted', updateMembers);
+    const sub6 = channel.on('member.banned', updateMembers);
+    const sub7 = channel.on('member.unbanned', updateMembers);
+    const sub8 = channel.on('notification.invite_rejected', updateMembers);
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+      sub3.unsubscribe();
+      sub4.unsubscribe();
+      sub5.unsubscribe();
+      sub6.unsubscribe();
+      sub7.unsubscribe();
+      sub8.unsubscribe();
+    };
+  }, [channel]);
+
+  const membersArray = useMemo(() => {
+    if (!channel?.state?.members) return [];
+    return Object.values(channel.state.members) as Array<Record<string, unknown>>;
+  }, [channel?.state?.members, memberUpdateCount]);
+
+  return { members: membersArray, memberUpdateCount };
+};
+
+export const useChannelProfile = (channel: Channel | null | undefined) => {
+  const [channelUpdateCount, setChannelUpdateCount] = useState(0);
+
+  useEffect(() => {
+    if (!channel) return;
+    const updateChannel = () => setChannelUpdateCount(c => c + 1);
+    const sub = channel.on('channel.updated', updateChannel);
+    return () => sub.unsubscribe();
+  }, [channel]);
+
+  const channelName = useMemo(() => channel?.data?.name || channel?.cid || 'Unknown Channel', [channel?.data?.name, channel?.cid, 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]);
+
+  return { channelName, channelImage, channelDescription };
+};

package/src/hooks/useChannelListUpdates.ts

@@ -0,0 +1,224 @@
+import { useEffect, useRef } from 'react';
+import type { Channel, Event } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+
+/**
+ * Subscribes to real-time events and keeps the channel list in sync:
+ *
+ *  1. `message.new`  → moves channel to top, auto-calls `markRead()` if
+ *                       the channel is currently active
+ *  2. `message.read`  → triggers re-render so the unread badge disappears
+ *
+ * The SDK already mutates `channel.state.latestMessages` and
+ * `channel.state.unreadCount` before our listener fires, so we only
+ * need to re-order / flush the React state.
+ */
+export function useChannelListUpdates(
+  channels: Channel[],
+  setChannels: React.Dispatch<React.SetStateAction<Channel[]>>,
+): void {
+  const { client, activeChannel, setActiveChannel } = useChatClient();
+
+  // Ref to always have the latest activeChannel without re-subscribing
+  const activeChannelRef = useRef(activeChannel);
+  activeChannelRef.current = activeChannel;
+
+  useEffect(() => {
+    // --- message.new: re-sort + auto mark-read ---
+    const handleNewMessage = (event: Event) => {
+      const eventCid = event.cid;
+      if (!eventCid) return;
+
+      // 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) {
+        const isBannedInActive = Boolean(active.state?.membership?.banned);
+        const isBlockedInActive = active.type === 'messaging' && Boolean(active.state?.membership?.blocked);
+        const isPendingActive =
+          active.state?.membership?.channel_role === 'pending' || (active.state?.membership as Record<string, unknown>)?.role === 'pending';
+
+        if (!isBannedInActive && !isBlockedInActive && !isPendingActive) {
+          active.markRead().catch(() => {
+            // silently ignore mark-read errors
+          });
+        }
+      }
+
+      setChannels((prev) => {
+        const idx = prev.findIndex((ch) => ch.cid === eventCid);
+        if (idx <= 0) {
+          // Already at top or not found — just create a new reference
+          return idx === 0 ? [...prev] : prev;
+        }
+
+        const channel = prev[idx];
+
+        // Don't move banned channels to the top
+        if (channel.state?.membership?.banned) {
+          return [...prev];
+        }
+
+        // Move channel to the top
+        const updated = [...prev];
+        const [ch] = updated.splice(idx, 1);
+        updated.unshift(ch);
+        return updated;
+      });
+    };
+
+    // --- channel.deleted: remove from list and reset active ---
+    const handleChannelDeleted = (event: Event) => {
+      const eventCid = event.cid || event.channel?.cid;
+      if (!eventCid) return;
+
+      if (activeChannelRef.current?.cid === eventCid) {
+        setActiveChannel(null);
+      }
+
+      setChannels((prev) => prev.filter((ch) => ch.cid !== eventCid));
+    };
+
+    // --- member.removed / notification.invite_rejected: remove from list if it's current user ---
+    const handleMemberRemoved = (event: Event) => {
+      const eventCid = event.cid || event.channel?.cid;
+      // channel_id is often used in notification.* events instead of .cid directly
+      const normalizedCid = eventCid
+        ? eventCid
+        : (event as Record<string, unknown>).channel_id
+        ? `${(event as Record<string, unknown>).channel_type}:${(event as Record<string, unknown>).channel_id}`
+        : undefined;
+
+      if (!normalizedCid) return;
+
+      const removedUserId = event.member?.user_id || event.member?.user?.id || event.user?.id;
+
+      // If the current user was removed or rejected the invite, remove the channel from their list
+      if (removedUserId === client.userID) {
+        if (activeChannelRef.current?.cid === normalizedCid) {
+          setActiveChannel(null);
+        }
+        setChannels((prev) => prev.filter((ch) => ch.cid !== normalizedCid));
+      }
+      // Note: We don't trigger a global global re-render here if someone else is removed.
+      // Individual ChannelRow components handle UI updates (e.g., via channel.updated or member.removed events locally).
+    };
+
+    // --- channel.created: fetch channel details and prepend to list ---
+    const handleChannelCreated = async (event: Event, forceWatch: boolean = false) => {
+      const type = event.channel?.type || (event as Record<string, unknown>).channel_type;
+      const id = event.channel?.id || (event as Record<string, unknown>).channel_id;
+      const cid = event.channel?.cid || event.cid || `${type}:${id}`;
+
+      if (!type || !id) return;
+
+      try {
+        // Initialize or retrieve channel instance from SDK cache
+        const channelInstance = client.channel(type as string, id as string);
+
+        // If this is a member.added event (where event.member belongs to the current user),
+        // we optimistically inject the membership so it instantly jumps into pending invites!
+        // We DO NOT do this for channel.created, because in channel.created, event.member is the creator (owner).
+        if (!forceWatch && event.type === 'member.added' && event.member && channelInstance.state) {
+          channelInstance.state.membership = { ...channelInstance.state.membership, ...event.member } as unknown as Record<string, unknown>;
+        }
+
+        // If the caller requested an explicit api call (e.g. for channel.created)
+        if (forceWatch && !channelInstance.initialized) {
+          await channelInstance.watch().catch((err) => console.error('Failed to watch channel:', err));
+        }
+
+        setChannels((prev) => {
+          // Double check to prevent duplicates after async pause
+          if (prev.some((c) => c.cid === cid)) {
+            return prev;
+          }
+          return [channelInstance, ...prev];
+        });
+
+        // Loop wait for the core SDK to finish populating the local state from its own watch
+        if (!channelInstance.initialized) {
+          let attempts = 0;
+          const checkInitialized = setInterval(() => {
+            attempts++;
+            if (channelInstance.initialized || attempts > 60 /* 3s max */) {
+              clearInterval(checkInitialized);
+              if (channelInstance.initialized) {
+                // Force useMemo in ChannelList to recalculate classification (invite vs regular) just in case
+                setChannels((p) => [...p]);
+                // Manually synthesize a channel.updated event to bust the React.memo inside ChannelItem
+                const clientObj = channelInstance.getClient();
+                if ('dispatchEvent' in clientObj && typeof clientObj.dispatchEvent === 'function') {
+                  (clientObj.dispatchEvent as Function)({
+                    type: 'channel.updated',
+                    cid: channelInstance.cid,
+                    channel: channelInstance.data,
+                  });
+                }
+              }
+            }
+          }, 50);
+        }
+      } catch (err) {
+        console.error('Failed to watch newly created channel:', err);
+      }
+    };
+
+    // --- member.added / notification.added_to_channel: fetch if current user is added/invited ---
+    const handleMemberAdded = async (event: Event) => {
+      const addedUserId = event.member?.user_id || event.member?.user?.id;
+      // If the current user was invited or added, fetch the channel (NO API duplication)
+      if (addedUserId === client.userID) {
+        await handleChannelCreated(event, false);
+      }
+    };
+
+    // --- notification.invite_accepted: force re-grouping ---
+    const handleMemberUpdated = (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);
+
+          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) {
+              targetChannel.state.membership = {
+                ...targetChannel.state.membership,
+                ...event.member,
+              } as unknown as Record<string, unknown>;
+            }
+          }
+
+          return [...prev]; // Force react map to regenerate
+        });
+      }
+    };
+
+    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 sub5 = client.on('member.added', handleMemberAdded);
+    const sub6 = client.on('notification.added_to_channel', handleMemberAdded);
+    const sub7 = client.on('notification.invite_rejected', handleMemberRemoved);
+    const sub8 = client.on('notification.invite_accepted', handleMemberUpdated);
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+      sub3.unsubscribe();
+      sub4.unsubscribe();
+      sub5.unsubscribe();
+      sub6.unsubscribe();
+      sub7.unsubscribe();
+      sub8.unsubscribe();
+    };
+  }, [client, setChannels, setActiveChannel]);
+}

package/src/hooks/useChannelMessages.ts

@@ -0,0 +1,159 @@
+import { useEffect, useCallback } from 'react';
+import type { Event } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+
+export type UseChannelMessagesOptions = {
+  scrollToBottom: (smooth: boolean) => void;
+  /** Shared guard ref — blocks scroll-triggered loads during channel switch */
+  jumpingRef: React.MutableRefObject<boolean>;
+  isAtBottomRef: React.MutableRefObject<boolean>;
+  /** Called to reset load-more state when channel switches */
+  onChannelSwitch?: () => void;
+};
+
+/**
+ * Schedule multiple scroll-to-bottom attempts with increasing delays.
+ * Handles content that changes height after initial render (images, embeds).
+ */
+const SCROLL_DELAYS = [50, 200, 500, 1000];
+
+/**
+ * Subscribes to channel message events and handles:
+ * - message.new → sync + scroll to bottom
+ * - message.updated / message.deleted → sync only
+ * - Channel switch → reset state + scroll to bottom
+ */
+export function useChannelMessages({
+  scrollToBottom,
+  jumpingRef,
+  isAtBottomRef,
+  onChannelSwitch,
+}: UseChannelMessagesOptions): void {
+  const { client, activeChannel, syncMessages, setReadState } = useChatClient();
+
+  const scheduleScrollToBottom = useCallback(
+    (smooth: boolean) => {
+      if (smooth) {
+        // Trigger smooth scroll exactly once, otherwise browsers will
+        // cancel the smooth animation if called multiple times in a row
+        setTimeout(() => scrollToBottom(true), 100);
+      } else {
+        SCROLL_DELAYS.forEach((delay) => {
+          setTimeout(() => scrollToBottom(false), delay);
+        });
+      }
+    },
+    [scrollToBottom],
+  );
+
+  useEffect(() => {
+    if (!activeChannel) return;
+
+    // Reset state for the new channel
+    onChannelSwitch?.();
+
+    // Manually force isAtBottom to true because we are jumping to the bottom.
+    // jumpingRef blocks the resulting scroll event from updating isAtBottomRef,
+    // so if it was false in the previous channel, it would stay false!
+    isAtBottomRef.current = true;
+
+    // Block scroll triggers during channel-switch scroll
+    jumpingRef.current = true;
+    // Defer scroll outside React lifecycle to avoid virtua flushSync warning
+    setTimeout(() => {
+      scrollToBottom(false);
+      // Wait long enough for scrollToBottom's internal retries and the browser
+      // to execute the scroll event
+      setTimeout(() => {
+        jumpingRef.current = false;
+      }, 100);
+    }, 0);
+
+    const handleNewMessage = (event: Event) => {
+      // Capture scroll state BEFORE sync causes re-render
+      const wasAtBottom = isAtBottomRef.current;
+
+      syncMessages();
+
+      const isOwnMessage = event.message?.user?.id === client.userID || event.message?.user_id === client.userID;
+
+      if (isOwnMessage || wasAtBottom) {
+        scheduleScrollToBottom(true);
+      }
+    };
+
+    const handleMessageChange = (_event: Event) => {
+      syncMessages();
+    };
+
+    const handleMessageRead = (_event: Event) => {
+      // SDK already updated channel.state.read — sync into React state
+      setReadState({ ...activeChannel.state.read });
+    };
+
+    const handleUnblocked = (event: Event) => {
+      // If the current user's block status was updated (meaning we unblocked someone)
+      if (event.member?.user_id === client.userID) {
+        // Refetch latest messages to fill in any missed during the block period
+        activeChannel
+          .query({ messages: { limit: 30 } })
+          .then(() => {
+            syncMessages();
+            scheduleScrollToBottom(false);
+            const isPending =
+              activeChannel.state?.membership?.channel_role === 'pending' ||
+              (activeChannel.state?.membership as any)?.role === 'pending';
+            if (!isPending) {
+              activeChannel.markRead().catch(() => {});
+            }
+          })
+          .catch((e) => console.error('Failed to sync messages after unblock', e));
+      }
+    };
+
+    const handleInviteAccepted = (event: Event) => {
+      // Make sure the accepted invite corresponds to the actively opened channel
+      const eventCid =
+        event.cid ||
+        event.channel?.cid ||
+        ((event as any).channel_id ? `${(event as any).channel_type}:${(event as any).channel_id}` : undefined);
+      if (eventCid === activeChannel.cid) {
+        activeChannel
+          .query({ messages: { limit: 30 } })
+          .then(() => {
+            syncMessages();
+            scheduleScrollToBottom(false);
+            activeChannel.markRead().catch(() => {});
+          })
+          .catch((e) => console.error('Failed to sync messages after accepting invite', e));
+      }
+    };
+
+    const client = activeChannel.getClient();
+    const sub1 = activeChannel.on('message.new', handleNewMessage);
+    const sub2 = activeChannel.on('message.updated', handleMessageChange);
+    const sub3 = activeChannel.on('message.deleted', handleMessageChange);
+    const sub4 = activeChannel.on('message.pinned', handleMessageChange);
+    const sub5 = activeChannel.on('message.unpinned', handleMessageChange);
+    const sub6 = activeChannel.on('message.read', handleMessageRead);
+    const sub7 = activeChannel.on('message.deleted_for_me', handleMessageChange);
+    const sub8 = activeChannel.on('reaction.new', handleMessageChange);
+    const sub9 = activeChannel.on('reaction.deleted', handleMessageChange);
+    const sub10 = activeChannel.on('member.unblocked', handleUnblocked);
+    const sub11 = client.on('notification.invite_accepted', handleInviteAccepted);
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+      sub3.unsubscribe();
+      sub4.unsubscribe();
+      sub5.unsubscribe();
+      sub6.unsubscribe();
+      sub7.unsubscribe();
+      sub8.unsubscribe();
+      sub9.unsubscribe();
+      sub10.unsubscribe();
+      sub11.unsubscribe();
+    };
+  }, [activeChannel, scrollToBottom, scheduleScrollToBottom, syncMessages, onChannelSwitch, setReadState]);
+}

package/src/hooks/useChannelRowUpdates.ts

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+
+/**
+ * Custom hook to abstract real-time row-level updates for a single channel.
+ * Manages the local unread count, last message preview, and banned status for the channel row in the list.
+ */
+export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
+  // Track banned state for the current user in this channel
+  const [isBannedInChannel, setIsBannedInChannel] = useState(() => Boolean(channel.state?.membership?.banned));
+  const [isBlockedInChannel, setIsBlockedInChannel] = useState(() => {
+    if (channel.type !== 'messaging') return false;
+    return Boolean(channel.state?.membership?.blocked);
+  });
+
+  // Force re-render when messages, members, or read state changes
+  const [updateCount, setUpdateCount] = useState(0);
+
+  useEffect(() => {
+    setIsBannedInChannel(Boolean(channel.state?.membership?.banned));
+    setIsBlockedInChannel(
+      channel.type === 'messaging' ? Boolean(channel.state?.membership?.blocked) : false
+    );
+
+    const handleBanned = (event: any) => {
+      if (event.member?.user_id === currentUserId) {
+        setIsBannedInChannel(true);
+      }
+    };
+    const handleUnbanned = (event: any) => {
+      if (event.member?.user_id === currentUserId) {
+        setIsBannedInChannel(false);
+      }
+    };
+
+    const handleUpdate = () => setUpdateCount((c) => c + 1);
+
+    const sub1 = channel.on('member.banned', handleBanned);
+    const sub2 = channel.on('member.unbanned', handleUnbanned);
+    const sub3 = channel.on('message.new', handleUpdate);
+    const sub4 = channel.on('message.read', handleUpdate);
+    const sub5 = channel.on('message.updated', handleUpdate);
+    const sub6 = channel.on('message.deleted', handleUpdate);
+    const sub7 = channel.on('channel.updated', handleUpdate);
+    const sub8 = channel.on('member.added', handleUpdate);
+    const sub9 = channel.on('member.removed', handleUpdate);
+
+    // Blocked state (messaging channels only)
+    const handleBlocked = (event: any) => {
+      if (event.member?.user_id === currentUserId) {
+        setIsBlockedInChannel(true);
+      }
+    };
+    const handleUnblocked = (event: any) => {
+      if (event.member?.user_id === currentUserId) {
+        setIsBlockedInChannel(false);
+      }
+    };
+    const sub10 = channel.on('member.blocked', handleBlocked);
+    const sub11 = channel.on('member.unblocked', handleUnblocked);
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+      sub3.unsubscribe();
+      sub4.unsubscribe();
+      sub5.unsubscribe();
+      sub6.unsubscribe();
+      sub7.unsubscribe();
+      sub8.unsubscribe();
+      sub9.unsubscribe();
+      sub10.unsubscribe();
+      sub11.unsubscribe();
+    };
+  }, [channel, currentUserId]);
+
+  return { isBannedInChannel, isBlockedInChannel, updateCount };
+}

package/src/hooks/useChatClient.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ChatContext } from '../context/ChatProvider';
+import type { ChatContextValue } from '../context/ChatProvider';
+
+export const useChatClient = (): ChatContextValue => {
+  const ctx = useContext(ChatContext);
+  if (!ctx) {
+    throw new Error('useChatClient must be used within a ChatProvider');
+  }
+  return ctx;
+};

package/src/hooks/useEmojiPicker.ts

@@ -0,0 +1,53 @@
+import { useState, useCallback, useRef } from 'react';
+import { moveCaretToEnd } from '../utils';
+
+export type UseEmojiPickerOptions = {
+  editableRef: React.RefObject<HTMLDivElement | null>;
+  setHasContent: (value: boolean) => void;
+};
+
+export function useEmojiPicker({ editableRef, setHasContent }: UseEmojiPickerOptions) {
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+  const savedRangeRef = useRef<Range | null>(null);
+
+  const handleEmojiSelect = useCallback((emoji: string) => {
+    const el = editableRef.current;
+    if (!el) return;
+
+    // Restore saved cursor position, or move to end
+    el.focus();
+    const sel = window.getSelection();
+    if (sel && savedRangeRef.current) {
+      sel.removeAllRanges();
+      sel.addRange(savedRangeRef.current);
+      savedRangeRef.current = null;
+    } else {
+      moveCaretToEnd(el);
+    }
+
+    document.execCommand('insertText', false, emoji + ' ');
+    setHasContent(true);
+    setEmojiPickerOpen(false);
+  }, [editableRef, setHasContent]);
+
+  const handleEmojiClose = useCallback(() => {
+    setEmojiPickerOpen(false);
+    savedRangeRef.current = null;
+  }, []);
+
+  const toggleEmojiPicker = useCallback(() => {
+    // Save current cursor position before picker steals focus
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      savedRangeRef.current = sel.getRangeAt(0).cloneRange();
+    }
+    setEmojiPickerOpen((prev) => !prev);
+  }, []);
+
+  return {
+    emojiPickerOpen,
+    handleEmojiSelect,
+    handleEmojiClose,
+    toggleEmojiPicker,
+  };
+}