realtime-chat-Chat-3.jsx

{/** CHAT HEADER HERE **/}

<div className="px-4 pb-4 w-100 d-flex flex-row flex-wrap align-items-start align-content-start position-relative" style={{ height: 'calc(100% - 180px)', overflowY: 'scroll' }}>

  {this.state.chats.map((chat, index) => {

    const previous = Math.max(0, index - 1);
    const previousChat = this.state.chats[previous];
    const position = chat.user === this.props.activeUser ? "right" : "left";

    const isFirst = previous === index;
    const inSequence = chat.user === previousChat.user;
    const hasDelay = Math.ceil((chat.timestamp - previousChat.timestamp) / (1000 * 60)) > 1;

    const mood = chat.sentiment > 0 ? HAPPY_EMOJI : (chat.sentiment === 0 ? NEUTRAL_EMOJI : SAD_EMOJI);

    return (
      <Fragment key={index}>

        { (isFirst || !inSequence || hasDelay) && (
          <div className={`d-block w-100 font-weight-bold text-dark mt-4 pb-1 px-1 text-${position}`} style={{ fontSize: '0.9rem' }}>

            <span className="d-block" style={{ fontSize: '1.6rem' }}>{String.fromCodePoint(...mood)}</span>

            <span>{chat.user || 'Anonymous'}</span>

          </div>
        ) }

        <ChatMessage message={chat.message} position={position} />

      </Fragment>
    );

  })}

</div>

{/** CHAT MESSAGE BOX HERE **/}