{{range $msg := .Messages}}
{{if eq $msg.Role "user"}}
<div class="flex justify-end">
    <div class="max-w-[80%] user-bubble px-3.5 py-2.5 text-sm whitespace-pre-wrap">{{$msg.Content}}</div>
</div>
{{else if eq $msg.Role "assistant"}}
{{if $msg.Content}}
<div class="flex justify-start">
    <div class="max-w-[85%] agent-bubble px-3.5 py-2.5 text-sm text-slate-600 agent-prose agent-msg-render">{{$msg.Content}}</div>
</div>
{{end}}
{{end}}
{{end}}
<script>
(function() {
    document.querySelectorAll('.agent-msg-render').forEach(function(el) {
        el.classList.remove('agent-msg-render');
        var html = el.innerHTML;
        html = html.replace(/```(\w*)\n([\s\S]*?)```/g, function(m, lang, code) {
            return '<pre><code class="' + (lang ? 'language-' + lang : '') + '">' + code.trim() + '</code></pre>';
        });
        html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
        html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
        el.innerHTML = html;
        el.querySelectorAll('pre code[class*="language-"]').forEach(function(block) {
            if (typeof hljs !== 'undefined' && !block.dataset.highlighted) hljs.highlightElement(block);
        });
    });
})();
</script>