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

package/src/components/MessageItem.tsx

@@ -3,11 +3,10 @@ import type { MessageItemProps, SystemMessageItemProps } from '../types';
 import { QuotedMessagePreview } from './QuotedMessagePreview';
 import { MessageActionsBox } from './MessageActionsBox';
 import { MessageReactions } from './MessageReactions';
-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';
 
@@ -58,6 +57,29 @@ const InlineStatusIcon: React.FC<{ status?: string; isOwnMessage: boolean; isLas
 });
 InlineStatusIcon.displayName = 'InlineStatusIcon';
 
+function findQuotedMessageInChannelState(channel: any, quotedMessageId?: string) {
+  if (!channel || !quotedMessageId) return undefined;
+
+  const messageSets = Array.isArray(channel.state?.messageSets) ? channel.state.messageSets : [];
+  for (const set of messageSets) {
+    const messages = Array.isArray(set?.messages) ? set.messages : [];
+    const found = messages.find((item: any) => item?.id === quotedMessageId);
+    if (found) return found;
+  }
+
+  const pinnedMessages = Array.isArray(channel.state?.pinnedMessages) ? channel.state.pinnedMessages : [];
+  return pinnedMessages.find((item: any) => item?.id === quotedMessageId);
+}
+
+function hasRenderableQuotedMessageContent(quotedMessage: any) {
+  if (!quotedMessage) return false;
+  if (typeof quotedMessage.text === 'string' && quotedMessage.text.trim()) return true;
+  if (Array.isArray(quotedMessage.attachments) && quotedMessage.attachments.length > 0) return true;
+  if (typeof quotedMessage.sticker_url === 'string' && quotedMessage.sticker_url) return true;
+  if (isStickerMessage(quotedMessage)) return true;
+  return false;
+}
+
 export const MessageItem: React.FC<MessageItemProps> = React.memo(({
   message,
   isOwnMessage,
@@ -73,20 +95,39 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
   MessageReactionsComponent = MessageReactions,
   forwardedLabel = 'Forwarded',
   editedLabel = 'Edited',
+  deletedMessageLabel = 'This message was deleted',
+  attachmentLabel = 'Attachment',
+  unavailableMessageLabel = 'Message unavailable',
+  stickerLabel = 'Sticker',
+  encryptedMessageLabel,
+  encryptedMessageFailedLabel,
+  encryptedMessageDecryptingLabel,
+  systemMessageTranslations,
+  signalMessageTranslations,
+  onMentionClick,
+  onUserNameClick,
+  onAddReactionClick,
+  hideAvatar,
 }) => {
   const { activeChannel, client } = useChatClient();
   const { hasCapability } = useChannelCapabilities();
-  
+
   const canReact = hasCapability('send-reaction');
 
   const userName = message.user?.name || message.user_id;
   const userAvatar = message.user?.avatar;
 
-  const quotedMessage = (message as any).quoted_message;
+  const directQuotedMessage = (message as any).quoted_message;
+  const stateQuotedMessage = findQuotedMessageInChannelState(activeChannel, (message as any).quoted_message_id);
+  const quotedMessage =
+    (hasRenderableQuotedMessageContent(directQuotedMessage) ? directQuotedMessage : undefined) ||
+    (hasRenderableQuotedMessageContent(stateQuotedMessage) ? stateQuotedMessage : undefined) ||
+    directQuotedMessage;
   const isForwarded = !!(message as any).forward_cid;
   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,34 +159,80 @@ 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}>
+        {!hideAvatar && !isOwnMessage && (
+          <div className="ermis-message-list__item-avatar">
+            {isLastInGroup
+              ? <AvatarComponent image={userAvatar} name={userName} size={36} />
+              : <div style={{ width: 36 }} />
+            }
+          </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 */}
-      {!isOwnMessage && (
+      {/* Avatar area: only render when not hidden by group wrapper */}
+      {!hideAvatar && !isOwnMessage && (
         <div className="ermis-message-list__item-avatar">
-          {isFirstInGroup
-            ? <AvatarComponent image={userAvatar} name={userName} size={28} />
-            : <div style={{ width: 28 }} />
+          {isLastInGroup
+            ? <AvatarComponent image={userAvatar} name={userName} size={36} />
+            : <div style={{ width: 36 }} />
           }
         </div>
       )}
       <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 && (
@@ -153,47 +240,67 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
             quotedMessage={quotedMessage}
             isOwnMessage={isOwnMessage}
             onClick={onClickQuote}
+            attachmentLabel={attachmentLabel}
+            unavailableMessageLabel={unavailableMessageLabel}
+            stickerLabel={stickerLabel}
+            deletedMessageLabel={typeof deletedMessageLabel === 'string' ? deletedMessageLabel : 'This message was deleted'}
           />
         )}
         <div className="ermis-message-list__bubble-wrapper">
-          <MessageQuickReactions message={message} isOwnMessage={isOwnMessage} disabled={!canReact} />
           <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}
+              encryptedMessageLabel={encryptedMessageLabel}
+              encryptedMessageFailedLabel={encryptedMessageFailedLabel}
+              encryptedMessageDecryptingLabel={encryptedMessageDecryptingLabel}
             />
-          )}
 
-          {/* Message Reactions */}
-          {MessageReactionsComponent && (
-            <MessageReactionsComponent
-              reactionCounts={(message as any).reaction_counts}
-              ownReactions={(message as any).own_reactions}
-              latestReactions={(message as any).latest_reactions}
-              onClickReaction={handleReactionToggle}
-              disabled={!canReact}
-            />
-          )}
+            {/* Message Reactions — inside bubble */}
+            {MessageReactionsComponent && (
+              <>
+                <div className="ermis-message-reactions-break" style={{ width: '100%', display: 'block' }}></div>
+                <MessageReactionsComponent
+                  reactionCounts={(message as any).reaction_counts}
+                  ownReactions={(message as any).own_reactions}
+                  latestReactions={(message as any).latest_reactions}
+                  onClickReaction={handleReactionToggle}
+                  disabled={!canReact}
+                  isOwnMessage={isOwnMessage}
+                />
+              </>
+            )}
+
+            {/* Time rendered AFTER text/reactions for bottom-right alignment */}
+            {!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>
         </div>
       </div>
     </div>
@@ -208,9 +315,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';

package/src/components/MessageQuickReactions.tsx

@@ -1,8 +1,17 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useRef, useEffect } from 'react';
+import { EmojiPicker } from 'frimousse';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 
-const QUICK_REACTIONS = ['like', 'love', 'haha', 'sad', 'fire'];
+const EmojiPickerRoot = EmojiPicker.Root as any;
+const EmojiPickerSearch = EmojiPicker.Search as any;
+const EmojiPickerViewport = EmojiPicker.Viewport as any;
+const EmojiPickerLoading = EmojiPicker.Loading as any;
+const EmojiPickerEmpty = EmojiPicker.Empty as any;
+const EmojiPickerList = EmojiPicker.List as any;
+
+const REACTIONS = ['like', 'love', 'haha', 'sad', 'fire'];
+
 const EMOJI_MAP: Record<string, string> = {
   like: '👍',
   love: '❤️',
@@ -18,6 +27,24 @@ export const MessageQuickReactions: React.FC<{
 }> = React.memo(({ message, isOwnMessage, disabled }) => {
   const { activeChannel, client } = useChatClient();
   const currentUserId = client?.userID;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showPicker, setShowPicker] = useState(false);
+  const [pickerPosition, setPickerPosition] = useState<'top' | 'bottom'>('top');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsExpanded(false);
+        setShowPicker(false);
+      }
+    };
+    if (isExpanded || showPicker) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isExpanded, showPicker]);
 
   const handleReactionToggle = useCallback(
     async (type: string) => {
@@ -41,32 +68,135 @@ export const MessageQuickReactions: React.FC<{
     [activeChannel, message, currentUserId]
   );
 
+  const isOwnReaction = useCallback(
+    (type: string) => {
+      return (
+        (message as any).own_reactions?.some((r: any) => r.type === type) ||
+        (message as any).latest_reactions?.some(
+          (r: any) => r.type === type && (r.user?.id === currentUserId || (r as any).user_id === currentUserId)
+        )
+      );
+    },
+    [message, currentUserId]
+  );
+
+  const handleMoreClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setPickerPosition(rect.top < 388 ? 'bottom' : 'top');
+      }
+      setShowPicker((prev) => !prev);
+      setIsExpanded(false);
+    },
+    []
+  );
+
   return (
-    <div className={`ermis-message-quick-reactions ${isOwnMessage ? 'ermis-message-quick-reactions--own' : ''} ${disabled ? 'ermis-message-quick-reactions--disabled' : ''}`}>
-      {QUICK_REACTIONS.map((type) => {
-        const isOwn =
-          (message as any).own_reactions?.some((r: any) => r.type === type) ||
-          (message as any).latest_reactions?.some(
-            (r: any) => r.type === type && (r.user?.id === currentUserId || (r as any).user_id === currentUserId)
-          );
+    <div 
+      ref={containerRef} 
+      className="ermis-qr-wrapper" 
+      style={{ position: 'relative', display: 'inline-flex' }}
+      onMouseLeave={() => {
+        if (!showPicker) {
+          setIsExpanded(false);
+        }
+      }}
+    >
+      {/* Trigger button (looks like other action buttons) */}
+      <button 
+        className={`ermis-message-list__actions-trigger ${isExpanded || showPicker ? 'ermis-message-list__actions-trigger--active' : ''}`}
+        onClick={(e) => { e.preventDefault(); e.stopPropagation(); if (!disabled) { setIsExpanded(!isExpanded); setShowPicker(false); } }}
+        title="Add reaction"
+        disabled={disabled}
+      >
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="10" />
+          <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+          <line x1="9" y1="9" x2="9.01" y2="9" />
+          <line x1="15" y1="9" x2="15.01" y2="9" />
+        </svg>
+      </button>
 
-        return (
+      {/* Horizontal Strip */}
+      {isExpanded && (
+        <div className="ermis-qr__strip ermis-qr__strip--horizontal" onClick={(e) => e.stopPropagation()}>
+          {REACTIONS.map((type) => (
+            <button
+              key={type}
+              className={`ermis-qr__emoji ${isOwnReaction(type) ? 'ermis-qr__emoji--active' : ''}`}
+              title={type}
+              onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleReactionToggle(type); setIsExpanded(false); }}
+            >
+              {EMOJI_MAP[type]}
+            </button>
+          ))}
           <button
-            key={type}
-            className={`ermis-message-quick-reactions__btn ${
-              isOwn ? 'ermis-message-quick-reactions__btn--active' : ''
-            }`}
-            title={type}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleReactionToggle(type);
-            }}
+            className="ermis-qr__emoji ermis-qr__emoji--more"
+            title="More reactions"
+            onClick={handleMoreClick}
           >
-            {EMOJI_MAP[type]}
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="5" r="1.5" fill="currentColor" />
+              <circle cx="12" cy="12" r="1.5" fill="currentColor" />
+              <circle cx="12" cy="19" r="1.5" fill="currentColor" />
+            </svg>
           </button>
-        );
-      })}
+        </div>
+      )}
+
+      {/* Full emoji picker */}
+      {showPicker && (
+        <div
+          className={`ermis-qr__picker ermis-qr__picker--${pickerPosition} ${isOwnMessage ? 'ermis-qr__picker--own' : ''}`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <EmojiPickerRoot
+            className="isolate flex h-full w-full flex-col bg-white dark:bg-[#1a1828]"
+            locale="vi"
+            onEmojiSelect={(emoji: any) => {
+              handleReactionToggle(emoji.emoji);
+              setShowPicker(false);
+              setIsExpanded(false);
+            }}
+          >
+            <EmojiPickerSearch className="z-10 mx-3 mt-3 appearance-none rounded-xl bg-zinc-100 px-3 py-2 text-sm dark:bg-zinc-800 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-primary/50" />
+            <EmojiPickerViewport className="relative flex-1 outline-hidden mt-2">
+              <EmojiPickerLoading className="absolute inset-0 flex items-center justify-center text-zinc-400 text-sm dark:text-zinc-500">
+                Đang tải…
+              </EmojiPickerLoading>
+              <EmojiPickerEmpty className="absolute inset-0 flex items-center justify-center text-zinc-400 text-sm dark:text-zinc-500">
+                Không tìm thấy emoji.
+              </EmojiPickerEmpty>
+              <EmojiPickerList
+                className="select-none pb-1.5"
+                components={{
+                  CategoryHeader: ({ category, ...props }: any) => (
+                    <div className="bg-white/90 px-3 pt-3 pb-1.5 font-semibold text-zinc-500 text-xs dark:bg-[#1a1828]/90 dark:text-zinc-400 backdrop-blur-md" {...props}>
+                      {category.label}
+                    </div>
+                  ),
+                  Row: ({ children, ...props }: any) => (
+                    <div className="scroll-my-1.5 px-2 flex justify-between" {...props}>
+                      {children as React.ReactNode}
+                    </div>
+                  ),
+                  Emoji: ({ emoji, ...props }: any) => {
+                    const { formAction, ...safeProps } = props;
+                    return (
+                      <button className="flex size-9 items-center justify-center rounded-lg text-xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors data-[active]:bg-zinc-100 dark:data-[active]:bg-zinc-800" {...safeProps}>
+                        {emoji.emoji}
+                      </button>
+                    );
+                  },
+                }}
+              />
+            </EmojiPickerViewport>
+          </EmojiPickerRoot>
+        </div>
+      )}
     </div>
   );
 });

package/src/components/MessageReactions.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { MessageReactionsProps } from '../types';
 
 import { useChatClient } from '../hooks/useChatClient';
+import { createPortal } from 'react-dom';
 
 const defaultReactionEmojiMap: Record<string, string> = {
   like: '👍',
@@ -11,20 +12,61 @@ const defaultReactionEmojiMap: Record<string, string> = {
   fire: '🔥',
 };
 
+const ReactionTooltip = ({ text, rect }: { text: string; rect: DOMRect }) => {
+  if (!text || !rect) return null;
+  return createPortal(
+    <div style={{
+      position: 'fixed',
+      top: rect.top - 6,
+      left: rect.left + rect.width / 2,
+      transform: 'translate(-50%, -100%)',
+      backgroundColor: 'rgba(0, 0, 0, 0.75)',
+      color: '#fff',
+      padding: '4px 8px',
+      borderRadius: '6px',
+      fontSize: '11px',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      width: 'max-content',
+      maxWidth: '200px',
+      textAlign: 'center',
+      zIndex: 999999,
+      pointerEvents: 'none'
+    }}>
+      {text}
+    </div>,
+    document.body
+  );
+};
+
 export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
   reactionCounts,
   ownReactions,
   latestReactions,
   onClickReaction,
   disabled,
+  isOwnMessage,
 }) => {
   const { client } = useChatClient();
   const currentUserId = client?.userID;
+  const [hoveredTooltip, setHoveredTooltip] = React.useState<{text: string, rect: DOMRect} | null>(null);
+
+  React.useEffect(() => {
+    if (hoveredTooltip) {
+      const handleHide = () => setHoveredTooltip(null);
+      window.addEventListener('scroll', handleHide, true);
+      window.addEventListener('resize', handleHide);
+      return () => {
+        window.removeEventListener('scroll', handleHide, true);
+        window.removeEventListener('resize', handleHide);
+      };
+    }
+  }, [hoveredTooltip]);
 
   if (!reactionCounts || Object.keys(reactionCounts).length === 0) return null;
 
   return (
-    <div className={`ermis-message-reactions${disabled ? ' ermis-message-reactions--disabled' : ''}`}>
+    <div className={`ermis-message-reactions${disabled ? ' ermis-message-reactions--disabled' : ''}${isOwnMessage ? ' ermis-message-reactions--own' : ''}`}>
       {Object.entries(reactionCounts).map(([type, count]) => {
         const isOwn = 
           ownReactions?.some((r) => r.type === type) ||
@@ -48,15 +90,19 @@ export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
             className={`ermis-message-reactions__item ${
               isOwn ? 'ermis-message-reactions__item--active' : ''
             }`}
-            data-tooltip={tooltip}
+            onMouseEnter={(e) => {
+              setHoveredTooltip({ text: tooltip, rect: e.currentTarget.getBoundingClientRect() });
+            }}
+            onMouseLeave={() => setHoveredTooltip(null)}
             onClick={() => onClickReaction?.(type)}
             type="button"
           >
             <span className="ermis-message-reactions__emoji">{emoji}</span>
-            <span className="ermis-message-reactions__count">{count}</span>
+            {count > 1 && <span className="ermis-message-reactions__count">{count}</span>}
           </button>
         );
       })}
+      {hoveredTooltip && <ReactionTooltip text={hoveredTooltip.text} rect={hoveredTooltip.rect} />}
     </div>
   );
 });