Make it possible to display message reactions at the bottom of the message

[szuperaz]

Currently, it's only possible with custom CSS code. Example:

@layer defaults {
  @import "stream-chat-angular/src/assets/styles/v2/scss/index.scss";
}

@layer overrides {
  .str-chat__message {
    // Display reactions under the message
    .str-chat__message-inner {
      grid-template-areas:
        "message-bubble options"
        "reactions reactions";
    }
    &.str-chat__message--me {
      .str-chat__message-inner {
        grid-template-areas:
          "options message-bubble"
          "reactions reactions";
      }
    }
  }

  .str-chat__message--with-reactions {
    // Add whitespace after message for separation
    margin-block-end: 0.5rem;

    // Fragile CSS to ensure that avatar is positioned in line with the message bubble
    .str-chat__message-sender-avatar {
      padding-block-end: 32px;
    }
  }
}

The proper solution requires SDK support.

Shortcomings:

• Fragile CSS
• Message grouping isn't perfect, see screenshot