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

package/src/components/MentionSuggestions.tsx

@@ -1,57 +1,69 @@
 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);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemsRef = useRef<Map<number, HTMLDivElement>>(new Map());
 
   // Auto-scroll highlighted item into view
   useEffect(() => {
-    // VList uses scrollToIndex
-    listRef.current?.scrollToIndex(highlightIndex);
+    const el = itemsRef.current.get(highlightIndex);
+    if (el && containerRef.current) {
+      const container = containerRef.current;
+      const elementTop = el.offsetTop;
+      const elementBottom = elementTop + el.offsetHeight;
+      const containerTop = container.scrollTop;
+      const containerBottom = containerTop + container.clientHeight;
+
+      if (elementTop < containerTop) {
+        container.scrollTop = elementTop;
+      } else if (elementBottom > containerBottom) {
+        container.scrollTop = elementBottom - container.clientHeight;
+      }
+    }
   }, [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 
+      className="ermis-mention-suggestions" 
+      ref={containerRef}
+      style={{ overflowY: 'auto', maxHeight: '200px' }}
+    >
+      {members.map((member, index) => (
+        <div
+          key={member.id}
+          ref={(el) => {
+            if (el) itemsRef.current.set(index, el);
+            else itemsRef.current.delete(index);
+          }}
+          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>
+      ))}
     </div>
   );
 });

package/src/components/MessageActionsBox.tsx

@@ -3,7 +3,9 @@ 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';
+import { Dropdown as DefaultDropdown, closeAllDropdowns } from './Dropdown';
+import { useChatComponents } from '../context/ChatComponentsContext';
+import { MessageQuickReactions } from './MessageQuickReactions';
 
 // Aliased for backward compatibility
 export const closeAllActionBoxes = closeAllDropdowns;
@@ -26,6 +28,8 @@ export const MessageActionsBox: React.FC<MessageActionsBoxProps> = ({
   deleteForEveryoneLabel = 'Delete for everyone',
 }) => {
   const { setQuotedMessage, setEditingMessage, setForwardingMessage, activeChannel } = useChatClient();
+  const { DropdownComponent } = useChatComponents();
+  const Dropdown = DropdownComponent || DefaultDropdown;
   const [anchorRect, setAnchorRect] = React.useState<DOMRect | null>(null);
   const actions = useMessageActions(message, isOwnMessage);
 
@@ -102,6 +106,7 @@ export const MessageActionsBox: React.FC<MessageActionsBoxProps> = ({
             </svg>
           </button>
         )}
+        <MessageQuickReactions message={message} isOwnMessage={isOwnMessage} disabled={!actions.hasCapReact} />
         {actions.canForward && (
           <button 
             className="ermis-message-list__actions-trigger" 

package/src/components/MessageInput.tsx

@@ -6,13 +6,17 @@ import { usePendingState } from '../hooks/usePendingState';
 import { useMentions } from '../hooks/useMentions';
 import { useFileUpload } from '../hooks/useFileUpload';
 import { useEmojiPicker } from '../hooks/useEmojiPicker';
+import { useStickerPicker } from '../hooks/useStickerPicker';
 import { useMessageSend } from '../hooks/useMessageSend';
-import { DefaultSendButton, DefaultAttachButton, DefaultEmojiButton } from './MessageInputDefaults';
+import { useDragAndDrop } from '../hooks/useDragAndDrop';
+import { DefaultSendButton, DefaultAttachButton, DefaultEmojiButton, DefaultStickerButton, DefaultStickerPicker, DefaultDragAndDropOverlay, DefaultVoiceRecordButton } from './MessageInputDefaults';
 import { MentionSuggestions } from './MentionSuggestions';
 import { FilesPreview } from './FilesPreview';
 import { ReplyPreview } from './ReplyPreview';
 import { EditPreview } from './EditPreview';
-import { buildUserMap, replaceMentionsForPreview, moveCaretToEnd } from '../utils';
+import { PreviewOverlay } from './PreviewOverlay';
+import { usePreviewState } from '../hooks/usePreviewState';
+import { buildUserMap, replaceMentionsForPreview, moveCaretToEnd, countWords } from '../utils';
 import { getMentionHtml } from '../hooks/useMentions';
 import { useChannelCapabilities } from '../hooks/useChannelCapabilities';
 import { CHANNEL_ROLES } from '../channelRoleUtils';
@@ -35,6 +39,11 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   onBeforeSend,
   EmojiPickerComponent,
   EmojiButtonComponent = DefaultEmojiButton,
+  StickerPickerComponent = DefaultStickerPicker,
+  StickerButtonComponent = DefaultStickerButton,
+  VoiceRecordButtonComponent = DefaultVoiceRecordButton,
+  disableStickers = false,
+  stickerIframeUrl = 'https://sticker.ermis.network',
   ReplyPreviewComponent = ReplyPreview,
   EditPreviewComponent = EditPreview,
   bannedLabel = 'You have been banned from this channel',
@@ -46,13 +55,23 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
     <>Slow mode is active. You can send another message in <strong>{cooldown}s</strong>.</>
   ),
   closedTopicLabel = 'This topic is closed.',
+  PreviewOverlayComponent = PreviewOverlay,
+  previewOverlayTitle = 'You are viewing a public channel.',
+  joinChannelLabel = 'Join Channel',
+  replyingToLabel,
+  editingMessageLabel,
+  dragAndDropLabel = 'Drop files here to upload',
+  DragAndDropOverlayComponent = DefaultDragAndDropOverlay,
+  maxCharsLabel = 'Tin nhắn không được vượt quá 5000 ký tự.',
 }) => {
-  const { client, activeChannel, syncMessages, quotedMessage, setQuotedMessage, editingMessage, setEditingMessage } = useChatClient();
+  const { client, activeChannel, syncMessages, quotedMessage, setQuotedMessage, editingMessage, setEditingMessage, setDraft, getDraft } = useChatClient();
   const { isBanned } = useBannedState(activeChannel, client.userID);
   const { isBlocked } = useBlockedState(activeChannel, client.userID);
   const { isPending } = usePendingState(activeChannel, client.userID);
+  const { isPreviewMode } = usePreviewState(activeChannel, client.userID);
   const editableRef = React.useRef<HTMLDivElement>(null);
   const [hasContent, setHasContent] = useState(false);
+  const prevChannelCidRef = useRef<string | null>(null);
 
   const { role, isGroupChannel: isTeamChannel, hasCapability } = useChannelCapabilities();
   const isTopic = isTopicChannel(activeChannel);
@@ -160,6 +179,12 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
       }
     }
 
+    // Max Characters validation (5000 chars)
+    if (text && text.length > 5000) {
+      setKeywordError(maxCharsLabel);
+      return false;
+    }
+
     // Custom Keyword validation
     const words = (activeChannel?.data?.filter_words as string[]) || [];
     if (words.length > 0 && text) {
@@ -183,8 +208,12 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
       lastMsgSentAtRef.current = Date.now();
       setCooldownEnd(Date.now() + memberMessageCooldown);
     }
+    // Clear draft after successful send
+    if (activeChannel?.cid) {
+      setDraft(activeChannel.cid, { html: '', files: [] });
+    }
     onSend?.(text);
-  }, [isSlowModeApplied, memberMessageCooldown, onSend]);
+  }, [isSlowModeApplied, memberMessageCooldown, onSend, activeChannel, setDraft]);
 
   // Auto-focus when channel changes or when reply/edit is selected
   useEffect(() => {
@@ -200,6 +229,14 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
     handleFilesSelected, handleRemoveFile, handleAttachClick, cleanupFiles,
   } = useFileUpload({ activeChannel, editableRef, setHasContent });
 
+  const filesRef = useRef(files);
+  filesRef.current = files;
+
+  const { isDragging } = useDragAndDrop(
+    handleFilesSelected,
+    disableAttachments || !canSendMessage || isSlowModeBlocked || !!editingMessage || !!quotedMessage
+  );
+
   // Pre-fill text and legacy attachments when editingMessage is set
   useEffect(() => {
     if (editingMessage && editableRef.current) {
@@ -244,6 +281,12 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
     toggleEmojiPicker,
   } = useEmojiPicker({ editableRef, setHasContent });
 
+  const {
+    stickerPickerOpen,
+    toggleStickerPicker,
+    closeStickerPicker,
+  } = useStickerPicker({ activeChannel, stickerIframeUrl });
+
   // Build member list from channel state (only for team channels and topics)
   const members = useMemo<MentionMember[]>(() => {
     if (!(isTeamChannel || isTopic)) return [];
@@ -304,21 +347,44 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   });
 
   useEffect(() => {
+    // Save draft from PREVIOUS channel before switching
+    if (prevChannelCidRef.current && editableRef.current) {
+      const currentHtml = editableRef.current.innerHTML;
+      setDraft(prevChannelCidRef.current, { html: currentHtml, files: filesRef.current });
+    }
+
     reset();
     handleEmojiClose();
-    setFiles((prev) => {
-      prev.forEach((f) => {
-        if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);
-      });
-      return [];
-    });
-    setHasContent(false);
+    // Do not revoke Object URLs here since we save files in drafts and need previews when returning
+    setFiles([]);
+
+    // Restore draft for NEW channel
+    const newCid = activeChannel?.cid || null;
+    prevChannelCidRef.current = newCid;
+
+    if (newCid && editableRef.current) {
+      const draft = getDraft(newCid);
+      if (draft) {
+        editableRef.current.innerHTML = draft.html;
+        setFiles(draft.files || []);
+        setHasContent(!!editableRef.current.textContent?.trim() || !!(draft.files && draft.files.length));
+        moveCaretToEnd(editableRef.current);
+      } else {
+        editableRef.current.innerHTML = '';
+        setFiles([]);
+        setHasContent(false);
+      }
+    } else {
+      if (editableRef.current) editableRef.current.innerHTML = '';
+      setFiles([]);
+      setHasContent(false);
+    }
 
     // Stop typing indicator on channel switch / unmount
     return () => {
       activeChannel?.stopTyping();
     };
-  }, [activeChannel, reset, handleEmojiClose, setFiles]);
+  }, [activeChannel, reset, handleEmojiClose, setFiles, setDraft, getDraft]);
 
   /* ---------- Input event handlers ---------- */
   const handleInput = useCallback(() => {
@@ -354,7 +420,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
       }
       if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
-        if (!isSlowModeBlocked) {
+        if (!isSlowModeBlocked && !keywordError) {
           handleSend();
         }
       }
@@ -364,9 +430,17 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
 
   const handlePaste = useCallback((e: React.ClipboardEvent) => {
     e.preventDefault();
+    if (e.clipboardData.files && e.clipboardData.files.length > 0) {
+      if (!disableAttachments && canSendMessage && !isSlowModeBlocked && !editingMessage) {
+        handleFilesSelected(e.clipboardData.files);
+      }
+      return;
+    }
     const plainText = e.clipboardData.getData('text/plain');
-    document.execCommand('insertText', false, plainText);
-  }, []);
+    if (plainText) {
+      document.execCommand('insertText', false, plainText);
+    }
+  }, [disableAttachments, canSendMessage, isSlowModeBlocked, editingMessage, handleFilesSelected]);
 
   if (!activeChannel) return null;
 
@@ -418,6 +492,50 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
     );
   }
 
+  // Show Preview Overlay for public channels when the user has not joined
+  if (isPreviewMode) {
+    return (
+      <PreviewOverlayComponent
+        title={previewOverlayTitle}
+        buttonLabel={joinChannelLabel}
+        onJoin={async () => {
+          if (!activeChannel) return;
+          try {
+            await activeChannel.acceptInvite('join');
+            // Optimistically update local membership
+            if (activeChannel.state && client.userID) {
+              const updatedMembership = {
+                ...activeChannel.state.membership,
+                channel_role: 'member',
+                user_id: client.userID,
+              } as Record<string, unknown>;
+              activeChannel.state.membership = updatedMembership;
+              if (activeChannel.state.members?.[client.userID]) {
+                activeChannel.state.members[client.userID] = {
+                  ...activeChannel.state.members[client.userID],
+                  channel_role: 'member',
+                };
+              }
+              // Dispatch synthetic event so channel list and other hooks update
+              client.dispatchEvent({
+                type: 'member.joined',
+                cid: activeChannel.cid,
+                channel_type: activeChannel.type,
+                channel_id: activeChannel.id,
+                channel: activeChannel.data,
+                member: updatedMembership,
+                user: client.user,
+              } as any);
+            }
+          } catch (e) {
+            console.error('Failed to join public channel', e);
+          }
+        }}
+        className={className}
+      />
+    );
+  }
+
   const isStillUploading = files.some((f) => f.status === 'uploading');
 
   return (
@@ -427,6 +545,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
         <ReplyPreviewComponent
           message={quotedMessage}
           onDismiss={() => setQuotedMessage(null)}
+          replyingToLabel={replyingToLabel}
         />
       )}
 
@@ -435,6 +554,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
         <EditPreviewComponent
           message={editingMessage}
           onDismiss={cancelEdit}
+          editingMessageLabel={editingMessageLabel}
         />
       )}
 
@@ -512,20 +632,48 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
             suppressContentEditableWarning
           />
 
+          {/* Voice record button */}
+          {VoiceRecordButtonComponent && (
+            <VoiceRecordButtonComponent
+              disabled={sending || !!editingMessage || isSlowModeBlocked || !canSendMessage}
+              onRecordComplete={(f) => {
+                const dt = new DataTransfer();
+                dt.items.add(f);
+                handleFilesSelected(dt.files);
+              }}
+            />
+          )}
+
           {/* Emoji button — shown only when EmojiPickerComponent is provided */}
           {EmojiPickerComponent && (
             <EmojiButtonComponent active={emojiPickerOpen} onClick={isSlowModeBlocked ? () => { } : toggleEmojiPicker} />
           )}
+
+          {/* Sticker button — shown unless disabled */}
+          {!disableStickers && StickerButtonComponent && (
+            <StickerButtonComponent active={stickerPickerOpen} onClick={isSlowModeBlocked || !!editingMessage || !!quotedMessage ? () => { } : toggleStickerPicker} />
+          )}
         </div>
-        <SendButton disabled={!hasContent || sending || isStillUploading || isSlowModeBlocked} onClick={handleSend} />
+
+        <SendButton disabled={!hasContent || sending || !!editingMessage || isSlowModeBlocked || !canSendMessage || isStillUploading || !!keywordError} onClick={handleSend} />
       </div>
 
-      {/* Emoji picker — positioned above input */}
+      {/* Emoji Picker Dropdown */}
       {EmojiPickerComponent && emojiPickerOpen && (
         <div className="ermis-message-input__emoji-picker">
           <EmojiPickerComponent onSelect={handleEmojiSelect} onClose={handleEmojiClose} />
         </div>
       )}
+
+      {/* Sticker Picker Dropdown */}
+      {!disableStickers && StickerPickerComponent && stickerPickerOpen && (
+        <StickerPickerComponent stickerIframeUrl={stickerIframeUrl} onClose={closeStickerPicker} />
+      )}
+
+      {/* Drag & Drop Overlay */}
+      {isDragging && (
+        <DragAndDropOverlayComponent dragAndDropLabel={dragAndDropLabel} />
+      )}
     </div>
   );
 });

package/src/components/MessageInputDefaults.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import { MultiRecorder, PCM_WORKLET_URL } from 'react-ts-audio-recorder';
+import type { VoiceRecordButtonProps } from '../types';
 
 /* ----------------------------------------------------------
    Default sub-components for MessageInput
@@ -48,3 +50,127 @@ export const DefaultEmojiButton: React.FC<{ active: boolean; onClick: () => void
   </button>
 ));
 DefaultEmojiButton.displayName = 'DefaultEmojiButton';
+
+export const DefaultStickerButton: React.FC<{ active: boolean; onClick: () => void }> = React.memo(({
+  active,
+  onClick,
+}) => (
+  <button
+    className={`ermis-message-input__sticker-btn${active ? ' ermis-message-input__sticker-btn--active' : ''}`}
+    onClick={onClick}
+    type="button"
+    aria-label="Sticker"
+  >
+    🐱
+  </button>
+));
+DefaultStickerButton.displayName = 'DefaultStickerButton';
+
+export const DefaultStickerPicker: React.FC<{ stickerIframeUrl: string; onClose: () => void }> = React.memo(({
+  stickerIframeUrl,
+}) => (
+  <div className="ermis-message-input__sticker-picker-container">
+    <iframe
+      src={stickerIframeUrl}
+      title="Sticker Picker"
+      className="ermis-message-input__sticker-iframe"
+    />
+  </div>
+));
+DefaultStickerPicker.displayName = 'DefaultStickerPicker';
+
+export const DefaultDragAndDropOverlay: React.FC<{ dragAndDropLabel: string }> = React.memo(({
+  dragAndDropLabel,
+}) => (
+  <div className="ermis-channel__drop-overlay">
+    <div className="ermis-channel__drop-overlay-content">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+        <polyline points="17 8 12 3 7 8"></polyline>
+        <line x1="12" y1="3" x2="12" y2="15"></line>
+      </svg>
+      <span>{dragAndDropLabel}</span>
+    </div>
+  </div>
+));
+DefaultDragAndDropOverlay.displayName = 'DefaultDragAndDropOverlay';
+
+export const DefaultVoiceRecordButton: React.FC<VoiceRecordButtonProps> = React.memo(({ disabled, onRecordComplete }) => {
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const recorderRef = useRef<MultiRecorder | null>(null);
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+      if (recorderRef.current) recorderRef.current.close();
+    };
+  }, []);
+
+  const toggleRecording = async () => {
+    if (isRecording) {
+      if (!recorderRef.current) return;
+      try {
+        const blob = await recorderRef.current.stopRecording();
+        const file = new File([blob], `Voice_Message.wav`, { type: 'audio/wav' });
+        onRecordComplete(file);
+      } catch (err) {
+        console.error('Failed to stop recording:', err);
+      } finally {
+        recorderRef.current.close();
+        recorderRef.current = null;
+        setIsRecording(false);
+        setRecordingTime(0);
+        if (timerRef.current) clearInterval(timerRef.current);
+      }
+    } else {
+      try {
+        const recorder = new MultiRecorder({
+          format: 'wav',
+          workletURL: PCM_WORKLET_URL,
+        });
+        await recorder.init();
+        await recorder.startRecording();
+        recorderRef.current = recorder;
+        setIsRecording(true);
+        setRecordingTime(0);
+        timerRef.current = window.setInterval(() => {
+          setRecordingTime(prev => prev + 1);
+        }, 1000);
+      } catch (err) {
+        console.error('Failed to start recording:', err);
+      }
+    }
+  };
+
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <button
+      className={`ermis-message-input__voice-btn ${isRecording ? 'ermis-message-input__voice-btn--recording' : ''}`}
+      onClick={toggleRecording}
+      disabled={disabled && !isRecording}
+      type="button"
+      title={isRecording ? 'Stop Recording' : 'Record Voice Message'}
+    >
+      {isRecording ? (
+        <span className="ermis-message-input__voice-recording-indicator">
+          <span className="ermis-message-input__voice-dot" />
+          {formatTime(recordingTime)}
+        </span>
+      ) : (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+          <line x1="12" y1="19" x2="12" y2="22" />
+        </svg>
+      )}
+    </button>
+  );
+});
+DefaultVoiceRecordButton.displayName = 'DefaultVoiceRecordButton';