);
};
const getUserJoinedMessage = (message: ChatMessage) => {
const { user } = message;
const { displayName, displayColor } = user;
const color = `var(--theme-user-colors-${displayColor})`;
return (
${displayName} joined the chat.`}
/>
);
};
const getConnectedInfoMessage = (message: ConnectedClientInfoEvent) => {
const modStatusUpdate = checkIsModerator(message);
if (!modStatusUpdate) {
// 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 ;
}
// Alert the user that they are a moderator.
return ;
};
const getViewForMessage = (
index: number,
message: ChatMessage | NameChangeEvent | ConnectedClientInfoEvent,
) => {
switch (message.type) {
case MessageType.CHAT:
return (
);
case MessageType.NAME_CHANGE:
return getNameChangeViewForMessage(message as NameChangeEvent);
case MessageType.CONNECTED_USER_INFO:
return getConnectedInfoMessage(message);
case MessageType.USER_JOINED:
return getUserJoinedMessage(message as ChatMessage);
default:
return null;
}
};
const MessagesTable = useMemo(
() => (
<>
getViewForMessage(index, message)}
followOutput="auto"
alignToBottom
atBottomStateChange={bottom => setAtBottom(bottom)}
/>
{!atBottom && (
}
onClick={() =>
chatContainerRef.current.scrollToIndex({
index: messages.length - 1,
behavior: 'smooth',
})
}
>
Go to last message