#{list msges}
<div class="row" >
    <div class="widget-chat-item  #{if _.msgSender.id == user.id } right #{/if} #{else}with-media left #{/else} ">
        #{if _.msgSender.id != user.id }
            <div class="widget-chat-media">
                <img alt="" src="../assets/img/user/user-1.jpg">
            </div>
        #{/if}
        <div class="widget-chat-info">
            <div class="widget-chat-info-container">
                    <div class="widget-chat-name text-indigo">  #{if _.msgSender.id != user.id }${_.msgSender.getFullName()} #{/if}</div>

                <div class="widget-chat-message">${_.msgContent} </div>
                <br/>
                <div class="widget-chat-time">
                    <div class="text-muted f-s-11">
                        <time class="timeago" datetime=${_.sendDate}></time>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
#{/list}


<script>

    if($("#txtFirstLoad").val() == '1') {
        $(".widget-chat-body").animate({scrollTop: $('.widget-chat-body').prop("scrollHeight")}, 10);
    }
    $("#txtFirstLoad").val('');

    jQuery(function ($) {


        jQuery.timeago.settings.allowFuture = true;
        jQuery("time.timeago").timeago();


        setTimeout(function(){
            var listDocAction = #{jsAction @controllers.Documents.listMessages(':documentId')/}
                    $("#listMessages").load(listDocAction({documentId: $("#imgID").val()}), function () {
                        //if no new messages dont refresh!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                        $("#listMessages").show();

                    })

        }, 2000);

    });
</script>