From 2c1624127a54b19529caa8116eed6162a6166d30 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 9 Aug 2022 20:58:10 -0700
Subject: [PATCH] Fix message collapsing incorrectly. Closes #2001

---
 web/components/chat/ChatContainer/ChatContainer.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 2e367078d..9f969f63f 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -1,6 +1,6 @@
 import { Button } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
-import { useState, useMemo, useRef } from 'react';
+import { useState, useMemo, useRef, CSSProperties } from 'react';
 import { EditFilled, VerticalAlignBottomOutlined } from '@ant-design/icons';
 import {
   ConnectedClientInfoEvent,
@@ -63,7 +63,10 @@ export default function ChatContainer(props: Props) {
   const getConnectedInfoMessage = (message: ConnectedClientInfoEvent) => {
     const modStatusUpdate = checkIsModerator(message);
     if (!modStatusUpdate) {
-      return null;
+      // Important note: We can't return null or an element with zero width
+      // or zero height. So to work around this we return a very small 1x1 div.
+      const st: CSSProperties = { width: '1px', height: '1px' };
+      return <div style={st} />;
     }
 
     // Alert the user that they are a moderator.
@@ -146,12 +149,15 @@ export default function ChatContainer(props: Props) {
   );
 }
 
-function isSameUserAsLast(messages: ChatMessage[], index: number) {
+function isSameUserAsLast(messages: ChatMessage[], index: number): boolean {
   const message = messages[index];
   const {
     user: { id },
   } = message;
   const lastMessage = messages[index - 1];
+  if (lastMessage.type !== MessageType.CHAT) {
+    return false;
+  }
 
   return id === lastMessage?.user.id;
 }