make it so the canvas the user can move the elements around of the live preview make it so they drag around, now write the ufll compelte code now:<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .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;
            overflow: hidden;
        }
        .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;
            overflow-y: auto;
        }
        .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;
            position: sticky;
            bottom: 0;
            z-index: 10;
        }
        .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>
   
</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>'; // Replace with your Groq API key
        const GROQ_API_URL = 'https://api.groq.com/openai/v1/chat/completions';

        async function sendMessageToGroq(messages) {
            try {
                const response = await fetch(GROQ_API_URL, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${GROQ_API_KEY}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        model: 'llama-3.1-70b-versatile',
                        messages: messages
                    })
                });

                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;
        }

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

                let assistantResponse = '';
                const systemPrompt = `You are an AI assistant that helps users edit HTML code. Modify the user's existing code based on their request. Only provide the modified code without any additional explanations or comments. Ensure that you only make the necessary changes and keep the rest of the code unchanged, also when writing code dont add those tick marks `;

                const messages = [
                    {
                        role: 'system',
                        content: systemPrompt
                    },
                    {
                        role: 'user',
                        content: `Here is my current code:\n\n${codeEditor.value}\n\nI want the following changes: ${message}`
                    }
                ];

                // AI modifies the code based on the user's request
                assistantResponse = await sendMessageToGroq(messages);
                messages.push({ role: 'assistant', content: assistantResponse });

                // Remove any non-code text
                assistantResponse = assistantResponse.replace(/^[\s\S]*?(<!DOCTYPE html>)/i, '$1').trim();

                // Update the code editor with the final response
                codeEditor.value = assistantResponse;
                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>