大多數(shù)的app已經(jīng)加入了社交元素，會(huì)話界面用到的還是瞞多的，就一塊封裝了進(jìn)去

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

.aui-chat-sender為發(fā)送消息的容器，也就是你的

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

.history-date 定義了個(gè)時(shí)間的效果，可以結(jié)合p標(biāo)簽來(lái)使用

<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>