Criação de Layout Bate-papo

Preciso desenvolver um layout em html, css e javascript para atender uma demanda pontual.
Em poucas palavras, é uma layout no formato de bate-papo.  De forma mais específica é um modelo de WhatsApp web.
O desenvolvedor receberá as telas em PS.
Serão 3 telas:
- Tela do bate-papo | 1 coluna com os chats que e 1 coluna com a conversa ativa
> Deve ser definito o style para mensagem do atendente e style diferente para mensagem do cliente. Form para envio de mensagens.
- Tela de arquivos | 1 coluna com todos os chats arquivados e 1 coluna com a conversa ativa.
> O layout será próximo a tela de bate papo do cliente. O que mudará será a troca de nome do cliente para o número do protocolo.
- Tela de informações | Informações do usuário que está logado.
> Será exibido informações básicas do operador, como nome, email e a possibilidade da troca de senha.

Como definido anteriormente, serão telas relacionados a um sistema de bate-papo. Será desenhado apenas o front-end. A programação destas telas em linguagem conecta a banco de dados não está incluído neste projeto.


O que precisa ser entregue:
- Arquivos abertos em html, css e js

o bootstrap pode ser usado!

modelo próximo: https://themesdesign.in/vhato/layouts/index.html