Quick Start

Dependências Necessárias

Antes de começar, você precisa incluir as seguintes bibliotecas no seu HTML:

1. Iara Speech SDK

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

O que faz:

Fornece a classe IaraSpeechRecognition para reconhecimento de voz
Gerencia a conexão com os servidores da Iara Health
Controla microfone, detecção de voz (VAD), comandos de voz
Processa e transcreve áudio em tempo real

Por que é necessário: O adapter depende do IaraSpeechRecognition para todas as funcionalidades de voz. Sem ele, o adapter não pode ser inicializado.

2. Iara Components Library

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

O que faz:

Fornece web components customizados (custom elements)
Inclui o componente <iara-ai-assistant> usado pela assistente de IA
Fornece elementos de interface para interação com a IA

Por que é necessário: Necessário apenas se você habilitar a assistente de IA (assistant.enabled: true). Se você usar apenas reconhecimento de voz sem IA, pode omitir esta biblioteca.

Exemplo Completo de HTML

<!DOCTYPE html>
<html>
<head>
  <!-- Syncfusion CSS -->
  <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-documenteditor/styles/material.css" rel="stylesheet" />

  <!-- Syncfusion Scripts -->
  <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 (necessário para assistente de IA) -->
  <script src="https://dev.components.iarahealth.com/components-lib.js" type="module"></script>
</head>
<body>
  <div id="editor-container"></div>

  <!-- Seu código aqui -->
  <script type="module">
    import { IaraSyncfusionAdapter } from 'https://unpkg.com/@iarastt/adapters@latest/dist/adapters.mjs';
    // ... seu código
  </script>
</body>
</html>

Integração em 3 Passos

Assumindo que você já incluiu as dependências acima e tem uma instância Syncfusion funcionando, siga estes passos:

1. Criar e Configurar o Recognition

// Criar instância do reconhecedor
const recognition = new IaraSpeechRecognition();

// Configurar credenciais
recognition.init({
  userId: 'meu@email.com',
  apiToken: 'seu-token-aqui',
  engine: 'Iara Desktop',
  lang: 'pt-BR',
  interimResults: true
}).done(function() {
  console.log('✅ Recognition pronto!');
  // Prosseguir para o passo 2
}).fail(function(error) {
  console.error('❌ Erro:', error);
});

Você DEVE especificar engine: 'Iara Desktop' na configuração do recognition. Sem este parâmetro, o sistema usará a engine padrão ALS que não é compatível com o adapter e causará falhas no reconhecimento de voz.

recognition.init({
  userId: 'meu@email.com',
  apiToken: 'seu-token-aqui',
  engine: 'Iara Desktop',  // ⚠️ OBRIGATÓRIO - Não omita este parâmetro!
  // ... outras configurações
});

2. Criar o Adapter

recognition.init({...}).done(function() {
  // Criar adapter passando o editor e o recognition
  const adapter = new IaraSyncfusionAdapter(
    existingEditor,  // Sua instância do DocumentEditor
    recognition      // Instância do IaraSpeechRecognition
  );

  console.log('✅ Adapter integrado com sucesso!');
});

3. Usar o Adapter

Pronto! Agora você pode:

🎤 Ditar texto usando o microfone
🤖 Gerar relatórios com o assistente de IA
📋 Navegar por campos do documento
💾 Salvar conteúdo em múltiplos formatos

Exemplo Completo

Aqui está um exemplo completo de integração:

Vanilla JS
React

// Assumindo que você já tem um editor Syncfusion
const editor = new ej.documenteditor.DocumentEditorContainer({
    enableToolbar: true,
    height: "600px"
});
editor.appendTo("#editor-container");

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

recognition.init({
    userId: 'meu@email.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() {
    // 2. Criar adapter com configuração completa da assistente
    const adapter = new IaraSyncfusionAdapter(
        editor.documentEditor,
        recognition,
        {
            // Configurações da assistente de IA
            assistant: {
                enabled: true,  // Habilita assistente de IA
            },
            enableSpeechRecognition: true,
            saveReport: true
        }
);

console.log('✅ Tudo pronto!');

// 3. Configurar callbacks (opcional)
adapter.onIaraCommand = function(command) {
    console.log('Comando executado:', command);
};
}).fail(function(error) {
    updateStatus(`❌ Erro na inicialização: ${error.message}`, 'error');
    console.error('❌ Erro na inicialização:', error);
});

import { useEffect, useRef, useState } from 'react';
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
import { IaraSyncfusionAdapter, type IaraSyncfusionConfig } from '@iarastt/adapters';

// Declarar tipos globais
declare global {
  interface Window {
    IaraSpeechRecognition: any;
    IaraSyncfusionAdapter: any;
  }
}

DocumentEditorContainerComponent.Inject(Toolbar);

function EditorComponent() {
  const editorRef = useRef<DocumentEditorContainerComponent>(null);
  const [adapter, setAdapter] = useState<any>(null);

  useEffect(() => {
    // Aguardar o SDK do Iara carregar
    const initializeAdapter = () => {
      if (!window.IaraSpeechRecognition) {
        console.log('⏳ Aguardando Iara Speech SDK...');
        setTimeout(initializeAdapter, 100);
        return;
      }

      if (!editorRef.current) {
        console.log('⏳ Aguardando editor...');
        setTimeout(initializeAdapter, 100);
        return;
      }

      console.log('✅ Iniciando configuração...');

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

      // Configuração completa com parâmetros opcionais
      const initConfig = {
        userId: 'meu@email.com',
        apiToken: 'seu-token-aqui',
        engine: 'Iara Desktop',
        region:  'south-america',
        lang: 'pt-BR',
        interimResults: true,
        useVAD: true,
}

      recognition.init(initConfig).done(() => {
        console.log('✅ Recognition inicializado');

        // Configuração completa do adapter
        const config: IaraSyncfusionConfig = {
          assistant: {
            enabled: true,
            impression: {
              itemizedOutput: true
            },
            user_rules: {
              report: ['Usar terminologia médica padrão'],
              impression: ['Ser conciso e objetivo']
            }
          },
          enableSpeechRecognition: true,
          saveReport: true,
          language: 'pt-BR',
          darkMode: false,
          mouseButton: false,
          replaceToolbar: false,
          showBookmarks: false,
          showFinishReportButton: true,
          highlightInference: true,
          zoomFactor: '100%',
          font: {
            availableFamilies: ['Arial', 'Times New Roman', 'Calibri'],
            availableSizes: [10, 11, 12, 14, 16, 18],
            family: 'Arial',
            size: 12
          }
        };

        // Criar adapter COM CONFIGURAÇÕES
        const adapterInstance = new IaraSyncfusionAdapter(
          editorRef.current!.documentEditor,
          recognition,
          config as any
        );

        // Configurar callback
        adapterInstance.onIaraCommand = function(command: string) {
          console.log('🎤 Comando executado:', command);
        };

        // Event listener para salvar
        window.addEventListener('IaraOnSaveReport', () => {
          console.log('💾 Salvando relatório');
          // Aqui você implementa a lógica de salvamento
        });

        setAdapter(adapterInstance);
        console.log('✅ Adapter pronto!');
      }).fail((error: any) => {
        console.error('❌ Erro ao inicializar recognition:', error);
      });
    };

    initializeAdapter();

    // Cleanup
    return () => {
      if (editorRef.current) {
        editorRef.current.documentEditor.destroy();
      }
    };
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <DocumentEditorContainerComponent
        ref={editorRef}
        enableToolbar={true}
        height="600px"
        style={{ border: '1px solid #ccc' }}
      />
    </div>
  );
}

export default EditorComponent;

Ao usar o adapter com React, você DEVE desabilitar o StrictMode no seu arquivo principal (geralmente index.tsx ou main.tsx).

Por quê?

O StrictMode do React renderiza componentes duas vezes em modo de desenvolvimento
Isso causa a inicialização do Iara Speech SDK duas vezes
Múltiplas conexões simultâneas com o SDK causam bugs e comportamento inesperado

Como desabilitar:

// ❌ INCORRETO - Com StrictMode
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// ✅ CORRETO - Sem StrictMode
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <App />
);

Remova o <React.StrictMode> do seu arquivo de entrada para evitar problemas de conexão duplicada.

Testando a Integração

Após integrar o adapter, você pode testar as funcionalidades:

1. Testar Reconhecimento de Voz

Clique no botão de microfone
Permita o acesso ao microfone quando solicitado
Comece a falar
O texto deve aparecer no editor em tempo real

2. Testar Assistente de IA

Clique no editor
Um botão de assistente (✨) deve aparecer

Configurações Básicas

Você pode personalizar o comportamento do adapter:

const adapter = new IaraSyncfusionAdapter(
  editor,
  recognition,
  {
    // Assistente de IA
    assistant: {
      enabled: true,                    // Habilita assistente
      enableDiffHighlighting: true      // Destaca diferenças
    },

    // Funcionalidades
    enableSpeechRecognition: true,      // Habilita voz
    saveReport: true,                   // Auto-save

    // Interface
    replaceToolbar: false,              // Manter toolbar existente
    showFinishReportButton: true        // Botão de finalizar
  }
);

Próximos Passos

Agora que você tem o adapter funcionando, explore:

Configuração Avançada - Personalize o adapter
Guia TypeScript - Tipagens e interfaces
Exemplos Práticos - Mais exemplos de código
API Reference - Documentação completa da API

Problemas?

Se algo não funcionou como esperado:

Verifique se suas credenciais estão corretas
Consulte o Troubleshooting
Veja os exemplos completos