CSS for message with picture

components.chat-like.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames:['chat-box']
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  friendImage: "http://www.hdfreewallpapers.in/uploads/cache/1126823654/beautiful-pretty-girl-cute-face-red-lipstick-08qL-715x500-MM-100.jpg",
  userImage: "http://images.mentalfloss.com/sites/default/files/styles/article_640x430/public/catffaceheader.jpg",
  messages:[],
  actions:{
    addMessage(){
      let messages = this.get('messages');
      let isUser = this.get('isUser');
      let sameUser = false;
      if(messages.length > 0){
        if(messages[messages.length-1].isUser === isUser){
          sameUser = true;
        }
      }
      let text = this.get('text');
      let userImage = this.get('userImage');
      let friendImage = this.get('friendImage');
      messages.pushObject({
        isUser:isUser,
        text: text,
        image:isUser? userImage: friendImage,
        sameUser:sameUser
      });
      this.set('text',null);
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.chat-box{
  background-color:lightgrey;
  width:400px;
  padding:10px;
  height: 500px;
  overflow-y:auto;
  display:flex;
  justify-content: flex-start;
  flex-direction: column;
}
.user-box{
  position:relative;
  text-align:right;
  max-width:200px;
  background-color:#67a567;
  padding:10px 50px 10px 10px;
  border-radius:5px;
  margin: 30px 20px 0px auto;
  font-size:0.8em;
  color:white;
  justify-content: flex-end;
}
.user-box.without-image {
  padding:10px 10px 10px 10px;  
  margin: 10px 20px 0px auto;
}
.message-box{
  position:relative;
  max-width:200px;
  background-color:white;
  padding:10px 10px 10px 50px;
  border-radius:5px;
  margin: 30px auto 0px 20px;
  font-size:0.8em;
  color:#666;
}
.message-box.without-image {
  padding:10px 10px 10px 10px;  
  margin: 10px auto 0px 20px;
}
.user-pic{
  position:absolute;
  top:-15px;
  right:-25px;
  height:50px;
  width:50px; 
  border-radius:50%;
  border:5px solid lightgrey;
}
.friend-pic{
  position:absolute;
  top:-15px;
  left:-25px;
  height:50px;
  width:50px;  
  border-radius:50%;
  border:5px solid lightgrey;
}

templates.application.hbs

{{chat-like messages=messages}}
<br>
<img src={{userImage}} width=25 height=25> User image:<input type="text" value={{userImage}} onchange={{action (mut userImage) value="target.value"}}>
<br>
<img src={{friendImage}} width=25 height=25> Friend image:<input type="text"  value={{friendImage}} onchange={{action (mut friendImage) value="target.value"}}> 
<br>
Message:<input type="text" value={{text}} onchange={{action (mut text) value="target.value"}}>
is User? <input type="checkbox" onchange={{action (mut isUser) value="target.checked"}}> 
<button {{action "addMessage"}}>Add</button>

templates.components.chat-like.hbs

{{#each messages as |m|}}
  {{#if m.isUser}}
    <div class="user-box {{if m.sameUser "without-image"}}">
    {{#unless m.sameUser}}
  <img class="user-pic" src={{m.image}}>
  {{/unless}}
  {{m.text}}
  </div>
  {{else}}
  <div class="message-box {{if m.sameUser "without-image"}}">
    {{#unless m.sameUser}}
  <img class="friend-pic" src={{m.image}}>
  {{/unless}}
  {{m.text}}
  </div>
  {{/if}}
{{/each}}

twiddle.json

{
  "version": "0.9.3",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  }
}