@ermis-network/ermis-chat-react 1.0.0

package/src/hooks/useMessageSend.ts

@@ -0,0 +1,164 @@
+import { useState, useCallback, useRef } from 'react';
+import { buildAttachmentPayload } from '@ermis-network/ermis-chat-sdk';
+import type { Channel, FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+import type { FilePreviewItem } from '../types';
+
+export type UseMessageSendOptions = {
+  activeChannel: Channel | null;
+  editableRef: React.RefObject<HTMLDivElement | null>;
+  files: FilePreviewItem[];
+  setFiles: React.Dispatch<React.SetStateAction<FilePreviewItem[]>>;
+  hasContent: boolean;
+  setHasContent: (value: boolean) => void;
+  isTeamChannel: boolean;
+  buildPayload: () => { text: string; mentioned_all: boolean; mentioned_users: string[] };
+  reset: () => void;
+  syncMessages: () => void;
+  onSend?: (text: string) => void;
+  onBeforeSend?: (text: string, attachments: FilePreviewItem[]) => boolean | Promise<boolean>;
+  /** Message being replied to */
+  quotedMessage?: FormatMessageResponse | null;
+  /** Clear quoted message after send */
+  clearQuotedMessage?: () => void;
+  /** Message being edited */
+  editingMessage?: FormatMessageResponse | null;
+  /** Clear edited message after send */
+  clearEditingMessage?: () => void;
+};
+
+export function useMessageSend({
+  activeChannel,
+  editableRef,
+  files,
+  setFiles,
+  hasContent,
+  setHasContent,
+  isTeamChannel,
+  buildPayload,
+  reset,
+  syncMessages,
+  onSend,
+  onBeforeSend,
+  quotedMessage,
+  clearQuotedMessage,
+  editingMessage,
+  clearEditingMessage,
+}: UseMessageSendOptions) {
+  const [sending, setSending] = useState(false);
+  const isProcessingRef = useRef(false);
+
+  const handleSend = useCallback(async () => {
+    if (!activeChannel || !hasContent || sending || isProcessingRef.current) return;
+
+    // Wait for all files to finish uploading
+    const stillUploading = files.some((f) => f.status === 'uploading');
+    if (stillUploading) return;
+
+    isProcessingRef.current = true;
+
+    const payload = buildPayload();
+    const text = payload.text.trim();
+    const uploadedFiles = files.filter((f) => f.status === 'done');
+
+    if (!text && uploadedFiles.length === 0) return;
+
+    // onBeforeSend hook — return false to cancel
+    if (onBeforeSend) {
+      const proceed = await onBeforeSend(text, uploadedFiles);
+      if (!proceed) {
+        isProcessingRef.current = false;
+        return;
+      }
+    }
+
+    try {
+      setSending(true);
+
+      // Build attachment payloads from already-uploaded files (only applied on new messages)
+      const attachments = uploadedFiles.map((f) => {
+        if (f.originalAttachment) {
+          return f.originalAttachment;
+        }
+        const fileObj = f.normalizedFile || f.file!;
+        return buildAttachmentPayload(fileObj, f.uploadedUrl!, f.thumbUrl);
+      });
+
+      // Build message
+      const message: Record<string, any> = { text };
+
+      // The API does not accept attachment arrays during standard text editing
+      if (!editingMessage && attachments.length > 0) {
+        message.attachments = attachments;
+      }
+
+      if (isTeamChannel) {
+        message.mentioned_all = payload.mentioned_all;
+        message.mentioned_users = payload.mentioned_users;
+      }
+      let sendPromise;
+
+      if (editingMessage?.id) {
+        sendPromise = activeChannel.editMessage(editingMessage.id, message as any);
+      } else {
+        if (quotedMessage?.id) {
+          message.quoted_message_id = quotedMessage.id;
+        }
+        sendPromise = activeChannel.sendMessage(message as any);
+      }
+
+      // --- 0. OPTIMISTIC UI UPDATE ---
+      // Instantly injects the `status: 'sending'` message scaffold from SDK into the React map
+      syncMessages();
+
+      // --- 1. CLEAR UI IMMEDIATELY (FIRE AND FORGET) ---
+      // Clear successful files
+      files.forEach((f) => {
+        if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);
+      });
+
+      const errorFiles = files.filter((f) => f.status === 'error');
+      setFiles(errorFiles);
+      setHasContent(errorFiles.length > 0);
+
+      reset();
+      clearQuotedMessage?.();
+      clearEditingMessage?.();
+      onSend?.(payload.text);
+      // Stop typing indicator immediately on send
+      activeChannel?.stopTyping();
+
+      // --- 2. DELEGATE TO WEBSOCKET ---
+      // The API call runs in background. We do not block the UI for resolution.
+      // Message lists will automatically update when the backend blasts the `message.new` WS event.
+      sendPromise.catch((err: Error) => {
+        console.error('Failed to send message over API:', err);
+        // Sync React to render the SDK's internal 'status: failed' UI state
+        syncMessages();
+      });
+    } catch (err) {
+      console.error('Failed to process message send:', err);
+    } finally {
+      isProcessingRef.current = false;
+      setSending(false);
+      requestAnimationFrame(() => {
+        editableRef.current?.focus();
+      });
+    }
+  }, [
+    activeChannel,
+    hasContent,
+    sending,
+    buildPayload,
+    reset,
+    onSend,
+    isTeamChannel,
+    files,
+    onBeforeSend,
+    syncMessages,
+    editableRef,
+    setFiles,
+    setHasContent,
+  ]);
+
+  return { sending, handleSend };
+}

package/src/hooks/usePendingState.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+
+/**
+ * Hook that tracks whether the current user is in a 'pending' state for the given channel.
+ */
+export function usePendingState(channel: Channel | null | undefined, currentUserId?: string) {
+  const [isPending, setIsPending] = useState<boolean>(() => {
+    const membership = channel?.state?.membership || channel?.state?.members?.[currentUserId || ''];
+    return membership?.channel_role === 'pending' || (membership as Record<string, unknown>)?.role === 'pending';
+  });
+
+  useEffect(() => {
+    if (!channel || !currentUserId) {
+      setIsPending(false);
+      return;
+    }
+
+    const checkPending = () => {
+      const membership = channel.state?.membership || channel.state?.members?.[currentUserId];
+      return membership?.channel_role === 'pending' || (membership as Record<string, unknown>)?.role === 'pending';
+    };
+
+    // Sync initial state
+    setIsPending(checkPending());
+
+    const defensiveUpdateState = (event: Record<string, unknown>) => {
+      // The SDK does not aggressively mutate local state for all events,
+      // so we manually map the incoming `member` data onto the channel state so `checkPending` sees it.
+      if (event.member && channel.state && channel.state.membership) {
+        channel.state.membership = {
+          ...channel.state.membership,
+          ...(event.member as Record<string, unknown>),
+        } as unknown as Record<string, unknown>;
+      }
+    };
+
+    const handleInviteAction = (event: Record<string, unknown>) => {
+      const eventMember = event.member as Record<string, unknown>;
+      const eventUser = event.user as Record<string, unknown>;
+      const eventUserId = eventMember?.user_id || (eventMember?.user as Record<string, unknown>)?.id || eventUser?.id;
+      if (eventUserId !== currentUserId) return; // Only react to own invite events
+
+      const eventCid =
+        event.cid || (event.channel as Record<string, unknown>)?.cid || (event.channel_id ? `${event.channel_type}:${event.channel_id}` : undefined);
+      if (eventCid === channel.cid) {
+        defensiveUpdateState(event);
+        setIsPending(checkPending());
+      }
+    };
+
+    const client = channel.getClient();
+    const sub1 = client.on('notification.invite_accepted', handleInviteAction);
+    const sub2 = client.on('notification.invite_rejected', handleInviteAction);
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+    };
+  }, [channel, currentUserId]);
+
+  return { isPending };
+}

package/src/hooks/useScrollToMessage.ts

@@ -0,0 +1,155 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+import { formatMessage } from '@ermis-network/ermis-chat-sdk';
+import type { VListHandle } from 'virtua';
+import { dedupMessages } from './useLoadMessages';
+import { useChatClient } from './useChatClient';
+
+export type UseScrollToMessageOptions = {
+  vlistRef: React.RefObject<VListHandle | null>;
+  messagesRef: React.MutableRefObject<FormatMessageResponse[]>;
+  setHasMore: React.Dispatch<React.SetStateAction<boolean>>;
+  setHasNewer: React.Dispatch<React.SetStateAction<boolean>>;
+  /** Getter to access the VList DOM element (scoped to container) */
+  getVListElement: () => HTMLElement | null;
+  scrollToBottom: (smooth: boolean) => void;
+  /** Shared guard ref — blocks scroll-triggered loads during jumps */
+  jumpingRef: React.MutableRefObject<boolean>;
+};
+
+export type UseScrollToMessageReturn = {
+  highlightedId: string | null;
+  scrollToMessage: (messageId: string) => void;
+  jumpToLatest: () => void;
+};
+
+export function useScrollToMessage({
+  vlistRef,
+  messagesRef,
+  setHasMore,
+  setHasNewer,
+  getVListElement,
+  scrollToBottom,
+  jumpingRef,
+}: UseScrollToMessageOptions): UseScrollToMessageReturn {
+  const { activeChannel, setMessages } = useChatClient();
+  const [highlightedId, setHighlightedId] = useState<string | null>(null);
+  const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Cleanup highlight timer on unmount
+  useEffect(() => {
+    return () => {
+      if (highlightTimerRef.current) clearTimeout(highlightTimerRef.current);
+    };
+  }, []);
+
+  const highlight = useCallback((messageId: string) => {
+    if (highlightTimerRef.current) clearTimeout(highlightTimerRef.current);
+    setHighlightedId(messageId);
+    highlightTimerRef.current = setTimeout(() => {
+      setHighlightedId(null);
+      highlightTimerRef.current = null;
+    }, 2500);
+  }, []);
+
+  const scrollToMessage = useCallback(
+    async (messageId: string) => {
+      // Prevent concurrent calls
+      if (jumpingRef.current) return;
+
+      // Case 1: message is already in current list
+      const idx = messagesRef.current.findIndex((m) => m.id === messageId);
+      if (idx !== -1) {
+        vlistRef.current?.scrollToIndex(idx, { align: 'center', smooth: true });
+        highlight(messageId);
+        return;
+      }
+
+      // Case 2: message NOT in list — fetch around it
+      if (!activeChannel) return;
+
+      jumpingRef.current = true;
+
+      const vlistEl = getVListElement();
+      if (vlistEl) {
+        vlistEl.style.transition = 'opacity 150ms ease-out';
+        vlistEl.style.opacity = '0';
+      }
+
+      try {
+        const rawMessages = await activeChannel.queryMessagesAroundId(messageId, 25);
+        if (!rawMessages || rawMessages.length === 0) {
+          jumpingRef.current = false;
+          if (vlistEl) vlistEl.style.opacity = '1';
+          return;
+        }
+
+        const formatted = rawMessages.map((msg: any) => formatMessage(msg));
+        const unique = dedupMessages(formatted);
+
+        setHasMore(true);
+        setHasNewer(true);
+        setMessages(unique);
+
+        // Wait for VList to render, then jump while hidden, then fade in
+        setTimeout(() => {
+          const newIdx = unique.findIndex((m: any) => m.id === messageId);
+          if (newIdx === -1) {
+            jumpingRef.current = false;
+            if (vlistEl) vlistEl.style.opacity = '1';
+            return;
+          }
+
+          vlistRef.current?.scrollToIndex(newIdx, { align: 'center' });
+
+          setTimeout(() => {
+            if (vlistEl) {
+              vlistEl.style.transition = 'opacity 200ms ease-in';
+              vlistEl.style.opacity = '1';
+            }
+            highlight(messageId);
+            setTimeout(() => {
+              jumpingRef.current = false;
+            }, 500);
+          }, 100);
+        }, 200);
+      } catch (err) {
+        console.error('Failed to fetch messages around ID:', err);
+        jumpingRef.current = false;
+        if (vlistEl) vlistEl.style.opacity = '1';
+      }
+    },
+    [activeChannel, highlight, setMessages, setHasMore, setHasNewer, getVListElement],
+  );
+
+  const jumpToLatest = useCallback(() => {
+    if (!activeChannel) return;
+    jumpingRef.current = true;
+
+    const vlistEl = getVListElement();
+    if (vlistEl) {
+      vlistEl.style.transition = 'opacity 150ms ease-out';
+      vlistEl.style.opacity = '0';
+    }
+
+    const latestMsgs = [...activeChannel.state.latestMessages];
+    setMessages(latestMsgs);
+    setHasNewer(false);
+    setHasMore(true);
+
+    setTimeout(() => {
+      scrollToBottom(false);
+      setTimeout(() => {
+        if (vlistEl) {
+          vlistEl.style.transition = 'opacity 200ms ease-in';
+          vlistEl.style.opacity = '1';
+        }
+        setTimeout(() => {
+          jumpingRef.current = false;
+        }, 500);
+      }, 100);
+    }, 200);
+  }, [activeChannel, scrollToBottom, getVListElement, setMessages, setHasMore, setHasNewer]);
+
+  return { highlightedId, scrollToMessage, jumpToLatest };
+}

package/src/hooks/useTypingIndicator.ts

@@ -0,0 +1,86 @@
+import { useState, useEffect, useRef } from 'react';
+import type { Event } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+
+export type TypingUser = {
+  id: string;
+  name?: string;
+};
+
+/**
+ * Hook that subscribes to typing events on the active channel
+ * and returns the list of currently‑typing users (excluding the current user).
+ *
+ * Stale entries are auto‑cleaned every 7 seconds, consistent with
+ * the SDK's `channel.state.clean()` behaviour.
+ */
+export function useTypingIndicator() {
+  const { activeChannel, client } = useChatClient();
+  const [typingUsers, setTypingUsers] = useState<TypingUser[]>([]);
+  const currentUserId = client.userID;
+
+  // Keep a mutable map so event handlers can read/write without
+  // creating stale‑closure issues.
+  const typingMapRef = useRef<Map<string, { user: TypingUser; timestamp: number }>>(new Map());
+
+  useEffect(() => {
+    if (!activeChannel) {
+      setTypingUsers([]);
+      typingMapRef.current.clear();
+      return;
+    }
+
+    // Reset when channel switches
+    typingMapRef.current.clear();
+    setTypingUsers([]);
+
+    const syncState = () => {
+      const users = Array.from(typingMapRef.current.values()).map((v) => v.user);
+      setTypingUsers(users);
+    };
+
+    const handleTypingStart = (event: Event) => {
+      const userId = event.user?.id;
+      if (!userId || userId === currentUserId) return;
+
+      typingMapRef.current.set(userId, {
+        user: { id: userId, name: event.user?.name },
+        timestamp: Date.now(),
+      });
+      syncState();
+    };
+
+    const handleTypingStop = (event: Event) => {
+      const userId = event.user?.id;
+      if (!userId) return;
+
+      typingMapRef.current.delete(userId);
+      syncState();
+    };
+
+    const sub1 = activeChannel.on('typing.start', handleTypingStart);
+    const sub2 = activeChannel.on('typing.stop', handleTypingStop);
+
+    // Auto‑clean stale entries every 7 seconds
+    const cleanupInterval = setInterval(() => {
+      const now = Date.now();
+      let changed = false;
+      for (const [uid, entry] of typingMapRef.current.entries()) {
+        if (now - entry.timestamp > 7000) {
+          typingMapRef.current.delete(uid);
+          changed = true;
+        }
+      }
+      if (changed) syncState();
+    }, 3000);
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+      clearInterval(cleanupInterval);
+      typingMapRef.current.clear();
+    };
+  }, [activeChannel, currentUserId]);
+
+  return { typingUsers };
+}

package/src/index.ts

@@ -0,0 +1,129 @@
+// Styles
+import './styles/index.css';
+
+// Context
+export { ChatProvider } from './context/ChatProvider';
+export type { ChatProviderProps, ChatContextValue, Theme } from './context/ChatProvider';
+
+// Hooks
+export { useChatClient } from './hooks/useChatClient';
+export { useChannel } from './hooks/useChannel';
+export type { UseChannelReturn } from './hooks/useChannel';
+export { useChannelListUpdates } from './hooks/useChannelListUpdates';
+export { useChannelRowUpdates } from './hooks/useChannelRowUpdates';
+export { useBannedState } from './hooks/useBannedState';
+export { useBlockedState } from './hooks/useBlockedState';
+export { usePendingState } from './hooks/usePendingState';
+
+// Components
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+
+export { ChannelList, ChannelItem } from './components/ChannelList';
+export type { ChannelListProps, ChannelItemProps } from './components/ChannelList';
+
+export { Channel } from './components/Channel';
+export type { ChannelProps } from './components/Channel';
+
+export { ChannelHeader } from './components/ChannelHeader';
+export type { ChannelHeaderProps } from './components/ChannelHeader';
+export type { ChannelHeaderData } from './types';
+
+export type { MessageListProps, MessageBubbleProps, MessageItemProps, SystemMessageItemProps, DateSeparatorProps, JumpToLatestProps } from './types';
+
+export { VirtualMessageList } from './components/VirtualMessageList';
+
+export { PinnedMessages } from './components/PinnedMessages';
+export type { PinnedMessagesProps, PinnedMessageItemProps } from './types';
+
+export { MessageItem, SystemMessageItem } from './components/MessageItem';
+export { MessageActionsBox } from './components/MessageActionsBox';
+export type { MessageActionsBoxProps } from './types';
+
+export { Dropdown, closeAllDropdowns } from './components/Dropdown';
+export type { DropdownProps } from './components/Dropdown';
+
+export { MessageReactions } from './components/MessageReactions';
+export type { MessageReactionsProps, ReactionUser, LatestReaction } from './types';
+
+export { MessageQuickReactions } from './components/MessageQuickReactions';
+
+export { useMessageActions } from './hooks/useMessageActions';
+
+export { formatTime, getDateKey, formatDateLabel, getMessageUserId, replaceMentionsForPreview } from './utils';
+
+export {
+  defaultMessageRenderers,
+  RegularMessage,
+  SystemMessage,
+  SignalMessage,
+  PollMessage,
+  StickerMessage,
+  ErrorMessage,
+  AttachmentList,
+  MessageAttachment,
+} from './components/MessageRenderers';
+export type { MessageRendererProps, AttachmentProps } from './components/MessageRenderers';
+
+export { MessageInput } from './components/MessageInput';
+export type { MessageInputProps, SendButtonProps, AttachButtonProps, EmojiPickerProps, EmojiButtonProps } from './components/MessageInput';
+
+export { FilesPreview } from './components/FilesPreview';
+export type { FilePreviewItem, FilesPreviewProps } from './components/FilesPreview';
+
+export { MentionSuggestions } from './components/MentionSuggestions';
+export type { MentionSuggestionsProps } from './components/MentionSuggestions';
+
+export { useMentions } from './hooks/useMentions';
+export type { MentionMember, MentionPayload, UseMentionsOptions, UseMentionsReturn } from './hooks/useMentions';
+
+export { useScrollToMessage } from './hooks/useScrollToMessage';
+export type { UseScrollToMessageOptions, UseScrollToMessageReturn } from './hooks/useScrollToMessage';
+
+export { useLoadMessages, dedupMessages } from './hooks/useLoadMessages';
+export type { UseLoadMessagesOptions, UseLoadMessagesReturn } from './hooks/useLoadMessages';
+
+export { useChannelMessages } from './hooks/useChannelMessages';
+export type { UseChannelMessagesOptions } from './hooks/useChannelMessages';
+
+export { QuotedMessagePreview } from './components/QuotedMessagePreview';
+export type { QuotedMessagePreviewProps } from './components/QuotedMessagePreview';
+export { ReplyPreview } from './components/ReplyPreview';
+export type { ReplyPreviewProps } from './types';
+
+export { ForwardMessageModal } from './components/ForwardMessageModal';
+export type { ForwardMessageModalProps, ForwardChannelItemProps } from './components/ForwardMessageModal';
+
+export { TypingIndicator } from './components/TypingIndicator';
+export type { TypingIndicatorProps } from './components/TypingIndicator';
+export { useTypingIndicator } from './hooks/useTypingIndicator';
+export type { TypingUser } from './hooks/useTypingIndicator';
+
+export {
+  ChannelInfo,
+  DefaultChannelInfoHeader,
+  DefaultChannelInfoCover,
+  DefaultChannelInfoActions,
+  DefaultChannelInfoTabs
+} from './components/ChannelInfo';
+
+export { Modal } from './components/Modal';
+export { Panel } from './components/Panel';
+export type {
+  ChannelInfoProps,
+  ChannelInfoHeaderProps,
+  ChannelInfoCoverProps,
+  ChannelInfoActionsProps,
+  ChannelInfoTabsProps,
+  ChannelInfoMemberItemProps,
+  ChannelInfoMediaItemProps,
+  ChannelInfoLinkItemProps,
+  ChannelInfoFileItemProps,
+  ChannelInfoEmptyStateProps,
+  AttachmentItem,
+  MediaTab,
+  ModalProps,
+  AddMemberModalProps,
+  AddMemberUserItemProps,
+  AddMemberButtonProps,
+} from './types';