大多数的app已经加入了社交元素，会话界面用到的还是瞒多的，就一块封装了进去

如果想自定义气泡颜色，修改.aui-chat-receiver-cont背景和.aui-chat-left-triangle的border-color

.aui-chat-sender为发送消息的容器，也就是你的

.aui-chat-receiver为接受到的消息容器

.history-date 定义了个时间的效果，可以结合p标签来使用

<div class="aui-content aui-content-padded">
    <p class="aui-text-center history-date">7-16 20:00</p>
    <div class="aui-chat-sender">
        <div class="aui-chat-sender-avatar"><img src="https://atts.w3cschool.cn/attachments/image/cimg/demo1.png"></div>
        <div class="aui-chat-sender-cont">
            <div class="aui-chat-right-triangle"></div>
            <span>Hello!!</span>
        </div>
    </div>
    <div class="aui-chat-receiver">
        <div class="aui-chat-receiver-avatar"><img src="https://atts.w3cschool.cn/attachments/image/cimg/demo2.png"></div>
        <div class="aui-chat-receiver-cont">
            <div class="aui-chat-left-triangle"></div>
            <span>你好！</span>
        </div>
    </div>
</div>