@ermis-network/ermis-chat-react 1.0.0

package/src/components/FilesPreview.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { isHeicFile } from '@ermis-network/ermis-chat-sdk';
+import type { FilesPreviewProps } from '../types';
+
+export type { FilePreviewItem, FilesPreviewProps } from '../types';
+/**
+ * Format file size into human-readable string.
+ */
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Get a display icon for non-previewable file types.
+ */
+function getFileIcon(mimeType: string): string {
+  if (mimeType.startsWith('audio/')) return '🎵';
+  if (mimeType.startsWith('video/')) return '🎬';
+  if (mimeType.includes('pdf')) return '📄';
+  if (mimeType.includes('zip') || mimeType.includes('rar') || mimeType.includes('tar')) return '📦';
+  return '📎';
+}
+
+/**
+ * FilesPreview — renders selected files with thumbnails and remove buttons.
+ * Shown above the text input area in MessageInput.
+ */
+export const FilesPreview: React.FC<FilesPreviewProps> = React.memo(({ files, onRemove }) => {
+  if (files.length === 0) return null;
+
+  return (
+    <div className="ermis-files-preview">
+      {files.map((item) => {
+        const fileType = item.file?.type || item.originalAttachment?.mime_type || '';
+        const fileName = item.file?.name || item.originalAttachment?.title || 'Unknown file';
+        const fileSize = item.file?.size || item.originalAttachment?.file_size || 0;
+
+        const isHeic = item.file ? isHeicFile(item.file) : (fileType === 'image/heic' || fileType === 'image/heif');
+        const isImage = fileType.startsWith('image/') && !isHeic;
+        const isVideo = fileType.startsWith('video/');
+        const isUploading = item.status === 'uploading';
+        const hasError = item.status === 'error';
+
+        const previewUrl = item.previewUrl || item.originalAttachment?.image_url || item.originalAttachment?.asset_url;
+
+        return (
+          <div
+            key={item.id}
+            className={`ermis-files-preview__item${hasError ? ' ermis-files-preview__item--error' : ''}`}
+          >
+            {/* Remove button */}
+            <button
+              className="ermis-files-preview__remove"
+              onClick={() => onRemove(item.id)}
+              aria-label="Remove file"
+              type="button"
+            >
+              ✕
+            </button>
+
+            {/* Preview content */}
+            {isImage && previewUrl ? (
+              <img
+                className="ermis-files-preview__thumb"
+                src={previewUrl}
+                alt={fileName}
+              />
+            ) : isVideo && previewUrl ? (
+              <video
+                className="ermis-files-preview__thumb"
+                src={previewUrl}
+                muted
+              />
+            ) : (
+              <div className="ermis-files-preview__file-icon">
+                <span>{getFileIcon(fileType)}</span>
+              </div>
+            )}
+
+            {/* File info */}
+            <div className="ermis-files-preview__info">
+              <span className="ermis-files-preview__name">{fileName}</span>
+              <span className="ermis-files-preview__size">{formatFileSize(Number(fileSize))}</span>
+            </div>
+
+            {/* Upload status overlay */}
+            {isUploading && (
+              <div className="ermis-files-preview__uploading">
+                <span className="ermis-files-preview__spinner" />
+              </div>
+            )}
+
+            {/* Error overlay */}
+            {hasError && (
+              <div className="ermis-files-preview__error-badge" title={item.error}>
+                ⚠
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+FilesPreview.displayName = 'FilesPreview';

package/src/components/ForwardMessageModal.tsx

@@ -0,0 +1,234 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { createForwardMessagePayload } from '@ermis-network/ermis-chat-sdk';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from '../hooks/useChatClient';
+import { Avatar } from './Avatar';
+import { Modal } from './Modal';
+import type { ForwardMessageModalProps, ForwardChannelItemProps, AvatarProps } from '../types';
+
+export type { ForwardMessageModalProps, ForwardChannelItemProps } from '../types';
+
+/* ----------------------------------------------------------
+   Default channel item row with checkbox
+   ---------------------------------------------------------- */
+const DefaultForwardChannelItem: React.FC<ForwardChannelItemProps> = React.memo(({
+  channel,
+  selected,
+  onToggle,
+  AvatarComponent,
+}) => {
+  const name = (channel.data?.name || channel.cid) as string;
+  const rawImage = channel.data?.image as string | undefined;
+  // Parse emoji:// format → extract just the emoji for avatar fallback
+  const isEmoji = rawImage?.startsWith('emoji://');
+  const image = isEmoji ? undefined : rawImage;
+  const emojiIcon = isEmoji ? rawImage!.replace('emoji://', '') : undefined;
+
+  return (
+    <div
+      className={`ermis-forward-modal__channel-item ${selected ? 'ermis-forward-modal__channel-item--selected' : ''}`}
+      onClick={() => onToggle(channel)}
+    >
+      {emojiIcon ? (
+        <span className="ermis-forward-modal__channel-emoji" style={{ fontSize: 24, width: 36, textAlign: 'center' }}>{emojiIcon}</span>
+      ) : (
+        <AvatarComponent image={image} name={name} size={36} />
+      )}
+      <span className="ermis-forward-modal__channel-name">{name}</span>
+      <div className={`ermis-forward-modal__checkbox ${selected ? 'ermis-forward-modal__checkbox--checked' : ''}`}>
+        {selected && (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        )}
+      </div>
+    </div>
+  );
+});
+DefaultForwardChannelItem.displayName = 'DefaultForwardChannelItem';
+
+/* ----------------------------------------------------------
+   ForwardMessageModal
+   ---------------------------------------------------------- */
+export const ForwardMessageModal: React.FC<ForwardMessageModalProps> = ({
+  message,
+  onDismiss,
+  ChannelItemComponent = DefaultForwardChannelItem,
+  SearchInputComponent,
+}) => {
+  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);
+  const backdropRef = useRef<HTMLDivElement>(null);
+
+  /* ---------- Get channels from client state (exclude topics) ---------- */
+  const channels = useMemo(() => {
+    return (Object.values(client.activeChannels) as Channel[]).filter(
+      (ch) => ch.type !== 'topic',
+    );
+  }, [client.activeChannels]);
+
+  /* ---------- Filter by search ---------- */
+  const filteredChannels = useMemo(() => {
+    if (!search.trim()) return channels;
+    const q = search.toLowerCase();
+    return channels.filter((ch) => {
+      const name = ((ch.data?.name || ch.cid) as string).toLowerCase();
+      return name.includes(q);
+    });
+  }, [channels, search]);
+
+  /* ---------- 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[] = [];
+
+    for (const cid of selectedChannels) {
+      const targetChannel = channels.find((c) => c.cid === cid);
+      if (!targetChannel) continue;
+      try {
+        const forwardPayload = createForwardMessagePayload(
+          message,
+          targetChannel.cid as string,
+          activeChannel.cid as string,
+        );
+
+        await activeChannel.forwardMessage(forwardPayload, {
+          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(), 1200);
+    }
+  }, [activeChannel, selectedChannels, channels, message, sending, onDismiss]);
+
+  /* ---------- Keyboard / backdrop close ---------- */
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onDismiss();
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [onDismiss]);
+
+  const handleBackdropClick = useCallback((e: React.MouseEvent) => {
+    if (e.target === backdropRef.current) onDismiss();
+  }, [onDismiss]);
+
+  /* ---------- Message preview ---------- */
+  const previewText = message.text
+    ? (message.text.length > 120 ? message.text.slice(0, 120) + '…' : message.text)
+    : '';
+  const attachmentCount = message.attachments?.length ?? 0;
+
+  const footer = (
+    <>
+      <button className="ermis-forward-modal__btn ermis-forward-modal__btn--cancel" onClick={onDismiss}>
+        Cancel
+      </button>
+      <button
+        className="ermis-forward-modal__btn ermis-forward-modal__btn--send"
+        onClick={handleSend}
+        disabled={selectedChannels.size === 0 || sending || results !== null}
+      >
+        {sending ? 'Sending…' : `Forward${selectedChannels.size > 0 ? ` (${selectedChannels.size})` : ''}`}
+      </button>
+    </>
+  );
+
+  return (
+    <Modal isOpen onClose={onDismiss} title="Forward Message" footer={footer}>
+      {/* Message preview */}
+      <div className="ermis-forward-modal__preview">
+        <div className="ermis-forward-modal__preview-sender">
+          {message.user?.name || message.user_id || 'Unknown'}
+        </div>
+        {previewText && (
+          <div className="ermis-forward-modal__preview-text">{previewText}</div>
+        )}
+        {attachmentCount > 0 && (
+          <div className="ermis-forward-modal__preview-attachments">
+            📎 {attachmentCount} attachment{attachmentCount > 1 ? 's' : ''}
+          </div>
+        )}
+      </div>
+
+      {/* Search */}
+      <div className="ermis-forward-modal__search-wrapper">
+        {SearchInputComponent ? (
+          <SearchInputComponent value={search} onChange={setSearch} />
+        ) : (
+          <input
+            className="ermis-forward-modal__search"
+            type="text"
+            placeholder="Search channels…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            autoFocus
+          />
+        )}
+      </div>
+
+      {/* Channel list */}
+      <div className="ermis-forward-modal__channel-list">
+        {filteredChannels.length === 0 ? (
+          <div className="ermis-forward-modal__empty">No channels found</div>
+        ) : (
+          filteredChannels.map((ch) => (
+            <ChannelItemComponent
+              key={ch.cid}
+              channel={ch}
+              selected={selectedChannels.has(ch.cid)}
+              onToggle={toggleChannel}
+              AvatarComponent={Avatar}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Results feedback */}
+      {results && (
+        <div className="ermis-forward-modal__results">
+          {results.success.length > 0 && (
+            <div className="ermis-forward-modal__results-success">
+              ✓ Sent to {results.success.join(', ')}
+            </div>
+          )}
+          {results.failed.length > 0 && (
+            <div className="ermis-forward-modal__results-failed">
+              ✗ Failed: {results.failed.join(', ')}
+            </div>
+          )}
+        </div>
+      )}
+    </Modal>
+  );
+};

package/src/components/MentionSuggestions.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useRef } from 'react';
+import { VList, VListHandle } from 'virtua';
+import { Avatar } from './Avatar';
+import type { MentionSuggestionsProps } from '../types';
+
+export type { MentionSuggestionsProps } from '../types';
+
+// Estimated item height
+const ITEM_HEIGHT = 42; 
+
+export const MentionSuggestions: React.FC<MentionSuggestionsProps> = React.memo(({
+  members,
+  highlightIndex,
+  onSelect,
+}) => {
+  const listRef = useRef<VListHandle>(null);
+
+  // Auto-scroll highlighted item into view
+  useEffect(() => {
+    // VList uses scrollToIndex
+    listRef.current?.scrollToIndex(highlightIndex);
+  }, [highlightIndex]);
+
+  if (members.length === 0) return null;
+
+  // Calculate dynamic height based on item count, cap at 200px
+  const listHeight = Math.min(members.length * ITEM_HEIGHT, 200);
+
+  return (
+    <div className="ermis-mention-suggestions" style={{ overflow: 'hidden' }}>
+      <VList ref={listRef} style={{ height: listHeight }}>
+        {members.map((member, index) => (
+          <div
+            key={member.id}
+            className={`ermis-mention-suggestions__item${
+              index === highlightIndex ? ' ermis-mention-suggestions__item--highlighted' : ''
+            }`}
+            onMouseDown={(e) => {
+              // Use mousedown (not click) to fire before blur
+              e.preventDefault();
+              onSelect(member);
+            }}
+          >
+            {member.id === '__all__' ? (
+              <div className="ermis-mention-suggestions__all-icon">@</div>
+            ) : (
+              <Avatar image={member.avatar} name={member.name} size={24} />
+            )}
+            <span className="ermis-mention-suggestions__name">
+              {member.id === '__all__' ? 'all' : member.name}
+            </span>
+          </div>
+        ))}
+      </VList>
+    </div>
+  );
+});
+
+MentionSuggestions.displayName = 'MentionSuggestions';

package/src/components/MessageActionsBox.tsx

@@ -0,0 +1,186 @@
+import React, { useCallback } from 'react';
+import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+import { useMessageActions } from '../hooks/useMessageActions';
+import { useChatClient } from '../hooks/useChatClient';
+import type { MessageActionsBoxProps } from '../types';
+import { Dropdown, closeAllDropdowns } from './Dropdown';
+
+// Aliased for backward compatibility
+export const closeAllActionBoxes = closeAllDropdowns;
+
+export const MessageActionsBox: React.FC<MessageActionsBoxProps> = ({
+  message,
+  isOwnMessage,
+  onReply: onReplyProp,
+  onForward,
+  onPinToggle,
+  onEdit,
+  onCopy,
+  onDelete,
+  onDeleteForMe,
+  pinLabel = 'Pin',
+  unpinLabel = 'Unpin',
+  editLabel = 'Edit',
+  copyLabel = 'Copy',
+  deleteForMeLabel = 'Delete for me',
+  deleteForEveryoneLabel = 'Delete for everyone',
+}) => {
+  const { setQuotedMessage, setEditingMessage, setForwardingMessage, activeChannel } = useChatClient();
+  const [anchorRect, setAnchorRect] = React.useState<DOMRect | null>(null);
+  const actions = useMessageActions(message, isOwnMessage);
+
+  // Default handlers
+  const onReply = onReplyProp ?? ((msg: FormatMessageResponse) => setQuotedMessage(msg));
+  const onForwardHandler = onForward ?? ((msg: FormatMessageResponse) => setForwardingMessage(msg));
+  const onPinToggleHandler = onPinToggle ?? (async (msg: FormatMessageResponse, isPinned: boolean) => {
+    if (!activeChannel) return;
+    try {
+      if (isPinned) {
+        await activeChannel.unpinMessage(msg.id!);
+      } else {
+        await activeChannel.pinMessage(msg.id!);
+      }
+    } catch (err) {
+      console.error('Failed to toggle pin', err);
+    }
+  });
+  const onEditHandler = onEdit ?? ((msg: FormatMessageResponse) => setEditingMessage(msg));
+
+  const onDeleteForEveryoneHandler = onDelete ?? (async (msg: FormatMessageResponse) => {
+    if (!activeChannel) return;
+    try {
+      await activeChannel.deleteMessage(msg.id!);
+    } catch (err) {
+      console.error('Failed to delete message', err);
+    }
+  });
+
+  const onDeleteForMeHandler = onDeleteForMe ?? (async (msg: FormatMessageResponse) => {
+    if (!activeChannel) return;
+    try {
+      await activeChannel.deleteMessageForMe(msg.id!);
+    } catch (err) {
+      console.error('Failed to delete message for me', err);
+    }
+  });
+
+  const isOpen = anchorRect !== null;
+  const onClose = useCallback(() => setAnchorRect(null), []);
+
+  const handleMoreClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    setAnchorRect(rect);
+  };
+
+  const handleCopy = async () => {
+    if (onCopy) {
+      onCopy(message);
+    } else if (message.text) {
+      try {
+        await navigator.clipboard.writeText(message.text);
+      } catch (err) {
+        console.error('Failed to copy text:', err);
+      }
+    }
+    onClose();
+  };
+
+  return (
+    <>
+      <div className={`ermis-message-list__actions ${isOpen ? 'ermis-message-list__actions--active' : ''}`}>
+        {actions.canReply && (
+          <button 
+            className="ermis-message-list__actions-trigger" 
+            onClick={() => onReply?.(message)} 
+            title="Reply"
+            disabled={!actions.hasCapReply}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M11.192 15.757c0-.88-.23-1.618-.69-2.217-.326-.412-.768-.683-1.327-.812-.55-.128-1.07-.137-1.54-.028-.16-.95.1-1.956.76-3.022.66-1.065 1.515-1.867 2.558-2.403L9.373 5c-1.368.647-2.525 1.612-3.468 2.895-.943 1.28-1.452 2.673-1.526 4.174-.015.228-.022.463-.022.705 0 1.594.417 2.9 1.25 3.918.835 1.019 1.955 1.53 3.36 1.53 1.048 0 1.903-.311 2.565-.933.66-.622.99-1.465.99-2.53zm10.455 0c0-.88-.23-1.618-.69-2.217-.326-.412-.768-.683-1.327-.812-.55-.128-1.07-.137-1.54-.028-.16-.95.1-1.956.76-3.022.66-1.065 1.515-1.867 2.558-2.403L19.828 5c-1.368.647-2.525 1.612-3.468 2.895-.943 1.28-1.452 2.673-1.526 4.174-.015.228-.022.463-.022.705 0 1.594.417 2.9 1.25 3.918.835 1.019 1.954 1.53 3.36 1.53 1.048 0 1.903-.311 2.565-.933.66-.622.99-1.465.99-2.53z" />
+            </svg>
+          </button>
+        )}
+        {actions.canForward && (
+          <button 
+            className="ermis-message-list__actions-trigger" 
+            onClick={() => onForwardHandler(message)} 
+            title="Forward"
+            disabled={!actions.hasCapQuote}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="15 14 20 9 15 4" />
+              <path d="M4 20v-7a4 4 0 0 1 4-4h12" />
+            </svg>
+          </button>
+        )}
+        <button
+          className={`ermis-message-list__actions-trigger ${isOpen ? 'ermis-message-list__actions-trigger--active' : ''}`}
+          onClick={handleMoreClick}
+          title="More actions"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="1" />
+            <circle cx="12" cy="5" r="1" />
+            <circle cx="12" cy="19" r="1" />
+          </svg>
+        </button>
+      </div>
+
+      <Dropdown 
+        isOpen={isOpen} 
+        anchorRect={anchorRect} 
+        onClose={onClose} 
+        align={isOwnMessage ? 'right' : 'left'}
+      >
+        <div className="ermis-dropdown__menu">
+          {actions.canPin && (
+            <button 
+              className="ermis-dropdown__item" 
+              onClick={() => { onPinToggleHandler(message, actions.isPinned); onClose(); }}
+              disabled={!actions.hasCapPin}
+            >
+              {actions.isPinned ? unpinLabel : pinLabel}
+            </button>
+          )}
+          {actions.canEdit && (
+            <button 
+              className="ermis-dropdown__item" 
+              onClick={() => { onEditHandler(message); onClose(); }}
+              disabled={!actions.hasCapEdit}
+            >
+              {editLabel}
+            </button>
+          )}
+          {actions.canCopy && (
+            <button className="ermis-dropdown__item" onClick={handleCopy}>
+              {copyLabel}
+            </button>
+          )}
+
+          {(actions.canDelete || actions.canDeleteForMe) && <div className="ermis-dropdown__divider" />}
+
+          {actions.canDeleteForMe && (
+            <button 
+              className="ermis-dropdown__item ermis-dropdown__item--danger" 
+              onClick={() => { onDeleteForMeHandler(message); onClose(); }}
+              disabled={!actions.hasCapDeleteForMe}
+            >
+              {deleteForMeLabel}
+            </button>
+          )}
+          {actions.canDelete && (
+            <button 
+              className="ermis-dropdown__item ermis-dropdown__item--danger" 
+              onClick={() => { onDeleteForEveryoneHandler(message); onClose(); }}
+              disabled={!actions.hasCapDelete}
+            >
+              {deleteForEveryoneLabel}
+            </button>
+          )}
+        </div>
+      </Dropdown>
+    </>
+  );
+};