Fix it up I want it so the ai is more smarter prompt it better so basiclly it edits the code of the html editor and doesnt edit liek for example if i have a code and I want it to change the color to blue it will jjsut edit the text to make it blue, everythign else wills tay the same unless the user asked otherwise, the cycle rigth now broken I want it when it generates the code it goes throguh 3 cycles to review it basiaclly the first cycle the ai will see if there is comment insdie the code,\ it will edit it to make there is no comment like say add this here, 2nd cycyle does the same thing,a and 3rd cycle it wiltake ht code form the 2nd cycle it will edit the code in html editoral, make sure it just edits the code and not replace it and write the full code with the dit changes: now write the full code: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notion-like Live HTML Editor with Groq Chat</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            display: flex;
            flex-direction: column;
            background-color: #ffffff;
        }
        .editor-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        .panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #e0e0e0;
        }
        .panel:last-child {
            border-right: none;
        }
        .panel-header {
            background-color: #f7f7f7;
            padding: 12px 16px;
            border-bottom: 1px solid #e0e0e0;
            font-weight: 600;
            font-size: 14px;
            color: #37352f;
            display: flex;
        }
        .panel-tab {
            cursor: pointer;
            padding: 8px 16px;
            background-color: #e0e0e0;
            margin-right: 8px;
            border-radius: 4px 4px 0 0;
        }
        .panel-tab.active {
            background-color: #ffffff;
        }
        .panel-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .panel textarea {
            flex: 1;
            padding: 16px;
            border: none;
            resize: none;
            outline: none;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
            font-size: 14px;
            line-height: 1.5;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            color: #37352f;
            background-color: #ffffff;
        }
        .preview-container {
            flex: 1;
            border-left: 1px solid #e0e0e0;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        .chat-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: #f7f7f7;
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
        }
        .chat-input {
            display: flex;
            padding: 16px;
            background-color: #ffffff;
            border-top: 1px solid #e0e0e0;
        }
        .chat-input input {
            flex: 1;
            padding: 8px 12px;
            font-size: 14px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            outline: none;
        }
        .chat-input button {
            margin-left: 8px;
            padding: 8px 16px;
            background-color: #f7f7f7;
            color: #37352f;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        .chat-input button:hover {
            background-color: #e0e0e0;
        }
        .message {
            max-width: 80%;
            margin-bottom: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.4;
        }
        .message.user {
            align-self: flex-end;
            background-color: #d3e5ff;
            color: #1a1a1a;
        }
        .message.bot {
            align-self: flex-start;
            background-color: #ffffff;
            color: #1a1a1a;
            border: 1px solid #e0e0e0;
        }
        @media (max-width: 768px) {
            .editor-container {
                flex-direction: column;
            }
            .panel {
                border-right: none;
                border-bottom: 1px solid #e0e0e0;
            }
            .panel:last-child {
                border-bottom: none;
            }
            .preview-container {
                height: 50vh;
            }
        }
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body>
    <div class="editor-container">
        <div class="panel" id="leftPanel">
            <div class="panel-header">
                <div class="panel-tab active" data-tab="htmlEditor">HTML Editor</div>
                <div class="panel-tab" data-tab="chat">Chat</div>
            </div>
            <div class="panel-content">
                <textarea id="codeEditor" placeholder="Type your HTML, CSS, and JavaScript here">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Preview</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.5;
            color: #37352f;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            font-size: 40px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        p {
            font-size: 16px;
            margin-bottom: 16px;
        }
        .callout {
            background-color: #f7f6f3;
            border-radius: 3px;
            padding: 16px;
            margin-bottom: 16px;
        }
        .callout p {
            margin: 0;
        }
    </style>
</head>
<body>
    <h1>Welcome to Notion-like Editor</h1>
    <p>This is a live preview of your HTML content. Feel free to modify the code in the editor to see real-time changes.</p>
    <div class="callout">
        <p>Pro tip: You can use this editor to quickly prototype your ideas and see the results instantly!</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const callout = document.querySelector('.callout');
            callout.addEventListener('click', function() {
                alert('You clicked the callout!');
            });
        });
    </script>
</body>
</html>
                </textarea>
                <div class="chat-container" style="display: none;">
                    <div class="chat-messages" id="chatMessages"></div>
                    <div class="chat-input">
                        <input type="text" id="chatInput" placeholder="Type your message...">
                        <button id="sendButton">Send</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="preview-container">
            <iframe id="preview"></iframe>
        </div>
    </div>

    <script>
        const codeEditor = document.getElementById('codeEditor');
        const previewFrame = document.getElementById('preview');
        const chatMessages = document.getElementById('chatMessages');
        const chatInput = document.getElementById('chatInput');
        const sendButton = document.getElementById('sendButton');
        const tabs = document.querySelectorAll('.panel-tab');
        const panelContent = document.querySelector('.panel-content');

        function updatePreview() {
            const code = codeEditor.value;
            previewFrame.srcdoc = code;
        }

        let timeout = null;
        codeEditor.addEventListener('input', function() {
            clearTimeout(timeout);
            timeout = setTimeout(updatePreview, 300);
        });

        updatePreview();

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                if (tab.dataset.tab === 'htmlEditor') {
                    codeEditor.style.display = 'block';
                    panelContent.querySelector('.chat-container').style.display = 'none';
                } else {
                    codeEditor.style.display = 'none';
                    panelContent.querySelector('.chat-container').style.display = 'flex';
                }
            });
        });

        const GROQ_API_KEY = '<TRUFFLEHOG_REDACTED_GROQ>';
        const GROQ_API_URL = 'https://api.groq.com/openai/v1/chat/completions';

        async function sendMessageToGroq(message, systemMessage) {
            try {
                const response = await fetch(GROQ_API_URL, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${GROQ_API_KEY}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        model: 'mixtral-8x7b-32768',
                        messages: [
                            { role: 'system', content: systemMessage },
                            { role: 'user', content: message }
                        ]
                    })
                });

                if (!response.ok) {
                    throw new Error('Failed to get response from Groq API');
                }

                const data = await response.json();
                return data.choices[0].message.content;
            } catch (error) {
                console.error('Error:', error);
                return 'Sorry, there was an error processing your request.';
            }
        }

        function addMessage(message, isUser = true) {
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messageElement.classList.add('message');
            messageElement.classList.add(isUser ? 'user' : 'bot');
            chatMessages.appendChild(messageElement);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function removeCommentsBeforeHtml(code) {
            return code.replace(/^([\s\S]*?)<!DOCTYPE html>/i, '<!DOCTYPE html>');
        }

        sendButton.addEventListener('click', async () => {
            const message = chatInput.value.trim();
            if (message) {
                addMessage(message);
                chatInput.value = '';
                chatInput.disabled = true;
                sendButton.disabled = true;

                let finalResponse = codeEditor.value;
                const systemMessages = [
                    'You are an AI assistant that helps users edit HTML code. Modify the existing HTML code based on the user\'s request. Only respond with the modified code, no explanations.',
                    'Review the code you just generated. If there are any improvements or fixes needed, provide the updated code. If no changes are needed, respond with "No changes needed."',
                    'This is the final review. Provide the complete, polished HTML code that addresses the user\'s request. This will be directly inserted into the HTML editor. I DONT WANT YOU TO WRITE COMMENTS THOUGH FOR THE CODE< JUST WRITE THE CODE ONLY'
                ];

                for (let i = 0; i < 3; i++) {
                    const response = await sendMessageToGroq(`${message}\n\nCurrent code:\n${finalResponse}`, systemMessages[i]);
                    if (response !== 'No changes needed') {
                        finalResponse = removeCommentsBeforeHtml(response);
                    }
                    addMessage(`Cycle ${i + 1} complete`, false);
                }

                codeEditor.value = finalResponse;
                updatePreview();
                addMessage('Code updated in the editor', false);

                chatInput.disabled = false;
                sendButton.disabled = false;
                chatInput.focus();
            }
        });

        chatInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendButton.click();
            }
        });
    </script>
</body>
</html>