feat: [closes #32] group messages under peer names

src/components/ChatTranscript/ChatTranscript.tsx

@@ -49,12 +49,20 @@ export const ChatTranscript = ({
         paddingY: theme.spacing(1),
       })}
     >
-      {messageLog.map(message => {
+      {messageLog.map((message, idx) => {
+        const previousMessage = messageLog[idx - 1]
+        const isFirstMessageInGroup =
+          previousMessage?.authorId !== message.authorId
+
         return (
           // This wrapper div is necessary for accurate layout calculations
           // when new messages cause the transcript to scroll to the bottom.
           <div key={message.id}>
-            <Message message={message} userId={userId} />
+            <Message
+              message={message}
+              userId={userId}
+              showAuthor={isFirstMessageInGroup}
+            />
           </div>
         )
       })}

src/components/Message/Message.test.tsx

@@ -24,19 +24,37 @@ const mockReceivedMessage: ReceivedMessage = {
 
 describe('Message', () => {
   test('renders unsent message text', () => {
-    render(<Message message={mockUnsentMessage} userId={mockUserId} />)
+    render(
+      <Message
+        message={mockUnsentMessage}
+        userId={mockUserId}
+        showAuthor={false}
+      />
+    )
 
     screen.getByText(mockUnsentMessage.text)
   })
 
   test('renders received message text', () => {
-    render(<Message message={mockReceivedMessage} userId={mockUserId} />)
+    render(
+      <Message
+        message={mockReceivedMessage}
+        userId={mockUserId}
+        showAuthor={false}
+      />
+    )
 
     screen.getByText(mockReceivedMessage.text)
   })
 
   test('renders message author', () => {
-    render(<Message message={mockReceivedMessage} userId={mockUserId} />)
+    render(
+      <Message
+        message={mockReceivedMessage}
+        userId={mockUserId}
+        showAuthor={true}
+      />
+    )
 
     screen.getByText(funAnimalName(mockUserId))
   })

src/components/Message/Message.tsx

@@ -26,6 +26,7 @@ import './Message.sass'
 
 export interface MessageProps {
   message: IMessage
+  showAuthor: boolean
   userId: string
 }
 
@@ -71,7 +72,7 @@ const componentMap = {
   },
 }
 
-export const Message = ({ message, userId }: MessageProps) => {
+export const Message = ({ message, showAuthor, userId }: MessageProps) => {
   let backgroundColor: string
 
   if (message.authorId === userId) {
@@ -84,15 +85,17 @@ export const Message = ({ message, userId }: MessageProps) => {
 
   return (
     <Box className="Message">
-      <Typography
+      {showAuthor && (
-        variant="caption"
+        <Typography
-        display="block"
+          variant="caption"
-        sx={{
+          display="block"
-          textAlign: message.authorId === userId ? 'right' : 'left',
+          sx={{
-        }}
+            textAlign: message.authorId === userId ? 'right' : 'left',
-      >
+          }}
-        <PeerNameDisplay>{message.authorId}</PeerNameDisplay>
+        >
-      </Typography>
+          <PeerNameDisplay>{message.authorId}</PeerNameDisplay>
+        </Typography>
+      )}
       <Box
         sx={{
           color: 'primary.contrastText',