css = """
.message-row {
    justify-content: space-evenly !important;
}
.message-bubble-border {
    border-radius: 6px !important;
}
.message-buttons-bot, .message-buttons-user {
    right: 10px !important;
    left: auto !important;
    bottom: 2px !important;
}
.dark.message-bubble-border {
    border-color: #21293b !important;
}
.dark.user {
    background: #0a1120 !important;
}
.dark.assistant {
    background: transparent !important;
}
"""

PLACEHOLDER = """
<div class="message-bubble-border" style="display:flex; max-width: 600px; border-color: #e5e7eb; border-radius: 8px; border-width: 1px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px);">
    <figure style="margin: 0;">   
        <img src="https://huggingface.co/spaces/baconnier/Napoleon/resolve/main/napoleon.jpg" alt="Logo" style="width: 100%; height: 100%; border-radius: 8px;">
    </figure>
    <div style="padding: .5rem 1.5rem;">
        <h2 style="text-align: center; font-size: 1.5rem; font-weight: 900; margin-bottom: 0.5rem;">🦅 Napoléon 🦅</h2>
        <p style="text-align: center; font-size: 16px; line-height: 1.5; margin-bottom: 15px;">Notre sagesse vient de notre expérience, et notre expérience vient de nos sottises.</p>
        <p></p>
        <p style="text-align: center; font-size: 16px; line-height: 1.5; margin-bottom: 15px;">Our wisdom comes from our experience, and our experience comes from our foolishness.</p>
    </div>
</div>
"""