JSFiddle - React, Tailwind, and code Playground

by Erik

HTML

<div>
        <button id="generateButton">Generate Report</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=1749575657"></script>

JavaScript

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

generateButton.addEventListener('click', () => {
  const responseTextDiv = document.getElementById('responseText');
  responseTextDiv.innerHTML = '';
  generateButton.disabled = true;
  report_client.setOutputElement(responseTextDiv);
  
  
/* const report_client = ReportClient.init({
  websocketUrl: serverUrl,
  outputElement: document.getElementById("responseText") || undefined
}); */

  const gen = report_client.generate(COMPANY_NAME, LOCATION);
  gen.teaser(TYPE)
    .then(() => {
    generateButton.disabled = false;
    gen.copy();
  })
    .catch(error => {
    console.error('Generation failed:', error);
    responseTextDiv.innerHTML = `<div style="color: red;">Error: ${error.message}</div>`;
    generateButton.disabled = false;
  });
});