Edit in JSFiddle

Любые решения на HTML, JS, php, canvas, svg....<br>
skype: politon81<br>
e-mail: oleg@polityko.ru<br>
<a href="https://toster.ru/user/politon">Профиль на toster.ru</a>

<div id="test">
<div class="avatar"><div id="closed" class="closed"></div>
   <div id="ava" class="ava"></div>
   <div class="fio">
        Гавриил Гавриилович
   </div>
   <div class="thepost">
        дЫрэктар
   </div>
   <div id="print">
   печатает
   </div>
 </div>
  <div id="messgeAll"class="contText">
    <div id="dialog">
     
    </div>
  </div>
<div class="textinter">
<input id="message" type="text" class="inp" placeholder="Введите сообщение ">
<input id="messClcik" value="ОК" class="butt" type="button">
</div>
</div>
#test{
  position:fixed;
  width:230px;
  height:300px;
  border:5px solid #466991;
  bottom:0;
  right:5px;
  border-radius:10px;
  animation: show 2s 2s both ease-in-out;
  overflow:hidden;
}
@keyframes show {
from {
 height:0px;
}
to {
  height:300px;
}
}
.avatar{
  width:230px;
  height:50px;
  background:#466991;
  color:#fff;
}
.ava{
  padding-top:5px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:url('http://a.deviantart.net/avatars/a/u/austin1297.jpg');
  background-size:cover;
  float:left;
  margin-right:5px;
}
#print{
  animation: printO 1s linear infinite;
  font-size:12px;
  padding:0;
  display:none;
}
@keyframes printO {
  from { background:#00FF11;}
  to { background:#466991;}
}
.fio{
  font-size:16px;
  
}
.thepost{
  font-size:14px;
}
.closed{
}
.closed:before{
  position:absolute;
  content:"–";
  font-weight:bold;
  top:0;
  right:5px;
  font-size:25px;
  cursor:pointer;
}
.contText{
  position:relative;
  height:225px;
  word-wrap:break-word;
  overflow:auto;
  
}
.dialog{
  position:absolute;
  bottom:0;
}
.owner,.user{
  width:180px;
  border-radius:10px;
  padding:4px;
  margin:2px 0;
}
.owner{
  float:left;
  background:#CEE7EC;
  
}
.user{
  float:right;
  background:#FFEEDE;
}
.textinter{

}
.inp{
  float:left;
  width:185px;
  margin-left:1px;
  border-radius:5px 0 0 5px;
}
.butt{
  background:green;
  border:solid 1px green;
  border-radius:0 5px 5px 0;
  color:#fff;
  
}
var dialog = document.getElementById("dialog");
var mess = document.createElement('div');
var text = "Доброго времени. Чем могу помочь?";
var textNode = document.createTextNode(text);
setTimeout(function() {
mess.appendChild(textNode);
dialog.appendChild(mess);
dialog.className = "owner";
}, 4000);
var butonSend = document.getElementById("messClcik");
var messgeAll = document.getElementById("messgeAll");

butonSend.onclick = function() {
  var theDiv = document.createElement('div');
  var userMessage = document.getElementById("message");
  if(userMessage.value != ''){
  document.getElementById('ava').style="background:url('http://vamotkrytka.ru/_ph/80/2/15311132.gif');background-size:cover; "
  document.getElementById('print').style= "display:block";
  theDiv.innerHTML = userMessage.value; 
  theDiv.className = "user";
  messgeAll.appendChild(theDiv);
  setTimeout(function() {
var answear = "привет, У Володи Путина спроси, да ну нах.., как так?, я ушел, завтра пиши, дорого, еп те, по клавишам не попадаю, ты бухой?, иди проспись пьянь!";
var arr = answear.split(', ');
var rand = Math.floor(Math.random() * arr.length);
var newOwner = document.createElement('div');
      newOwner.innerHTML = arr[rand]; 
      newOwner.className = "owner";
      messgeAll.appendChild(newOwner);
      document.getElementById('ava').style="";
      document.getElementById('print').style= "display:none";
    }, 4000);

  return true;
  }else{
     return false;
  }
}