From 13f5ff328c088dde8b0cffd8eb23fca88ab26243 Mon Sep 17 00:00:00 2001 From: ZhenYi <434836402@qq.com> Date: Sat, 18 Apr 2026 00:17:47 +0800 Subject: [PATCH] fix(room): hoist mentionConfirmRef to module scope to fix TDZ error ChatInputArea is defined before RoomChatPanel in the file, so its JSX runs before mentionConfirmRef is declared inside RoomChatPanel. Moving the ref to module level ensures it's initialized before either component renders. --- src/components/room/RoomChatPanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/room/RoomChatPanel.tsx b/src/components/room/RoomChatPanel.tsx index 3976829..da31b7f 100644 --- a/src/components/room/RoomChatPanel.tsx +++ b/src/components/room/RoomChatPanel.tsx @@ -29,6 +29,8 @@ import { RoomThreadPanel } from './RoomThreadPanel'; const MENTION_PATTERN = /@([^:@\s]*)(:([^\s]*))?$/; const MENTION_POPOVER_KEYS = ['Enter', 'Tab', 'ArrowUp', 'ArrowDown']; +/** Module-level ref shared between ChatInputArea (writes) and RoomChatPanel (reads) */ +const mentionConfirmRef = { current: (() => {}) as () => void }; export interface ChatInputAreaHandle { insertMention: (id: string, label: string, type: 'user' | 'ai') => void; @@ -283,8 +285,6 @@ export function RoomChatPanel({ room, isAdmin, onClose, onDelete }: RoomChatPane const messagesEndRef = useRef(null); const chatInputRef = useRef(null); - /** Shared ref: MentionPopover writes the confirm fn here; ChatInputArea reads and calls it */ - const mentionConfirmRef = useRef<() => void>(() => {}); const [replyingTo, setReplyingTo] = useState(null); const [editingMessage, setEditingMessage] = useState(null);