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

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,19 +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 (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 } => {

package/src/hooks/useMessageActions.ts

@@ -21,6 +21,7 @@ export type MessageActionList = {
   hasCapPin: boolean;
   hasCapReply: boolean;
   hasCapQuote: boolean;
+  hasCapReact: boolean;
 };
 
 export const useMessageActions = (message: FormatMessageResponse, isOwnMessage: boolean): MessageActionList => {
@@ -50,6 +51,7 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
         hasCapPin: false,
         hasCapReply: false,
         hasCapQuote: false,
+        hasCapReact: false,
       };
     }
 
@@ -58,7 +60,9 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
     const isSticker = isStickerMessage(message);
     const isPinned = isPinnedFlag;
 
-    const canEdit = !isPreviewMode && !isSystem && !isSignal && !isSticker && isOwnMessage;
+    const isDeleted = message.display_type === 'deleted';
+
+    const canEdit = !isPreviewMode && !isSystem && !isSignal && !isSticker && isOwnMessage && !isDeleted;
 
     // Delete for everyone:
     // + Team channel: only the owner can perform this action natively.
@@ -66,13 +70,13 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
     const canDeleteForEveryoneTeam = isTeam && isOwner;
     const canDeleteForEveryoneMessaging = !isTeam && isOwnMessage;
 
-    const canDelete = !isPreviewMode && !isSystem && (canDeleteForEveryoneTeam || canDeleteForEveryoneMessaging);
-    const canDeleteForMe = !isPreviewMode && !isSystem;
-    const canReply = !isPreviewMode && !isSystem && !isSignal;
-    const canQuote = !isPreviewMode && !isSystem && !isSignal;
-    const canForward = !isPreviewMode && !isSystem && !isSignal;
-    const canPin = !isPreviewMode && !isSystem && !isSignal;
-    const canCopy = !isSystem && !isSignal && Boolean(message.text?.trim()); // Allow copy even in preview mode
+    const canDelete = !isPreviewMode && !isSystem && (canDeleteForEveryoneTeam || canDeleteForEveryoneMessaging) && !isDeleted;
+    const canDeleteForMe = !isPreviewMode && !isSystem && !isDeleted;
+    const canReply = !isPreviewMode && !isSystem && !isSignal && !isDeleted;
+    const canQuote = !isPreviewMode && !isSystem && !isSignal && !isDeleted;
+    const canForward = !isPreviewMode && !isSystem && !isSignal && !isDeleted;
+    const canPin = !isPreviewMode && !isSystem && !isSignal && !isDeleted;
+    const canCopy = !isSystem && !isSignal && Boolean(message.text?.trim()) && !isDeleted; // Allow copy even in preview mode
 
     const hasCapEdit = hasCapability('update-own-message');
     const hasCapDelete = !isTeam || isOwner || (isOwnMessage && hasCapability('delete-own-message'));
@@ -82,6 +86,7 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
     const hasCapReply = hasCapability('send-reply');
     const hasCapQuote = hasCapability('quote-message');
     const hasCapPin = hasCapability('pin-message');
+    const hasCapReact = hasCapability('send-reaction');
 
     return {
       canEdit,
@@ -99,6 +104,7 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
       hasCapPin,
       hasCapReply,
       hasCapQuote,
+      hasCapReact,
     };
   }, [activeChannel, isTeam, isOwner, hasCapability, messageType, message.text, isPinnedFlag, isOwnMessage, isPreviewMode]); // Use capabilities from hook
 };

package/src/hooks/useMessageSend.ts

@@ -58,7 +58,12 @@ export function useMessageSend({
 
     const payload = buildPayload();
     const text = payload.text.trim();
-    const uploadedFiles = files.filter((f) => f.status === 'done');
+    const isE2eeChannelForFiles =
+      !!activeChannel &&
+      (typeof (activeChannel as any)._isEffectiveE2ee === 'function'
+        ? (activeChannel as any)._isEffectiveE2ee()
+        : activeChannel.data?.mls_enabled === true);
+    const uploadedFiles = files.filter((f) => f.status === 'done' || (isE2eeChannelForFiles && f.status === 'pending'));
 
     if (!text && uploadedFiles.length === 0) return;
 
@@ -73,15 +78,49 @@ export function useMessageSend({
 
     try {
       setSending(true);
+      const isE2eeChannel =
+        typeof (activeChannel as any)._isEffectiveE2ee === 'function'
+          ? (activeChannel as any)._isEffectiveE2ee()
+          : activeChannel.data?.mls_enabled === true;
 
       // Build attachment payloads from already-uploaded files (only applied on new messages)
-      const attachments = uploadedFiles.map((f) => {
-        if (f.originalAttachment) {
-          return f.originalAttachment;
+      let attachments: unknown[] = [];
+      let e2eeAttachmentIds: string[] | undefined;
+      if (isE2eeChannel && !editingMessage && uploadedFiles.length > 0) {
+        const encryptionMgr = (activeChannel as any).getClient?.().encryptionManager;
+        if (!encryptionMgr?.initialized) throw new Error('E2EE attachments require an initialized encryption manager');
+        const filesToUpload = uploadedFiles.map((f) => f.normalizedFile || f.file!).filter(Boolean);
+        const message: Record<string, any> = { text };
+        if (isTeamChannel) {
+          message.mentioned_all = payload.mentioned_all;
+          message.mentioned_users = payload.mentioned_users;
         }
-        const fileObj = f.normalizedFile || f.file!;
-        return buildAttachmentPayload(fileObj, f.uploadedUrl!, f.thumbUrl);
-      });
+        if (quotedMessage?.id) {
+          message.quoted_message_id = quotedMessage.id;
+        }
+        await (activeChannel as any).enqueueE2eeAttachmentMessage(message, filesToUpload);
+        syncMessages();
+
+        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?.();
+        onSend?.(payload.text);
+        activeChannel?.stopTyping();
+        return;
+      } else {
+        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 };
@@ -90,6 +129,9 @@ export function useMessageSend({
       if (!editingMessage && attachments.length > 0) {
         message.attachments = attachments;
       }
+      if (!editingMessage && e2eeAttachmentIds && e2eeAttachmentIds.length > 0) {
+        message.e2ee_attachment_ids = e2eeAttachmentIds;
+      }
 
       if (isTeamChannel) {
         message.mentioned_all = payload.mentioned_all;
@@ -130,11 +172,17 @@ export function useMessageSend({
       // --- 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();
-      });
+      sendPromise
+        .then(() => {
+          // E2EE own-device WS events may arrive before the SDK replaces the
+          // optimistic message with the confirmed local plaintext snapshot.
+          syncMessages();
+        })
+        .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 {
@@ -158,6 +206,10 @@ export function useMessageSend({
     editableRef,
     setFiles,
     setHasContent,
+    quotedMessage,
+    clearQuotedMessage,
+    editingMessage,
+    clearEditingMessage,
   ]);
 
   return { sending, handleSend };

package/src/hooks/usePendingE2eeSends.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { PendingE2eeSendRecord } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+
+export function usePendingE2eeSends(statuses?: string[]) {
+  const { client } = useChatClient();
+  const [records, setRecords] = useState<PendingE2eeSendRecord[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const refresh = useCallback(async () => {
+    const storage = client.encryptionManager?.storage;
+    if (!storage?.listPendingE2eeSends) {
+      setRecords([]);
+      return;
+    }
+    setLoading(true);
+    try {
+      setRecords(await storage.listPendingE2eeSends(statuses));
+    } finally {
+      setLoading(false);
+    }
+  }, [client.encryptionManager, JSON.stringify(statuses || [])]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  return { records, loading, refresh };
+}

package/src/hooks/useRecoveryPin.ts

@@ -0,0 +1,287 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type {
+  EncryptedChannelRepairMode,
+  EncryptedChannelRepairResult,
+  RepairMode,
+  RepairResult,
+  RestoreProgressRecord,
+} from '@ermis-network/ermis-chat-sdk';
+
+import { useChatClient } from './useChatClient';
+
+export type RecoveryPinStatus = 'idle' | 'working' | 'ready' | 'locked' | 'error';
+
+export type RecoveryStatusInfo = {
+  hasVault: boolean;
+  unlocked: boolean;
+  hasIncompleteRestore: boolean;
+  incompleteChannels: string[];
+  channelsWithPermanentGaps: string[];
+  restoreProgressWithIssues: RestoreProgressRecord[];
+  e2eeBootstrapRunning?: boolean;
+  e2eeBootstrapCompleted?: number;
+  e2eeBootstrapTotal?: number;
+};
+
+export type RecoveryRestoredMessage = {
+  epoch: number;
+  messageId?: string;
+  plaintext?: unknown;
+  source?: 'archive';
+  createdAt?: string;
+  gap?: boolean;
+  reason?: string;
+};
+
+export type UseRecoveryPinReturn = {
+  status: RecoveryPinStatus;
+  error: Error | null;
+  hasRecoveryKey: boolean;
+  recoveryStatus: RecoveryStatusInfo | null;
+  setupRecoveryPin: (pin: string) => Promise<void>;
+  unlockRecoveryVault: (pin: string) => Promise<void>;
+  changeRecoveryPin: (oldPin: string, newPin: string) => Promise<void>;
+  changeUnlockedRecoveryPin: (newPin: string) => Promise<void>;
+  repairRecoveryChannel: (
+    channelType: string,
+    channelId: string,
+    options?: { mode?: RepairMode },
+  ) => Promise<RepairResult>;
+  repairEncryptedChannel: (
+    channelType: string,
+    channelId: string,
+    options?: { mode?: EncryptedChannelRepairMode },
+  ) => Promise<EncryptedChannelRepairResult>;
+  enqueueRestore: (
+    channelType: string,
+    channelId: string,
+    priority?: 'active' | 'background',
+    options?: { fromEpoch?: number; toEpoch?: number },
+  ) => void;
+  loadRestoreProgress: (channelType: string, channelId: string) => Promise<RestoreProgressRecord | null>;
+  restoreHistoricalMessages: (
+    channelType: string,
+    channelId: string,
+    options?: { fromEpoch?: number; toEpoch?: number },
+  ) => Promise<RecoveryRestoredMessage[]>;
+  refresh: () => void;
+};
+
+const requireEncryptionManager = (client: unknown): any => {
+  const manager = (client as any)?.encryptionManager;
+  if (!manager) {
+    throw new Error('Encryption manager is not initialized.');
+  }
+  return manager;
+};
+
+export const useRecoveryPin = (): UseRecoveryPinReturn => {
+  const { client } = useChatClient();
+  const [status, setStatus] = useState<RecoveryPinStatus>('idle');
+  const [error, setError] = useState<Error | null>(null);
+  const [recoveryStatus, setRecoveryStatus] = useState<RecoveryStatusInfo | null>(null);
+  const [hasRecoveryKey, setHasRecoveryKey] = useState(() => {
+    try {
+      return !!requireEncryptionManager(client).hasRecoveryKey?.();
+    } catch {
+      return false;
+    }
+  });
+
+  const refresh = useCallback(() => {
+    void (async () => {
+      try {
+        const manager = requireEncryptionManager(client);
+        const hasKey = !!manager.hasRecoveryKey?.();
+        const nextStatus = manager.getRecoveryStatus ? await manager.getRecoveryStatus() : null;
+        setHasRecoveryKey(hasKey);
+        setRecoveryStatus(nextStatus);
+        setStatus(nextStatus?.hasVault === false ? 'idle' : nextStatus?.unlocked ? 'ready' : 'locked');
+        setError(null);
+      } catch (err) {
+        const nextError = err instanceof Error ? err : new Error(String(err));
+        if (nextError.message.includes('Encryption manager is not initialized')) {
+          setStatus('idle');
+          setError(null);
+          return;
+        }
+        setStatus('error');
+        setError(nextError);
+      }
+    })();
+  }, [client]);
+
+  const run = useCallback(
+    async <T>(fn: (manager: any) => Promise<T>): Promise<T> => {
+      setStatus('working');
+      setError(null);
+      try {
+        const manager = requireEncryptionManager(client);
+        const result = await fn(manager);
+        const hasKey = !!manager.hasRecoveryKey?.();
+        const nextStatus = manager.getRecoveryStatus ? await manager.getRecoveryStatus() : null;
+        setHasRecoveryKey(hasKey);
+        setRecoveryStatus(nextStatus);
+        setStatus(nextStatus?.hasVault === false ? 'idle' : nextStatus?.unlocked ? 'ready' : 'locked');
+        return result;
+      } catch (err) {
+        const nextError = err instanceof Error ? err : new Error(String(err));
+        setError(nextError);
+        setStatus('error');
+        throw nextError;
+      }
+    },
+    [client],
+  );
+
+  const setupRecoveryPin = useCallback(
+    async (pin: string): Promise<void> => {
+      await run((manager) => manager.setupRecoveryPin(pin));
+    },
+    [run],
+  );
+
+  const unlockRecoveryVault = useCallback(
+    async (pin: string): Promise<void> => {
+      await run((manager) => manager.unlockRecoveryVault(pin));
+    },
+    [run],
+  );
+
+  const changeRecoveryPin = useCallback(
+    async (oldPin: string, newPin: string): Promise<void> => {
+      await run((manager) => manager.changeRecoveryPin(oldPin, newPin));
+    },
+    [run],
+  );
+
+  const changeUnlockedRecoveryPin = useCallback(
+    async (newPin: string): Promise<void> => {
+      await run((manager) => manager.changeUnlockedRecoveryPin(newPin));
+    },
+    [run],
+  );
+
+  const repairRecoveryChannel = useCallback(
+    (channelType: string, channelId: string, options?: { mode?: RepairMode }): Promise<RepairResult> =>
+      run((manager) => manager.repairRecoveryChannel(channelType, channelId, options)),
+    [run],
+  );
+
+  const repairEncryptedChannel = useCallback(
+    (
+      channelType: string,
+      channelId: string,
+      options?: { mode?: EncryptedChannelRepairMode },
+    ): Promise<EncryptedChannelRepairResult> =>
+      run((manager) => manager.repairEncryptedChannel(channelType, channelId, options)),
+    [run],
+  );
+
+  const restoreHistoricalMessages = useCallback(
+    (
+      channelType: string,
+      channelId: string,
+      options?: { fromEpoch?: number; toEpoch?: number },
+    ): Promise<RecoveryRestoredMessage[]> =>
+      run((manager) => manager.restoreHistoricalMessages(channelType, channelId, options)),
+    [run],
+  );
+
+  const enqueueRestore = useCallback(
+    (
+      channelType: string,
+      channelId: string,
+      priority: 'active' | 'background' = 'active',
+      options?: { fromEpoch?: number; toEpoch?: number },
+    ): void => {
+      try {
+        const manager = requireEncryptionManager(client);
+        manager.enqueueRestore?.(channelType, channelId, priority, options);
+        refresh();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setStatus('error');
+      }
+    },
+    [client, refresh],
+  );
+
+  const loadRestoreProgress = useCallback(
+    async (channelType: string, channelId: string): Promise<RestoreProgressRecord | null> => {
+      try {
+        const manager = requireEncryptionManager(client);
+        return manager.getRestoreProgress ? await manager.getRestoreProgress(channelType, channelId) : null;
+      } catch (err) {
+        const nextError = err instanceof Error ? err : new Error(String(err));
+        if (!nextError.message.includes('Encryption manager is not initialized')) {
+          setError(nextError);
+        }
+        return null;
+      }
+    },
+    [client],
+  );
+
+  useEffect(() => {
+    const eventClient = client as any;
+    if (!eventClient?.on) return;
+    const progressSub = eventClient.on('e2ee.restore_progress' as any, refresh);
+    const bootstrapSub = eventClient.on('e2ee.bootstrap_progress' as any, refresh);
+    const initSub = eventClient.on('e2ee.initialized' as any, refresh);
+    return () => {
+      progressSub?.unsubscribe?.();
+      bootstrapSub?.unsubscribe?.();
+      initSub?.unsubscribe?.();
+    };
+  }, [client, refresh]);
+
+  useEffect(() => {
+    const eventClient = client as any;
+    if (!eventClient || eventClient.encryptionManager?.initialized) return;
+    const interval = setInterval(() => {
+      refresh();
+      if (eventClient.encryptionManager?.initialized) clearInterval(interval);
+    }, 500);
+    return () => clearInterval(interval);
+  }, [client, refresh]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return useMemo(
+    () => ({
+      status,
+      error,
+      hasRecoveryKey,
+      recoveryStatus,
+      setupRecoveryPin,
+      unlockRecoveryVault,
+      changeRecoveryPin,
+      changeUnlockedRecoveryPin,
+      repairRecoveryChannel,
+      repairEncryptedChannel,
+      enqueueRestore,
+      loadRestoreProgress,
+      restoreHistoricalMessages,
+      refresh,
+    }),
+    [
+      status,
+      error,
+      hasRecoveryKey,
+      recoveryStatus,
+      setupRecoveryPin,
+      unlockRecoveryVault,
+      changeRecoveryPin,
+      changeUnlockedRecoveryPin,
+      repairRecoveryChannel,
+      repairEncryptedChannel,
+      enqueueRestore,
+      loadRestoreProgress,
+      restoreHistoricalMessages,
+      refresh,
+    ],
+  );
+};

package/src/hooks/useScrollToMessage.ts

@@ -4,6 +4,7 @@ import { formatMessage } from '@ermis-network/ermis-chat-sdk';
 import type { VListHandle } from 'virtua';
 import { dedupMessages } from './useLoadMessages';
 import { useChatClient } from './useChatClient';
+import { getDateKey } from '../utils';
 
 export type UseScrollToMessageOptions = {
   vlistRef: React.RefObject<VListHandle | null>;
@@ -23,6 +24,23 @@ export type UseScrollToMessageReturn = {
   jumpToLatest: () => void;
 };
 
+function getRenderedMessageIndex(messages: FormatMessageResponse[], messageId: string): number {
+  let renderedIndex = 0;
+
+  for (let i = 0; i < messages.length; i += 1) {
+    const message = messages[i];
+    const prevMessage = i > 0 ? messages[i - 1] : null;
+    const showDateSeparator =
+      !prevMessage || getDateKey(message.created_at) !== getDateKey(prevMessage.created_at);
+
+    if (showDateSeparator) renderedIndex += 1;
+    if (message.id === messageId) return renderedIndex;
+    renderedIndex += 1;
+  }
+
+  return -1;
+}
+
 export function useScrollToMessage({
   vlistRef,
   messagesRef,
@@ -60,7 +78,14 @@ export function useScrollToMessage({
       // 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 });
+        const renderedIdx = getRenderedMessageIndex(messagesRef.current, messageId);
+        if (renderedIdx !== -1) {
+          jumpingRef.current = true;
+          vlistRef.current?.scrollToIndex(renderedIdx, { align: 'center', smooth: true });
+          setTimeout(() => {
+            jumpingRef.current = false;
+          }, 500);
+        }
         highlight(messageId);
         return;
       }
@@ -93,14 +118,14 @@ export function useScrollToMessage({
 
         // 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) {
+          const renderedIdx = getRenderedMessageIndex(unique, messageId);
+          if (renderedIdx === -1) {
             jumpingRef.current = false;
             if (vlistEl) vlistEl.style.opacity = '1';
             return;
           }
 
-          vlistRef.current?.scrollToIndex(newIdx, { align: 'center' });
+          vlistRef.current?.scrollToIndex(renderedIdx, { align: 'center' });
 
           setTimeout(() => {
             if (vlistEl) {