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

package/src/hooks/useForwardMessage.ts

@@ -0,0 +1,309 @@
+import { useState, useMemo, useCallback } from 'react';
+import type {
+  Channel,
+  E2eeAttachmentManifest,
+  E2eeAttachmentManifestAsset,
+  FormatMessageResponse,
+} from '@ermis-network/ermis-chat-sdk';
+import { createForwardMessagePayload } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+import { removeAccents, buildUserMap } from '../utils';
+import { isPendingMember, isSkippedMember } from '../channelRoleUtils';
+
+function isE2eeAttachmentManifest(attachment: unknown): attachment is E2eeAttachmentManifest {
+  return Boolean(
+    attachment &&
+      typeof attachment === 'object' &&
+      (attachment as E2eeAttachmentManifest).version === 1 &&
+      typeof (attachment as E2eeAttachmentManifest).attachment_id === 'string' &&
+      Array.isArray((attachment as E2eeAttachmentManifest).assets),
+  );
+}
+
+function isEffectiveE2ee(channel: Channel | null | undefined): boolean {
+  if (!channel) return false;
+  return typeof (channel as any)._isEffectiveE2ee === 'function'
+    ? (channel as any)._isEffectiveE2ee()
+    : channel.data?.mls_enabled === true;
+}
+
+function attachmentUrl(attachment: any): string | undefined {
+  return attachment?.asset_url || attachment?.image_url || attachment?.url || attachment?.thumb_url;
+}
+
+function originalAsset(attachment: E2eeAttachmentManifest): E2eeAttachmentManifestAsset | undefined {
+  return attachment.assets.find((asset) => asset.kind === 'original') || attachment.assets[0];
+}
+
+function displayString(display: Record<string, unknown> | undefined, key: string): string | undefined {
+  const value = display?.[key];
+  return typeof value === 'string' && value.trim() ? value : undefined;
+}
+
+function displayNumber(display: Record<string, unknown> | undefined, key: string): number | undefined {
+  const value = display?.[key];
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+function extensionForMimeType(mimeType?: string): string {
+  if (!mimeType) return '';
+  if (mimeType === 'image/jpeg') return '.jpg';
+  if (mimeType === 'image/png') return '.png';
+  if (mimeType === 'image/webp') return '.webp';
+  if (mimeType === 'image/gif') return '.gif';
+  if (mimeType === 'video/mp4') return '.mp4';
+  if (mimeType === 'video/quicktime') return '.mov';
+  if (mimeType === 'video/webm') return '.webm';
+  if (mimeType === 'audio/mpeg') return '.mp3';
+  if (mimeType === 'audio/webm') return '.webm';
+  return '';
+}
+
+function inferAttachmentType(attachment: any, mimeType?: string): string | undefined {
+  const explicitType = attachment?.attachment_type || attachment?.type;
+  if (explicitType === 'voiceRecording') return 'voiceRecording';
+  if (explicitType === 'image' || explicitType === 'video' || explicitType === 'file') return explicitType;
+  if (mimeType?.startsWith('image/')) return 'image';
+  if (mimeType?.startsWith('video/')) return 'video';
+  if (mimeType?.startsWith('audio/')) return 'file';
+  return undefined;
+}
+
+function sourceAttachmentMetadata(
+  attachment: any,
+  blob: Blob,
+  index: number,
+): { file: File; displayOverride: Record<string, unknown> } {
+  const manifestDisplay = isE2eeAttachmentManifest(attachment) ? originalAsset(attachment)?.display : undefined;
+  const sourceName =
+    displayString(manifestDisplay, 'name') ||
+    attachment?.file_name ||
+    attachment?.title ||
+    attachment?.name ||
+    `forwarded-attachment-${index + 1}`;
+  const sourceMime =
+    displayString(manifestDisplay, 'mime_type') ||
+    attachment?.mime_type ||
+    attachment?.content_type ||
+    blob.type ||
+    'application/octet-stream';
+  const hasExtension = /\.[A-Za-z0-9]{1,8}$/.test(sourceName);
+  const name = hasExtension ? sourceName : `${sourceName}${extensionForMimeType(sourceMime)}`;
+  const normalizedBlob = new File([blob], name, { type: sourceMime || blob.type || 'application/octet-stream' });
+  const attachmentType = inferAttachmentType(attachment, sourceMime);
+  const width = displayNumber(manifestDisplay, 'width') || attachment?.original_width || attachment?.width;
+  const height = displayNumber(manifestDisplay, 'height') || attachment?.original_height || attachment?.height;
+  const duration = displayNumber(manifestDisplay, 'duration') || attachment?.duration;
+  const displayOverride: Record<string, unknown> = {
+    name,
+    mime_type: sourceMime,
+    size: blob.size,
+    ...(attachmentType ? { attachment_type: attachmentType } : {}),
+    ...(typeof width === 'number' && Number.isFinite(width) ? { width } : {}),
+    ...(typeof height === 'number' && Number.isFinite(height) ? { height } : {}),
+    ...(typeof duration === 'number' && Number.isFinite(duration) ? { duration } : {}),
+  };
+  return { file: normalizedBlob, displayOverride };
+}
+
+async function materializeForwardSourceAttachments(
+  manager: any,
+  sourceChannel: Channel,
+  sourceAttachments: any[],
+): Promise<{ files: File[]; displayOverrides: Map<number, Record<string, unknown>> }> {
+  if (!manager?.initialized) throw new Error('E2EE forward requires an initialized encryption manager');
+  const files: File[] = [];
+  const displayOverrides = new Map<number, Record<string, unknown>>();
+
+  for (const [index, attachment] of sourceAttachments.entries()) {
+    let sourceBlob: Blob;
+    if (isE2eeAttachmentManifest(attachment)) {
+      sourceBlob = await manager.downloadE2eeAttachmentAsset(
+        sourceChannel.type,
+        sourceChannel.id!,
+        attachment,
+        'original',
+      );
+    } else {
+      const url = attachmentUrl(attachment);
+      if (!url) throw new Error('Forward source attachment has no downloadable URL');
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`Forward source attachment download failed: HTTP ${response.status}`);
+      sourceBlob = await response.blob();
+    }
+    const { file, displayOverride } = sourceAttachmentMetadata(attachment, sourceBlob, index);
+    files.push(file);
+    displayOverrides.set(index, displayOverride);
+  }
+
+  return { files, displayOverrides };
+}
+
+export function useForwardMessage(message: FormatMessageResponse, onDismiss: () => void) {
+  const { client, activeChannel } = useChatClient();
+  const [selectedChannels, setSelectedChannels] = useState<Set<string>>(new Set());
+  const [search, setSearch] = useState('');
+  const [sending, setSending] = useState(false);
+  const [results, setResults] = useState<{ success: string[]; failed: string[] } | null>(null);
+
+  /* ---------- Get channels from client state (include topics) ---------- */
+  const channels = useMemo(() => {
+    return (Object.values(client.activeChannels) as Channel[]).filter((ch) => {
+      const role = ch.state?.membership?.channel_role as string;
+      return !isPendingMember(role) && !isSkippedMember(role);
+    });
+  }, [client.activeChannels]);
+
+  /* ---------- Filter by search ---------- */
+  const filteredChannels = useMemo(() => {
+    if (!search.trim()) return channels;
+    const q = search.toLowerCase();
+    const cleanQ = removeAccents(q);
+    const isStrict = q !== cleanQ;
+
+    const result: Channel[] = [];
+    for (const ch of channels) {
+      const name = (ch.data?.name || ch.cid) as string;
+      const t = name.toLowerCase();
+      const cleanT = removeAccents(t);
+
+      const parentCid = ch.data?.parent_cid as string | undefined;
+      const parent = parentCid ? client.activeChannels[parentCid] : null;
+      const parentName = parent?.data?.name || '';
+      const pt = parentName.toLowerCase();
+      const cleanPT = removeAccents(pt);
+
+      let matched = false;
+      if (isStrict) {
+        // Strict match when query has accents
+        matched = t.startsWith(q) || pt.startsWith(q);
+      } else {
+        // Broad match when query is accent-less
+        matched = cleanT.startsWith(cleanQ) || cleanPT.startsWith(cleanQ);
+      }
+
+      if (matched) {
+        result.push(ch);
+        if (result.length >= 50) break;
+      }
+    }
+    return result;
+  }, [channels, search, client.activeChannels]);
+
+  /* ---------- Toggle selection ---------- */
+  const toggleChannel = useCallback((channel: Channel) => {
+    setSelectedChannels((prev) => {
+      const next = new Set(prev);
+      if (next.has(channel.cid)) {
+        next.delete(channel.cid);
+      } else {
+        next.add(channel.cid);
+      }
+      return next;
+    });
+  }, []);
+
+  /* ---------- Send forward ---------- */
+  const handleSend = useCallback(async () => {
+    if (!activeChannel || selectedChannels.size === 0 || sending) return;
+    setSending(true);
+    const success: string[] = [];
+    const failed: string[] = [];
+    let queuedBackgroundForward = false;
+
+    // Format message text to replace mention IDs with names
+    let formattedMessage = { ...message };
+    if (formattedMessage.text && formattedMessage.mentioned_users && formattedMessage.mentioned_users.length > 0) {
+      let newText = formattedMessage.text;
+      const userMap = buildUserMap(activeChannel.state);
+
+      formattedMessage.mentioned_users.forEach((userId) => {
+        const name = userMap[userId] || client.state.users[userId]?.name || userId;
+        newText = newText.replace(new RegExp(`@${userId}`, 'g'), `@${name}`);
+      });
+      formattedMessage.text = newText;
+    }
+
+    for (const cid of selectedChannels) {
+      const targetChannel = channels.find((c) => c.cid === cid);
+      if (!targetChannel) continue;
+      try {
+        if (!['messaging', 'team', 'topic'].includes(activeChannel.type)) {
+          throw new Error('Forward source channel type is not allowed');
+        }
+        if (formattedMessage.quoted_message_id || formattedMessage.parent_id) {
+          throw new Error('Reply/thread messages cannot be forwarded');
+        }
+        if (formattedMessage.mentioned_all || (formattedMessage.mentioned_users?.length || 0) > 0) {
+          throw new Error('Mention messages cannot be forwarded');
+        }
+        const targetIsE2ee = isEffectiveE2ee(targetChannel);
+        const sourceIsE2ee = isEffectiveE2ee(activeChannel);
+        if (sourceIsE2ee && !targetIsE2ee) {
+          const accepted =
+            typeof window === 'undefined' ||
+            window.confirm('Forwarding this encrypted message to a standard channel will remove E2EE protection.');
+          if (!accepted) throw new Error('Privacy downgrade canceled');
+        }
+        const forwardPayload = createForwardMessagePayload(
+          formattedMessage,
+          targetChannel.cid as string,
+          activeChannel.cid as string,
+        );
+
+        const sourceAttachments = (formattedMessage.attachments as any[] | undefined) || [];
+        if (targetIsE2ee && sourceAttachments.length > 0) {
+          const { files, displayOverrides } = await materializeForwardSourceAttachments(
+            client.encryptionManager,
+            activeChannel,
+            sourceAttachments,
+          );
+          await (targetChannel as any).enqueueE2eeAttachmentMessage(forwardPayload, files, { displayOverrides });
+          queuedBackgroundForward = true;
+        } else {
+          const standardForwardPayload = { ...forwardPayload };
+          if (!targetIsE2ee && sourceIsE2ee && sourceAttachments.length > 0) {
+            const { files } = await materializeForwardSourceAttachments(
+              client.encryptionManager,
+              activeChannel,
+              sourceAttachments,
+            );
+            const { attachments, failedFiles } = await targetChannel.uploadAndPrepareAttachments(files);
+            if (failedFiles.length > 0) {
+              throw new Error(`Forward standard attachment upload failed for ${failedFiles.length} file(s)`);
+            }
+            standardForwardPayload.attachments = attachments as any;
+          }
+          await targetChannel.forwardMessage(standardForwardPayload, {
+            type: targetChannel.type,
+            channelID: targetChannel.id!,
+          });
+        }
+        success.push((targetChannel.data?.name || targetChannel.cid) as string);
+      } catch (err) {
+        console.error(`Failed to forward to ${cid}`, err);
+        failed.push((targetChannel.data?.name || targetChannel.cid) as string);
+      }
+    }
+
+    setResults({ success, failed });
+    setSending(false);
+
+    // Auto-close after success (short delay)
+    if (failed.length === 0) {
+      setTimeout(() => onDismiss(), queuedBackgroundForward ? 0 : 1200);
+    }
+  }, [client, activeChannel, selectedChannels, channels, message, sending, onDismiss]);
+
+  return {
+    search,
+    setSearch,
+    selectedChannels,
+    toggleChannel,
+    sending,
+    results,
+    setResults,
+    filteredChannels,
+    handleSend,
+  };
+}

package/src/hooks/useInviteChannels.ts

@@ -0,0 +1,88 @@
+import { useEffect, useState, useMemo } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+import { isPendingMember } from '../channelRoleUtils';
+import { isTopicChannel } from '../channelTypeUtils';
+
+/**
+ * A hook that retrieves all pending invite channels from the SDK's local cache
+ * without triggering an extra API network query.
+ *
+ * Re-renders automatically when related events (e.g., invites, accepts, deletes) arrive.
+ */
+export function useInviteChannels(): Channel[] {
+  const { client } = useChatClient();
+  const [updateCount, setUpdateCount] = useState(0);
+
+  useEffect(() => {
+    if (!client) return;
+
+    const forceUpdate = () => setUpdateCount((c) => c + 1);
+
+    const handleEvent = (event: any) => {
+      // If a new channel is created or we are added to it, wait for SDK initialization
+      const isNewChannelEvent =
+        event.type === 'member.added' ||
+        event.type === 'notification.added_to_channel' ||
+        event.type === 'channel.created';
+
+      if (isNewChannelEvent) {
+        const cid =
+          event.channel?.cid ||
+          event.cid ||
+          (event.channel_type && event.channel_id ? `${event.channel_type}:${event.channel_id}` : null);
+
+        if (cid) {
+          console.log('[useInviteChannels] Received new channel event:', event.type, cid);
+          let attempts = 0;
+          const checkInitialized = setInterval(() => {
+            attempts++;
+            const channel = client.activeChannels[cid];
+            if ((channel && channel.initialized) || attempts > 30) {
+              console.log(
+                '[useInviteChannels] Channel initialized or timeout:',
+                cid,
+                'initialized:',
+                channel?.initialized,
+                'attempts:',
+                attempts,
+              );
+              clearInterval(checkInitialized);
+              forceUpdate();
+            }
+          }, 100);
+          return;
+        }
+      }
+      setTimeout(forceUpdate, 0);
+    };
+
+    const listeners = [
+      client.on('channels.queried', handleEvent),
+      client.on('notification.invite_accepted', handleEvent),
+      client.on('notification.invite_rejected', handleEvent),
+      client.on('notification.invite_messaging_skipped', handleEvent),
+      client.on('channel.created', handleEvent),
+      client.on('channel.deleted', handleEvent),
+      client.on('notification.channel_deleted', handleEvent),
+      client.on('member.added', handleEvent),
+      client.on('member.removed', handleEvent),
+      client.on('notification.added_to_channel' as any, handleEvent),
+      client.on('notification.invited' as any, handleEvent),
+    ];
+
+    return () => listeners.forEach((l) => l.unsubscribe());
+  }, [client]);
+
+  return useMemo(() => {
+    if (!client) return [];
+
+    return Object.values(client.activeChannels).filter((ch) => {
+      // Exclude topic channels from the invites list
+      if (isTopicChannel(ch)) return false;
+
+      const ms = ch.state?.membership as Record<string, unknown> | undefined;
+      return isPendingMember(ms?.channel_role as string);
+    });
+  }, [client, updateCount]);
+}

package/src/hooks/useInviteCount.ts

@@ -0,0 +1,104 @@
+import { useState, useEffect } from 'react';
+import { useChatClient } from './useChatClient';
+import { isPendingMember } from '../channelRoleUtils';
+import { isTopicChannel } from '../channelTypeUtils';
+
+export const useInviteCount = () => {
+  const { client } = useChatClient();
+  const [inviteCount, setInviteCount] = useState(0);
+
+  useEffect(() => {
+    if (!client || !client.user) return;
+
+    const countInvites = () => {
+      let count = 0;
+      const channels = Object.values(client.activeChannels);
+      const userId = client.user?.id;
+      if (!userId) return 0;
+      for (const channel of channels) {
+        // Exclude topic channels from the count
+        if (isTopicChannel(channel)) continue;
+
+        const membership = channel.state?.membership || channel.state?.members?.[userId];
+        if (isPendingMember(membership?.channel_role as string)) {
+          count++;
+        }
+      }
+      return count;
+    };
+
+    // Calculate initial count
+    setInviteCount(countInvites());
+
+    const handleEvent = (event: any) => {
+      if (
+        event.type === 'channel.created' &&
+        (event.user?.id === client.user?.id || event.user_id === client.user?.id)
+      ) {
+        return;
+      }
+
+      // If a new channel is created or we are added to it, wait for SDK initialization
+      const isNewChannelEvent =
+        event.type === 'member.added' ||
+        event.type === 'notification.added_to_channel' ||
+        event.type === 'channel.created';
+
+      if (isNewChannelEvent) {
+        const cid =
+          event.channel?.cid ||
+          event.cid ||
+          (event.channel_type && event.channel_id ? `${event.channel_type}:${event.channel_id}` : null);
+
+        if (cid) {
+          console.log('[useInviteCount] Received new channel event:', event.type, cid);
+          let attempts = 0;
+          const checkInitialized = setInterval(() => {
+            attempts++;
+            const channel = client.activeChannels[cid];
+            if ((channel && channel.initialized) || attempts > 30) {
+              console.log(
+                '[useInviteCount] Channel initialized or timeout:',
+                cid,
+                'initialized:',
+                channel?.initialized,
+                'attempts:',
+                attempts,
+              );
+              clearInterval(checkInitialized);
+              const newCount = countInvites();
+              console.log('[useInviteCount] New invite count:', newCount);
+              setInviteCount(newCount);
+            }
+          }, 100);
+          return;
+        }
+      }
+
+      // Delay slightly to ensure client.activeChannels is updated by SDK internal handlers first
+      setTimeout(() => {
+        setInviteCount(countInvites());
+      }, 0);
+    };
+
+    const listeners = [
+      client.on('channels.queried', handleEvent),
+      client.on('notification.invite_accepted', handleEvent),
+      client.on('notification.invite_rejected', handleEvent),
+      client.on('notification.invite_messaging_skipped', handleEvent),
+      client.on('channel.created', handleEvent),
+      client.on('channel.deleted', handleEvent),
+      client.on('notification.channel_deleted', handleEvent),
+      client.on('member.added', handleEvent),
+      client.on('member.removed', handleEvent),
+      client.on('notification.added_to_channel' as any, handleEvent),
+      client.on('notification.invited' as any, handleEvent),
+    ];
+
+    return () => {
+      listeners.forEach((l) => l.unsubscribe());
+    };
+  }, [client]);
+
+  return { inviteCount };
+};

package/src/hooks/useLoadMessages.ts

@@ -21,6 +21,8 @@ export type UseLoadMessagesOptions = {
   messagesRef: React.MutableRefObject<FormatMessageResponse[]>;
   /** Shared guard ref — skip scroll-triggered loads during jump transitions */
   jumpingRef: React.MutableRefObject<boolean>;
+  /** Blocks scroll-triggered pagination while auto-following appended messages. */
+  scrollLoadLockRef?: React.MutableRefObject<boolean>;
   loadMoreLimit?: number;
 };
 
@@ -45,6 +47,7 @@ export function useLoadMessages({
   vlistRef,
   messagesRef,
   jumpingRef,
+  scrollLoadLockRef,
   loadMoreLimit = 25,
 }: UseLoadMessagesOptions): UseLoadMessagesReturn {
   const { activeChannel, setMessages } = useChatClient();
@@ -52,10 +55,19 @@ export function useLoadMessages({
   const [hasNewer, setHasNewer] = useState(false);
   const [shiftMode, setShiftMode] = useState(false);
 
-  // Auto-reset shiftMode after each prepend render
+  // Reset shiftMode on channel switch so initial load isn't treated as a prepend
+  useEffect(() => {
+    setShiftMode(false);
+  }, [activeChannel?.cid]);
+
+  // Reset shiftMode to false after the prepend render is committed.
+  // shift should only be true for the single render cycle when older messages
+  // are prepended; leaving it on causes virtua to mis-compensate scroll
+  // positions when new messages are appended at the bottom, which leads
+  // to intermittent message overlapping.
   useEffect(() => {
     if (shiftMode) {
-      requestAnimationFrame(() => setShiftMode(false));
+      setShiftMode(false);
     }
   }, [shiftMode]);
 
@@ -135,7 +147,7 @@ export function useLoadMessages({
 
   const handleScroll = useCallback(
     (offset: number) => {
-      if (jumpingRef.current) return;
+      if (jumpingRef.current || scrollLoadLockRef?.current) return;
       const handle = vlistRef.current;
       if (!handle) return;
       const { scrollSize, viewportSize } = handle;
@@ -157,7 +169,7 @@ export function useLoadMessages({
         loadNewer();
       }
     },
-    [loadMore, loadNewer],
+    [loadMore, loadNewer, scrollLoadLockRef],
   );
 
   return {

package/src/hooks/useMentions.ts

@@ -119,6 +119,31 @@ function getActiveMentionIds(editableEl: HTMLElement): Set<string> {
   return ids;
 }
 
+/**
+ * Binary search to find the first index where the name starts with the given prefix.
+ */
+function findFirstMatchIndex(arr: MentionMember[], prefix: string): number {
+  let low = 0;
+  let high = arr.length - 1;
+  let result = -1;
+
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const name = (arr[mid].name || '').toLowerCase();
+
+    if (name.startsWith(prefix)) {
+      result = mid; // Found match, keep searching left for the first one
+      high = mid - 1;
+    } else if (name < prefix) {
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+
+  return result;
+}
+
 export function useMentions({
   members,
   currentUserId,
@@ -137,6 +162,17 @@ export function useMentions({
     [],
   );
 
+  // Pre-sort members for binary range search
+  const sortedMembers = useMemo(() => {
+    return [...members].sort((a, b) => {
+      const nameA = (a.name || '').toLowerCase();
+      const nameB = (b.name || '').toLowerCase();
+      if (nameA < nameB) return -1;
+      if (nameA > nameB) return 1;
+      return 0;
+    });
+  }, [members]);
+
   // Filter members based on deferred query, exclude self and already-mentioned
   const filteredMembers = useMemo(() => {
     const q = deferredQuery.toLowerCase();
@@ -144,20 +180,37 @@ export function useMentions({
     // Start with @all if not already selected
     const result: MentionMember[] = [];
     if (!activeMentionIds.has('__all__')) {
-      if (!q || 'all'.includes(q)) {
+      if (!q || 'all'.startsWith(q)) {
         result.push(allItem);
       }
     }
 
-    for (const m of members) {
-      if (m.id === currentUserId) continue; // skip self
-      if (activeMentionIds.has(m.id)) continue; // skip already mentioned
-      if (q && !m.name.toLowerCase().includes(q)) continue; // filter by query
-      result.push(m);
+    if (!q) {
+      for (const m of sortedMembers) {
+        if (m.id === currentUserId) continue; // skip self
+        result.push(m);
+        if (result.length >= 50) break;
+      }
+      return result;
+    }
+
+    // Range search using binary search
+    const startIndex = findFirstMatchIndex(sortedMembers, q);
+    if (startIndex !== -1) {
+      for (let i = startIndex; i < sortedMembers.length; i++) {
+        const m = sortedMembers[i];
+        const name = (m.name || '').toLowerCase();
+        
+        if (!name.startsWith(q)) break; // End of range
+        
+        if (m.id === currentUserId) continue; // skip self
+        result.push(m);
+        if (result.length >= 50) break;
+      }
     }
 
     return result;
-  }, [members, deferredQuery, activeMentionIds, currentUserId, allItem]);
+  }, [sortedMembers, deferredQuery, activeMentionIds, currentUserId, allItem]);
 
   // Detect @ trigger from cursor position
   const detectTrigger = useCallback((): { triggered: boolean; query: string } => {