A resposta do modelo será um markdown, formate o markdown e mostre a reposta

index.html

@@ -242,9 +242,15 @@
             const messageDiv = document.createElement('div');
             messageDiv.className = `message-bubble ${sender === 'user' ? 'bg-white rounded-2xl p-4 shadow-md ml-auto' : 'bg-[#21223a] text-white rounded-2xl p-4 shadow-md'}`;
             
-            const messageContent = document.createElement('p');
+            const messageContent = document.createElement('div');
             messageContent.className = sender === 'user' ? 'text-gray-800' : 'text-white';
-            messageContent.textContent = text;
+            
+            if (sender === 'ai') {
+                // Parse and format markdown
+                messageContent.innerHTML = formatMarkdown(text);
+            } else {
+                messageContent.textContent = text;
+            }
             
             const timestamp = document.createElement('span');
             timestamp.className = `text-xs block mt-2 ${sender === 'user' ? 'text-gray-500' : 'text-gray-300'}`;
@@ -258,6 +264,20 @@
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
         
+        function formatMarkdown(text) {
+            // Basic markdown formatting
+            return text
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // bold
+                .replace(/\*(.*?)\*/g, '<em>$1</em>') // italic
+                .replace(/`(.*?)`/g, '<code class="bg-gray-700 px-1 py-0.5 rounded text-sm">$1</code>') // inline code
+                .replace(/^# (.*$)/gm, '<h1 class="text-xl font-bold mb-2">$1</h1>') // h1
+                .replace(/^## (.*$)/gm, '<h2 class="text-lg font-bold mb-2">$1</h2>') // h2
+                .replace(/^### (.*$)/gm, '<h3 class="text-base font-bold mb-2">$1</h3>') // h3
+                .replace(/^- (.*$)/gm, '<li class="ml-4">$1</li>') // list items
+                .replace(/(<li.*?<\/li>)/gs, '<ul class="list-disc pl-6 my-2">$1</ul>') // wrap lists
+                .replace(/\n/g, '<br>'); // line breaks
+        }
+        
         function addTypingIndicator() {
             const typingDiv = document.createElement('div');
             typingDiv.className = 'message-bubble bg-[#21223a] text-white rounded-2xl p-4 shadow-md';
@@ -288,14 +308,14 @@
         
         function getAIResponse(userMessage) {
             const responses = [
-                "Entendi sua pergunta! Deixe-me ajudar com isso...",
-                "Excelente pergunta! Aqui está a informação que você precisa:",
-                "Com base na sua solicitação, aqui está o que posso compartilhar:",
-                "Ótimo ponto! Deixe-me elaborar sobre isso:",
-                "Obrigado pela pergunta. Aqui está minha resposta:"
+                "**Entendi sua pergunta!** Deixe-me ajudar com isso...\n\nEsta é uma resposta simulada com **markdown formatado**. Aqui estão alguns exemplos:\n\n- **Negrito** com **\n- *Itálico* com *\n- `Código inline` com `\n- Listas com -",
+                "## Excelente pergunta!\n\nAqui está a informação que você precisa:\n\n- Primeiro ponto importante\n- Segundo ponto relevante\n- Terceira observação útil\n\n**Dica:** Use `código` para exemplos técnicos.",
+                "### Com base na sua solicitação\n\nAqui está o que posso compartilhar:\n\n**Principais tópicos:**\n- Tópico 1 com *detalhes*\n- Tópico 2 com `exemplo`\n- Tópico 3 importante\n\nEsta resposta demonstra **formatação markdown**.",
+                "## Ótimo ponto!\n\nDeixe-me elaborar sobre isso:\n\n**Explicação detalhada:**\n*Este texto está em itálico* enquanto **este está em negrito**.\n\n`Código de exemplo` para ilustrar melhor.",
+                "### Obrigado pela pergunta\n\n**Aqui está minha resposta formatada:**\n\n- Item 1: Descrição *com ênfase*\n- Item 2: Exemplo `com código`\n- Item 3: Conclusão **importante**\n\nEsta é uma demonstração de markdown."
             ];
             
-            return responses[Math.floor(Math.random() * responses.length)] + " Esta é uma resposta simulada do chatbot. Em uma implementação real, esta seria a resposta do modelo LLM selecionado.";
+            return responses[Math.floor(Math.random() * responses.length)];
         }
         
         // Enter key to send message