No código a seguir, está um chat bot que pode alternar entre 3 I.A's, porém elas não estão se recordando corretamente dos prompts enviados, por gentileza, verifique e corrija esse problema, escreva o código sem pular nenhuma linha. Por favor também me forneça um botão para alterar o visual do site para o modo claro. No modo claro o site irá alterar de rosa para roxo, e de azul para laranja escuro, adicione o botão de modo escuro com um ícone de sol e lua no canto superior esquerdo do site:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatterbox</title>
    <style>
        @font-face {
            font-family: 'PxPlus IBM VGA8';
            src: url('https://sdomi.pl/static/fonts/PxPlus_IBM_VGA8.ttf') format('truetype');
        }

        body {
            background-color: #1f1f1f;
            color: #dddddd;
            font-family: 'PxPlus IBM VGA8', monospace;
            font-size: 16px;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        #header {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            max-width: 768px;
            width: 100%;
            text-align: center;
        }

        h1 {
            font-size: 24px;
            margin: 0 0 10px 0;
            background: linear-gradient(to right, #ff69b4, #add8e6); /* Pink and blue gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .menuitem {
            display: inline-block;
            margin: 0 10px;
        }

        a {
            color: #dddddd;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        #ai_selector {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #1f1f1f;
            padding: 10px;
            border: 1px solid #3f3f3f;
            text-align: left;
            border-radius: 5px;
        }

        #ai_selector h3 {
            margin-top: 0;
            font-size: 16px;
        }

        .ai-button {
            display: block;
            background-color: transparent;
            color: #ffffff;
            border: 2px solid lightblue;
            padding: 5px 10px;
            margin: 5px 0;
            cursor: pointer;
            font-size: 14px;
            border-radius: 5px;
            font-family: 'PxPlus IBM VGA8', monospace;
            transition: background-color 0.3s, color 0.3s;
            width: 100%;
            box-sizing: border-box;
            text-align: left;
        }

        /* Hover effect */
        .ai-button:hover {
            background-color: lightblue;
            color: #000000;
        }

        #content {
            max-width: 768px;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
            background-color: #1f1f1f;
            margin-bottom: 20px;
        }

        #selected_ai {
            margin-bottom: 10px;
            font-size: 18px;
            font-weight: bold;
        }

        #conversation {
            max-width: 768px;
            width: 100%;
            background-color: #1f1f1f;
            color: #dddddd;
            padding: 10px;
            overflow-y: auto;
            max-height: 400px; /* Set a max height for scrolling */
            text-align: left;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #3f3f3f;
        }

        .user-message {
            color: rgb(0, 225, 255);
            margin: 5px 0;
        }

        .ai-message {
            color: pink;
            margin: 5px 0;
        }

        #textbox {
            background-color: #1f1f1f;
            color: rgb(0, 225, 255); /* User color */
            font-family: 'PxPlus IBM VGA8', monospace;
            font-size: 16px;
            border: 1px solid rgb(0, 225, 255); /* User color */
            padding: 10px;
            width: calc(100% - 120px); /* Adjust for button */
            height: 100px;
            margin-bottom: 20px;
            resize: none;
            box-sizing: border-box;
        }

        #send-button {
            background-color: transparent; /* No background color */
            color: #ffffff; /* White text */
            border: 2px solid lightblue; /* Light blue border */
            padding: 8px 12px; /* Adjust padding for a thinner button */
            margin-left: 10px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px; /* Rounded corners */
            font-family: 'PxPlus IBM VGA8', monospace; /* Match font */
            height: auto; /* Allow height to adjust based on padding */
            display: inline-block; /* Align with textbox */
            vertical-align: top; /* Align top with textbox */
            transition: background-color 0.3s, color 0.3s; /* Smooth transition */
        }

        /* Hover effect */
        #send-button:hover {
            background-color: lightblue; /* Light blue background on hover */
            color: #000000; /* Change text color to black on hover */
        }

        #footer {
            margin-top: 20px;
            font-size: 14px;
            text-align: center;
            width: 100%;
        }

        code {
            background-color: #1f1f1f;
            padding: 2px 4px;
            border-radius: 3px;
        }

        ol, ul {
            display: inline-block;
            text-align: left;
        }

        /* Responsive adjustments */
        @media (max-width: 600px) {
            #ai_selector {
                position: static;
                width: 100%;
                margin-bottom: 20px;
            }

            #textbox {
                width: 100%;
                margin-bottom: 10px;
            }

            #send-button {
                width: 100%;
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Chatterbox</h1>
        <ul>
            <li class="menuitem"><a href="#">Home</a></li>
            <li class="menuitem"><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="ai_selector">
        <h3>Choose an AI:</h3>
        <button class="ai-button" data-model-id="llama3-8b-8192" data-ai-name="Meta Llama 3 8B">Meta Llama 3 8B</button>
        <button class="ai-button" data-model-id="gemma-7b-it" data-ai-name="Gemma 7B">Gemma 7B</button>
        <button class="ai-button" data-model-id="mixtral-8x7b-32768" data-ai-name="Mixtral 8x7B">Mixtral 8x7B</button>
    </div>
    <div id="content">
        <div id="selected_ai">Selected AI: <span id="ai_name">Meta Llama 3 8B</span></div>
        <div id="conversation"></div>

        <textarea id="textbox" placeholder="Converse com a LLM..."></textarea>
        <button id="send-button">Enviar</button>

        <h3>Contato</h3>
        <ul>
            <li>Email: <a href="mailto:<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>"><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></a> / <a href="mailto:<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>"><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></a></li>
            <li>Social Media: <a href="https://twitter.com/naomaisalive">@naomaisalive</a> / <a href="https://twitter.com/Nv4x">@Nv4x</a></li>
        </ul>
    </div>
    <div id="footer">
        <span>© Chatterbox 2024 | <a href="https://github.com/s2Alive/Project-AI?tab=readme-ov-file#português"> Github </a></span>
    </div>
    <script>
        // Define AI models
        const aiModels = {
            'llama3-8b-8192': 'Meta Llama 3 8B',
            'gemma-7b-it': 'Gemma 7B',
            'mixtral-8x7b-32768': 'Mixtral 8x7B'
        };

        // Function to get query parameter
        function getQueryParam(param) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(param);
        }

        // Get selected model from URL, default to 'llama3-8b-8192' if not present
        let selectedModel = getQueryParam('model') || 'llama3-8b-8192';
        let selectedAIName = aiModels[selectedModel] || 'Meta Llama 3 8B';

        // Update the AI name display
        document.getElementById('ai_name').textContent = selectedAIName;

        // Add event listeners to AI buttons
        const aiButtons = document.querySelectorAll('.ai-button');
        aiButtons.forEach(button => {
            button.addEventListener('click', () => {
                const modelId = button.getAttribute('data-model-id');
                const aiName = button.getAttribute('data-ai-name');
                // Reload the page with the selected model as a query parameter
                window.location.href = `?model=${modelId}`;
            });
        });

        // Track conversation history as an array of message objects
        // For models that support only single user message, we'll only send the latest message
        let conversationHistory = [
            { role: "system", content: "Você é um assistente." }
        ];

        const sendMessage = async () => {
            const textbox = document.getElementById('textbox');
            const conversation = document.getElementById('conversation');
            const userMessage = textbox.value.trim();

            if (!userMessage) return;

            // Append user message to the conversation (both frontend and history)
            const userMessageElem = document.createElement('div');
            userMessageElem.className = 'user-message';
            userMessageElem.textContent = `User: ${userMessage}`;
            conversation.appendChild(userMessageElem);

            // Add user message to the conversation history
            conversationHistory.push({ role: "user", content: userMessage });

            // Clear the textbox
            textbox.value = '';

            try {
                // Make the API request with the latest user message and selected model
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ 
                        model: selectedModel,
                        messages: conversationHistory.slice(-2) // Send only the latest system and user message
                    })
                });

                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error?.message || 'Unknown error');
                }

                const data = await response.json();

                // Append AI message to the conversation (both frontend and history)
                const aiMessage = data.choices[0].message.content;
                const aiMessageElem = document.createElement('div');
                aiMessageElem.className = 'ai-message';
                aiMessageElem.textContent = `AI: ${aiMessage}`;
                conversation.appendChild(aiMessageElem);

                // Add AI message to the conversation history
                conversationHistory.push({ role: "assistant", content: aiMessage });

                // Scroll to the bottom of the conversation
                conversation.scrollTop = conversation.scrollHeight;

            } catch (error) {
                console.error('Error:', error);
                const errorElem = document.createElement('div');
                errorElem.className = 'ai-message';
                errorElem.textContent = `Error: ${error.message}`;
                conversation.appendChild(errorElem);
                conversation.scrollTop = conversation.scrollHeight;
            }
        };

        // Event listeners
        document.getElementById('send-button').addEventListener('click', sendMessage);

        document.getElementById('textbox').addEventListener('keypress', function (event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                sendMessage();
                event.preventDefault(); // Prevent the default action (newline)
            }
        });

        // Initialize conversation based on selected AI
        window.onload = () => {
            // Clear conversation if there's a new AI selection
            // This ensures that when a new AI is selected, the conversation is reset
            const initialLoad = sessionStorage.getItem('initialLoad');
            if (!initialLoad) {
                sessionStorage.setItem('initialLoad', 'true');
            } else {
                // If the AI model has changed, reset the conversation
                const previousModel = sessionStorage.getItem('previousModel');
                if (previousModel !== selectedModel) {
                    conversationHistory = [
                        { role: "system", content: "Você é um assistente." }
                    ];
                    document.getElementById('conversation').innerHTML = '';
                    sessionStorage.setItem('previousModel', selectedModel);
                }
            }

            // Set the previous model on initial load
            if (!sessionStorage.getItem('previousModel')) {
                sessionStorage.setItem('previousModel', selectedModel);
            }
        };
    </script>
</body>
</html>

serer.js:

const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');
const app = express();
const port = 3000;  // You can choose any port you like

// Middleware to parse JSON request bodies
app.use(bodyParser.json());

// Allowed models for security
const allowedModels = {
    'llama3-8b-8192': 'llama3-8b-8192',
    'gemma-7b-it': 'gemma-7b-it',
    'mixtral-8x7b-32768': 'mixtral-8x7b-32768'
};

// Handle POST requests from the front-end
app.post('/api/chat', async (req, res) => {
    const { model, messages } = req.body; // Get model and conversation from frontend

    // Validate the model
    if (!model || !allowedModels[model]) {
        return res.status(400).send({ error: { message: 'Invalid or missing model ID.', type: 'invalid_request_error' } });
    }

    // Validate messages
    if (!messages || !Array.isArray(messages) || messages.length === 0) {
        return res.status(400).send({ error: { message: 'Invalid or missing messages.', type: 'invalid_request_error' } });
    }

    try {
        // Make a POST request to the LLM API with the conversation history
        const response = await axios.post('https://api.groq.com/openai/v1/chat/completions', {
            model: model,
            messages: messages, // Send the filtered conversation history
            temperature: 0.5,
            max_tokens: 1024,
            top_p: 1,
            stop: null
        }, {
            headers: {
                'Authorization': `Bearer <TRUFFLEHOG_REDACTED_GROQ>`, // Replace with your actual API key
                'Content-Type': 'application/json'
            }
        });

        // Send the response back to the frontend
        res.json(response.data);
    } catch (error) {
        if (error.response) {
            console.error('Error communicating with LLM API:', error.response.data);
            res.status(error.response.status).send({ error: error.response.data });
        } else {
            console.error('Error communicating with LLM API:', error.message);
            res.status(500).send({ error: 'Failed to fetch response from LLM API' });
        }
    }
});

// Serve your front-end HTML page (optional)
app.use(express.static('public'));  // Ensure your HTML is in the 'public' folder

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});