Update index.html

igorbkz · May 15, 2024 · f66fd3a · f66fd3a
1 parent acc553f
commit f66fd3a
Showing 1 changed file with 24 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chatbot</title>
+    <title>Chatbot Inteligente</title>
     <style>
         body {
             font-family: 'Arial', sans-serif;
@@ -42,7 +42,7 @@
         .message {
             margin: 10px 0;
             padding: 10px;
-            border-radius: 10px;
+            border-radius: 8px;
             max-width: 90%;
             word-wrap: break-word;
             opacity: 0;
@@ -62,6 +62,13 @@
             color: #f4f4f4;
         }
 
+        .bot-message pre {
+            background-color: #555;
+            padding: 8px;
+            border-radius: 8px;
+            overflow-x: auto;
+        }
+
         .typing-indicator {
             display: flex;
             align-items: center;
@@ -183,7 +190,11 @@
     function addMessage(text, isUser) {
         const messageElement = document.createElement('div');
         messageElement.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
-        messageElement.textContent = text;
+        if (!isUser && text.startsWith('<pre>')) {
+            messageElement.innerHTML = text;
+        } else {
+            messageElement.textContent = text;
+        }
         messagesContainer.appendChild(messageElement);
         messagesContainer.scrollTop = messagesContainer.scrollHeight;
     }
@@ -202,7 +213,7 @@
     }
 
     function buildPrompt() {
-        const maxHistoryLength = 10; // Limita o histórico para as últimas 10 interações
+        const maxHistoryLength = 8; // Limita o histórico para as últimas 8 interações
         const promptHistory = conversationHistory.slice(-maxHistoryLength);
         let prompt = `Você é um assistente virtual amigável, útil e altamente qualificado. Responda de forma clara, direta e profissional em português.`;
 
@@ -245,12 +256,18 @@
                 botMessage = cleanResponse(botResponse[0].generated_text);
             }
 
+            // Verificar se a resposta contém código e formatá-lo adequadamente
+            if (botMessage.includes('<code>') || botMessage.includes('</code>')) {
+                botMessage = `<pre>${botMessage.replace(/<\/?code>/g, '')}</pre>`;
+            }
+
             conversationHistory.push({ role: 'assistant', content: botMessage });
             localStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
             removeElement(typingIndicator);
             addMessage(botMessage, false);
         } catch (error) {
-            handleApiError(error);
+            handleApiError
+(error);
             removeElement(typingIndicator);
         } finally {
             sendButton.disabled = false;
@@ -304,9 +321,9 @@
             document.documentElement.style.setProperty('--bg-color', '#2c2c2c');
             document.documentElement.style.setProperty('--text-color', '#f4f4f4');
             document.documentElement.style.setProperty('--container-bg-color', '#3c3c3c');
-            document.documentElement.style.setProperty('--input-bg-color', '#4c4c4c');
+            document.documentelement.style.setProperty('--input-bg-color', '#4c4c4c');
             document.documentElement.style.setProperty('--input-inner-bg-color', '#3c3c3c');
-            document.documentElement.style.setProperty('--input-text-color', '#f4f4f4');
+            document.documentelement.style.setProperty('--input-text-color', '#f4f4f4');
             themeToggleButton.textContent = 'Tema Claro';
         }
     }