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

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,11 +55,20 @@ 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 { 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);
 
@@ -160,6 +178,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) {
@@ -200,6 +224,11 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
     handleFilesSelected, handleRemoveFile, handleAttachClick, cleanupFiles,
   } = useFileUpload({ activeChannel, editableRef, setHasContent });
 
+  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 +273,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 [];
@@ -354,7 +389,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 +399,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 +461,52 @@ 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);
+            }
+            // Re-watch to get full state from server
+            activeChannel.watch().catch(() => {});
+          } catch (e) {
+            console.error('Failed to join public channel', e);
+          }
+        }}
+        className={className}
+      />
+    );
+  }
+
   const isStillUploading = files.some((f) => f.status === 'uploading');
 
   return (
@@ -427,6 +516,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
         <ReplyPreviewComponent
           message={quotedMessage}
           onDismiss={() => setQuotedMessage(null)}
+          replyingToLabel={replyingToLabel}
         />
       )}
 
@@ -435,6 +525,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
         <EditPreviewComponent
           message={editingMessage}
           onDismiss={cancelEdit}
+          editingMessageLabel={editingMessageLabel}
         />
       )}
 
@@ -512,20 +603,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';

package/src/components/MessageItem.tsx

@@ -7,7 +7,7 @@ import { MessageQuickReactions } from './MessageQuickReactions';
 import { useChannelCapabilities } from '../hooks/useChannelCapabilities';
 import { useChatClient } from '../hooks/useChatClient';
 import { formatTime } from '../utils';
-import { isSystemMessage } from '../messageTypeUtils';
+import { isSystemMessage, isDeletedDisplayMessage, isStickerMessage, isSignalMessage } from '../messageTypeUtils';
 
 export type { MessageItemProps, SystemMessageItemProps } from '../types';
 
@@ -73,10 +73,16 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
   MessageReactionsComponent = MessageReactions,
   forwardedLabel = 'Forwarded',
   editedLabel = 'Edited',
+  deletedMessageLabel = 'This message was deleted',
+  systemMessageTranslations,
+  signalMessageTranslations,
+  onMentionClick,
+  onUserNameClick,
+  onAddReactionClick,
 }) => {
   const { activeChannel, client } = useChatClient();
   const { hasCapability } = useChannelCapabilities();
-  
+
   const canReact = hasCapability('send-reaction');
 
   const userName = message.user?.name || message.user_id;
@@ -87,6 +93,7 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
   const oldTexts = (message as any).old_texts;
   const isEdited = oldTexts && oldTexts.length > 0;
   const hasAttachments = message.attachments && message.attachments.length > 0;
+  const isDeletedDisplay = isDeletedDisplayMessage(message);
 
   const handleReactionToggle = React.useCallback(async (type: string) => {
     if (!activeChannel || !canReact) return;
@@ -118,20 +125,63 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
     return Date.now() - new Date(message.created_at).getTime() < 1000;
   }, [message.created_at]);
 
+  const isSticker = React.useMemo(() => isStickerMessage(message), [message]);
+
   const itemClass = [
     'ermis-message-list__item',
     isOwnMessage ? 'ermis-message-list__item--own' : 'ermis-message-list__item--other',
-    isFirstInGroup ? 'ermis-message-list__item--group-start' : 'ermis-message-list__item--group-cont',
+    isFirstInGroup && isLastInGroup ? 'ermis-message-list__item--group-single' : '',
+    isFirstInGroup && !isLastInGroup ? 'ermis-message-list__item--group-top' : '',
+    !isFirstInGroup && !isLastInGroup ? 'ermis-message-list__item--group-middle' : '',
+    !isFirstInGroup && isLastInGroup ? 'ermis-message-list__item--group-bottom' : '',
     isHighlighted ? 'ermis-message-list__item--highlighted' : '',
     isNewMessage ? 'ermis-message-list__item--new' : '',
+    isDeletedDisplay ? 'ermis-message-list__item--deleted-display' : '',
+    isSticker ? 'ermis-message-list__item--sticker' : '',
+    isSignalMessage(message) ? 'ermis-message-list__item--signal' : '',
     statusClass,
   ].filter(Boolean).join(' ');
 
   const contentClass = [
     'ermis-message-list__item-content',
-    hasAttachments ? 'ermis-message-list__item-content--has-attachments' : '',
+    hasAttachments && !isDeletedDisplay ? 'ermis-message-list__item-content--has-attachments' : '',
   ].filter(Boolean).join(' ');
 
+  // Deleted display: show icon + label, no actions/reactions/quote/attachments
+  if (isDeletedDisplay) {
+    return (
+      <div className={itemClass} data-message-id={message.id}>
+        {!isOwnMessage && (
+          <div className="ermis-message-list__item-avatar">
+            {isFirstInGroup
+              ? <AvatarComponent image={userAvatar} name={userName} size={28} />
+              : <div style={{ width: 28 }} />
+            }
+          </div>
+        )}
+        <div className={contentClass}>
+          {!isOwnMessage && isFirstInGroup && (
+            <span className="ermis-message-list__item-user">{userName}</span>
+          )}
+          <div className="ermis-message-list__bubble-wrapper">
+            <MessageBubble message={message} isOwnMessage={isOwnMessage}>
+              <span className="ermis-message-list__deleted-text">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+                </svg>
+                {deletedMessageLabel}
+              </span>
+              <span className="ermis-message-list__item-time">
+                {formatTime(message.created_at)}
+              </span>
+            </MessageBubble>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={itemClass} data-message-id={message.id}>
       {/* Avatar area: show avatar only on first message, otherwise placeholder for alignment */}
@@ -145,7 +195,10 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
       )}
       <div className={contentClass}>
         {!isOwnMessage && isFirstInGroup && (
-          <span className="ermis-message-list__item-user">{userName}</span>
+          <span 
+            className={`ermis-message-list__item-user${onUserNameClick ? ' ermis-message-list__item-user--clickable' : ''}`}
+            onClick={onUserNameClick ? (e) => { e.stopPropagation(); const uid = message.user?.id || message.user_id; if (uid) onUserNameClick(uid); } : undefined}
+          >{userName}</span>
         )}
         {/* Quoted message preview */}
         {quotedMessage && onClickQuote && (
@@ -156,33 +209,41 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
           />
         )}
         <div className="ermis-message-list__bubble-wrapper">
-          <MessageQuickReactions message={message} isOwnMessage={isOwnMessage} disabled={!canReact} />
+          {!isSignalMessage(message) && <MessageQuickReactions message={message} isOwnMessage={isOwnMessage} disabled={!canReact} onAddReactionClick={onAddReactionClick} />}
           <MessageBubble message={message} isOwnMessage={isOwnMessage}>
             {isForwarded && (
               <span className="ermis-message-list__forwarded-indicator">{forwardedLabel}</span>
             )}
-            <MessageRenderer message={message} isOwnMessage={isOwnMessage} />
-            <span className="ermis-message-list__item-time">
-              {isEdited && (
-                <span
-                  className="ermis-message-list__edited-indicator"
-                // data-tooltip={oldTexts.map((ot: any) => `[${formatTime(ot.created_at)}] ${ot.text}`).join('\n')}
-                >
-                  {editedLabel}
-                </span>
-              )}
-              {formatTime(message.created_at)}
-              <InlineStatusIcon status={message.status} isOwnMessage={isOwnMessage} isLastInGroup={isLastInGroup} />
-            </span>
-          </MessageBubble>
-
-          {/* Actions: hover buttons + dropdown menu */}
-          {!isSystemMessage(message) && (
-            <MessageActionsBoxComponent
+            <MessageRenderer
               message={message}
               isOwnMessage={isOwnMessage}
+              systemMessageTranslations={systemMessageTranslations}
+              signalMessageTranslations={signalMessageTranslations}
+              onMentionClick={onMentionClick}
             />
-          )}
+            {!isSignalMessage(message) && (isLastInGroup || isEdited || message.status === 'error' || message.status === 'failed_offline') && (
+              <span className="ermis-message-list__item-time">
+                {isEdited && (
+                  <span
+                    className="ermis-message-list__edited-indicator"
+                  // data-tooltip={oldTexts.map((ot: any) => `[${formatTime(ot.created_at)}] ${ot.text}`).join('\n')}
+                  >
+                    {editedLabel}
+                  </span>
+                )}
+                {isLastInGroup && formatTime(message.created_at)}
+                <InlineStatusIcon status={message.status} isOwnMessage={isOwnMessage} isLastInGroup={isLastInGroup} />
+              </span>
+            )}
+
+            {/* Actions: hover buttons + dropdown menu */}
+            {!isSystemMessage(message) && (
+              <MessageActionsBoxComponent
+                message={message}
+                isOwnMessage={isOwnMessage}
+              />
+            )}
+          </MessageBubble>
 
           {/* Message Reactions */}
           {MessageReactionsComponent && (
@@ -192,6 +253,7 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
               latestReactions={(message as any).latest_reactions}
               onClickReaction={handleReactionToggle}
               disabled={!canReact}
+              isOwnMessage={isOwnMessage}
             />
           )}
         </div>
@@ -208,9 +270,14 @@ export const SystemMessageItem: React.FC<SystemMessageItemProps> = React.memo(({
   message,
   isOwnMessage,
   SystemRenderer,
+  systemMessageTranslations,
 }) => (
   <div className="ermis-message-list__system">
-    <SystemRenderer message={message} isOwnMessage={isOwnMessage} />
+    <SystemRenderer
+      message={message}
+      isOwnMessage={isOwnMessage}
+      systemMessageTranslations={systemMessageTranslations}
+    />
   </div>
 ));
 SystemMessageItem.displayName = 'SystemMessageItem';