[Aetae]

Никаких технологий кроме базовых html, js и css тут не требуется.

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .container{
    margin: 10px auto;
    position: relative;
    height: 100px;
    width: 304px;
    border: 1px solid gray;
    overflow: hidden;
  }
  #inner{
    position: absolute;
    bottom: 24px;
    left:0;
    width: 100%;
  }
  .message{
    border-radius: 10px;
    padding: 2px 10px;
    margin: 2px;
    background: gray;
    float: right;
    clear: both;
  }
  .input{
    border-top: 1px solid gray;
    position: absolute;
    bottom: 0;
    left:0;
  }
  #input, #send{
    border: none;
    padding: 2px;
    height: 20px;
  }
  #input{
    width: 200px;
  }
  #send{
    width: 100px;
  }
</style>

<div class="container">
  <div id="inner"></div>
  <div class="input">
    <input id="input"/><input id="send" value="Send" type="button"/>
  </div>
  
</div>

<script>
  send.addEventListener('click', function(){
    if(!input.value.trim()) return false;
    
    var msg = document.createElement('div');
    msg.className = 'message';
    msg.appendChild(document.createTextNode(input.value));
    input.value = "";
    inner.appendChild(msg);
  })
</script>

Но если очень хочется всегда можно найти готовую библиотеку для этого.