Como usar

Widget

Para utilizar o widget, primeiramente devemos adicioná-lo em um iframe no local onde se deseja que o editor fique em sua página:

<iframe
  id="iframe-iara"
  src="https://widget.iarahealth.com"
  style="width: 100%; height: 100vh; border: 0"
></iframe>

Comunicação com o Widget

Uma vez adicionado o iframe, estamos prontos para enviar e receber mensagens para inicializar o reconhecimento e configurar seu uso.

Adicione um listener para mensagens do objeto window, permitindo ouvir mensagens que o widget envia:

<script>
  window.onmessage = (event) => {
    if (event.data.id === "IaraOnWidgetLoaded") {
      console.log("IaraOnWidgetLoaded");
    } else if (event.data.id === "IaraOnFinishReport") {
      console.log("IaraOnFinishReport", event.data);
    } else if (event.data.id === "IaraOnChangeReport") {
      console.log("IaraOnChangeReport", event.data);
    }
  };
</script>

Mensagens enviadas pelo Widget

O widget envia eventos via postMessage. Para receber esses eventos corretamente, adicione um listener ao window usando window.addEventListener('message', (event) => {}) e verifique a origem (event.origin) quando apropriado. Exemplo mínimo de listener:

window.addEventListener("message", (event) => {
  // Verifique event.origin em produção (ex: 'https://widget.iarahealth.com')
  const data = event.data;
  if (!data || !data.id) return;

  if (data.id === "IaraOnWidgetLoaded") {
    console.log("IaraOnWidgetLoaded");
  } else if (data.id === "IaraOnFinishReport") {
    console.log("IaraOnFinishReport", data);
  } else if (data.id === "IaraOnChangeReport") {
    console.log("IaraOnChangeReport", data);
  }
});

Atualmente, o widget envia três mensagens principais:

• "IaraOnWidgetLoaded": sinaliza que o widget foi carregado e está pronto para receber mensagens.
• "IaraOnFinishReport": sinaliza que o usuário finalizou o laudo, retornando seu conteúdo (normalmente contém o laudo final no payload).
• "IaraOnChangeReport": sinaliza que houve alteração no conteúdo do laudo, retornando seu conteúdo atual para sincronização.

Além disso, do lado da página que contém o iframe você pode enviar comandos ao widget via postMessage. Exemplos de helpers para enviar essas mensagens:

function finishReport(clearReport = false) {
  const iframe = document.getElementById("iframe-iara");
  iframe.contentWindow?.postMessage(
    { id: "IaraFinishReport", clearReport },
    "*"
  );
}

function getContent() {
  const iframe = document.getElementById("iframe-iara");
  iframe.contentWindow?.postMessage({ id: "IaraGetReportContent" }, "*");
}

function saveReport() {
  const iframe = document.getElementById("iframe-iara");
  iframe.contentWindow?.postMessage({ id: "IaraSaveReport" }, "*");
}

Use finishReport() para solicitar que o widget finalize o laudo, o widget responderá com IaraOnFinishReport. Use getContent() para solicitar o conteúdo atual do editor e saveReport() para acionar uma gravação/backup conforme implementado no widget.

Inicialização do Reconhecimento

Com os listeners criados, adicione a lógica de inicialização do reconhecimento no evento "IaraOnWidgetLoaded":

if (event.data.id === "IaraOnWidgetLoaded") {
  const iframe = document.getElementById("iframe-iara");
  iframe.contentWindow.postMessage(
    {
      id: "IaraInit",
      speechParams: {
        apiToken: "meuApiToken",
        userId: "meuEmail",
      },
    },
    "https://widget.iarahealth.com"
  );
}

Na mensagem "IaraInit", você deve fornecer as credenciais do usuário (apiToken e userId). Após enviada, o reconhecimento começa a carregar dados e modelos, o que pode demorar um pouco na primeira vez.

Carregar Conteúdo Inicial

Ainda no "IaraOnWidgetLoaded", você pode adicionar conteúdo inicial ao editor (por exemplo, uma máscara de laudo):

iframe.contentWindow.postMessage(
  {
    id: "IaraLoadReport",
    content: "<div>teste 123</div>",
  },
  "https://widget.iarahealth.com"
);

Configuração Avançada com Templates

Você pode alterar configurações adicionais na mensagem "IaraInit", como definir templates acessíveis por voz:

iframe.contentWindow.postMessage(
  {
    id: "IaraInit",
    speechParams: {
      apiToken: "meuApiToken",
      userId: "meuEmail",
    },
    templates: [
      {
        speechCommand: "coluna",
        content: "<div>teste coluna</div>",
        name: "Tomografia de Coluna",
      },
    ],
  },
  "https://widget.iarahealth.com"
);

No exemplo acima, ao ditar "iara texto coluna", será inserido o conteúdo <div>teste coluna</div> no editor. Ou através do atalho @ no editor de texto.