make it so the canvas is code eveyry edit now is code make it html and css make it so the cavas has backgorund color etc, I now want it so the userr cna talk to the ai saying change the canvas color to blue, it will then write the code and do a live preview of the color change of the cnavas, now write the fullcode: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notion-style Canvas with Groq Chat</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
            color: #37352f;
            background-color: #ffffff;
        }
        .main-container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 300px;
            background-color: #fbfbfa;
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
        }
        .sidebar-header {
            padding: 16px;
            font-size: 14px;
            font-weight: 600;
            color: #37352f;
            border-bottom: 1px solid #e0e0e0;
        }
        .chat-messages {
            flex-grow: 1;
            overflow-y: auto;
            padding: 16px;
        }
        .message {
            margin-bottom: 8px;
            font-size: 14px;
            line-height: 1.5;
            padding: 8px 12px;
            border-radius: 3px;
        }
        .user-message {
            background-color: #e1f5fe;
            text-align: right;
        }
        .ai-message {
            background-color: #f1f1f0;
            text-align: left;
        }
        .chat-input-container {
            border-top: 1px solid #e0e0e0;
            padding: 16px;
        }
        .chat-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            font-size: 14px;
            resize: none;
            min-height: 40px;
            max-height: 120px;
            overflow-y: auto;
        }
        .chat-input:focus {
            outline: none;
            border-color: #0066cc;
        }
        .canvas-container {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
            background-color: #ffffff;
        }
        canvas {
            border: 1px solid #e0e0e0;
            max-width: 95%;
            max-height: 95vh;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .code-block {
            background-color: #f6f8fa;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            padding: 16px;
            margin: 10px 0;
            font-family: monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .apply-code-btn {
            background-color: #0066cc;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-top: 8px;
        }
        .apply-code-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="sidebar">
            <div class="sidebar-header">Chat with Groq AI</div>
            <div class="chat-messages" id="chatMessages"></div>
            <div class="chat-input-container">
                <div class="chat-input" id="chatInput" contenteditable="true" placeholder="Type a message..."></div>
            </div>
        </div>
        <div class="canvas-container">
            <canvas id="posterCanvas" width="2400" height="3000"></canvas>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('posterCanvas');
        const ctx = canvas.getContext('2d');

        let conversationHistory = [
            { role: 'system', content: 'You are an AI assistant that helps users modify a canvas by generating HTML, CSS, or JavaScript code. When asked to make changes, respond with the appropriate code to implement the requested modifications. Do not make any direct changes to the canvas.' }
        ];

        function resizeCanvas() {
            const container = document.querySelector('.canvas-container');
            const containerRatio = container.clientWidth / container.clientHeight;
            const canvasRatio = canvas.width / canvas.height;
            
            if (containerRatio > canvasRatio) {
                canvas.style.height = '95%';
                canvas.style.width = 'auto';
            } else {
                canvas.style.width = '95%';
                canvas.style.height = 'auto';
            }
        }

        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        function initializeCanvas() {
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#37352f';
            ctx.font = '120px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText('Notion-style Canvas', canvas.width / 2, 250);
        }

        initializeCanvas();

        async function sendMessage() {
            const input = document.getElementById('chatInput');
            const message = input.innerText.trim();
            if (message) {
                addMessageToChat(message, 'user-message');
                input.innerText = '';

                conversationHistory.push({ role: 'user', content: message });

                try {
                    const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
                        method: 'POST',
                        headers: {
                            'Authorization': 'Bearer <TRUFFLEHOG_REDACTED_GROQ>',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            model: 'llama-3.1-70b-versatile',
                            messages: conversationHistory,
                            max_tokens: 1000
                        })
                    });

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

                    const data = await response.json();
                    const aiResponse = data.choices[0].message.content;
                    addMessageToChat(aiResponse, 'ai-message');
                    
                    conversationHistory.push({ role: 'assistant', content: aiResponse });

                    // Extract code from the AI response
                    const codeMatch = aiResponse.match(/```(?:html|css|javascript)?\n([\s\S]*?)```/);
                    if (codeMatch) {
                        const code = codeMatch[1].trim();
                        addCodeBlockToChat(code);
                    }
                } catch (error) {
                    console.error('Error:', error);
                    addMessageToChat('Sorry, there was an error processing your request.', 'ai-message');
                }
            }
        }

        function addMessageToChat(message, className) {
            const chatMessages = document.getElementById('chatMessages');
            const messageElement = document.createElement('div');
            messageElement.className = `message ${className}`;
            messageElement.textContent = message;
            chatMessages.appendChild(messageElement);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function addCodeBlockToChat(code) {
            const chatMessages = document.getElementById('chatMessages');
            const codeBlock = document.createElement('div');
            codeBlock.className = 'code-block';
            codeBlock.textContent = code;
            
            const applyButton = document.createElement('button');
            applyButton.className = 'apply-code-btn';
            applyButton.textContent = 'Apply Code';
            applyButton.onclick = () => applyCode(code);
            
            const container = document.createElement('div');
            container.appendChild(codeBlock);
            container.appendChild(applyButton);
            
            chatMessages.appendChild(container);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function applyCode(code) {
            try {
                // For CSS changes
                if (code.includes('style')) {
                    const style = document.createElement('style');
                    style.textContent = code;
                    document.head.appendChild(style);
                }
                // For JavaScript changes
                else {
                    eval(code);
                }
                addMessageToChat('Code applied successfully!', 'ai-message');
            } catch (error) {
                console.error('Error applying code:', error);
                addMessageToChat('Error applying code. Check the console for details.', 'ai-message');
            }
        }

        const chatInput = document.getElementById('chatInput');
        chatInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });

        chatInput.addEventListener('focus', function() {
            if (this.innerText === this.getAttribute('placeholder')) {
                this.innerText = '';
            }
        });

        chatInput.addEventListener('blur', function() {
            if (this.innerText.trim() === '') {
                this.innerText = this.getAttribute('placeholder');
            }
        });

        chatInput.innerText = chatInput.getAttribute('placeholder');
    </script>
</body>
</html>