JSFiddle - React, Tailwind, and code Playground

by Erik

HTML

<div>
        <button id="generateButton">Generate Report</button>
        <button id="copyButton" style="display: none;">Copy</button>
        <div id="responseContent">
            <div id="responseText"></div>
        </div>
    </div>

<script src="https://lmptmwjosnvvpltxhbnr.supabase.co/storage/v1/object/public/cdn/report_client/bundle.js?t=1749646088"></script>

JavaScript

const generateButton = document.getElementById('generateButton');
const copyButton = document.getElementById('copyButton');
const COMPANY_NAME = "Bridgewater Associates, LP";
const LOCATION = "ONE NYALA FARMS ROAD WESTPORT 6880 United States ";
const TYPE = "kyco";

const responseTextDiv = document.getElementById('responseText');

const client = ReportClient.init({
  outputElement: responseTextDiv || undefined
});

generateButton.addEventListener('click', () => {
  responseTextDiv.innerHTML = '';
  generateButton.disabled = true;
  copyButton.style.display = 'none';

  const gen = client.generate(COMPANY_NAME, LOCATION);
  window.currentGen = gen; // Store generator for copy button
  gen.teaser(TYPE)
    .then(() => {
    generateButton.disabled = false;
    copyButton.style.display = 'inline';
  })
    .catch(error => {
    console.error('Generation failed:', error);
    responseTextDiv.innerHTML = `<div style="color: red;">Error: ${error.message}</div>`;
    generateButton.disabled = false;
  });
});
copyButton.addEventListener('click', () => {
  if (window.currentGen) window.currentGen.copy();
});