Configuração Avançada

Configurações por Cenário de Uso

Cenário 1: Integração Mínima (Apenas Voz)

Para usar apenas o reconhecimento de voz, sem IA:

const minimalConfig = {
  assistant: { enabled: false },        // Sem IA
  replaceToolbar: false,                // Manter toolbar existente
  enableSpeechRecognition: true,        // Apenas reconhecimento de voz
  saveReport: false,                    // Sem auto-save
  showFinishReportButton: false         // Sem botões extras
};

const adapter = new IaraSyncfusionAdapter(
  editor,
  recognition,
  minimalConfig
);

Cenário 2: IA Completa com Interface Personalizada

Para usar todas as funcionalidades de IA com customizações:

const fullAIConfig = {
  assistant: {
    enabled: true,
    enableDiffHighlighting: true,
    impression: { itemizedOutput: true },
    user_rules: {
      report: [
        'Sempre incluir dados vitais',
        'Usar terminologia médica padrão'
      ],
      impression: [
        'Ser conciso',
        'Destacar achados relevantes'
      ]
    },
    draggable: {
      containerId: '#my-editor-container',
      defaultPosition: { x: 50, y: 100 }
    }
  },
  replaceToolbar: true,                 // Usar toolbar Iara
  enableSpeechRecognition: true,
  saveReport: true,
  highlightInference: true
};

const adapter = new IaraSyncfusionAdapter(
  editor,
  recognition,
  fullAIConfig
);

Cenário 3: Modo Somente Leitura com IA

Para visualização de documentos com sugestões de IA:

const readOnlyConfig = {
  assistant: {
    enabled: true,
    enableDiffHighlighting: true
  },
  enableSpeechRecognition: false,       // Sem ditado
  saveReport: false,                    // Sem salvamento
  replaceToolbar: false
};

Configurações do Assistente de IA

Regras Personalizadas

Defina regras que a IA deve seguir ao gerar conteúdo:

assistant: {
  enabled: true,
  user_rules: {
    report: [
      'Usar sempre a nomenclatura SNOMED CT',
      'Incluir CID-10 quando aplicável',
      'Seguir protocolo institucional XYZ',
      'Máximo de 500 palavras por seção'
    ],
    impression: [
      'Listar achados em ordem de relevância',
      'Usar bullet points',
      'Incluir recomendações de follow-up'
    ]
  }
}

Formatação de Impressões

Controle como as conclusões são formatadas:

assistant: {
  enabled: true,
  impression: {
    itemizedOutput: true  // true = lista, false = parágrafo
  }
}

Exemplo com itemizedOutput: true:

IMPRESSÃO:
• Achado 1
• Achado 2
• Achado 3

Exemplo com itemizedOutput: false:

IMPRESSÃO:
Achado 1. Achado 2. Achado 3.

Assistente Arrastável

Torne o painel do assistente arrastável na tela:

assistant: {
  enabled: true,
  draggable: {
    containerId: '#editor-wrapper',     // Container que limita o arraste
    defaultPosition: { x: 30, y: 20 }   // Posição inicial em pixels
  }
}

Dica

O containerId deve ser um elemento que envolve o editor para evitar que o assistente seja arrastado para fora da área visível.

Destaque de Diferenças

Visualize mudanças sugeridas pela IA:

assistant: {
  enabled: true,
  enableDiffHighlighting: true  // Destaca texto adicionado/removido
}

Configurações de Interface

Toolbar Customizada

Escolha entre usar a toolbar do Syncfusion ou a toolbar customizada da Iara:

{
  replaceToolbar: false  // false = Syncfusion, true = Iara
}

Quando usar replaceToolbar: true:

• Você quer a experiência completa da Iara
• Precisa de botões específicos da Iara na toolbar
• Quer consistência visual com outros produtos Iara

Quando usar replaceToolbar: false:

• Você já tem uma toolbar customizada
• Quer manter a toolbar padrão do Syncfusion
• Precisa de funcionalidades específicas da toolbar Syncfusion

Botões e Controles

{
  showFinishReportButton: true,   // Botão "Finalizar Relatório"
  showBookmarks: true,            // Exibir bookmarks
  mouseButton: true               // Habilita o uso do botão do meio do mouse para controlar a gravação
}

Configurações de Comportamento

Modo de Navegação

Controle como a navegação entre campos funciona:

{
  navigateAdditiveMode: 'use'  // 'use' ou 'registry'
}

• 'use': Navega só pelos campos preenchidos, pulando os vazios, tornando a edição mais rápida e eficiente.
• 'registry': Navega por todos os campos do template, incluindo os vazios, útil para preenchimento completo e com opção de criar campos adicionais pela ribbon.

Destaque de Inferências

Destaque visualmente campos gerados pela IA:

{
  highlightInference: true  // Destaca campos de inferência
}

Auto-salvamento

Configure o salvamento automático:

{
  saveReport: true  // Habilita auto-save
}

// Configurar listener para evento de salvamento
addEventListener('IaraOnSaveReport', function(event) {
  const [plainText, html, rtf] = event.detail;
  console.log('Salvando relatório:', plainText);
  // Enviar para seu backend
  fetch('/api/reports/save', {
    method: 'POST',
    body: JSON.stringify({ plainText, html, rtf }),
    headers: { 'Content-Type': 'application/json' }
  });
});

Configurações de Fonte e Zoom

Fonte Padrão

{
  font: {
    family: 'Arial',
    size: 12,
    availableFamilies: ['Arial', 'Times New Roman', 'Calibri'],
    availableSizes: [10, 11, 12, 14, 16, 18, 20]
  }
}

Zoom Inicial

{
  zoomFactor: '125%'  // 100%, 125%, 150%, etc.
}

Configurações de Ribbon

Customize a ribbon (barra de ferramentas):

{
  ribbon: {
    displayMode: 'Classic',  // 'Classic' ou 'Simplified'
    collections: {
      logo: true,
      file: true,
      insert: true,
      clipboard: true,
      navigation: true,
      font: true,
      paragraph: true,
      export: true
    }
  }
}

Display Mode

A propriedade displayMode controla a aparência visual da ribbon:

• 'Classic' (padrão): Ribbon completo com altura considerável e botões grandes, proporcionando melhor visibilidade e acesso às ferramentas.
• 'Simplified': Ribbon compacto com botões pequenos enfileirados, economizando espaço vertical na tela.

ribbon: {
  displayMode: 'Simplified'  // Modo compacto
}

Quando usar cada modo

• Use Classic para telas grandes ou quando os usuários precisam de acesso visual rápido às ferramentas
• Use Simplified para maximizar o espaço do documento ou em telas menores

Collections (Grupos de Ferramentas)

As collections são grupos temáticos de ferramentas na ribbon. Cada collection pode ser habilitada/desabilitada ou customizada individualmente.

Collections que carregam por padrão

Estas collections aparecem automaticamente, a menos que sejam explicitamente desabilitadas:

• logo: Logo da aplicação
• file: Controles de arquivo (abrir, desfazer, refazer)
• insert: Inserção de elementos (imagem, tabela)
• clipboard: Área de transferência (copiar, recortar, colar)
• font: Formatação de fonte (família, tamanho, cor, negrito, itálico, sublinhado, tachado, mudança de caixa)
• paragraph: Formatação de parágrafo (recuo, espaçamento, marcadores, numeração, alinhamento)

Collections que precisam ser habilitadas

Estas collections só aparecem se forem explicitamente marcadas como true:

• navigation: Navegação entre campos do documento
• export: Exportação para PDF
• documentReview: Controle de alterações (track changes)

Exemplo - Ribbon completa:

ribbon: {
  collections: {
    // logo já carrega por padrão, não precisa declarar
    navigation: true,     // Habilita navegação
    export: true,         // Habilita exportação
    documentReview: true  // Habilita controle de alterações
  }
}

Exemplo - Ribbon mínima:

ribbon: {
  collections: {
    logo: false,      // Remove logo
    file: false,      // Remove controles de arquivo
    insert: false,    // Remove inserção
    clipboard: true,  // Mantém área de transferência
    font: true,       // Mantém formatação de fonte
    paragraph: false  // Remove formatação de parágrafo
  }
}

Customização Avançada de Collections

Além de habilitar/desabilitar collections inteiras, você pode customizar quais itens aparecem dentro de cada collection e em qual ordem:

ribbon: {
  collections: {
    // Customiza ordem dos itens
    file: [['redo', 'undo', 'open']],

    // Separa itens em blocos visuais
    file: [['open'], ['undo', 'redo']],

    // Remove itens específicos (só mostra undo e redo)
    file: [['undo', 'redo']],

    // Customiza ferramentas de fonte
    font: [
      ['bold', 'italic', 'underline'],  // Bloco 1: estilos básicos
      ['fontSize', 'fontColor']         // Bloco 2: tamanho e cor
    ]
  }
}

Estrutura de Arrays

Os itens dentro de cada collection devem estar em arrays duplos [[...]]. Os arrays internos separam os elementos em blocos visuais espaçados na ribbon.

Itens disponíveis por collection

file:

• 'open' - Abrir documento
• 'undo' - Desfazer
• 'redo' - Refazer

insert:

• 'image' - Inserir imagem
• 'table' - Inserir tabela

clipboard:

• 'copy' - Copiar
• 'cut' - Recortar
• 'paste' - Colar

font:

• 'fontFamily' - Família da fonte
• 'fontSize' - Tamanho da fonte
• 'fontColor' - Cor da fonte
• 'bold' - Negrito
• 'changeCase' - Mudança de caixa (maiúscula, minúscula, etc.)
• 'italic' - Itálico
• 'underline' - Sublinhado
• 'strikeThrough' - Tachado

paragraph:

• 'decreaseIdent' - Diminuir recuo
• 'increaseIdent' - Aumentar recuo
• 'lineSpacing' - Espaçamento entre linhas
• 'bullets' - Marcadores
• 'numbering' - Numeração
• 'paragraphMark' - Marca de parágrafo
• 'alignment' - Alinhamento

navigation:

• 'navigationField' - Campo de navegação

documentReview:

• 'trackchanges' - Controle de alterações

export:

• 'exportPdf' - Exportar para PDF

Exemplos Práticos

Ribbon para revisão de documentos:

ribbon: {
  displayMode: 'Classic',
  collections: {
    file: [['undo', 'redo']],
    clipboard: true,
    font: [['bold', 'italic'], ['fontColor']],
    paragraph: false,
    documentReview: true,
    export: true
  }
}

Ribbon minimalista para ditado:

ribbon: {
  displayMode: 'Simplified',
  collections: {
    file: [['undo', 'redo']],
    insert: false,
    clipboard: false,
    font: [['bold', 'italic']],
    paragraph: [['bullets', 'numbering']],
    navigation: true
  }
}

Ribbon completa para edição avançada:

ribbon: {
  displayMode: 'Classic',
  collections: {
    logo: true,
    file: true,
    insert: true,
    clipboard: true,
    font: true,
    paragraph: true,
    navigation: true,
    documentReview: true,
    export: true
  }
}

Modo Escuro

Habilite o tema escuro:

{
  darkMode: true  // Ativa tema escuro
}

Idioma

Configure o idioma da interface:

{
  language: 'pt-BR'  // 'pt-BR' ou 'es'
}

Exemplo de Configuração Completa

Aqui está um exemplo com todas as opções configuradas:

const adapter = new IaraSyncfusionAdapter(
  editor,
  recognition,
  {
    // Assistente de IA
    assistant: {
      enabled: true,
      enableDiffHighlighting: true,
      impression: {
        itemizedOutput: true
      },
      user_rules: {
        report: ['Usar terminologia médica padrão'],
        impression: ['Ser conciso e objetivo']
      },
      draggable: {
        containerId: '#editor-container',
        defaultPosition: { x: 30, y: 20 }
      }
    },

    // Funcionalidades
    enableSpeechRecognition: true,
    saveReport: true,
    highlightInference: true,

    // Interface
    replaceToolbar: false,
    showFinishReportButton: true,
    showBookmarks: false,
    mouseButton: false,

    // Comportamento
    navigateAdditiveMode: 'use',

    // Aparência
    darkMode: false,
    language: 'pt-BR',
    zoomFactor: '100%',

    // Fonte
    font: {
      family: 'Arial',
      size: 12,
      availableFamilies: ['Arial', 'Times New Roman', 'Calibri'],
      availableSizes: [10, 11, 12, 14, 16, 18]
    },

    // Ribbon
    ribbon: {
      displayMode: 'Classic',
      collections: {
        logo: true,
        file: true,
        insert: true,
        clipboard: true,
        navigation: true,
        font: true,
        paragraph: true,
        export: true
      }
    }
  }
);

Callbacks e Eventos

Configure callbacks para reagir a eventos:

// Callback quando um comando Iara é executado
adapter.onIaraCommand = function(command) {
  console.log('Comando executado:', command);
  // Exemplo: analytics, logging, etc.
};

// Listener para evento de salvamento de relatórios
addEventListener('IaraOnSaveReport', function(event) {
  const [plainText, html, rtf] = event.detail;
  console.log('Salvando relatório...');
  // Enviar para backend
  saveToBackend({ plainText, html, rtf });
});

Próximos Passos

• Guia TypeScript - Tipagens e interfaces
• API Reference - Documentação completa de configurações
• Exemplos - Veja exemplos práticos