Message.jsx

import React from 'react';

function Message({ sender, message }) {
  // #################################
  // HOOKS
  // #################################


  // #################################
  // FUNCTIONS
  // #################################
  // TODO: use tailwind merge
  // AI css
  let tilePosition = '';
  let tileColor = 'bg-UhhGrey';
  let tileBorder = 'rounded-bl-none';
  let tileMargin = 'mr-8';
  let senderClasses = 'text-UhhLightGrey';
  let messageClasses = 'text-UhhWhite';

  // user css
  if (sender === 'human') {
    tilePosition = 'justify-end';
    tileColor = 'bg-UhhLightGrey';
    tileBorder = 'rounded-br-none';
    tileMargin = 'ml-8';
    senderClasses = 'text-UhhGrey';
    messageClasses = 'text-UhhGrey';
  }

  // #################################
  // OUTPUT
  // #################################
  return (
    <div className={`flex ${tilePosition}`} >
      <div className={`p-3 mx-3 my-1 rounded-2xl ${tileBorder} ${tileColor} ${tileMargin}`}>
        <div className={`text-xs flex justify-between ${senderClasses}`} >
          <div>{sender}</div>
        </div>
        <div className={`${messageClasses} whitespace-pre-line`}>
          {message}
        </div>

      </div>
    </div>
  );
}

export default React.memo(Message);