async function displayScreenData(screen, pushToHistory = false, theme = null) {
  deactivateLoader();

  const htmlString = screen.data.toString();
  const htmlDocument = parser.parseFromString(htmlString, 'text/html');
  suggestionArea.innerHTML = '<div class="suggestion-parent"></div>';

  console.group(...consoleMessage('Processing Screen Data'));
  console.log(htmlDocument);
  console.groupEnd();

  const mainContentDOM = htmlDocument.querySelector('#assistant-card-content');

  mainArea.innerHTML = `
    <div class="assistant-markup-response fade-in-from-bottom">
      ${mainContentDOM.innerHTML}
    </div>`;

  if (theme === 'light' || getEffectiveTheme() === 'light') {
    const emojiRegex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])*/g;
    const assistantMarkupResponse = mainArea.querySelector(
      '.assistant-markup-response',
    );
    const emojis = assistantMarkupResponse.innerHTML
      .match(emojiRegex)
      .filter((x) => x);

    console.log('Emojis:', emojis);

    emojis.forEach((emoji) => {
      assistantMarkupResponse.innerHTML = assistantMarkupResponse.innerHTML.replace(
        emoji,
        `<span style="filter: invert(1);">${emoji}</span>`,
      );
    });

    assistantMarkupResponse.classList.add('invert');
    assistantMarkupResponse.querySelectorAll('img').forEach((el) => {
      el.classList.add('invert');
    });
  }

  let element = mainArea.querySelector('.assistant-markup-response')
    .lastElementChild;

  const hasWebAnswer = mainArea.querySelector('#tv_web_answer_root');
  const hasKnowledgePanel = mainArea.querySelector('#tv_knowledge_panel_source');
  const hasCarousel = mainArea.querySelector('#selection-carousel-tv');
  const hasPhotoCarousel = mainArea.querySelector('#photo-carousel-tv');
  const hasTextContainer = element.classList.contains('show_text_container');
  const hasPlainText = hasTextContainer && element.querySelector('.show_text_content');
  const hasDefinition = mainArea.querySelector('#flex_text_audio_icon_chunk');
  const elementFlag = element.getAttribute('data-flag');
  let isGoogleImagesContent;

  if (hasCarousel && !hasPhotoCarousel) {
    // Only when there is carousel other than "Photo Carousel"
    document.querySelector('.assistant-markup-response')
      .lastElementChild.innerHTML = hasCarousel.outerHTML;
  }

  if (elementFlag == null || elementFlag !== 'prevent-auto-scale') {
    if (!hasPlainText) {
      if (assistantConfig['enableAutoScaling']) {
        element.setAttribute(
          'style',
          `
            transform: ${
              hasKnowledgePanel || hasWebAnswer ? 'scale(0.65)' : 'scale(0.75)'
            };
            position: relative;
            left: ${(() => {
              if (hasKnowledgePanel || hasWebAnswer) {
                return '-15%';
              }
              if (hasCarousel && !hasPhotoCarousel) {
                return '-91%';
              }
              if (hasPhotoCarousel) {
                return '-26%';
              }

              return '-10%';
            })()};
            top: ${(() => {
              if (hasKnowledgePanel) {
                return '-40px';
              }
              if (hasWebAnswer) {
                return '-35px';
              }
              if (hasDefinition) {
                return '-70px';
              }
              if (hasCarousel && !hasPhotoCarousel) {
                return '-45px';
              }

              return '-20px';
            })()};
            ${
              hasCarousel || hasPhotoCarousel
                ? 'overflow-x: scroll; width: 217%;'
                : ''
            }
            ${hasPhotoCarousel ? 'padding: 2em 0 0 0;' : ''}
          `,
        );
      }
    }
    else {
      element.setAttribute(
        'style',
        `
          transform: scale(1.2);
          position: relative;
          left: 13%;
          top: 60px;
        `,
      );
    }
  }

  if (assistantConfig['enableAutoScaling'] || hasPlainText) {
    mainArea
      .querySelector('.assistant-markup-response')
      .classList.add('no-x-scroll');
  }

  if (hasDefinition) {
    hasDefinition.setAttribute(
      'onclick',
      "document.querySelector('audio').play()",
    );

    hasDefinition.setAttribute('style', 'cursor: pointer;');
  }

  let existingStyle;

  if (assistantConfig['enableAutoScaling'] || hasPlainText) {
    while (element != null && !hasPhotoCarousel) {
      existingStyle = element.getAttribute('style');
      element.setAttribute(
        'style',
        `${existingStyle || ''}padding: 0;`,
      );
      element = element.lastElementChild;
    }
  }

  let responseType;

  if (hasTextContainer) {
    // Includes Text Response and Google Images Response

    mainArea.innerHTML = `
      <img src="../res/Google_Assistant_logo.svg" style="
        height: 25px;
        position: absolute;
        top: 20px;
        left: 20px;
      ">
      ${mainArea.innerHTML}
    `;
  }

  if (hasPlainText) {
    const { innerText } = document.querySelector('.show_text_content');
    responseType = inspectResponseType(innerText);

    const textContainer = document.querySelector('.show_text_container');

    if (responseType['type']) {
      if (
        responseType['type'] === 'google-search-result'
        || responseType['type'] === 'youtube-result'
      ) {
        let youtubeThumbnailUrl;

        if (responseType['type'] === 'youtube-result') {
          const youtubeVideoId = responseType['searchResultParts'][2]
            .match(/.*watch\?v=(.+)/)
            .pop();

          youtubeThumbnailUrl = `https://img.youtube.com/vi/${youtubeVideoId}/0.jpg`;
        }

        textContainer.innerHTML = `
          <div
            class="google-search-result"
            data-url="${responseType['searchResultParts'][2]}"
          >
            <div style="font-size: 22px;">
              ${responseType['searchResultParts'][0]}
            </div>

            <div style="opacity: 0.502; padding-top: 5px;">
              ${responseType['searchResultParts'][2]}
            </div>

            <hr color="#ffffff" style="opacity: 0.25;">

            <div style="${
              responseType['type'] === 'youtube-result' ? 'display: flex;' : ''
            }">
              ${
                responseType['type'] === 'youtube-result'
                  ? `
                    <img
                      class="${getEffectiveTheme() === 'light' ? 'invert' : ''}
                      src="${youtubeThumbnailUrl}"
                      style="
                        height: 131px;
                        margin-right: 15px;
                        border-radius: 10px;
                      "
                    >`
                  : ''
              }
              <div style="padding-top: 10px;">
                ${
                  responseType['searchResultParts'][3]
                    ? responseType['searchResultParts'][3].replace(/\\n/g, '<br>')
                    : ''
                }
              </div>
            </div>
          </div>
        `;
      }
      else if (responseType['type'] === 'google-search-result-prompt') {
        activateLoader();

        const searchResults = await googleIt({
          query: getCurrentQuery(),
          'no-display': true,
        });

        const topResult = searchResults[0];

        const googleSearchResultScreenData = `
          <div
            class="google-search-result"
            data-url="${topResult.link}"
          >
            <div style="font-size: 22px;">
              ${topResult.title}
            </div>

            <div style="opacity: 0.502; padding-top: 5px;">
              ${topResult.link}
            </div>

            <hr color="#ffffff" style="opacity: 0.25;">

            <div style="padding-top: 10px;">
              ${topResult.snippet}
            </div>
          </div>
        `;

        textContainer.innerHTML = googleSearchResultScreenData;
        deactivateLoader();
      }
    }

    if (innerText.indexOf('https://www.google.com/search?tbm=isch') !== -1) {
      // Google Images
      isGoogleImagesContent = true;
      textContainer.innerHTML = '<div id="google-images-carousel"></div>';

      const imageSubject = encodeURIComponent(getCurrentQuery());
      const googleImagesUrl = `https://images.google.com/search?tbm=isch&q=${imageSubject}&sfr=gws&gbv=1&sei=n37GXpmUFviwz7sP4KmZuA0`;
      const googleImagesCarousel = mainArea.querySelector(
        '#google-images-carousel',
      );

      try {
        const googleImagesResponse = await window.fetch(googleImagesUrl);

        if (googleImagesResponse.ok) {
          // Page loaded
          const googleImagesPage = parser.parseFromString(
            await googleImagesResponse.text(),
            'text/html',
          );

          const allImages = googleImagesPage.querySelectorAll('table img');

          for (let i = 0; i < 20; i++) {
            const currentImage = allImages[i];

            googleImagesCarousel.innerHTML += `
              <span>
                <img
                  style="height: 40vh; margin-right: 5px;"
                  src="${currentImage.getAttribute('src')}"
                />
              </span>
            `;
          }
        }
        else {
          console.error('Error: Response Object', googleImagesResponse);

          let errorDetails = 'Assistant cannot fetch images due to malformed request';
          let subdetails = `Error: HTTP status code ${googleImagesResponse.status}`;

          if (googleImagesResponse.status === 429) {
            // Rate limit exceeded
            errorDetails = 'Too many requests sent in given time. Rate limit exceeded.';
            subdetails = 'Error: 429 Too Many Requests';
          }
          else {
            suggestionArea.querySelector('.suggestion-parent').innerHTML += `
              <div class="suggestion" onclick="retryRecent(false)">
                <span>
                  <img src="../res/refresh.svg" style="
                    height: 20px;
                    width: 20px;
                    vertical-align: top;
                    padding-right: 5px;
                    ${
                      getEffectiveTheme() === 'light' ? 'filter: invert(1);' : ''
                    }"
                  >
                </span>
                Retry
              </div>
            `;
          }

          displayErrorScreen({
            title: 'Failed to fetch images',
            details: errorDetails,
            subdetails,
          });
        }
      }
      catch (e) {
        if (e.name === TypeError.name) {
          displayErrorScreen({
            title: 'Failed to fetch images',
            details: 'Assistant cannot fetch images due to internet issues.',
            subdetails: 'Error: Internet not available',
          });

          suggestionArea.querySelector('.suggestion-parent').innerHTML += `
            <div class="suggestion" onclick="retryRecent(false)">
              <span>
                <img src="../res/refresh.svg" style="
                  height: 20px;
                  width: 20px;
                  vertical-align: top;
                  padding-right: 5px;
                  ${getEffectiveTheme() === 'light' ? 'filter: invert(1);' : ''}"
                >
              </span>
              Retry
            </div>
          `;
        }
      }
    }
    else {
      isGoogleImagesContent = false;
    }
  }
  else {
    responseType = inspectResponseType('');
  }

  if (hasPhotoCarousel) {
    const images = element.querySelectorAll('img[data-src]');

    for (let i = 0; i < images.length; i++) {
      const img = images[i];
      img.setAttribute('src', img.getAttribute('data-src'));
    }
  }

  const externalLinks = mainArea.querySelectorAll('[data-url]');

  for (let i = 0; i < externalLinks.length; i++) {
    const temp = externalLinks[i];
    temp.setAttribute(
      'onclick',
      `openLink("${temp.getAttribute('data-url')}")`,
    );
    temp.setAttribute('style', 'cursor: pointer;');
  }

  // Set Suggestion Area

  const suggestionsDOM = htmlDocument.querySelector('#assistant-scroll-bar');
  const suggestionParent = document.querySelector('.suggestion-parent');

  if (suggestionsDOM != null || responseType['type'] === 'google-search-result-prompt') {
    if (responseType['type'] || hasWebAnswer || hasKnowledgePanel) {
      suggestionParent.innerHTML += `
        <div class="suggestion" onclick="openLink('https://google.com/search?q=${getCurrentQuery()}')" data-flag="action-btn">
          <span>
            <img src="../res/google-logo.png" style="
              height: 20px;
              width: 20px;
              vertical-align: top;
              padding-right: 5px;"
            >
          </span>
          Search
        </div>
      `;
    }

    if (isGoogleImagesContent) {
      suggestionParent.innerHTML += `
        <div class="suggestion" onclick="openLink('https://www.google.com/search?tbm=isch&q=${
          encodeURIComponent(
            getCurrentQuery(),
          )
        }')" data-flag="action-btn">
          <span>
            <img src="../res/google-logo.png" style="
              height: 20px;
              width: 20px;
              vertical-align: top;
              padding-right: 5px;"
            >
          </span>
          Google Images
        </div>
      `;
    }

    if (hasPhotoCarousel) {
      const currentQuery = getCurrentQuery();
      const separatorIndex = Math.min(
        currentQuery.indexOf('of') !== -1
          ? currentQuery.indexOf('of')
          : Infinity,
        currentQuery.indexOf('from') !== -1
          ? currentQuery.indexOf('from')
          : Infinity,
      );
      const subject = currentQuery
        .slice(separatorIndex)
        .replace(/(^of|^from)\s/, '');

      let photosUrl = 'https://photos.google.com/';

      if (subject) {
        photosUrl += `search/${subject}`;
      }

      suggestionParent.innerHTML += `
        <div class="suggestion" onclick="openLink('${photosUrl}')" data-flag="action-btn">
          <span>
            <img src="../res/google-photos.svg" style="
              height: 20px;
              width: 20px;
              vertical-align: top;
              padding-right: 5px;"
            >
          </span>
          Google Photos
        </div>
      `;
    }

    for (let i = 0; i < suggestionsDOM?.children.length; i++) {
      const label = suggestionsDOM.children[i].innerHTML.trim();
      const query = suggestionsDOM.children[i].getAttribute('data-follow-up-query');
      let action = query;

      if (
        suggestionsDOM.children[i].getAttribute('data-flag') !== 'action-btn'
      ) {
        action = `assistantTextQuery(\`${escapeQuotes(query)}\`)`;
      }

      suggestionParent.innerHTML += `
        <div class="suggestion" onclick="${action}">${label}</div>
      `;
    }
  }
  else {
    suggestionParent.innerHTML = `
      <span style="opacity: 0.502;">
        ${supportedLanguages[assistantConfig['language']].noSuggestionsText}
      </span>
    `;
  }

  // Register horizontal scrolling for suggestion area
  registerHorizontalScroll(suggestionArea);

  // Apply horizontal scrolling behavior for carousels

  let carouselDOM;

  if (hasCarousel || hasPhotoCarousel) {
    carouselDOM = document.querySelector('.assistant-markup-response')
      .lastElementChild;
  }
  else if (document.querySelector('#google-images-carousel')) {
    carouselDOM = document.querySelector('.assistant-markup-response')
      .lastElementChild.lastElementChild;
  }
  else if (document.querySelector('#tv-item-container')) {
    carouselDOM = document.querySelector(
      '.assistant-markup-response #tv-item-container',
    );
  }

  registerHorizontalScroll(carouselDOM, false);

  // Push to History

  if (pushToHistory && mainArea.querySelector('.error-area') == null) {
    let screenData;

    if (isGoogleImagesContent || responseType['type'] === 'google-search-result-prompt') {
      screenData = generateScreenData(true);
    }
    else {
      screenData = screen;
    }

    history.push({
      query: getCurrentQuery(),
      'screen-data': screenData,
    });

    historyHead = history.length - 1;
    queryHistoryHead = history.length;
    updateNav();
  }

  if (isGoogleImagesContent && getEffectiveTheme() === 'light') {
    seekHistory(historyHead);
  }
}
Process the *Screen Data* and display the `result` and set `suggestions`.

@param {*} screen
The screen data provided by Assistant SDK

@param {boolean} pushToHistory
Push the *screen data* to the `history`.
_(Defaults to `false`)_

@param {"dark" | "light" | "system"} theme
Theme to be applied on screen data.
Leave this parameter to infer from `assistantConfig.theme`