File size: 3,080 Bytes
870b873 907a182 870b873 907a182 870b873 907a182 870b873 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | css = '''
<style>
.chat-message {
padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1rem; display: flex
}
.chat-message.user {
background-color: #2b313e
}
.chat-message.bot {
background-color: #475063
}
.chat-message .avatar {
width: 20%;
}
.chat-message .avatar img {
max-width: 78px;
max-height: 78px;
border-radius: 50%;
object-fit: cover;
}
.chat-message .message {
width: 80%;
padding: 0 1.5rem;
color: #fff;
}
'''
bot_template = '''
<div class="chat-message bot">
<div class="avatar">
<img style='display:block; width:100px;height:100px;' id='base64imageBot'
src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8IS0tIEJhY2tncm91bmQgQ2lyY2xlIC0tPgogIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIiBmaWxsPSIjRkZENzAwIi8+CiAgCiAgPCEtLSBIZWFkIC0tPgogIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjgwIiByPSI1MCIgZmlsbD0iI0ZGRTBCRCIvPgogIAogIDwhLS0gRXllcyAtLT4KICA8Y2lyY2xlIGN4PSI4MCIgY3k9IjcwIiByPSI4IiBmaWxsPSIjMDAwMDAwIi8+CiAgPGNpcmNsZSBjeD0iMTIwIiBjeT0iNzAiIHI9IjgiIGZpbGw9IiMwMDAwMDAiLz4KICAKICA8IS0tIE1vdXRoIC0tPgogIDxwYXRoIGQ9Ik0gNzAgOTAgUSAxMDAgMTIwIDEzMCA5MCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9Im5vbmUiLz4KICAKICA8IS0tIEJvZHkgLS0+CiAgPHJlY3QgeD0iNTAiIHk9IjEzMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI1MCIgZmlsbD0iIzQ2ODJCNCIvPgogIAogIDwhLS0gQXJtcyAtLT4KICA8cmVjdCB4PSIyMCIgeT0iMTMwIiB3aWR0aD0iMzAiIGhlaWdodD0iMTAiIGZpbGw9IiNGRkUwQkQiLz4KICA8cmVjdCB4PSIxNTAiIHk9IjEzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjRkZFMEJEIi8+Cjwvc3ZnPg==' />
</div>
<div class="message">{{MSG}}</div>
</div>
'''
user_template = '''
<div class="chat-message user">
<div class="avatar">
<img style="display: block; width: 100px; height: 100px;" id="base64imageUser"
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjEwMCIgZmlsbD0iI0ZGNjM0NyIvPgogIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjgwIiByPSI1MCIgZmlsbD0iI0ZFRTRCNCIvPgogIAogIDxjaXJjbGUgY3g9IjgwIiBjeT0iNzAiIHI9IjEwIiBmaWxsPSIjRkZGRkZGIi8+CiAgPGNpcmNsZSBjeD0iMTIwIiBjeT0iNzAiIHI9IjEwIiBmaWxsPSIjRkZGRkZGIi8+CiAgPGNpcmxlIGN4PSI4MCIgY3k9IjcwIiByPSI1IiBmaWxsPSIjMDAwMDAwIi8+CiAgPGNpcmxlIGN4PSIxMjAiIGN5PSI3MCIgcj0iNSIgZmlsbD0iIzAwMDAwMCIvPgoKICA8cGF0aCBkPSJNIDcwIDkwIFEgMTAwIDExMCAxMzAgOTAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBmaWxsPSJub25lIi8+CiAKICA8bGluZSB4MT0iMTAwIiB5MT0iMzAiIHgyPSIxMDAiIHkyPSI1MCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjQiLz4KICA8Y2lyY2xlIGN4PSIxMDAiIGN5PSIyNSIgcj0iNSIgZmlsbD0iIzAwMDAwMCIvPgoKICA8cmVjdCB4PSI2MCIgeT0iMTMwIiB3aWR0aD0iODAiIGhlaWdodD0iNjAiIGZpbGw9IiM0NjgyQjQiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI0Ii8+CiAgPHJlY3QgeD0iMzAiIHk9IjE0MCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjE1IiBmaWxsPSIjRkZFNEM1IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMyIvPgogIDxyZWN0IHg9IjE0MCIgeT0iMTQwIiB3aWR0aD0iMzAiIGhlaWdodD0iMTUiIGZpbGw9IiNGRkU0QzUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIzIi8+Cjwvc3ZnPg==" />
</div>
<div class="message">{{MSG}}</div>
</div>
''' |