<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right side-chat">
    <div class="header">
        <h3>Chat</h3>
    </div>
    <div class="sub-header">
        <div class="icon"><i class="fa fa-user"></i></div> <p>Online (4)</p>
    </div>
    <div class="content">
        <p class="title">Family</p>
        <ul class="nav nav-pills nav-stacked contacts">
            <li class="online"><a href="#"><i class="fa fa-circle-o"></i> Michael Smith</a></li>
            <li class="online"><a href="#"><i class="fa fa-circle-o"></i> John Doe</a></li>
            <li class="online"><a href="#"><i class="fa fa-circle-o"></i> Richard Avedon</a></li>
            <li class="busy"><a href="#"><i class="fa fa-circle-o"></i> Allen Collins</a></li>
        </ul>

        <p class="title">Friends</p>
        <ul class="nav nav-pills nav-stacked contacts">
            <li class="online"><a href="#"><i class="fa fa-circle-o"></i> Jaime Garzon</a></li>
            <li class="outside"><a href="#"><i class="fa fa-circle-o"></i> Dave Grohl</a></li>
            <li><a href="#"><i class="fa fa-circle-o"></i> Victor Jara</a></li>
        </ul>   

        <p class="title">Work</p>
        <ul class="nav nav-pills nav-stacked contacts">
            <li><a href="#"><i class="fa fa-circle-o"></i> Ansel Adams</a></li>
            <li><a href="#"><i class="fa fa-circle-o"></i> Gustavo Cerati</a></li>
        </ul>

    </div>
    <div id="chat-box">
        <div class="header">
            <span>Richard Avedon</span>
            <a class="close"><i class="fa fa-times"></i></a>
        </div>
        <div class="messages nano nscroller">
            <div class="content">
                <ul class="conversation">
                    <li class="odd">
                        <p>Hi Jane, how are you?</p>
                    </li>
                    <li class="text-right">
                        <p>Hello I was looking for you</p>
                    </li>
                    <li class="odd">
                        <p>Tell me what you need?</p>
                    </li>
                    <li class="text-right">
                        <p>Sorry, I'm late... see you</p>
                    </li>
                    <li class="odd unread">
                        <p>OK, call me later...</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="chat-input">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Enter a message...">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-primary">Send</button>
                </span>
            </div>
        </div>
    </div>
</nav>