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="https://cdna.artstation.com/p/assets/images/images/054/910/878/large/aaron-wacker-cyberpunk-computer-devices-iot.jpg?1665656564" 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://cdnb.artstation.com/p/assets/images/images/054/910/875/large/aaron-wacker-cyberpunk-computer-brain-design.jpg?1665656558"> </div> <div class="message">{{MSG}}</div> </div> '''