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 src="data:image/jpeg;base64,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" style="max-height: 78px; max-width: 78px; border-radius: 50%; object-fit: cover;">
    </div>
    <div class="message">{{MSG}}</div>
</div>
'''

user_template = '''
<div class="chat-message user">
    <div class="avatar">
        <img src="https://img.freepik.com/premium-vector/anonymous-user-circle-icon-vector-illustration-flat-style-with-long-shadow_520826-1931.jpg">
    </div>    
    <div class="message">{{MSG}}</div>
</div>
'''