Никаких технологий кроме базовых 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>
Но если очень хочется всегда можно найти готовую библиотеку для этого.
