Update index.html

index.html

@@ -177,100 +177,108 @@
         const baseURL = 'https://api.aimlapi.com/v1';
 
         async function sendMessage() {
-            const userInput = document.getElementById('user-input').value;
-            if (!userInput) return;
-
-            // Display user message
-            const chatBox = document.getElementById('chat-box');
-            const userMessage = document.createElement('div');
-            userMessage.classList.add('message', 'user-message');
-            userMessage.textContent = userInput;
-            chatBox.appendChild(userMessage);
-
-            // Clear input
-            document.getElementById('user-input').value = '';
-
-            // Show typing animation
-            const typingAnimation = document.createElement('div');
-            typingAnimation.classList.add('message', 'bot-message', 'typing-animation');
-            typingAnimation.innerHTML = `
-                <span></span>
-                <span></span>
-                <span></span>
-            `;
-            chatBox.appendChild(typingAnimation);
-
-            // Scroll to bottom
-            chatBox.scrollTop = chatBox.scrollHeight;
-
-            // Send message to API
-            const response = await fetch(`${baseURL}/chat/completions`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${apiKey}`
+    const userInput = document.getElementById('user-input').value;
+    if (!userInput) return;
+
+    // Display user message
+    const chatBox = document.getElementById('chat-box');
+    const userMessage = document.createElement('div');
+    userMessage.classList.add('message', 'user-message');
+    userMessage.textContent = userInput;
+    chatBox.appendChild(userMessage);
+
+    // Clear input
+    document.getElementById('user-input').value = '';
+
+    // Show typing animation
+    const typingAnimation = document.createElement('div');
+    typingAnimation.classList.add('message', 'bot-message', 'typing-animation');
+    typingAnimation.innerHTML = `
+        <span></span>
+        <span></span>
+        <span></span>
+    `;
+    chatBox.appendChild(typingAnimation);
+
+    // Scroll to bottom
+    chatBox.scrollTop = chatBox.scrollHeight;
+
+    // Send message to API
+    const response = await fetch(`${baseURL}/chat/completions`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({
+            model: 'gpt-4.5-preview',
+            messages: [
+                {
+                    role: 'system',
+                    content: 'You are an AI assistant who knows everything.'
                 },
-                body: JSON.stringify({
-                    model: 'gpt-4.5-preview',
-                    messages: [
-                        {
-                            role: 'system',
-                            content: 'You are an AI assistant who knows everything.'
-                        },
-                        {
-                            role: 'user',
-                            content: userInput
-                        }
-                    ]
-                })
-            });
-
-            const data = await response.json();
-            const botMessage = data.choices[0].message.content;
-
-            // Remove typing animation
-            chatBox.removeChild(typingAnimation);
-
-            // Display bot message with typewriter animation
-            const botMessageElement = document.createElement('div');
-            botMessageElement.classList.add('message', 'bot-message');
-            chatBox.appendChild(botMessageElement);
-
-            // Function to simulate typewriter effect (faster)
-            function typeWriter(text, element, delay = 20) { // Reduced delay to 20ms
-                let i = 0;
-                function type() {
-                    if (i < text.length) {
-                        element.textContent += text.charAt(i);
-                        i++;
-                        setTimeout(type, delay);
-                    }
+                {
+                    role: 'user',
+                    content: userInput
                 }
-                type();
+            ]
+        })
+    });
+
+    const data = await response.json();
+    const botMessage = data.choices[0].message.content;
+
+    // Remove typing animation
+    chatBox.removeChild(typingAnimation);
+
+    // Display bot message with typewriter animation
+    const botMessageElement = document.createElement('div');
+    botMessageElement.classList.add('message', 'bot-message');
+    chatBox.appendChild(botMessageElement);
+
+    // Function to simulate typewriter effect
+    function typeWriter(text, element, delay = 20) { // Reduced delay to 20ms
+        let i = 0;
+        function type() {
+            if (i < text.length) {
+                element.textContent += text.charAt(i);
+                i++;
+                setTimeout(type, delay);
             }
-
-            // Check if the message contains code
-            if (botMessage.includes('```')) {
-                const [textBeforeCode, codeSnippet] = botMessage.split('```');
-                const codeElement = document.createElement('code');
-                codeElement.style.display = 'block'; // Ensure code block is displayed properly
-
-                // Display text before code
-                typeWriter(textBeforeCode, botMessageElement);
-
-                // Display code snippet after a short delay
-                setTimeout(() => {
-                    codeElement.textContent = codeSnippet;
-                    botMessageElement.appendChild(codeElement);
-                }, textBeforeCode.length * 20 + 500); // Adjusted delay based on faster typing
-            } else {
-                // Display plain text with typewriter effect
-                typeWriter(botMessage, botMessageElement);
-            }
-
-            // Scroll to bottom
-            chatBox.scrollTop = chatBox.scrollHeight;
         }
-    </script>
-</body>
-</html>
+        type();
+    }
+
+    // Parse and display the bot message
+    let remainingText = botMessage;
+    while (remainingText.includes('```')) {
+        // Extract text before the code block
+        const [textBeforeCode, rest] = remainingText.split('```', 2);
+        typeWriter(textBeforeCode, botMessageElement);
+
+        // Extract the code block
+        const [codeSnippet, restAfterCode] = rest.split('```', 2);
+        const codeElement = document.createElement('code');
+        codeElement.classList.add('code-block'); // Optional: Add a class for styling
+        codeElement.style.display = 'block';
+
+        // Simulate typewriter effect for the code block
+        setTimeout(() => {
+            typeWriter(codeSnippet, codeElement);
+            botMessageElement.appendChild(codeElement);
+        }, textBeforeCode.length * 20 + 50); // Adjusted delay
+
+        // Update remaining text
+        remainingText = restAfterCode || '';
+    }
+
+    // Append any remaining text after the last code block
+    if (remainingText) {
+        setTimeout(() => {
+            typeWriter(remainingText, botMessageElement);
+        }, botMessageElement.textContent.length * 20 + 50); // Adjusted delay
+    }
+
+    // Scroll to bottom
+    chatBox.scrollTop = chatBox.scrollHeight;
+      }