<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" id="msg-{{.ConversationID}}">{{.Response}}</div>
</div>
<script>
(function() {
    var el = document.getElementById('msg-{{.ConversationID}}');
    if (el) {
        // Simple markdown: convert ```code blocks``` and `inline code`
        var html = el.innerHTML;
        // Code blocks
        html = html.replace(/```(\w*)\n([\s\S]*?)```/g, function(m, lang, code) {
            return '<pre><code class="' + (lang ? 'language-' + lang : '') + '">' + code.trim() + '</code></pre>';
        });
        // Inline code
        html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
        // Bold
        html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
        el.innerHTML = html;
        // Highlight code blocks
        el.querySelectorAll('pre code[class*="language-"]').forEach(function(block) {
            if (typeof hljs !== 'undefined' && !block.dataset.highlighted) hljs.highlightElement(block);
        });
    }
})();
</script>