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

package/src/components/MessageActionsBox.tsx

@@ -5,6 +5,7 @@ import { useChatClient } from '../hooks/useChatClient';
 import type { MessageActionsBoxProps } from '../types';
 import { Dropdown as DefaultDropdown, closeAllDropdowns } from './Dropdown';
 import { useChatComponents } from '../context/ChatComponentsContext';
+import { MessageQuickReactions } from './MessageQuickReactions';
 
 // Aliased for backward compatibility
 export const closeAllActionBoxes = closeAllDropdowns;
@@ -105,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

@@ -64,13 +64,14 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   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);
@@ -207,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(() => {
@@ -224,6 +229,9 @@ 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
@@ -339,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(() => {
@@ -496,8 +527,6 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
                 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);
           }

package/src/components/MessageItem.tsx

@@ -3,7 +3,6 @@ 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';
@@ -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,
@@ -74,11 +96,18 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
   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();
@@ -88,7 +117,12 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
   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;
@@ -151,11 +185,11 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
   if (isDeletedDisplay) {
     return (
       <div className={itemClass} data-message-id={message.id}>
-        {!isOwnMessage && (
+        {!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>
         )}
@@ -184,18 +218,18 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
 
   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 
+          <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>
@@ -206,10 +240,13 @@ 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">
-          {!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>
@@ -220,7 +257,27 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
               systemMessageTranslations={systemMessageTranslations}
               signalMessageTranslations={signalMessageTranslations}
               onMentionClick={onMentionClick}
+              encryptedMessageLabel={encryptedMessageLabel}
+              encryptedMessageFailedLabel={encryptedMessageFailedLabel}
+              encryptedMessageDecryptingLabel={encryptedMessageDecryptingLabel}
             />
+
+            {/* 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 && (
@@ -244,18 +301,6 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
               />
             )}
           </MessageBubble>
-
-          {/* 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}
-              isOwnMessage={isOwnMessage}
-            />
-          )}
         </div>
       </div>
     </div>

package/src/components/MessageQuickReactions.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useState, useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
 import { EmojiPicker } from 'frimousse';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
@@ -11,7 +10,8 @@ const EmojiPickerLoading = EmojiPicker.Loading as any;
 const EmojiPickerEmpty = EmojiPicker.Empty as any;
 const EmojiPickerList = EmojiPicker.List as any;
 
-const QUICK_REACTIONS = ['like', 'love', 'haha', 'sad', 'fire'];
+const REACTIONS = ['like', 'love', 'haha', 'sad', 'fire'];
+
 const EMOJI_MAP: Record<string, string> = {
   like: '👍',
   love: '❤️',
@@ -24,25 +24,27 @@ export const MessageQuickReactions: React.FC<{
   message: FormatMessageResponse;
   isOwnMessage: boolean;
   disabled?: boolean;
-  onAddReactionClick?: (e: React.MouseEvent, messageId: string) => void;
-}> = React.memo(({ message, isOwnMessage, disabled, onAddReactionClick }) => {
+}> = 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 (isExpanded && containerRef.current && !containerRef.current.contains(e.target as Node)) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
         setIsExpanded(false);
+        setShowPicker(false);
       }
     };
-    if (isExpanded) {
+    if (isExpanded || showPicker) {
       document.addEventListener('mousedown', handleClickOutside);
     }
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [isExpanded]);
+  }, [isExpanded, showPicker]);
 
   const handleReactionToggle = useCallback(
     async (type: string) => {
@@ -66,135 +68,136 @@ 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 (
-    <motion.div 
-      ref={containerRef}
-      layout
-      transition={{ type: "spring", stiffness: 350, damping: 30 }}
-      className={`ermis-message-quick-reactions ${isOwnMessage ? 'ermis-message-quick-reactions--own' : ''} ${disabled ? 'ermis-message-quick-reactions--disabled' : ''} ${isExpanded ? 'ermis-message-quick-reactions--expanded' : ''}`}
-      style={{
-        overflow: 'hidden',
-        padding: isExpanded ? 0 : undefined,
-        width: isExpanded ? 350 : undefined,
-        height: isExpanded ? 368 : undefined,
-        borderRadius: isExpanded ? 16 : 20,
-        backgroundColor: isExpanded ? 'var(--ermis-bg-primary)' : undefined,
-        border: isExpanded ? '1px solid var(--ermis-border)' : undefined,
-        boxShadow: isExpanded ? '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)' : undefined,
-        zIndex: isExpanded ? 101 : 20,
+    <div 
+      ref={containerRef} 
+      className="ermis-qr-wrapper" 
+      style={{ position: 'relative', display: 'inline-flex' }}
+      onMouseLeave={() => {
+        if (!showPicker) {
+          setIsExpanded(false);
+        }
       }}
     >
-      <AnimatePresence mode="popLayout">
-        {!isExpanded ? (
-          <motion.div
-            key="quick-reactions"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            transition={{ duration: 0.15 }}
-            style={{ display: 'flex', alignItems: 'center', gap: '2px' }}
-          >
-            {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)
-                );
+      {/* 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 (
-                <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);
-                  }}
-                >
-                  {EMOJI_MAP[type]}
-                </button>
-              );
-            })}
-            
+      {/* Horizontal Strip */}
+      {isExpanded && (
+        <div className="ermis-qr__strip ermis-qr__strip--horizontal" onClick={(e) => e.stopPropagation()}>
+          {REACTIONS.map((type) => (
             <button
-              className="ermis-message-quick-reactions__btn ermis-message-quick-reactions__btn--more"
-              title="More reactions"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                setIsExpanded(true);
-              }}
+              key={type}
+              className={`ermis-qr__emoji ${isOwnReaction(type) ? 'ermis-qr__emoji--active' : ''}`}
+              title={type}
+              onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleReactionToggle(type); setIsExpanded(false); }}
             >
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-zinc-500">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
+              {EMOJI_MAP[type]}
             </button>
-          </motion.div>
-        ) : (
-          <motion.div
-            key="full-picker"
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            transition={{ duration: 0.2 }}
-            style={{ width: '100%', height: '100%' }}
-            onClick={(e) => e.stopPropagation()}
+          ))}
+          <button
+            className="ermis-qr__emoji ermis-qr__emoji--more"
+            title="More reactions"
+            onClick={handleMoreClick}
           >
-            <EmojiPickerRoot 
-              className="isolate flex h-full w-full flex-col bg-white dark:bg-[#1a1828]"
-              locale="vi"
-              onEmojiSelect={(emoji: any) => {
-                handleReactionToggle(emoji.emoji);
-                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>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </motion.div>
+            <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>
   );
 });