htmlTemplates.py

import base64
import os

def get_base64_image(path: str) -> str:
    """خواندن فایل  عکس و تبدیل به base64"""
    if not os.path.exists(path):
        raise FileNotFoundError(f"Avatar not found: {path}")
    with open(path, "rb") as f:
        data = f.read()
    return base64.b64encode(data).decode("utf-8")

# Define the mapping of source names to avatar file paths
SOURCE_AVATAR_MAPPING = {
    "Khamenei": "images/bot_avatar.png",
    "Sistani": "images/bot_avatar1.png",
    "Golpaygani": "images/bot_avatar2.png"
}

BOT_AVATARS_BASE64 = {
    source: get_base64_image(path) for source, path in SOURCE_AVATAR_MAPPING.items()
}

USER_AVATAR = get_base64_image("images/user_avatar.png")

css = '''
<style>
.chat-row {
    display: flex;
    align-items: flex-end;
    margin: 1rem 0;
    direction: rtl;
    font-family: "Vazir", Tahoma, sans-serif;
}

.chat-row .avatar {
    flex-shrink: 0;
    margin: 0 0.5rem;
}

.chat-row .avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.chat-bubble {
    max-width: 70%;
    padding: 1rem 1.2rem;
    border-radius: 1rem;
    line-height: 1.8;
    font-size: 1rem;
    word-wrap: break-word;
    white-space: pre-wrap;
    animation: fadeIn 0.3s ease-in-out;
}

.chat-row.user {
    justify-content: flex-end;
}
.chat-row.user .chat-bubble {
    background: linear-gradient(145deg, #232832, #2f3542);
    color: #e4e6eb;
    border-bottom-right-radius: 0.4rem;
}

.chat-row.bot {
    justify-content: flex-start;
}
.chat-row.bot .chat-bubble {
    background: linear-gradient(145deg, #3e4658, #50586c);
    color: #f8f9fa;
    border-bottom-left-radius: 0.4rem;
}

@keyframes fadeIn {
    from {opacity: 0; transform: translateY(10px);}
    to {opacity: 1; transform: translateY(0);}
}
</style>
'''

# A function to generate the bot template with the correct base64 image
def get_bot_template(avatar_base64: str) -> str:
    return f'''
    <div class="chat-row bot">
        <div class="avatar">
            <img src="data:image/png;base64,{avatar_base64}">
        </div>
        <div class="chat-bubble">{{{{MSG}}}}</div>
    </div>
    '''

user_template = f'''
<div class="chat-row user">
    <div class="chat-bubble">{{{{MSG}}}}</div>
    <div class="avatar">
        <img src="data:image/png;base64,{USER_AVATAR}">
    </div>
</div>
'''