Fix chat array not being properly appended to

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -43,6 +43,7 @@ export default function ChatContainer(props: Props) {
             showModeratorMenu={isModerator} // Moderators have access to an additional menu
             highlightString={usernameToHighlight} // What to highlight in the message
             renderAsPersonallySent={message.user?.id === chatUserId} // The local user sent this message
+            key={message.id}
           />
         );
       case MessageType.NAME_CHANGE:
@@ -55,12 +56,13 @@ export default function ChatContainer(props: Props) {
   const MessagesTable = useMemo(
     () => (
       <Virtuoso
-        style={{ height: '80vh' }}
+        style={{ height: '70vh' }}
         ref={chatContainerRef}
-        initialTopMostItemIndex={999}
+        initialTopMostItemIndex={999} // Force alignment to bottom
         data={messages}
         itemContent={(index, message) => getViewForMessage(message)}
-        followOutput="smooth"
+        followOutput="auto"
+        alignToBottom
       />
     ),
     [messages, usernameToHighlight, chatUserId, isModerator],

web/components/stores/ClientConfigStore.tsx

@@ -20,7 +20,6 @@ import {
   SocketEvent,
 } from '../../interfaces/socket-events';
 
-import handleChatMessage from './eventhandlers/handleChatMessage';
 import handleConnectedClientInfoMessage from './eventhandlers/connected-client-info-handler';
 import ServerStatusService from '../../services/status-service';
 import handleNameChangeEvent from './eventhandlers/handleNameChangeEvent';
@@ -256,7 +255,8 @@ export function ClientConfigStore() {
         );
         break;
       case MessageType.CHAT:
-        handleChatMessage(message as ChatEvent, chatMessages, setChatMessages);
+        setChatMessages(currentState => [...currentState, message as ChatEvent]);
+
         break;
       case MessageType.NAME_CHANGE:
         handleNameChangeEvent(message as ChatEvent, chatMessages, setChatMessages);
@@ -269,8 +269,7 @@ export function ClientConfigStore() {
   const getChatHistory = async () => {
     try {
       const messages = await ChatService.getChatHistory(accessToken);
-      const updatedChatMessages = [...messages, ...chatMessages];
-      setChatMessages(updatedChatMessages);
+      setChatMessages(currentState => [...currentState, ...messages]);
     } catch (error) {
       console.error(`ChatService -> getChatHistory() ERROR: \n${error}`);
     }

web/components/stores/eventhandlers/handleChatMessage.ts

@@ -1,11 +0,0 @@
-import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { ChatEvent } from '../../../interfaces/socket-events';
-
-export default function handleChatMessage(
-  message: ChatEvent,
-  messages: ChatMessage[],
-  setChatMessages,
-) {
-  const updatedMessages = [...messages, message];
-  setChatMessages(updatedMessages);
-}