"Web Chat UI With MathJax"
Bootstrap 4.0.0 Snippet by yingshaoxo

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <style> .center { /* this will keep the content center */ position: absolute; right: 0; left: 0; margin: auto; } .msg-group { position: absolute; max-width: 720px; height: 92%; overflow-y: scroll; /*if the content beyond width and height, use the scrollbar*/ } .card { padding: 10px 0 10px 0; } .input-group { position: absolute; height: 8%; bottom: 0; } .btn { height:100%; } </style> <body> <div class="container-flude"> <div class="msg-group center"> <div class="card"> <div class="card-body"> <h6 class="card-subtitle mb-2 text-muted text-left">yingshaoxo</h6> <p class="card-text float-left">Hi ~</p> </div> </div> <div class="card"> <div class="card-body"> <h6 class="card-subtitle mb-2 text-muted text-right">yingshaoxo</h6> <p class="card-text float-right">Welcome to here!</p> </div> </div> </div> <div class="input-group"> <textarea id="input-box" class="form-control" rows="1" placeholder="Say something..."></textarea> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">send</button> </span> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"> </script> <script> class chat_control { constructor() { this.msg_list = $('.msg-group'); } send_msg(name, msg) { this.msg_list.append(this.get_msg_html(name, msg, 'right')); this.scroll_to_bottom(); } receive_msg(name, msg) { this.msg_list.append(this.get_msg_html(name, msg, 'left')); this.scroll_to_bottom(); } get_msg_html(name, msg, side) { var msg_temple = ` <div class="card"> <div class="card-body"> <h6 class="card-subtitle mb-2 text-muted text-${side}">${name}</h6> <p class="card-text float-${side}">${msg}</p> </div> </div> `; return msg_temple; } scroll_to_bottom() { this.msg_list.scrollTop(this.msg_list[0].scrollHeight); } } var chat = new chat_control(); chat.receive_msg('yingshaoxo', 'This was made for you! \`2017/(520*1314)\`'); send_button = $('button') // get jquery element from html table name input_box = $('#input-box') // get jquery element from div id // also you could get it by $('.form-control') or $('textarea') function handle_msg(msg) { msg = msg.trim() msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br>') return msg } function send_msg() { msg = handle_msg(input_box.val()); if (msg != '') { chat.send_msg('you', msg); input_box.val(''); setTimeout(function(){ chat.receive_msg('yingshaoxo', 'I can hear you.'); }, 1000); MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } } function box_key_pressing() { // control + enter was pressed if ((event.keyCode === 10 || event.keyCode === 13) && event.ctrlKey) { send_msg(); } // esc was pressed if (event.keyCode === 27) { input_box.blur(); } } send_button.on('click', send_msg.bind()); input_box.on('keyup', box_key_pressing.bind()); </script> </body> </html>

Related: See More

Vue Argon Design System
Message Chat Box
Elegant Bootstrap 4 message chat box template
Open in chat (popup-box chat-popup)

Questions / Comments: