async function populateEmailDropdown() {
  console.log("Existing email_config:", alldata.email_config);

  try {
    const statusResp = await makeApiCallAgent(apiKeyInput1.value, domainInput1.value);
    // console.log("Agent Emails:", statusResp);

    if (statusResp && statusResp.agents) {
      const agents = statusResp.agents;
      console.log("Agents:", agents);

      const emailContainer = document.querySelector('.email');

      // Wrapper for agent email dropdown
      const dropdownWrapper = document.createElement('div');
      dropdownWrapper.classList.add('email-settings');

      // Agent email dropdown
      const agentEmailSelect = document.createElement('fw-select');
      agentEmailSelect.setAttribute('label', 'Select Agents');
      agentEmailSelect.setAttribute('placeholder', 'Choose an agent');
      agentEmailSelect.setAttribute('hint-text', 'Select one or more agents');
      agentEmailSelect.setAttribute('multiple', '');
      agentEmailSelect.id = 'agentEmailSelect';

      // Initialize email_config.agent_email with existing values
      if (!email_config.agent_email) {
        email_config.agent_email = [...alldata.email_config.agent_email];
        console.log("Initialized agent_email from alldata.email_config:", email_config.agent_email);
      }

      agents.forEach((agent) => {
        const option = document.createElement('fw-select-option');
        option.value = agent.email;
        option.textContent = agent.first_name;

        if (alldata.email_config.agent_email.includes(agent.email)) {
          option.setAttribute('selected', 'true');
        }

        agentEmailSelect.appendChild(option);
      });

      agentEmailSelect.addEventListener('fwChange', (event) => {
        const selectedEmails = event.detail.value;
        email_config.agent_email = [...selectedEmails];
        console.log("Updated agent_email:", email_config.agent_email);
      });

      dropdownWrapper.appendChild(agentEmailSelect);
      emailContainer.appendChild(dropdownWrapper);

      const externalEmailWrapper = document.createElement('div');
      externalEmailWrapper.classList.add('email-settings');

      const externalEmailInput = document.createElement('fw-input');
      externalEmailInput.setAttribute('label', 'External Email');
      externalEmailInput.setAttribute('icon-left', 'add-contact');
      externalEmailInput.setAttribute('hint-text', 'Enter external email(s)');
      externalEmailInput.setAttribute('placeholder', 'Enter comma-separated emails');
      externalEmailInput.setAttribute('clear-input', '');
      externalEmailInput.id = 'externalEmailInput';

      // Adding space above the element
      externalEmailInput.style.marginTop = '20px'; // Adjust the space as needed

      // Initialize email_config.external_email with existing values
      if (alldata.email_config.external_email && alldata.email_config.external_email.length > 0) {
        externalEmailInput.value = alldata.email_config.external_email.join(', ');

        email_config.external_email = [...alldata.email_config.external_email];
        console.log("Mapped existing external_email to email_config:", email_config.external_email);
      }

      externalEmailInput.addEventListener('input', () => {
        const typedEmails = externalEmailInput.value.trim();

        const emailArray = typedEmails.split(',').map(email => email.trim()).filter(email => email !== '');

        if (emailArray.length > 0) {
          email_config.external_email = [...emailArray];
        }

        console.log("Updated external_email:", email_config.external_email);
      });

      externalEmailWrapper.appendChild(externalEmailInput);
      emailContainer.appendChild(externalEmailWrapper);

    } else {
      console.warn("No agents found in API response.");
    }
  } catch (error) {
    console.error("Error populating email dropdown:", error);
  }
}


on updating existing mapping to the ui. same way update those emails to email_config.agent_email