diff --git a/src/components/room/RoomChatPanel.tsx b/src/components/room/RoomChatPanel.tsx index 0d418e4..721aae5 100644 --- a/src/components/room/RoomChatPanel.tsx +++ b/src/components/room/RoomChatPanel.tsx @@ -22,7 +22,6 @@ import { RoomMessageEditHistoryDialog } from './RoomMessageEditHistoryDialog'; import { RoomMessageList } from './RoomMessageList'; import { RoomParticipantsPanel } from './RoomParticipantsPanel'; import { RoomSettingsPanel } from './RoomSettingsPanel'; -import { RoomPerformanceMonitor } from './RoomPerformanceMonitor'; import { RoomMessageSearch } from './RoomMessageSearch'; import { RoomMentionPanel } from './RoomMentionPanel'; import { RoomThreadPanel } from './RoomThreadPanel'; @@ -262,7 +261,6 @@ export function RoomChatPanel({ room, isAdmin, onClose, onDelete }: RoomChatPane const [showMentions, setShowMentions] = useState(false); const [isUpdatingRoom, setIsUpdatingRoom] = useState(false); const [activeThread, setActiveThread] = useState<{ thread: RoomThreadResponse; parentMessage: MessageWithMeta } | null>(null); - const [renderedMessageCount, setRenderedMessageCount] = useState(undefined); // Draft management const { draft, setDraft, clearDraft } = useRoomDraft(room.id); @@ -604,7 +602,6 @@ export function RoomChatPanel({ room, isAdmin, onClose, onDelete }: RoomChatPane roomId={room.id} /> - ); } diff --git a/src/components/room/RoomMessageList.tsx b/src/components/room/RoomMessageList.tsx index 96c0398..e196fca 100644 --- a/src/components/room/RoomMessageList.tsx +++ b/src/components/room/RoomMessageList.tsx @@ -27,8 +27,6 @@ interface RoomMessageListProps { isLoadingMore?: boolean; onOpenThread?: (message: MessageWithMeta) => void; onCreateThread?: (message: MessageWithMeta) => void; - /** Called with the count of currently rendered (visible) rows whenever it changes. */ - onRenderedCountChange?: (count: number) => void; } interface MessageRow { @@ -103,7 +101,6 @@ export const RoomMessageList = memo(function RoomMessageList({ isLoadingMore = false, onOpenThread, onCreateThread, - onRenderedCountChange, }: RoomMessageListProps) { const scrollContainerRef = useRef(null); const topSentinelRef = useRef(null); @@ -290,11 +287,6 @@ export const RoomMessageList = memo(function RoomMessageList({ isRestoringScrollRef.current = false; }, [deferredMessages.length]); - // Report rendered count to parent (for performance monitor) - useEffect(() => { - onRenderedCountChange?.(virtualItems.length); - }, [virtualItems.length, onRenderedCountChange]); - // Empty state if (messages.length === 0) { return ( diff --git a/src/components/room/RoomPerformanceMonitor.tsx b/src/components/room/RoomPerformanceMonitor.tsx deleted file mode 100644 index 97ac4d9..0000000 --- a/src/components/room/RoomPerformanceMonitor.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { useState, useMemo, useEffect, useRef, useCallback } from 'react'; -import { Button } from '@/components/ui/button'; -import { Badge } from '@/components/ui/badge'; - -interface PerformanceStats { - totalMessages: number; - renderedMessages: number; - virtualizationEnabled: boolean; -} - -interface RoomPerformanceMonitorProps { - messageCount: number; - renderedCount?: number; -} - -const AUTO_CLOSE_DELAY = 5000; // auto-close after 5 seconds when stats are shown - -export function RoomPerformanceMonitor({ messageCount, renderedCount }: RoomPerformanceMonitorProps) { - const [showStats, setShowStats] = useState(false); - const autoCloseTimerRef = useRef | null>(null); - - // Auto-close after AUTO_CLOSE_DELAY when stats are visible - useEffect(() => { - if (!showStats) return; - autoCloseTimerRef.current = setTimeout(() => { - setShowStats(false); - }, AUTO_CLOSE_DELAY); - return () => { - if (autoCloseTimerRef.current) clearTimeout(autoCloseTimerRef.current); - }; - }, [showStats]); - - const stats = useMemo(() => ({ - totalMessages: messageCount, - renderedMessages: renderedCount ?? messageCount, - virtualizationEnabled: renderedCount !== undefined && renderedCount < messageCount, - }), [messageCount, renderedCount]); - - // --- Drag state --- - const panelRef = useRef(null); - const draggingRef = useRef(false); - const dragStartRef = useRef({ x: 0, y: 0 }); - - const handleDragStart = useCallback((e: React.MouseEvent) => { - // Don't start drag if clicking the close button - if ((e.target as HTMLElement).closest('button')) return; - draggingRef.current = true; - dragStartRef.current = { x: e.clientX, y: e.clientY }; - e.preventDefault(); - }, []); - - useEffect(() => { - const onMouseMove = (e: MouseEvent) => { - if (!draggingRef.current) return; - const panel = panelRef.current; - if (!panel) return; - const dx = e.clientX - dragStartRef.current.x; - const dy = e.clientY - dragStartRef.current.y; - const rect = panel.getBoundingClientRect(); - panel.style.left = `${rect.left + dx}px`; - panel.style.top = `${rect.top + dy}px`; - panel.style.right = 'auto'; - panel.style.bottom = 'auto'; - dragStartRef.current = { x: e.clientX, y: e.clientY }; - }; - const onMouseUp = () => { - draggingRef.current = false; - }; - document.addEventListener('mousemove', onMouseMove); - document.addEventListener('mouseup', onMouseUp); - return () => { - document.removeEventListener('mousemove', onMouseMove); - document.removeEventListener('mouseup', onMouseUp); - }; - }, []); - - if (!showStats && import.meta.env.PROD) { - return ( - - ); - } - - return ( -
- {/* Draggable header */} -
-

Performance Stats

- -
- -
-
- Total messages: - {stats.totalMessages} -
- -
- Rendered: - {stats.renderedMessages} -
- - {stats.virtualizationEnabled && ( -
- Skipped: - - {stats.totalMessages - stats.renderedMessages} - -
- )} - -
- Virtualization: - - {stats.virtualizationEnabled ? '✓ Enabled' : '✗ Disabled'} - -
- - {stats.virtualizationEnabled && ( -
- - âš¡ Rendering {((stats.renderedMessages / stats.totalMessages) * 100).toFixed(0)}% of messages - -
- )} -
-
- ); -}