We have this website, it is part of a larger code base with a backend. We need to make sure that all the pointers and structures end up the same. What we need to do is to completely redesign the website and make it modern. We want to take inspiration from tamagotchi display and make almost a simulation of this in our webpage, integrating the chat and the rooms we already have. We want to make some kind of square window in the middle of the website that will represent the current room, we will be able to see a design inside the box representing what room we are in right now, and we will have the character in the center. When the character moves, what we need to do is to change the background of the center box to represent the new room. Besides this square window, should be the chatbox to interact and talk with, here we should keep the recent history and the area to interact and send messages to it. Now, there should be a bubble that pops up every message we receive from the AI, last for a while above its character representation in the square room and remove it after a few seconds. Here is the JS and HTML, but if you need to see any part of the flask application, tell me what you need to see and I will give you that information.
We want to make a simple but attractive implementation of this, preferably without necessary changes to the python flask backend.
the design, lets make something heavily inspired by the 2000's, imagine translucent tinted plastic, imagine squishy and 3D buttons, imagine 2D bits representations of stuff.
Imagine a big square for the display, imagine soft translucent pastel colors, greens, blues, pinks, yellow
imagine intricate designs with pixels for every room and the interior, bubblegum dream, aero style


Do not use react and make a simple implementation yet visually attractive to these ideas and have it seamlessly integrate with the backend we have. 


// static/script.js

// Function to escape HTML special characters
function escapeHtml(text) {
    return text
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;")
        .replace(/\n/g, "<br>");  // Replace newline with <br> for proper multiline display

}

// Event listeners for sending messages
document.getElementById('send').addEventListener('click', sendMessage);
document.getElementById('input').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

/**
 * Sends the user's message to the backend and handles the response.
 */
function sendMessage() {
    const input = document.getElementById('input');
    const message = input.value.trim();
    if (message === "") return;

    appendMessage("User", message, 'user');
    input.value = "";

    fetch('/api/message', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: message })
    })
    .then(response => response.json())
    .then(data => {
        if (data.reply) {
            appendMessage("Assistant", data.reply, 'assistant');
            handleAssistantActions(data.actions);
        }
    })
    .catch(error => {
        //appendMessage("Error", "Failed to send the message.", 'error');
        console.error('Error:', error);
    });
}

/**
 * Appends a message to the chat container.
 * @param {string} sender - The sender of the message ('User', 'Assistant', etc.).
 * @param {string} text - The message text.
 * @param {string} type - The type of message for styling purposes.
 */

function appendMessage(sender, text, type = 'user') {
    const chat = document.getElementById('chat');

    // Handle long texts by splitting them
    const maxLength = 500; // Adjust as needed
    const chunks = text.match(new RegExp(`.{1,${maxLength}}`, 'g'));

    chunks.forEach((chunk, index) => {
        const msg = document.createElement('div');

        if (type === 'assistant-action') {
            msg.classList.add('assistant-action');
        }
        if (type === 'error') {
            msg.classList.add('error');
        }

        // Escape HTML for each chunk
        const escapedText = escapeHtml(chunk);
        
        // Only add the sender once, without "(cont.)"
        if (index === 0) {
            msg.innerHTML = `<strong>${sender}:</strong> ${escapedText}`;
        } else {
            msg.innerHTML = `${escapedText}`;  // No sender on continuation chunks
        }

        chat.appendChild(msg);
    });

    chat.scrollTop = chat.scrollHeight;
}

/**
 * Handles the assistant's actions by processing structured action data.
 * @param {Array} actions - List of action objects.
 */
function handleAssistantActions(actions) {
    actions.forEach(action => {
        switch(action.type) {
            case 'move':
                moveCharacter(action.content.to_room);
                appendMessage("Assistant", `Moved to ${capitalizeRoom(action.content.to_room)}.`, 'assistant-action');
                break;
            case 'write_poem':
                displayPoem(action.content.poem);
                break;
            case 'take_note':
                displayNote(action.content.note);
                break;
            case 'sleep':
                appendMessage("Assistant", `Slept for ${action.content.duration} seconds.`, 'assistant-action');
                break;
            case 'process_result':
                appendMessage("Assistant", `Processed result: ${action.content.projectResult}`, 'assistant-action');
                break;
            case 'associations':
                appendMessage("Assistant", `Generated associations: ${action.content.associations}`, 'assistant-action');
                break;
            case 'ponder_about':
                appendMessage("Assistant", `Pondered about: ${action.content.CoT}`, 'assistant-action');
                break;
            case 'error':
                appendMessage("Assistant", `Error: ${action.content.message}`, 'error');
                break;
            // Add more cases for other action types as needed
            default:
                console.warn(`Unknown action type: ${action.type}`);
        }
    });
}

/**
 * Appends autonomous actions received via SSE to the chat.
 * @param {Object} action - The action object received from SSE.
 */
// static/script.js

function appendAutonomousAction(action) {
    switch(action.type) {
        case 'move':
            moveCharacter(action.content.to_room);
            appendMessage("Assistant", `Moved to ${capitalizeRoom(action.content.to_room)}.`, 'assistant-action');
            break;
        case 'write_poem':
            displayPoem(action.content.poem);
            break;
        case 'take_note':
            displayNote(action.content.note);
            break;
        case 'sleep':
            appendMessage("Assistant", `Slept for ${action.content.duration} seconds.`, 'assistant-action');
            break;
        case 'process_result':
            appendMessage("Assistant", `Processed result: ${action.content.projectResult}`, 'assistant-action');
            break;
        case 'associations':
            appendMessage("Assistant", `Generated associations: ${action.content.associations}`, 'assistant-action');
            break;
        case 'ponder_about':
            appendMessage("Assistant", `Pondered about: ${action.content.CoT}`, 'assistant-action');
            break;
        case 'error':
            appendMessage("Assistant", `Error: ${action.content.message}`, 'error');
            break;
        case 'final_reply':  // New case for final assistant reply
            appendMessage("Assistant", action.content, 'assistant');
            break;
        default:
            console.warn(`Unknown autonomous action type: ${action.type}`);
    }
}

/**
 * Handles the assistant's response by processing any actions.
 * @param {Object} data - The complete response data from the backend.
 */
function handleAssistantResponse(data) {
    const actions = data.actions || {};

    // Process each action accordingly
    for (const [action, value] of Object.entries(actions)) {
        switch(action) {
            case 'move':
                moveCharacter(value);
                appendMessage("Assistant", `Moved to ${capitalizeRoom(value)}.`, 'assistant-action');
                break;
            // Add cases for other actions as needed
            default:
                console.warn(`Unknown action: ${action}`);
        }
    }

    // Additionally, you can handle content-based actions
    // displayContentBasedOnReply(data.reply);
}

/**
 * Connects to the SSE stream to receive autonomous actions.
 */
function connectSSE() {
    const eventSource = new EventSource('/stream');

    eventSource.onmessage = function(event) {
        const action = JSON.parse(event.data);
        appendAutonomousAction(action);
    };

    eventSource.onerror = function(err) {
        console.error('SSE connection error:', err);
        eventSource.close();
    };
}

/**
 * Moves the character to the specified room by manipulating the DOM.
 * @param {string} room - The target room's ID.
 */
function moveCharacter(room) {
    console.log('Moving character to:', room);
    room = room.toLowerCase();

    const availableRooms = ['kitchen', 'living_room', 'bedroom', 'study', 'library', 'garden'];
    if (!availableRooms.includes(room)) {
        console.error(`Unknown room: ${room}`);
        return;
    }

    const character = document.getElementById('character');
    if (!character) {
        console.error('Character element not found');
        return;
    }

    // Check if character is already in the target room to avoid unnecessary DOM manipulation
    if (character.parentElement && character.parentElement.id === room) {
        console.log('Character is already in', room);
        return; // Character is already in the correct room
    }

    // First remove character from current room
    if (character.parentElement) {
        character.parentElement.removeChild(character);
    }

    // Reset all room borders
    availableRooms.forEach(r => {
        const roomDiv = document.getElementById(r);
        if (roomDiv) {
            roomDiv.style.borderColor = '#000';
        }
    });

    const targetRoom = document.getElementById(room);
    if (targetRoom) {
        // Ensure the character is visible
        character.style.display = 'block';

        // Add character to new room
        targetRoom.appendChild(character);

        // Highlight the new room
        targetRoom.style.borderColor = 'green';

        // Add a small animation effect
        character.style.opacity = '0';
        character.offsetHeight; // Force reflow
        character.style.opacity = '1';

        console.log(`Moved character to ${room}`);
    }
}

/**
 * Displays a poem in the chat container.
 * @param {string} poemText - The poem text.
 */
function displayPoem(poemText) {
    const chat = document.getElementById('chat');
    const poemDiv = document.createElement('div');
    poemDiv.classList.add('assistant-action'); // Differentiate autonomous ways
    poemDiv.innerHTML = `<strong>Poem:</strong><pre>${escapeHtml(poemText)}</pre>`;
    chat.appendChild(poemDiv);
    chat.scrollTop = chat.scrollHeight;
}

/**
 * Displays a note in the chat container.
 * @param {string} noteText - The note text.
 */
function displayNote(noteText) {
    const chat = document.getElementById('chat');
    const noteDiv = document.createElement('div');
    noteDiv.classList.add('assistant-action'); // Differentiate autonomous ways
    noteDiv.innerHTML = `<strong>Note:</strong> ${escapeHtml(noteText)}`;
    chat.appendChild(noteDiv);
    chat.scrollTop = chat.scrollHeight;
}

/**
 * Capitalizes the room name for display purposes.
 * @param {string} room - The room name in lowercase with underscores.
 * @returns {string} - The capitalized room name.
 */
function capitalizeRoom(room) {
    return room.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
}

/**
 * Fetches the current room from the backend and positions the character.
 */
function initializeCharacter() {
    fetch('/api/memory')
        .then(response => response.json())
        .then(data => {
            const currentRoom = data.current_room;
            moveCharacter(currentRoom);
            appendMessage("System", `Character initialized in ${capitalizeRoom(currentRoom)}.`, 'system');
        })
        .catch(error => {
            console.error('Error fetching current room:', error);
            // Default to bedroom if there's an error
            moveCharacter('bedroom');
            appendMessage("Error", "Failed to fetch current room. Defaulting to Bedroom.", 'error');
        });
}

/**
 * Initializes the SSE connection when the page loads.
 */
function initializeSSE() {
    connectSSE();
}

// Call these when the page loads
document.addEventListener('DOMContentLoaded', () => {
    initializeCharacter();
    initializeSSE();
});





<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>LLM Controlled Environment</title>
    <style>
        body { 
            font-family: 'Arial', sans-serif; 
            background-color: #2C2A28; /* Dark, cozy brown */
            color: #E0DCC9; /* Warm beige for contrast */
            margin: 0; 
            padding: 20px; 
        }

        h1 { 
            text-align: center; 
            color: #EEDAC6; /* Light warm brown */
            margin-bottom: 20px; 
        }

        #chat-container {
            width: 80%;
            margin: 0 auto;
            padding: 10px;
            background-color: #3A3836; /* Slightly lighter brown for contrast */
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        }

        #chat { 
            border: 1px solid #44403C; 
            padding: 10px; 
            height: 400px; 
            overflow-y: scroll; 
            background-color: #2E2C2A; /* Darker brown for chat area */
            border-radius: 5px;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
        }

        #input { 
            width: 80%; 
            padding: 10px; 
            border: 1px solid #44403C; 
            border-radius: 5px;
            margin-top: 10px;
            background-color: #3A3836; 
            color: #EEDAC6; 
        }

        #send { 
            padding: 10px 20px; 
            border: none; 
            background-color: #725D4B; /* Warm brown for buttons */
            color: #fff; 
            border-radius: 5px; 
            cursor: pointer;
            margin-left: 10px;
            transition: background-color 0.3s ease;
        }

        #send:hover {
            background-color: #8E7358; /* Lighter, warmer brown on hover */
        }

        #house { 
            margin-top: 20px; 
            display: flex; 
            justify-content: space-around; 
            flex-wrap: wrap;
            background-color: #3A3836;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        }

        .room {
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 2px solid #725D4B; 
            margin: 10px;
            position: relative;
            background-color: #2E2C2A; /* Dark brown for rooms */
            border-radius: 10px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
            transition: border-color 0.5s ease, transform 0.3s ease;
        }

        .room:hover {
            border-color: #8E7358;
            transform: translateY(-5px);
        }

        .room span { 
            position: absolute; 
            top: 10px; 
            left: 10px; 
            font-weight: bold; 
            font-size: 16px;
            color: #E0DCC9; /* Warm beige text */
        }

        .character {
            width: 30px;
            height: 30px;
            background-color: #C9625E; /* Cozy reddish-brown for character */
            border-radius: 50%;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            transition: all 0.5s ease;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        .character:hover {
            transform: translateX(-50%) scale(1.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
        }

        .assistant-action { 
            background-color: #3A3836; 
            padding: 5px; 
            border-radius: 5px; 
            margin: 5px 0;
            color: #E0DCC9;
        }

        .error { 
            color: #C9625E; 
            font-weight: bold;
        }

        pre {
            white-space: pre-wrap;
            color: #E0DCC9;
            background-color: #3A3836;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>LLM Controlled Environment</h1>
    <div id="chat-container">
        <div id="chat"></div>
        <input type="text" id="input" placeholder="Enter your message here..." autofocus>
        <button id="send">Send</button>
    </div>

    <div id="house">
        <div class="room" id="kitchen">
            <span>Kitchen</span>
        </div>
        <div class="room" id="living_room">
            <span>Living Room</span>
        </div>
        <div class="room" id="bedroom">
            <span>Bedroom</span>
            <!-- Character starts in the bedroom -->
            <div class="character" id="character"></div>
        </div>
        <div class="room" id="study">
            <span>Study</span>
        </div>
        <div class="room" id="library">
            <span>Library</span>
        </div>
        <div class="room" id="garden">
            <span>Garden</span>
        </div>
        <!-- Add more rooms as needed -->
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>