fix the big white box below the chat container

<!DOCTYPE html>
<html>
<head>
  <title>Gemini Chat</title>
  <style>
    body {
      font-family: sans-serif;
    }

    #chat-container {
      display: flex;
      flex-direction: column;
      width: 500px;
      margin: 0 auto;
      border: 1px solid #ccc;
      padding: 10px;
      height: 400px;
      overflow-y: auto;
    }

    .message {
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
    }

    .user-message {
      background-color: #eee;
      text-align: right;
      white-space: pre-wrap; 
    }

    .bot-message {
      background-color: #f5f5f5;
      white-space: pre-wrap; 
    }

    #input-area {
      display: flex;
      margin-top: 10px;
    }

    #input-box {
      flex-grow: 1;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    #send-button {
      padding: 5px 10px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #typing-indicator {
      display: none; 
      margin-top: 5px;
      font-style: italic;
      color: #999;
    }

    #fileInput {
      display: none;
    }
    #attachLabel {
      cursor: pointer;
      margin-right: 8px;
      color: #007bff; 
      font-size: 18px; 
    }
        #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('googled.png'); /* Path to your image */
      background-size: cover; /* Or contain, depending on your needs */
      background-repeat: no-repeat;
      display: none; /* Initially hidden */
      z-index: 1000; /* Ensure it's on top */
    }
  </style>
</head>

<body>
  <div id="chat-container"></div>
  <div id="overlay"></div> <div id="chat-container"></div>
  <div id="input-area">
    <textarea id="input-box" placeholder="Enter your message..." rows="3"></textarea>
    <label for="fileInput" id="attachLabel">📎</label>
    <input type="file" id="fileInput" multiple>
    <button id="send-button">Send</button>
  </div>
  <div id="typing-indicator">Gemini is typing...</div> 

  <script>
    const API_KEYS = [
            'AIzaSyBdc_A8VxExwO6-0LY1--r2-Ym73lMg-h4',
            'AIzaSyBydeCpaNOIPSk794CpTGnfKrxbjCgJLu4',
            'AIzaSyCQ7tBHtctxlNs61Zm2Y__7KYeDLfz5dms',
	    'AIzaSyAip_DFfKNC35MFIorEoNK4y6czP9P65-c'
    ];
    let apiKeyIndex = 0;

    function getCurrentApiKey() {
        return API_KEYS[apiKeyIndex];
    }

  const API_URL = 'https://generativelanguage.googleapis.com';
    const chatContainer = document.getElementById('chat-container');
    const inputBox = document.getElementById('input-box');
    const sendButton = document.getElementById('send-button');
    const typingIndicator = document.getElementById('typing-indicator');
    const fileInput = document.getElementById('fileInput');

    let history = []; // Initialize history here

    sendButton.addEventListener('click', sendMessage);
    inputBox.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault();
        sendMessage();
      }
    });

    async function sendMessage() {
        const userMessageText = inputBox.value.trim(); // Get message from inputBox
        const files = fileInput.files;

        if (!userMessageText && files.length === 0) {
            alert('Please enter a message or select a file.');
            return;
        }

            if (files.length > 0) {
                let fileNames = [];
                for (let i = 0; i < files.length; i++) {
                    fileNames.push(files[i].name);
                }
                appendMessage('User', `[Files attached: ${fileNames.join(', ')}]`);
                showTypingIndicator();
            }
            if (userMessageText) {
                appendMessage('User', `${userMessageText}`);
                showTypingIndicator();
            }

            const userParts = [];

            if (files.length > 0) {
                try {
                    for (let i = 0; i < files.length; i++) {
                        const file = files[i];
                        const fileUri = await uploadFile(file);
                        userParts.push({
                            "fileData": {
                                "fileUri": fileUri,
                                "mimeType": file.type
                            }
                        });
                    }
                } catch (error) {
                    console.error('File upload failed:', error);
                    appendMessage('Error', 'Failed to upload one or more files.');
                    hideTypingIndicator();
                    return;
                }
            }

            if (userMessageText) {
                userParts.push({
                    "text": userMessageText
                });
            }

            history.push({
                "role": "user",
                "parts": userParts
            });

            const requestBody = {
                "contents": history,
                "generationConfig": {
                    "temperature": 0,
                    "topK": 40,
                    "topP": 0.95,
                    "maxOutputTokens": 10000,
                    "responseMimeType": "text/plain"
                }
            };

            try {
                await attemptApiRequest(requestBody);
            } catch (error) {
                console.error('Error:', error);
                appendMessage('Error', 'Failed to get response from the API.');
            } finally {
                hideTypingIndicator();
            }

            userMessageInput.value = '';
            fileInput.value = '';
        }
    function appendMessage(sender, message) {
        const messageDiv = document.createElement('div');
        messageDiv.classList.add('message', sender === 'User' ? 'user-message' : 'bot-message');

        const senderSpan = document.createElement('span');
        senderSpan.style.fontWeight = 'bold'; // Make sender bold
        senderSpan.textContent = `${sender}: `;
        messageDiv.appendChild(senderSpan);
       
        const messageText = document.createTextNode(message);
        messageDiv.appendChild(messageText);


        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    function hideTypingIndicator() {
      typingIndicator.style.display = 'none';
    }

        async function attemptApiRequest(requestBody) {
            const maxAttempts = API_KEYS.length;
            let attempts = 0;

            while (attempts < maxAttempts) {
                const apiKey = getCurrentApiKey();
                try {
                    const response = await fetch(`${API_URL}/v1beta/models/gemini-1.5-pro:generateContent?key=${apiKey}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(requestBody)
                    });

                    if (!response.ok) {
                        const errorText = await response.text();
                        throw new Error(`API request failed: ${response.status} ${response.statusText} - ${errorText}`);
                    }

                    const data = await response.json();

                    const botResponse = data.candidates[0].content.parts.map(part => part.text || '').join('');
                    appendMessage('Bot', `${botResponse}`);

                    history.push({
                        "role": "model",
                        "parts": data.candidates[0].content.parts
                    });

                    return;

                } catch (error) {
                    console.warn(`Attempt with API key at index ${apiKeyIndex} failed:`, error);

                    attempts++;
                    apiKeyIndex = (apiKeyIndex + 1) % API_KEYS.length;

                    if (attempts >= maxAttempts) {
                        throw new Error('All API keys have failed.');
                    } else {
                        console.log(`Retrying with next API key (index ${apiKeyIndex})...`);
                    }
                }
            }
        }



    const overlay = document.getElementById('overlay');

    function showTypingIndicator() {
      typingIndicator.style.display = 'block';
      overlay.style.display = 'block'; // Show overlay
    }

    function hideTypingIndicator() {
      typingIndicator.style.display = 'none';
      overlay.style.display = 'none'; // Hide overlay
    }

    async function uploadFile(file) {
      const metadata = { "file": { "display_name": file.name } };

      const maxAttempts = API_KEYS.length;
      let attempts = 0;

      while (attempts < maxAttempts) {
        const apiKey = getCurrentApiKey();
        try {
          const initiateUploadResponse = await fetch(`${API_URL}/upload/v1beta/files?key=${apiKey}`, {
            method: 'POST',
            headers: {
              'X-Goog-Upload-Command': 'start',
              'X-Goog-Upload-Protocol': 'resumable',
              'Content-Type': 'application/json; charset=UTF-8',
              'X-Goog-Upload-Header-Content-Type': file.type,
              'Accept': 'application/json'
            },
            body: JSON.stringify(metadata)
          });

          if (!initiateUploadResponse.ok) {
            const errorText = await initiateUploadResponse.text();
            throw new Error(`Failed to initiate file upload: ${initiateUploadResponse.status} ${initiateUploadResponse.statusText} - ${errorText}`);
          }

          const uploadUrl = initiateUploadResponse.headers.get('X-Goog-Upload-URL');
          if (!uploadUrl) {
            throw new Error('Upload URL not returned from initiate upload request.');
          }

          const uploadResponse = await fetch(uploadUrl, {
            method: 'POST',
            headers: {
              'X-Goog-Upload-Command': 'upload, finalize',
              'X-Goog-Upload-Offset': '0',
              'Content-Type': file.type,
               'Content-Length': file.size.toString(),  // Important for larger files
            },
            body: file
          });


          if (!uploadResponse.ok) {
            const errorText = await uploadResponse.text();
            throw new Error(`Failed to upload file content: ${uploadResponse.status} ${uploadResponse.statusText} - ${errorText}`); // More specific error message
          }

          const uploadResult = await uploadResponse.json();
          const fileUri = uploadResult.file.uri;  // Get the file URI
          if (!fileUri) {
            throw new Error('File URI not returned from file upload response.'); // More specific error message
          }
          return fileUri; // Return the file URI


        } catch (error) {
          console.warn(`File upload attempt with API key at index ${apiKeyIndex} failed:`, error);
          attempts++;
          apiKeyIndex = (apiKeyIndex + 1) % API_KEYS.length;

          if (attempts >= maxAttempts) {
            throw new Error('All API keys have failed for file upload.');
          } else {
            console.log(`Retrying file upload with next API key (index ${apiKeyIndex})...`);
          }
        }
      }
    }

  </script>
</body>
</html>