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

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) => {

package/src/hooks/useForwardMessage.ts

@@ -1,10 +1,144 @@
 import { useState, useMemo, useCallback } from 'react';
-import type { Channel, FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+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 } from '../utils';
+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());
@@ -27,7 +161,8 @@ export function useForwardMessage(message: FormatMessageResponse, onDismiss: ()
     const cleanQ = removeAccents(q);
     const isStrict = q !== cleanQ;
 
-    return channels.filter((ch) => {
+    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);
@@ -38,14 +173,21 @@ export function useForwardMessage(message: FormatMessageResponse, onDismiss: ()
       const pt = parentName.toLowerCase();
       const cleanPT = removeAccents(pt);
 
+      let matched = false;
       if (isStrict) {
         // Strict match when query has accents
-        return t.includes(q) || pt.includes(q);
+        matched = t.startsWith(q) || pt.startsWith(q);
       } else {
         // Broad match when query is accent-less
-        return cleanT.includes(cleanQ) || cleanPT.includes(cleanQ);
+        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 ---------- */
@@ -67,21 +209,76 @@ export function useForwardMessage(message: FormatMessageResponse, onDismiss: ()
     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(
-          message,
+          formattedMessage,
           targetChannel.cid as string,
           activeChannel.cid as string,
         );
 
-        await activeChannel.forwardMessage(forwardPayload, {
-          type: targetChannel.type,
-          channelID: targetChannel.id!,
-        });
+        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);
@@ -94,9 +291,9 @@ export function useForwardMessage(message: FormatMessageResponse, onDismiss: ()
 
     // Auto-close after success (short delay)
     if (failed.length === 0) {
-      setTimeout(() => onDismiss(), 1200);
+      setTimeout(() => onDismiss(), queuedBackgroundForward ? 0 : 1200);
     }
-  }, [activeChannel, selectedChannels, channels, message, sending, onDismiss]);
+  }, [client, activeChannel, selectedChannels, channels, message, sending, onDismiss]);
 
   return {
     search,

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 {