{% set styles = {
    "normal": "bg-gray-700 text-gray-100",
    "error": "bg-red-800 text-white whitespace-pre-wrap"
} %}

<!-- User Message Container (Right Aligned) -->
<div class="flex justify-end mb-4">
    <div class="bg-blue-600 text-white rounded-lg py-2 px-4 max-w-[80%]">
        {{ user_message }}
        <!-- File Info (If any) -->
        {{ file_info | safe }}
    </div>
</div>

<!-- AI Message Container (Left Aligned) -->
<div class="flex justify-start mb-4">
    <!-- 
        Dynamic Style Selection 
        - prose/prose-invert: Tailwind typography for Markdown content
    -->
    <div class="{{ styles[ai_message_style] }} rounded-lg py-2 px-4 w-fit max-w-none !max-w-[80%] prose prose-invert markdown-view break-words">
{{ ai_message }}
    </div>
</div>