htmlTemplates.py

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>

'''