we have issue make it so that the elements dont telmeport bakc when dragged fix the drag to update it tot he code to make it so that is the new positon: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live HTML Editor with Draggable Elements</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>My Document</title>
    <style>
        /* Add your CSS here */
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
    </style>
</head>
<body>

    <!-- Start writing your HTML here -->
    <h1 style="top: 50px; left: 50px;">Hello World</h1>

</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 userCode = codeEditor.value;

            // Wrap the user code with scripts to make elements draggable
            const draggableScript = `
                <script>
                    // Make elements draggable
                    function makeDraggable(element) {
                        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
                        element.onmousedown = dragMouseDown;

                        function dragMouseDown(e) {
                            e = e || window.event;
                            e.preventDefault();
                            pos3 = e.clientX;
                            pos4 = e.clientY;
                            document.onmouseup = closeDragElement;
                            document.onmousemove = elementDrag;
                        }

                        function elementDrag(e) {
                            e = e || window.event;
                            e.preventDefault();
                            pos1 = pos3 - e.clientX;
                            pos2 = pos4 - e.clientY;
                            pos3 = e.clientX;
                            pos4 = e.clientY;
                            const top = (element.offsetTop - pos2);
                            const left = (element.offsetLeft - pos1);

                            element.style.top = top + "px";
                            element.style.left = left + "px";
                        }

                        function closeDragElement() {
                            document.onmouseup = null;
                            document.onmousemove = null;

                            // Send updated position to parent
                            const top = element.offsetTop;
                            const left = element.offsetLeft;
                            window.parent.postMessage({ id: element.getAttribute('data-draggable-id'), top: top, left: left }, '*');
                        }
                    }

                    // Assign unique IDs and make elements draggable
                    function initializeDraggableElements() {
                        let draggableIdCounter = 0;
                        const allElements = document.body.getElementsByTagName("*");
                        for(let element of allElements) {
                            if (element !== document.body && element !== document.head && element !== document.documentElement) {
                                if (!element.getAttribute('data-draggable-id')) {
                                    element.setAttribute('data-draggable-id', 'draggable-' + draggableIdCounter++);
                                    element.style.position = 'absolute';
                                    element.style.cursor = 'move';

                                    // Check if 'top' and 'left' are already set
                                    let computedStyle = window.getComputedStyle(element);
                                    if (!element.style.top || element.style.top === 'auto') {
                                        if (computedStyle.top !== 'auto') {
                                            element.style.top = computedStyle.top;
                                        } else {
                                            element.style.top = element.offsetTop + 'px';
                                        }
                                    }
                                    if (!element.style.left || element.style.left === 'auto') {
                                        if (computedStyle.left !== 'auto') {
                                            element.style.left = computedStyle.left;
                                        } else {
                                            element.style.left = element.offsetLeft + 'px';
                                        }
                                    }
                                }
                                makeDraggable(element);
                            }
                        }
                    }

                    window.onload = initializeDraggableElements;
                <\/script>
            `;

            const combinedCode = userCode.replace('</body>', draggableScript + '</body>');

            previewFrame.srcdoc = combinedCode;
        }

        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, and do not add any extra characters or formatting.`;

                const userCode = codeEditor.value;

                const messages = [
                    {
                        role: 'system',
                        content: systemPrompt
                    },
                    {
                        role: 'user',
                        content: `Here is my current code:\n\n${userCode}\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();
            }
        });

        // Listen for messages from the iframe (preview)
        window.addEventListener('message', (event) => {
            if (event.data && event.data.id) {
                const elementId = event.data.id;
                const top = event.data.top;
                const left = event.data.left;

                // Update the code in the code editor
                let code = codeEditor.value;
                const regex = new RegExp(`(data-draggable-id="${elementId}".*?style=")([^"]*)"`, 's');
                const newStyle = `top: ${top}px; left: ${left}px;`;

                code = code.replace(regex, (match, p1, p2) => {
                    // Merge new position with existing styles
                    let styles = p2;

                    // Remove existing top and left styles
                    styles = styles.replace(/top:\s*[^;]+;?/g, '');
                    styles = styles.replace(/left:\s*[^;]+;?/g, '');

                    // Add new top and left styles
                    styles = styles.trim();
                    if (styles && !styles.endsWith(';')) {
                        styles += ';';
                    }
                    styles += ` ${newStyle}`;

                    return `${p1}${styles.trim()}"`;
                });

                // Update the code editor
                codeEditor.value = code;

                // Debounce the preview update
                clearTimeout(timeout);
                timeout = setTimeout(updatePreview, 300);
            }
        });
    </script>
</body>
</html> now write the full code