Update index.html

index.html

@@ -465,7 +465,7 @@
     <script>
         const userInput = document.getElementById('user-input');
         const sendBtn = document.getElementById('send-btn');
-        const chatOutput = document.getElementById('chat-output');
+        const chatOutput = document.querySelector('.message-container');
         let messages = [];
 
         async function sendMessage() {
@@ -488,87 +488,33 @@
             }
         }
 
-// Import Prism.js for syntax highlighting
-// Include Prism.js script in your HTML file
+        function displayMessage(message, role) {
+            const messageElement = document.createElement('div');
+            messageElement.classList.add('message', `${role}-message`);
 
-function displayMessage(message, role) {
-    const messageElement = document.createElement('div');
-    messageElement.classList.add('message', `${role}-message`);
+            // Parse Markdown syntax
+            const markdownParsedMessage = parseMarkdown(message);
 
-    // Regular expressions to detect code blocks and common code structures
-    const codeBlockRegex = /```([a-zA-Z]+)?\s*([\s\S]+?)\s*```/g;
-    const inlineCodeRegex = /`([^`]+?)`/g;
-    const htmlTagRegex = /<[^>]+>/g;
-    const jsCodeRegex = /\b(function|if|else|for|while|do|switch|case|break|continue|return|try|catch|finally|throw)\b/g;
-    const jsCommentRegex = /\/\/.*|\/\*[\s\S]*?\*\//g;
-    const cssCodeRegex = /[^{};]+\s*{\s*[^{}]*}/g;
-    const cssCommentRegex = /\/\*[\s\S]*?\*\//g;
+            // Set HTML content
+            messageElement.innerHTML = markdownParsedMessage;
 
-    // Function to create a code block element with syntax highlighting
-    function createCodeBlock(language, code) {
-        const codeBlock = document.createElement('code');
-        if (language) {
-            codeBlock.classList.add(`language-${language}`);
+            chatOutput.appendChild(messageElement);
+            chatOutput.scrollTop = chatOutput.scrollHeight;
         }
-        codeBlock.textContent = code;
 
-        // Use Prism.js to highlight syntax
-        Prism.highlightElement(codeBlock);
-
-        const preElement = document.createElement('pre');
-        preElement.appendChild(codeBlock);
-
-        return preElement;
-    }
-
-    // Function to process code matches and add to message element
-    function processCodeMatches(matches, language) {
-        if (matches) {
-            matches.forEach(match => {
-                const codeBlock = createCodeBlock(language, match);
-                messageElement.appendChild(codeBlock);
-            });
-        }
-    }
-
-    // Process code block matches
-    let lastIndex = 0;
-    let match;
-    while ((match = codeBlockRegex.exec(message)) !== null) {
-        if (match.index > lastIndex) {
-            const textBeforeCode = document.createTextNode(message.substring(lastIndex, match.index));
-            messageElement.appendChild(textBeforeCode);
-        }
-
-        const language = match[1] ? match[1].toLowerCase() : null;
-        const codeContent = match[2];
-        const codeBlock = createCodeBlock(language, codeContent);
-        messageElement.appendChild(codeBlock);
-
-        lastIndex = match.index + match[0].length;
-    }
-
-    // Process inline code matches
-    processCodeMatches(message.match(inlineCodeRegex), null);
-
-    // Process specific code structures
-    processCodeMatches(message.match(htmlTagRegex), 'html');
-    processCodeMatches(message.match(jsCodeRegex), 'javascript');
-    processCodeMatches(message.match(jsCommentRegex), 'javascript-comment');
-    processCodeMatches(message.match(cssCodeRegex), 'css');
-    processCodeMatches(message.match(cssCommentRegex), 'css-comment');
-
-    // Add any remaining text after the last code block
-    if (lastIndex < message.length) {
-        const textAfterCode = document.createTextNode(message.substring(lastIndex));
-        messageElement.appendChild(textAfterCode);
+        function parseMarkdown(message) {
+        // Initialize Showdown converter
+        const converter = new showdown.Converter({
+            // Enable all Markdown extensions
+            simplifiedAutoLink: true,
+            strikethrough: true,
+            tables: true,
+            tasklists: true,
+            literalMidWordUnderscores: true,
+        });
+        // Convert Markdown to HTML
+        return converter.makeHtml(message);
     }
-
-    chatOutput.appendChild(messageElement);
-    chatOutput.scrollTop = chatOutput.scrollHeight;
-}
-
-
         sendBtn.addEventListener('click', async () => {
             const message = userInput.value.trim();
             if (message !== '') {
@@ -586,33 +532,6 @@ function displayMessage(message, role) {
                 sendBtn.click();
             }
         });
-                  function displayMessage(message, role) {
-                const messageElement = document.createElement('div');
-                messageElement.classList.add('message', `${role}-message`);
-
-                // Parse Markdown syntax
-                const markdownParsedMessage = parseMarkdown(message);
-
-                // Set HTML content
-                messageElement.innerHTML = markdownParsedMessage;
-
-                chatOutput.appendChild(messageElement);
-                chatOutput.scrollTop = chatOutput.scrollHeight;
-            }
-
-            function parseMarkdown(message) {
-                // Initialize Showdown converter
-                const converter = new showdown.Converter({
-                    // Enable all Markdown extensions
-                    simplifiedAutoLink: true,
-                    strikethrough: true,
-                    tables: true,
-                    tasklists: true,
-                    literalMidWordUnderscores: true,
-                });
-                // Convert Markdown to HTML
-                return converter.makeHtml(message);
-            }
     </script>
 
     </body>