61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { MessageProps } from '@/features/chat/components/message'
|
|
import { User } from '../../../../../../types/user'
|
|
import { getHueForUserId } from '@/shared/utils/colors'
|
|
import MessageContent from '@/features/chat/components/message-content'
|
|
import classNames from 'classnames'
|
|
|
|
function hue(user?: User) {
|
|
return user ? getHueForUserId(user.id) : 0
|
|
}
|
|
|
|
function getAvatarStyle(user?: User) {
|
|
return {
|
|
borderColor: `hsl(${hue(user)}, 85%, 40%)`,
|
|
backgroundColor: `hsl(${hue(user)}, 85%, 40%`,
|
|
}
|
|
}
|
|
|
|
function Message({ message, fromSelf }: MessageProps) {
|
|
return (
|
|
<div className="chat-message-redesign">
|
|
<div className="message-row">
|
|
<div className="message-avatar-placeholder" />
|
|
{!fromSelf && (
|
|
<div className="message-author">
|
|
<span>{message.user.first_name || message.user.email}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{message.contents.map((content, index) => (
|
|
<div key={index} className="message-row">
|
|
<>
|
|
{!fromSelf && index === message.contents.length - 1 ? (
|
|
<div className="message-avatar">
|
|
<div className="avatar" style={getAvatarStyle(message.user)}>
|
|
{message.user.first_name?.charAt(0) ||
|
|
message.user.email.charAt(0)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="message-avatar-placeholder" />
|
|
)}
|
|
<div
|
|
className={classNames('message-container', {
|
|
'message-from-self': fromSelf,
|
|
'first-row-in-message': index === 0,
|
|
'last-row-in-message': index === message.contents.length - 1,
|
|
})}
|
|
>
|
|
<div className="message-content">
|
|
<MessageContent content={content} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Message
|