<div [class]="alignRight? 'message right-message' : 'message left-message'">
  <div class="message-header">
    <img *ngIf="image" class="image" [src]="image" (error)="image = fallbackImage" [style.border-color]="color" />
    <span *ngIf="username" class="username">{{username}}</span>
    <span *ngIf="timestamp" class="timestamp">{{timestamp}}</span>
  </div>

  <div class="message-body-container">
    <div>
      <div class="message-body" [style.background-color]="color" [style.border-color]="color">
        <span [innerHTML]="message"></span>
      </div>
    </div>
  </div>
</div>

./chat-message.component.scss

:host{
  display: block;
  margin-top: 2px;
  margin-bottom: 2px;
}

$arrow-size: .4em;

.right-message {
  text-align: end;
}

.message-header{
  display:flex;
  text-emphasis: none;
  font-style: italic;
  font-size: .7em;
  align-items: center;
  margin-bottom: .5em;

  .image {
    height: 30px;
    border-radius: 50%;
    border: 2px solid red;
  }
  .username {
    font-weight: bold;
  }
}
.right-message > .message-header {
  flex-direction: row-reverse;
  margin-right: 1px;

  .image {
    margin-left: 5px;
  }
  .username {
    margin-left: 5px;
  }
}
.left-message > .message-header {
  margin-left: 1px;
  .image {
    margin-right: 5px;
  }
  .username {
    margin-right: 5px;
  }
}


.message-body-container {
  display: flex;
}
.right-message > .message-body-container {
  flex-direction: row-reverse;
}


.message-body{
  display: inline-block;
  position: relative;
  border-radius: .4em;
  padding: 3px;
  font-style: normal;
  font-size: 1em;
  text-align: start;
  min-width: 5 * $arrow-size;

  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.left-message .message-body:after {
  content: "";
  position: absolute;
  left: 2 * $arrow-size;
  top: -$arrow-size;
  border-bottom: $arrow-size solid black;
  border-bottom-color: inherit;

  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
}

.right-message .message-body:after {
  content: "";
  position: absolute;
  right: 2 * $arrow-size;
  top: -$arrow-size;
  border-bottom: $arrow-size solid black;
  border-bottom-color: inherit;

  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
}