overleaf/services/web/frontend/js/features/chat/components/message.js
Eric Mc Sween 2138bd2a80 Merge pull request #3680 from overleaf/as-em-tm-remove-uiconfig
Remove unused uiConfig global variable from frontend and tests

GitOrigin-RevId: 390abdc097cd9904f7a1c1849e58baf70bea5c72
2021-02-23 03:04:39 +00:00

59 lines
1.5 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import ColorManager from '../../../ide/colors/ColorManager'
import MessageContent from './message-content'
function Message({ message, userId }) {
function hue(user) {
return user ? ColorManager.getHueForUserId(user.id) : 0
}
function getMessageStyle(user) {
return {
borderColor: `hsl(${hue(user)}, 85%, 40%)`,
backgroundColor: `hsl(${hue(user)}, 85%, 40%`
}
}
function getArrowStyle(user) {
return {
borderColor: `hsl(${hue(user)}, 85%, 40%)`
}
}
const isMessageFromSelf = message.user ? message.user.id === userId : false
return (
<div className="message-wrapper">
{!isMessageFromSelf && (
<div className="name">
<span>{message.user.first_name || message.user.email}</span>
</div>
)}
<div className="message" style={getMessageStyle(message.user)}>
{!isMessageFromSelf && (
<div className="arrow" style={getArrowStyle(message.user)} />
)}
<div className="message-content">
{message.contents.map((content, index) => (
<MessageContent key={index} content={content} />
))}
</div>
</div>
</div>
)
}
Message.propTypes = {
message: PropTypes.shape({
contents: PropTypes.arrayOf(PropTypes.string).isRequired,
user: PropTypes.shape({
id: PropTypes.string,
email: PropTypes.string,
first_name: PropTypes.string
})
}),
userId: PropTypes.string.isRequired
}
export default Message