🐛(frontend) reset chat state when the ChatProvider mounts

Reset the chat state on the first render of the ChatProvider, to
make sure no chat messages from a previous room leak into the new
one.

This covers SPA navigations where the user switches from one room
to another without a full page reload.

src/frontend/src/features/chat/components/ChatProvider.tsx

@@ -3,7 +3,7 @@ import { ref } from 'valtio'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import React, { useEffect } from 'react'
 import { useChat, useRoomContext } from '@livekit/components-react'
-import { appendRow, chatStore } from '@/stores/chat'
+import { appendRow, chatStore, resetChatStore } from '@/stores/chat'
 import type { ChatMessage } from '@livekit/components-core'
 import {
   LocalParticipant,
@@ -19,6 +19,10 @@ export const ChatProvider = () => {
 
   const room = useRoomContext()
 
+  useEffect(() => {
+    resetChatStore()
+  }, [])
+
   // Tigger the message notification (temporary)
   useEffect(() => {
     // TEMPORARY: This is a brittle workaround that relies on message count tracking

src/frontend/src/features/layout/hooks/useSpeakerPromotionTrigger.ts

@@ -19,7 +19,7 @@ import { useEffect, useReducer, useRef } from 'react'
  * `useTracks(..., { updateOnlyOn: [] })` upstream.
  */
 export function useSpeakerPromotionTrigger(
-  sortedTiles: TrackReferenceOrPlaceholder[],
+  sortedTiles: TrackReferenceOrPlaceholder[]
 ) {
   const room = useRoomContext()
   const [, forceRender] = useReducer((n: number) => n + 1, 0)

src/frontend/src/stores/chat.ts

@@ -22,14 +22,16 @@ type State = {
   textAreaValue: string
 }
 
-export const chatStore = proxy<State>({
+const initialState: State = {
   unreadMessages: 0,
   isSending: false,
   rows: [],
   names: {},
   send: undefined,
   textAreaValue: '',
-})
+}
+
+export const chatStore = proxy<State>({ ...initialState })
 
 const GROUPING_WINDOW_MS = 60_000
 
@@ -60,3 +62,12 @@ export const persistTextAreaValue = (value: string) => {
 export const clearTextAreaValue = () => {
   chatStore.textAreaValue = ''
 }
+
+export function resetChatStore() {
+  console.count('resetChatStore')
+  Object.assign(chatStore, {
+    ...initialState,
+    rows: [],
+    names: {},
+  })
+}