Overleaf/services/web/frontend/js/features/chat/components/message.js

import React from 'react'
import PropTypes from 'prop-types'
import ColorManager from '../../../ide/colors/ColorManager'
import MessageContent from './message-content'

function Message({ message, userId }) {
  const {
    chatMessageBorderSaturation,
    chatMessageBorderLightness,
    chatMessageBgSaturation,
    chatMessageBgLightness
  } = window.uiConfig

  function hue(user) {
    return user ? ColorManager.getHueForUserId(user.id) : 0
  }

  function getMessageStyle(user) {
    return {
      borderColor: `hsl(${hue(
        user
      )}, ${chatMessageBorderSaturation}, ${chatMessageBorderLightness})`,
      backgroundColor: `hsl(${hue(
        user
      )}, ${chatMessageBgSaturation}, ${chatMessageBgLightness})`
    }
  }

  function getArrowStyle(user) {
    return {
      borderColor: `hsl(${hue(
        user
      )}, ${chatMessageBorderSaturation}, ${chatMessageBorderLightness})`
    }
  }

  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