Setup Mínimo

Exemplo Completo - Vanilla JavaScript

Este exemplo demonstra a integração mais simples possível do Iara Syncfusion Adapter usando apenas HTML e JavaScript.

Arquivo HTML Completo

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Iara Syncfusion Adapter - Exemplo Mínimo</title>

    <!-- Syncfusion CSS - Versão 26.2.14 -->
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-documenteditor/styles/material.css" rel="stylesheet" />

    <style>
      body {
        margin: 0;
        padding: 20px;
        font-family: Arial, sans-serif;
      }
      #editor-container {
        height: 600px;
        border: 1px solid #ccc;
      }
      .status {
        margin: 10px 0;
        padding: 10px;
        background: #f0f0f0;
        border-radius: 4px;
      }
      .status.success { background: #d4edda; color: #155724; }
      .status.error { background: #f8d7da; color: #721c24; }
    </style>
  </head>
  <body>
    <h1>Iara Syncfusion Adapter - Exemplo Mínimo</h1>
    <div id="status" class="status">Inicializando...</div>
    <div id="editor-container"></div>

    <!-- Syncfusion Scripts - Versão 26.2.14 -->
    <script src="https://cdn.syncfusion.com/ej2/26.2.14/dist/ej2.min.js"></script>

    <!-- Iara Speech SDK -->
    <script src="https://cdn.iarahealth.com/sdk/javascript/latest/iara-speech.min.js"></script>

    <!-- Iara Components Library -->
    <script src="https://dev.components.iarahealth.com/components-lib.js" type="module"></script>

    <!-- Iara Syncfusion Adapter -->
    <script type="module">
      // Importar adapter
      import { IaraSyncfusionAdapter } from 'https://unpkg.com/@iarastt/adapters@latest/dist/adapters.mjs';

      const statusEl = document.getElementById('status');

      function updateStatus(message, type = 'info') {
        statusEl.textContent = message;
        statusEl.className = `status ${type}`;
      }

      // 1. Criar editor Syncfusion
      updateStatus('Criando editor Syncfusion...');

      ej.documenteditor.DocumentEditorContainer.Inject(
        ej.documenteditor.Toolbar
      );

      const editor = new ej.documenteditor.DocumentEditorContainer({
        enableToolbar: true,
        height: "600px",
        serviceUrl: "https://api.iarahealth.com/speech/syncfusion/api/documenteditor/",
      });
      editor.appendTo("#editor-container");

      updateStatus('Editor criado. Inicializando reconhecimento de voz...', 'success');

      // 2. Criar e configurar recognition
      const recognition = new IaraSpeechRecognition();

      recognition.init({
        userId: 'seu-email@exemplo.com',        // ⚠️ SUBSTITUA com seu email
        apiToken: 'seu-token-aqui',             // ⚠️ SUBSTITUA com seu token
        engine: 'Iara Desktop',
        lang: 'pt-BR',
        region: 'south-america',
        interimResults: true,
      })
      .done(function() {
        updateStatus('Recognition inicializado. Criando adapter...', 'success');

        // Criar adapter
        try {
          const adapter = new IaraSyncfusionAdapter(
            editor.documentEditor,
            recognition,
            {
              assistant: { enabled: true },
              enableSpeechRecognition: true,
            }
          );

          updateStatus('✅ Tudo pronto! Você pode começar a usar o editor.', 'success');

          // Tornar adapter global para testes
          window.adapter = adapter;

          console.log('Adapter disponível em window.adapter');
        } catch (error) {
          updateStatus(`❌ Erro ao criar adapter: ${error.message}`, 'error');
          console.error(error);
        }
      })
      .fail(function(error) {
        updateStatus(`❌ Erro na inicialização: ${error.message}`, 'error');
        console.error(error);
      });
    </script>
  </body>
</html>

Como Usar

Copie o código acima para um arquivo index.html

Substitua as credenciais:

userId: 'seu-email@exemplo.com',    // Seu email da Iara
apiToken: 'seu-token-aqui',         // Seu token da Iara

Abra o arquivo em um navegador moderno (Chrome, Firefox, Edge)
Permita o acesso ao microfone quando solicitado
Comece a usar:
- Clique no ícone de microfone para ditar
- Selecione texto para usar o assistente de IA
- Digite normalmente como em qualquer editor

Testando Funcionalidades

Após carregar a página, você pode testar via console do navegador:

// Obter conteúdo do editor
const html = await adapter.contentManager.reader.getHtmlContent();
console.log('HTML:', html);

// Limpar editor
await adapter.clearReport();

// Inserir template
await adapter.insertTemplate('<p>Novo conteúdo</p>');

Próximos Passos

Este é o exemplo mais simples possível. Para casos de uso mais avançados, veja: