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

package/src/hooks/useContactChannels.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState, useMemo, useCallback } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+import { isDirectChannel } from '../channelTypeUtils';
+import { isOwnerMember } from '../channelRoleUtils';
+
+/**
+ * A hook that retrieves all friend (contact) channels from the SDK's local cache
+ * without triggering an extra API network query.
+ *
+ * A contact is defined as a direct (1-1) channel where both members
+ * hold the 'owner' channel_role.
+ *
+ * Re-renders automatically when related events arrive.
+ */
+export function useContactChannels(): Channel[] {
+  const { client } = useChatClient();
+  const [updateCount, setUpdateCount] = useState(0);
+
+  const forceUpdate = useCallback(() => setUpdateCount((c) => c + 1), []);
+
+  useEffect(() => {
+    if (!client) return;
+
+    const listeners = [
+      client.on('channels.queried', forceUpdate),
+      client.on('notification.invite_accepted', forceUpdate),
+    ];
+
+    return () => listeners.forEach((l) => l.unsubscribe());
+  }, [client, forceUpdate]);
+
+  return useMemo(() => {
+    if (!client) return [];
+
+    return Object.values(client.activeChannels).filter((channel) => {
+      if (!isDirectChannel(channel)) return false;
+
+      const members = Object.values(channel.state?.members || {});
+      if (members.length !== 2) return false;
+
+      return members.every((m) => isOwnerMember(m.channel_role as string));
+    });
+  }, [client, updateCount]);
+}

package/src/hooks/useContactCount.ts

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import { useChatClient } from './useChatClient';
+import { isDirectChannel } from '../channelTypeUtils';
+import { isOwnerMember } from '../channelRoleUtils';
+
+export const useContactCount = () => {
+  const { client } = useChatClient();
+  const [contactCount, setContactCount] = useState(0);
+
+  useEffect(() => {
+    if (!client || !client.user) return;
+
+    const countContacts = () => {
+      let count = 0;
+      const channels = Object.values(client.activeChannels);
+      for (const channel of channels) {
+        if (!isDirectChannel(channel)) continue;
+
+        const members = Object.values(channel.state?.members || {});
+        // Contacts are direct channels where both members are owners
+        if (members.length === 2) {
+          const isAllOwners = members.every((m) => isOwnerMember(m.channel_role as string));
+          if (isAllOwners) count++;
+        }
+      }
+      return count;
+    };
+
+    // Calculate initial count
+    setContactCount(countContacts());
+
+    const handleEvent = () => {
+      // Delay slightly to ensure client.activeChannels is updated by SDK internal handlers first
+      setTimeout(() => {
+        setContactCount(countContacts());
+      }, 0);
+    };
+
+    const listeners = [
+      client.on('channels.queried', handleEvent),
+      client.on('notification.invite_accepted', handleEvent),
+    ];
+
+    return () => {
+      listeners.forEach((l) => l.unsubscribe());
+    };
+  }, [client]);
+
+  return { contactCount };
+};

package/src/hooks/useDownloadHandler.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import { useChatClient } from './useChatClient';
+
+export const useDownloadHandler = () => {
+  const { client } = useChatClient();
+
+  const downloadFile = useCallback(async (url: string | undefined, filename?: string) => {
+    if (!url) return;
+
+    try {
+      const blob = await client.downloadMedia(url);
+      const urlBlob = window.URL.createObjectURL(blob);
+      
+      const a = document.createElement('a');
+      a.style.display = 'none';
+      a.href = urlBlob;
+      a.download = filename || 'file';
+      document.body.appendChild(a);
+      
+      a.click();
+      
+      // Cleanup after a delay to ensure the browser has started the download
+      setTimeout(() => {
+        if (document.body.contains(a)) {
+          document.body.removeChild(a);
+        }
+        window.URL.revokeObjectURL(urlBlob);
+      }, 1000);
+    } catch (err) {
+      console.warn('Download failed, falling back to new tab:', err);
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  }, [client]);
+
+  return { downloadFile };
+};

package/src/hooks/useDragAndDrop.ts

@@ -0,0 +1,79 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { isHeicFile, isVideoFile } from '@ermis-network/ermis-chat-sdk';
+
+export function useDragAndDrop(
+  onFilesDrop: (files: FileList) => void,
+  disabled: boolean = false
+) {
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounter = useRef(0);
+
+  const handleDragEnter = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    if (disabled) return;
+
+    dragCounter.current += 1;
+
+    // Only allow files
+    if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {
+      const hasFiles = Array.from(e.dataTransfer.items).some(
+        (item) => item.kind === 'file'
+      );
+      if (hasFiles) {
+        setIsDragging(true);
+      }
+    }
+  }, [disabled]);
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    if (disabled) return;
+
+    dragCounter.current -= 1;
+    if (dragCounter.current === 0) {
+      setIsDragging(false);
+    }
+  }, [disabled]);
+
+  const handleDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    dragCounter.current = 0;
+    setIsDragging(false);
+
+    if (disabled) return;
+
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+      onFilesDrop(e.dataTransfer.files);
+    }
+  }, [disabled, onFilesDrop]);
+
+  useEffect(() => {
+    // Attach to the entire window so anywhere the user drags a file in the chat layout, it works
+    window.addEventListener('dragenter', handleDragEnter);
+    window.addEventListener('dragleave', handleDragLeave);
+    window.addEventListener('dragover', handleDragOver);
+    window.addEventListener('drop', handleDrop);
+
+    return () => {
+      window.removeEventListener('dragenter', handleDragEnter);
+      window.removeEventListener('dragleave', handleDragLeave);
+      window.removeEventListener('dragover', handleDragOver);
+      window.removeEventListener('drop', handleDrop);
+    };
+  }, [handleDragEnter, handleDragLeave, handleDragOver, handleDrop]);
+
+  return {
+    isDragging,
+  };
+}

package/src/hooks/useE2eeAttachmentRenderer.ts

@@ -0,0 +1,204 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { Channel, E2eeAttachmentManifest, E2eeAttachmentTransferProgress } from '@ermis-network/ermis-chat-sdk';
+
+export const E2EE_PREVIEW_MAX_CONCURRENT = 3;
+export const E2EE_PREVIEW_CACHE_LIMIT = 100;
+
+const previewObjectUrlCache = new Map<string, { url: string; blob: Blob }>();
+
+export function clearE2eePreviewObjectUrlCache(): void {
+  for (const value of previewObjectUrlCache.values()) {
+    URL.revokeObjectURL(value.url);
+  }
+  previewObjectUrlCache.clear();
+}
+
+export type E2eeAttachmentRenderState = {
+  url?: string;
+  blob?: Blob;
+  loading: boolean;
+  error?: string;
+  progress?: E2eeAttachmentTransferProgress;
+  load: () => Promise<string | undefined>;
+  download: (filename?: string) => Promise<void>;
+  streamUrl?: string;
+  streamLoading: boolean;
+  loadStream: () => Promise<string | undefined>;
+  disposeStream: () => Promise<void>;
+  revoke: () => void;
+};
+
+function manifestDisplayString(
+  manifest: E2eeAttachmentManifest,
+  kind: 'original' | 'preview',
+  key: string,
+): string | undefined {
+  const asset = manifest.assets.find((item) => item.kind === kind) || manifest.assets[0];
+  const value = asset?.display?.[key];
+  return typeof value === 'string' && value.trim() ? value : undefined;
+}
+
+function previewCacheKey(
+  channel: Channel,
+  manifest: E2eeAttachmentManifest,
+  kind: 'original' | 'preview',
+): string | undefined {
+  if (kind !== 'preview') return undefined;
+  const asset = manifest.assets.find((item) => item.kind === 'preview');
+  if (!asset) return undefined;
+  const cid = (channel as any).cid || (channel as any).data?.cid || `${channel.type}:${channel.id}`;
+  return `${cid}:${manifest.attachment_id}:${asset.asset_id}`;
+}
+
+function cachePreviewObjectUrl(key: string, url: string, blob: Blob): void {
+  if (previewObjectUrlCache.has(key)) {
+    const existing = previewObjectUrlCache.get(key);
+    if (existing) URL.revokeObjectURL(existing.url);
+    previewObjectUrlCache.delete(key);
+  }
+  previewObjectUrlCache.set(key, { url, blob });
+  while (previewObjectUrlCache.size > E2EE_PREVIEW_CACHE_LIMIT) {
+    const oldestKey = previewObjectUrlCache.keys().next().value;
+    if (!oldestKey) break;
+    const oldest = previewObjectUrlCache.get(oldestKey);
+    if (oldest) URL.revokeObjectURL(oldest.url);
+    previewObjectUrlCache.delete(oldestKey);
+  }
+}
+
+export function useE2eeAttachmentRenderer(
+  channel: Channel | null,
+  manifest?: E2eeAttachmentManifest,
+  kind: 'original' | 'preview' = 'original',
+): E2eeAttachmentRenderState {
+  const [url, setUrl] = useState<string | undefined>();
+  const [blob, setBlob] = useState<Blob | undefined>();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | undefined>();
+  const [progress, setProgress] = useState<E2eeAttachmentTransferProgress | undefined>();
+  const [streamUrl, setStreamUrl] = useState<string | undefined>();
+  const [streamLoading, setStreamLoading] = useState(false);
+  const streamDisposeRef = useRef<(() => Promise<void>) | undefined>(undefined);
+  const cachedPreviewRef = useRef(false);
+
+  const disposeStream = useCallback(async () => {
+    const dispose = streamDisposeRef.current;
+    streamDisposeRef.current = undefined;
+    setStreamUrl(undefined);
+    if (dispose) await dispose();
+  }, []);
+
+  const revoke = useCallback(() => {
+    setUrl((current) => {
+      if (current && !(kind === 'preview' && cachedPreviewRef.current)) URL.revokeObjectURL(current);
+      return undefined;
+    });
+    setBlob(undefined);
+    setProgress(undefined);
+    cachedPreviewRef.current = false;
+    void disposeStream();
+  }, [disposeStream, kind]);
+
+  const load = useCallback(async () => {
+    if (!channel || !manifest) return undefined;
+    if (url) return url;
+    const cacheKey = previewCacheKey(channel, manifest, kind);
+    if (cacheKey) {
+      const cached = previewObjectUrlCache.get(cacheKey);
+      if (cached) {
+        previewObjectUrlCache.delete(cacheKey);
+        previewObjectUrlCache.set(cacheKey, cached);
+        cachedPreviewRef.current = true;
+        setBlob(cached.blob);
+        setUrl(cached.url);
+        return cached.url;
+      }
+    }
+    const manager = (channel as any).getClient?.().encryptionManager;
+    if (!manager?.initialized) {
+      setError('E2EE is not initialized');
+      return undefined;
+    }
+    setLoading(true);
+    setError(undefined);
+    setProgress(undefined);
+    try {
+      const downloaded = await manager.downloadE2eeAttachmentAsset(channel.type, channel.id, manifest, kind, {
+        onProgress: setProgress,
+      });
+      const mimeType = manifestDisplayString(manifest, kind, 'mime_type');
+      const typedBlob =
+        mimeType && downloaded.type !== mimeType ? new Blob([downloaded], { type: mimeType }) : downloaded;
+      const objectUrl = URL.createObjectURL(typedBlob);
+      if (cacheKey) {
+        cachePreviewObjectUrl(cacheKey, objectUrl, typedBlob);
+        cachedPreviewRef.current = true;
+      } else {
+        cachedPreviewRef.current = false;
+      }
+      setBlob(typedBlob);
+      setUrl(objectUrl);
+      return objectUrl;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message);
+      return undefined;
+    } finally {
+      setLoading(false);
+    }
+  }, [channel, kind, manifest, url]);
+
+  const loadStream = useCallback(async () => {
+    if (!channel || !manifest || kind !== 'original') return undefined;
+    if (streamUrl) return streamUrl;
+    const manager = (channel as any).getClient?.().encryptionManager;
+    if (!manager?.initialized || typeof manager.createE2eeAttachmentStreamUrl !== 'function') return undefined;
+    setStreamLoading(true);
+    setError(undefined);
+    try {
+      const handle = await manager.createE2eeAttachmentStreamUrl(channel.type, channel.id, manifest, 'original');
+      if (!handle?.url) return undefined;
+      streamDisposeRef.current = handle.dispose;
+      setStreamUrl(handle.url);
+      return handle.url;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message);
+      return undefined;
+    } finally {
+      setStreamLoading(false);
+    }
+  }, [channel, kind, manifest, streamUrl]);
+
+  const download = useCallback(
+    async (filename?: string) => {
+      const objectUrl = await load();
+      if (!objectUrl || typeof document === 'undefined') return;
+      const anchor = document.createElement('a');
+      anchor.href = objectUrl;
+      anchor.download =
+        filename || (manifest ? manifestDisplayString(manifest, kind, 'name') : undefined) || 'encrypted-attachment';
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+    },
+    [kind, load, manifest],
+  );
+
+  useEffect(() => revoke, [revoke]);
+
+  return {
+    url,
+    blob,
+    streamUrl,
+    streamLoading,
+    loading,
+    error,
+    progress,
+    load,
+    loadStream,
+    download,
+    disposeStream,
+    revoke,
+  };
+}

package/src/hooks/useE2eeFileUpload.ts

@@ -0,0 +1,38 @@
+import { useCallback, useState } from 'react';
+import type { Channel, E2eeAttachmentManifest } from '@ermis-network/ermis-chat-sdk';
+
+export type E2eeFileUploadProgress = {
+  fileIndex: number;
+  phase: 'generating_preview' | 'encrypting' | 'uploading' | 'completing';
+  loaded: number;
+  total: number;
+  percentage: number;
+};
+
+export function useE2eeFileUpload(channel: Channel | null) {
+  const [progress, setProgress] = useState<E2eeFileUploadProgress | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | undefined>();
+
+  const upload = useCallback(
+    async (files: Blob[]): Promise<{ attachments: E2eeAttachmentManifest[]; e2ee_attachment_ids: string[] }> => {
+      if (!channel) return { attachments: [], e2ee_attachment_ids: [] };
+      const manager = (channel as any).getClient?.().encryptionManager;
+      if (!manager?.initialized) throw new Error('E2EE attachments require an initialized encryption manager');
+      setUploading(true);
+      setError(undefined);
+      try {
+        return await manager.uploadE2eeAttachments(channel.type, channel.id, files, { onProgress: setProgress });
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        setError(message);
+        throw err;
+      } finally {
+        setUploading(false);
+      }
+    },
+    [channel],
+  );
+
+  return { upload, progress, uploading, error };
+}

package/src/hooks/useFileUpload.ts

@@ -17,6 +17,11 @@ export type UseFileUploadOptions = {
 export function useFileUpload({ activeChannel, editableRef, setHasContent }: UseFileUploadOptions) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [files, setFiles] = useState<FilePreviewItem[]>([]);
+  const isE2eeChannel =
+    !!activeChannel &&
+    (typeof (activeChannel as any)._isEffectiveE2ee === 'function'
+      ? (activeChannel as any)._isEffectiveE2ee()
+      : activeChannel.data?.mls_enabled === true);
 
   /**
    * Upload a single file immediately:
@@ -35,7 +40,16 @@ export function useFileUpload({ activeChannel, editableRef, setHasContent }: Use
         ? new File([file], normalizedName, { type: file.type, lastModified: file.lastModified })
         : file;
 
-      const response = await activeChannel.sendFile(fileToUpload, fileToUpload.name, fileToUpload.type);
+      const response = await activeChannel.uploadFilePresigned(
+        fileToUpload,
+        fileToUpload.name,
+        fileToUpload.type || 'application/octet-stream',
+        (progress) => {
+          setFiles((prev) =>
+            prev.map((f) => (f.id === item.id ? { ...f, progress: progress.percentage } : f))
+          );
+        }
+      );
       const uploadedUrl = response.file;
 
       let thumbUrl = '';
@@ -44,7 +58,7 @@ export function useFileUpload({ activeChannel, editableRef, setHasContent }: Use
           const thumbBlob = await activeChannel.getThumbBlobVideo(file);
           if (thumbBlob) {
             const thumbFile = new File([thumbBlob], `thumb_${normalizedName}.jpg`, { type: 'image/jpeg' });
-            const thumbResp = await activeChannel.sendFile(thumbFile, thumbFile.name, 'image/jpeg');
+            const thumbResp = await activeChannel.uploadFilePresigned(thumbFile, thumbFile.name, 'image/jpeg');
             thumbUrl = thumbResp.file;
           }
         } catch {
@@ -81,15 +95,21 @@ export function useFileUpload({ activeChannel, editableRef, setHasContent }: Use
         id: nextFileId(),
         file,
         previewUrl: isPreviewable ? URL.createObjectURL(file) : undefined,
-        status: 'uploading' as const,
+        status: isE2eeChannel ? ('pending' as const) : ('uploading' as const),
+        e2eePhase: isE2eeChannel ? ('encrypting' as const) : undefined,
       };
     });
 
     setFiles((prev) => [...prev, ...newItems]);
     setHasContent(true);
 
-    newItems.forEach((item) => uploadSingleFile(item));
-  }, [uploadSingleFile, setHasContent]);
+    if (!isE2eeChannel) {
+      newItems.forEach((item) => uploadSingleFile(item));
+    }
+
+    // Auto-focus the input so user can press Enter to send immediately
+    editableRef.current?.focus();
+  }, [uploadSingleFile, setHasContent, editableRef, isE2eeChannel]);
 
   const handleRemoveFile = useCallback((id: string) => {
     setFiles((prev) => {