fix(room): make reaction Popover controlled so it closes after select

This commit is contained in:
ZhenYi 2026-04-17 22:16:40 +08:00
parent a1ddb5d5bc
commit 7152346be8

View File

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