diff --git a/src/components/ChatTranscript/ChatTranscript.tsx b/src/components/ChatTranscript/ChatTranscript.tsx
index 8856fa3..ef0a922 100644
--- a/src/components/ChatTranscript/ChatTranscript.tsx
+++ b/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.
-
+
)
})}
diff --git a/src/components/Message/Message.test.tsx b/src/components/Message/Message.test.tsx
index 2708459..f1f6810 100644
--- a/src/components/Message/Message.test.tsx
+++ b/src/components/Message/Message.test.tsx
@@ -24,19 +24,37 @@ const mockReceivedMessage: ReceivedMessage = {
describe('Message', () => {
test('renders unsent message text', () => {
- render()
+ render(
+
+ )
screen.getByText(mockUnsentMessage.text)
})
test('renders received message text', () => {
- render()
+ render(
+
+ )
screen.getByText(mockReceivedMessage.text)
})
test('renders message author', () => {
- render()
+ render(
+
+ )
screen.getByText(funAnimalName(mockUserId))
})
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
index 93b5d54..5797f60 100644
--- a/src/components/Message/Message.tsx
+++ b/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 (
-
- {message.authorId}
-
+ {showAuthor && (
+
+ {message.authorId}
+
+ )}