From 7152346be8e3c3d06cfad3dda79565e2b2142ff5 Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Fri, 17 Apr 2026 22:16:40 +0800
Subject: [PATCH] fix(room): make reaction Popover controlled so it closes
 after select

---
 src/components/room/RoomMessageBubble.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/room/RoomMessageBubble.tsx b/src/components/room/RoomMessageBubble.tsx
index 655f918..2382d06 100644
--- a/src/components/room/RoomMessageBubble.tsx
+++ b/src/components/room/RoomMessageBubble.tsx
@@ -80,6 +80,7 @@ export const RoomMessageBubble = memo(function RoomMessageBubble({
   const [isEditing, setIsEditing] = useState(false);
   const [editContent, setEditContent] = useState(message.content);
   const [isSavingEdit, setIsSavingEdit] = useState(false);
+  const [showReactionPicker, setShowReactionPicker] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const isAi = ['ai', 'system', 'tool'].includes(message.sender_type);
@@ -119,6 +120,7 @@ export const RoomMessageBubble = memo(function RoomMessageBubble({
     } catch (err) {
       console.warn('[RoomMessage] Failed to update reaction:', err);
     }
+    setShowReactionPicker(false);
   }, [roomId, message.id, message.reactions, wsClient]);
 
   const functionCalls = useMemo<FunctionCall[]>(
@@ -394,7 +396,7 @@ export const RoomMessageBubble = memo(function RoomMessageBubble({
       {!isEditing && !isRevoked && !isPending && (
         <div className="flex items-start gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
           {/* Add reaction */}
-          <Popover>
+          <Popover open={showReactionPicker} onOpenChange={setShowReactionPicker}>
             <PopoverTrigger
               render={
                 <Button