@ermis-network/ermis-chat-react 1.0.0

package/src/hooks/useFileUpload.ts

@@ -0,0 +1,128 @@
+import { useState, useCallback, useRef } from 'react';
+import { isHeicFile, isVideoFile, normalizeFileName } from '@ermis-network/ermis-chat-sdk';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import type { FilePreviewItem } from '../types';
+
+let _fileIdCounter = 0;
+function nextFileId(): string {
+  return `file-${Date.now()}-${++_fileIdCounter}`;
+}
+
+export type UseFileUploadOptions = {
+  activeChannel: Channel | null;
+  editableRef: React.RefObject<HTMLDivElement | null>;
+  setHasContent: (value: boolean) => void;
+};
+
+export function useFileUpload({ activeChannel, editableRef, setHasContent }: UseFileUploadOptions) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [files, setFiles] = useState<FilePreviewItem[]>([]);
+
+  /**
+   * Upload a single file immediately:
+   * 1. Normalize file name
+   * 2. Call sendFile API
+   * 3. For video: generate + upload thumbnail
+   * 4. Update file item state with uploaded URL
+   */
+  const uploadSingleFile = useCallback(async (item: FilePreviewItem) => {
+    if (!activeChannel) return;
+
+    try {
+      const file = item.file!;
+      const normalizedName = normalizeFileName(file.name);
+      const fileToUpload = normalizedName !== file.name
+        ? new File([file], normalizedName, { type: file.type, lastModified: file.lastModified })
+        : file;
+
+      const response = await activeChannel.sendFile(fileToUpload, fileToUpload.name, fileToUpload.type);
+      const uploadedUrl = response.file;
+
+      let thumbUrl = '';
+      if (isVideoFile(file)) {
+        try {
+          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');
+            thumbUrl = thumbResp.file;
+          }
+        } catch {
+          // Thumbnail failure is non-critical
+        }
+      }
+
+      setFiles((prev) =>
+        prev.map((f) =>
+          f.id === item.id
+            ? { ...f, status: 'done' as const, uploadedUrl, thumbUrl, normalizedFile: fileToUpload }
+            : f,
+        ),
+      );
+    } catch (err: any) {
+      setFiles((prev) =>
+        prev.map((f) =>
+          f.id === item.id
+            ? { ...f, status: 'error' as const, error: err?.message || 'Upload failed' }
+            : f,
+        ),
+      );
+    }
+  }, [activeChannel]);
+
+  const handleFilesSelected = useCallback((selectedFiles: FileList | null) => {
+    if (!selectedFiles || selectedFiles.length === 0) return;
+
+    const newItems: FilePreviewItem[] = Array.from(selectedFiles).map((file) => {
+      const isPreviewable =
+        (file.type.startsWith('image/') && !isHeicFile(file)) ||
+        file.type.startsWith('video/');
+      return {
+        id: nextFileId(),
+        file,
+        previewUrl: isPreviewable ? URL.createObjectURL(file) : undefined,
+        status: 'uploading' as const,
+      };
+    });
+
+    setFiles((prev) => [...prev, ...newItems]);
+    setHasContent(true);
+
+    newItems.forEach((item) => uploadSingleFile(item));
+  }, [uploadSingleFile, setHasContent]);
+
+  const handleRemoveFile = useCallback((id: string) => {
+    setFiles((prev) => {
+      const item = prev.find((f) => f.id === id);
+      if (item?.previewUrl) URL.revokeObjectURL(item.previewUrl);
+      const remaining = prev.filter((f) => f.id !== id);
+      const el = editableRef.current;
+      const textContent = el?.textContent?.trim() ?? '';
+      if (remaining.length === 0 && textContent.length === 0) {
+        setHasContent(false);
+      }
+      return remaining;
+    });
+  }, [editableRef, setHasContent]);
+
+  const handleAttachClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  // Cleanup blob URLs
+  const cleanupFiles = useCallback(() => {
+    files.forEach((f) => {
+      if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);
+    });
+  }, [files]);
+
+  return {
+    files,
+    setFiles,
+    fileInputRef,
+    handleFilesSelected,
+    handleRemoveFile,
+    handleAttachClick,
+    cleanupFiles,
+  };
+}

package/src/hooks/useLoadMessages.ts

@@ -0,0 +1,178 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+import { formatMessage } from '@ermis-network/ermis-chat-sdk';
+import type { VListHandle } from 'virtua';
+import { useChatClient } from './useChatClient';
+
+const LOAD_MORE_THRESHOLD = 200;
+
+/** Filter out messages whose id already exists in `existing` (or self-dedup if omitted). */
+export const dedupMessages = (incoming: any[], existing?: any[]) => {
+  const ids = new Set(existing?.map((m) => m.id) ?? []);
+  return incoming.filter((m: any) => {
+    if (!m.id || ids.has(m.id)) return false;
+    ids.add(m.id);
+    return true;
+  });
+};
+
+export type UseLoadMessagesOptions = {
+  vlistRef: React.RefObject<VListHandle | null>;
+  messagesRef: React.MutableRefObject<FormatMessageResponse[]>;
+  /** Shared guard ref — skip scroll-triggered loads during jump transitions */
+  jumpingRef: React.MutableRefObject<boolean>;
+  loadMoreLimit?: number;
+};
+
+export type UseLoadMessagesReturn = {
+  /** VList shift mode — true during prepend, auto-resets to false */
+  shiftMode: boolean;
+  hasMore: boolean;
+  setHasMore: React.Dispatch<React.SetStateAction<boolean>>;
+  hasNewer: boolean;
+  setHasNewer: React.Dispatch<React.SetStateAction<boolean>>;
+  hasMoreRef: React.RefObject<boolean>;
+  hasNewerRef: React.RefObject<boolean>;
+  loadingMoreRef: React.MutableRefObject<boolean>;
+  loadingNewerRef: React.MutableRefObject<boolean>;
+  loadMore: () => Promise<void>;
+  loadNewer: () => Promise<void>;
+  handleScroll: (offset: number) => void;
+  isAtBottomRef: React.MutableRefObject<boolean>;
+};
+
+export function useLoadMessages({
+  vlistRef,
+  messagesRef,
+  jumpingRef,
+  loadMoreLimit = 25,
+}: UseLoadMessagesOptions): UseLoadMessagesReturn {
+  const { activeChannel, setMessages } = useChatClient();
+  const [hasMore, setHasMore] = useState(true);
+  const [hasNewer, setHasNewer] = useState(false);
+  const [shiftMode, setShiftMode] = useState(false);
+
+  // Auto-reset shiftMode after each prepend render
+  useEffect(() => {
+    if (shiftMode) {
+      requestAnimationFrame(() => setShiftMode(false));
+    }
+  }, [shiftMode]);
+
+  // Refs synced from state (avoid handleScroll recreation on state change)
+  const hasMoreRef = useRef(true);
+  hasMoreRef.current = hasMore;
+  const hasNewerRef = useRef(false);
+  hasNewerRef.current = hasNewer;
+  const isAtBottomRef = useRef(true);
+
+  // Concurrency guards
+  const loadingMoreRef = useRef(false);
+  const loadingNewerRef = useRef(false);
+
+  const loadMore = useCallback(async () => {
+    if (!activeChannel || loadingMoreRef.current) return;
+
+    const currentMessages = messagesRef.current;
+    const oldestMessage = currentMessages[0];
+    if (!oldestMessage?.id) return;
+
+    loadingMoreRef.current = true;
+    try {
+      const olderRaw = await activeChannel.queryMessagesLessThanId(oldestMessage.id, loadMoreLimit);
+
+      if (olderRaw.length === 0) {
+        setHasMore(false);
+        return;
+      }
+
+      const olderFormatted = olderRaw.map((msg: any) => formatMessage(msg));
+      setShiftMode(true);
+      setMessages((prev) => {
+        const unique = dedupMessages(olderFormatted, prev);
+        if (unique.length === 0) {
+          setHasMore(false);
+        }
+        return [...unique, ...prev];
+      });
+    } catch (err) {
+      console.error('Failed to load more messages:', err);
+    } finally {
+      loadingMoreRef.current = false;
+    }
+  }, [activeChannel, loadMoreLimit, setMessages]);
+
+  const loadNewer = useCallback(async () => {
+    if (!activeChannel || loadingNewerRef.current) return;
+
+    const currentMessages = messagesRef.current;
+    const newestMessage = currentMessages[currentMessages.length - 1];
+    if (!newestMessage?.id) return;
+
+    loadingNewerRef.current = true;
+    try {
+      const newerRaw = await activeChannel.queryMessagesGreaterThanId(newestMessage.id, loadMoreLimit);
+
+      if (newerRaw.length === 0) {
+        setHasNewer(false);
+        return;
+      }
+
+      const newerFormatted = newerRaw.map((msg: any) => formatMessage(msg));
+      setMessages((prev) => {
+        const unique = dedupMessages(newerFormatted, prev);
+        if (unique.length === 0) {
+          setHasNewer(false);
+        }
+        return [...prev, ...unique];
+      });
+    } catch (err) {
+      console.error('Failed to load newer messages:', err);
+    } finally {
+      loadingNewerRef.current = false;
+    }
+  }, [activeChannel, loadMoreLimit, setMessages]);
+
+  const handleScroll = useCallback(
+    (offset: number) => {
+      if (jumpingRef.current) return;
+      const handle = vlistRef.current;
+      if (!handle) return;
+      const { scrollSize, viewportSize } = handle;
+
+      const isBottom = Math.ceil(offset + viewportSize) >= scrollSize - 20;
+      isAtBottomRef.current = isBottom;
+
+      // Skip if content doesn't fill the viewport
+      if (scrollSize <= viewportSize) {
+        isAtBottomRef.current = true;
+        return;
+      }
+
+      if (offset <= LOAD_MORE_THRESHOLD && hasMoreRef.current) {
+        loadMore();
+      }
+
+      if (offset + viewportSize >= scrollSize - LOAD_MORE_THRESHOLD && hasNewerRef.current) {
+        loadNewer();
+      }
+    },
+    [loadMore, loadNewer],
+  );
+
+  return {
+    shiftMode,
+    hasMore,
+    setHasMore,
+    hasNewer,
+    setHasNewer,
+    hasMoreRef,
+    hasNewerRef,
+    loadingMoreRef,
+    loadingNewerRef,
+    loadMore,
+    loadNewer,
+    handleScroll,
+    isAtBottomRef,
+  };
+}

package/src/hooks/useMentions.ts

@@ -0,0 +1,287 @@
+import { useState, useCallback, useRef, useDeferredValue, useMemo } from 'react';
+import { moveCaretAfterNode } from '../utils';
+import type {
+  MentionMember,
+  MentionPayload,
+  UseMentionsOptions,
+  UseMentionsReturn,
+} from '../types';
+
+export type { MentionMember, MentionPayload, UseMentionsOptions, UseMentionsReturn } from '../types';
+
+export const MENTION_SPAN_CLASS = 'ermis-message-input__mention-span';
+
+/**
+ * Returns the raw HTML string for a mention span, useful for initializing contenteditable divs.
+ */
+export function getMentionHtml(userId: string, displayName: string): string {
+  const safeName = displayName.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  return `<span class="${MENTION_SPAN_CLASS}" data-mention-id="${userId}" contenteditable="false">@${safeName}</span>&nbsp;`;
+}
+
+/**
+ * Insert an atomic mention <span> at the current cursor position inside a
+ * contenteditable element, followed by a trailing space.
+ */
+function insertMentionAtCursor(
+  editableEl: HTMLElement,
+  userId: string,
+  displayName: string,
+) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+
+  const range = sel.getRangeAt(0);
+
+  const { startContainer, startOffset } = range;
+  if (startContainer.nodeType === Node.TEXT_NODE) {
+    const textBefore = startContainer.textContent?.slice(0, startOffset) ?? '';
+    const atIndex = textBefore.lastIndexOf('@');
+    if (atIndex !== -1) {
+      range.setStart(startContainer, atIndex);
+      range.deleteContents();
+    }
+  }
+
+  const span = document.createElement('span');
+  span.className = MENTION_SPAN_CLASS;
+  span.setAttribute('data-mention-id', userId);
+  span.contentEditable = 'false';
+  span.textContent = `@${displayName}`;
+
+  range.insertNode(span);
+
+  const space = document.createTextNode('\u00A0');
+  span.after(space);
+  moveCaretAfterNode(space);
+
+  editableEl.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+/**
+ * Parse the DOM of a contenteditable div to produce a mention payload.
+ */
+function buildPayloadFromDOM(editableEl: HTMLElement): MentionPayload {
+  let text = '';
+  let mentionedAll = false;
+  const mentionedUsers: string[] = [];
+
+  function walk(node: Node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent ?? '';
+      return;
+    }
+
+    if (node instanceof HTMLElement) {
+      const mentionId = node.getAttribute('data-mention-id');
+      if (mentionId && node.classList.contains(MENTION_SPAN_CLASS)) {
+        if (mentionId === '__all__') {
+          mentionedAll = true;
+          text += '@all';
+        } else {
+          if (!mentionedUsers.includes(mentionId)) {
+            mentionedUsers.push(mentionId);
+          }
+          text += `@${mentionId}`;
+        }
+        return;
+      }
+
+      if (node.tagName === 'BR') {
+        text += '\n';
+        return;
+      }
+
+      if (node.tagName === 'DIV' && text.length > 0 && !text.endsWith('\n')) {
+        text += '\n';
+      }
+    }
+
+    node.childNodes.forEach(walk);
+  }
+
+  walk(editableEl);
+  text = text.replace(/\u00A0/g, ' ').trim();
+
+  return { text, mentioned_all: mentionedAll, mentioned_users: mentionedUsers };
+}
+
+/**
+ * Scan the DOM for currently present mention spans and return their IDs.
+ */
+function getActiveMentionIds(editableEl: HTMLElement): Set<string> {
+  const ids = new Set<string>();
+  const spans = editableEl.querySelectorAll(`.${MENTION_SPAN_CLASS}`);
+  spans.forEach((span) => {
+    const id = span.getAttribute('data-mention-id');
+    if (id) ids.add(id);
+  });
+  return ids;
+}
+
+export function useMentions({
+  members,
+  currentUserId,
+  editableRef,
+}: UseMentionsOptions): UseMentionsReturn {
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [query, setQuery] = useState('');
+  const [highlightIndex, setHighlightIndex] = useState(0);
+  const [activeMentionIds, setActiveMentionIds] = useState<Set<string>>(new Set());
+
+  const deferredQuery = useDeferredValue(query);
+
+  // All item: special entry
+  const allItem: MentionMember = useMemo(
+    () => ({ id: '__all__', name: 'all' }),
+    [],
+  );
+
+  // Filter members based on deferred query, exclude self and already-mentioned
+  const filteredMembers = useMemo(() => {
+    const q = deferredQuery.toLowerCase();
+
+    // Start with @all if not already selected
+    const result: MentionMember[] = [];
+    if (!activeMentionIds.has('__all__')) {
+      if (!q || 'all'.includes(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);
+    }
+
+    return result;
+  }, [members, deferredQuery, activeMentionIds, currentUserId, allItem]);
+
+  // Detect @ trigger from cursor position
+  const detectTrigger = useCallback((): { triggered: boolean; query: string } => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) {
+      return { triggered: false, query: '' };
+    }
+
+    const { anchorNode, anchorOffset } = sel;
+    if (!anchorNode || anchorNode.nodeType !== Node.TEXT_NODE) {
+      return { triggered: false, query: '' };
+    }
+
+    const textBefore = anchorNode.textContent?.slice(0, anchorOffset) ?? '';
+
+    // Find the last @ that is preceded by a space or is at the start
+    const match = textBefore.match(/(^|[\s\u00A0])@(\S*)$/);
+    if (!match) {
+      return { triggered: false, query: '' };
+    }
+
+    return { triggered: true, query: match[2] };
+  }, []);
+
+  const handleInput = useCallback(() => {
+    const el = editableRef.current;
+    if (!el) return;
+
+    // Update active mention IDs by scanning DOM
+    setActiveMentionIds(getActiveMentionIds(el));
+
+    // Detect @ trigger
+    const result = detectTrigger();
+    if (result.triggered) {
+      setShowSuggestions(true);
+      setQuery(result.query);
+      setHighlightIndex(0);
+    } else {
+      setShowSuggestions(false);
+      setQuery('');
+    }
+  }, [editableRef, detectTrigger]);
+
+  const selectMention = useCallback(
+    (member: MentionMember) => {
+      const el = editableRef.current;
+      if (!el) return;
+
+      insertMentionAtCursor(el, member.id, member.name);
+
+      // Update tracking
+      setActiveMentionIds((prev) => new Set(prev).add(member.id));
+      setShowSuggestions(false);
+      setQuery('');
+
+      // Re-focus the editable
+      el.focus();
+    },
+    [editableRef],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent): boolean => {
+      if (!showSuggestions || filteredMembers.length === 0) return false;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setHighlightIndex((prev) =>
+            prev < filteredMembers.length - 1 ? prev + 1 : 0,
+          );
+          return true;
+
+        case 'ArrowUp':
+          e.preventDefault();
+          setHighlightIndex((prev) =>
+            prev > 0 ? prev - 1 : filteredMembers.length - 1,
+          );
+          return true;
+
+        case 'Enter':
+          e.preventDefault();
+          if (filteredMembers[highlightIndex]) {
+            selectMention(filteredMembers[highlightIndex]);
+          }
+          return true;
+
+        case 'Escape':
+          e.preventDefault();
+          setShowSuggestions(false);
+          return true;
+
+        default:
+          return false;
+      }
+    },
+    [showSuggestions, filteredMembers, highlightIndex, selectMention],
+  );
+
+  const buildPayload = useCallback((): MentionPayload => {
+    const el = editableRef.current;
+    if (!el) return { text: '', mentioned_all: false, mentioned_users: [] };
+    return buildPayloadFromDOM(el);
+  }, [editableRef]);
+
+  const reset = useCallback(() => {
+    setShowSuggestions(false);
+    setQuery('');
+    setHighlightIndex(0);
+    setActiveMentionIds(new Set());
+    const el = editableRef.current;
+    if (el) {
+      el.innerHTML = '';
+    }
+  }, [editableRef]);
+
+  return {
+    showSuggestions,
+    filteredMembers,
+    highlightIndex,
+    handleInput,
+    handleKeyDown,
+    selectMention,
+    buildPayload,
+    reset,
+  };
+}

package/src/hooks/useMessageActions.ts

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import { useChatClient } from './useChatClient';
+import { useChannelCapabilities } from './useChannelCapabilities';
+import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+
+export type MessageActionList = {
+  canEdit: boolean;
+  canDelete: boolean;
+  canDeleteForMe: boolean;
+  canReply: boolean;
+  canQuote: boolean;
+  canForward: boolean;
+  canPin: boolean;
+  canCopy: boolean;
+  isPinned: boolean;
+  hasCapEdit: boolean;
+  hasCapDelete: boolean;
+  hasCapDeleteForMe: boolean;
+  hasCapPin: boolean;
+  hasCapReply: boolean;
+  hasCapQuote: boolean;
+};
+
+export const useMessageActions = (message: FormatMessageResponse, isOwnMessage: boolean): MessageActionList => {
+  const { activeChannel, client } = useChatClient();
+  const { isTeamChannel: isTeam, isOwner, hasCapability } = useChannelCapabilities();
+
+  // Only depend on the specific message fields we actually read
+  const messageType = message.type;
+  const isPinnedFlag = message.pinned || !!message.pinned_at;
+
+  return useMemo(() => {
+    if (!activeChannel) {
+      return {
+        canEdit: false,
+        canDelete: false,
+        canDeleteForMe: false,
+        canReply: false,
+        canQuote: false,
+        canForward: false,
+        canPin: false,
+        canCopy: false,
+        isPinned: false,
+        hasCapEdit: false,
+        hasCapDelete: false,
+        hasCapDeleteForMe: false,
+        hasCapPin: false,
+        hasCapReply: false,
+        hasCapQuote: false,
+      };
+    }
+
+    const isSystem = messageType === 'system';
+    const isSignal = messageType === 'signal';
+    const isPinned = isPinnedFlag;
+
+    const canEdit = !isSystem && !isSignal && isOwnMessage;
+    
+    // Delete for everyone:
+    // + Team channel: only the owner can perform this action natively.
+    // + Messaging channel: only own messages can be deleted
+    const canDeleteForEveryoneTeam = isTeam && isOwner;
+    const canDeleteForEveryoneMessaging = !isTeam && isOwnMessage;
+    
+    const canDelete = !isSystem && (canDeleteForEveryoneTeam || canDeleteForEveryoneMessaging);
+    const canDeleteForMe = !isSystem;
+    const canReply = !isSystem && !isSignal;
+    const canQuote = !isSystem && !isSignal;
+    const canForward = !isSystem && !isSignal;
+    const canPin = !isSystem && !isSignal;
+    const canCopy = !isSystem && !isSignal && Boolean(message.text?.trim());
+
+    const hasCapEdit = hasCapability('update-own-message');
+    const hasCapDelete = !isTeam || isOwner || (isOwnMessage && hasCapability('delete-own-message'));
+    // Apply the delete-own-message capability to the "delete for me" action for own messages
+    const hasCapDeleteForMe = !isTeam || isOwner || !isOwnMessage || hasCapability('delete-own-message');
+    
+    const hasCapReply = hasCapability('send-reply');
+    const hasCapQuote = hasCapability('quote-message');
+    const hasCapPin = hasCapability('pin-message');
+
+    return { 
+      canEdit, canDelete, canDeleteForMe, canReply, canQuote, canForward, canPin, canCopy, isPinned,
+      hasCapEdit, hasCapDelete, hasCapDeleteForMe, hasCapPin, hasCapReply, hasCapQuote 
+    };
+  }, [activeChannel, isTeam, isOwner, hasCapability, messageType, message.text, isPinnedFlag, isOwnMessage]); // Use capabilities from hook
+};