chat-messages.hbs

{{#each messages as |message|}}
    {{chat-message message=message
                   messageStatusUpdate="onMessageStatusUpdate"}}
{{/each}}

gistfile1.txt

<div class="message-wrap">
    <div class="message">
       <p>{{{message.content}}}</p>
     </div>

    <div class="meta">
        {{#if message.isSent}}
            {{chat-message-time date=message.createdAt}}
        {{/if}}

        {{#if message.failedToUpload}}
            <div class="retry">
                <span>Message delivery failed.</span>
                <button {{action "retryUpload"}}>Try again</button> 
            </div>
        {{/if}}
    </div>
</div>

message-component.js

import Ember from 'ember';

const { run, Component } = Ember;

export default Component.extend({
  tagName: 'li',
 
  didRender: function() {
    if (this.get('message.failedToUpload')) {
      this.sendAction('messageStatusUpdate', this.get('message'));
    }
  },

  actions: {}
});

messages-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'ol',
  classNames: ['discussion'],

  didRender: function() {
    this.scrollToBottom();
  },

  scrollToBottom: function() {
    let componentScrollHeight = this.get('element').scrollHeight;
    this.$().parent().scrollTop(componentScrollHeight);
  },

  actions: {
    /**
     * If message is last in collection we srcoll to bottom
     * to accomodate for the retry meta status bar height.
     */
    onMessageStatusUpdate(message) {
      if (this.get('messages.lastObject') === message) {
        this.scrollToBottom();
      }
    },
  },
});