@doctorassistant/daai-component

v1.2.4

Published

9 days ago

A custom web component for a recording

Downloads

220

0High
0Medium
0Low

felipe-daai

cloud_doctorassistant

vitoria_da_costa_holanda

web-component custom-element badge

Daai Component

Sumário

Introdução

O componente é um sistema de integração para empresas de saúde, como clínicas, sistemas de prontuário eletrônico e empresas que possuem soluções próprias. Seu objetivo é capturar o registro das consultas por meio do áudio entre o profissional de saúde e o paciente via API, entregar os resultados da consulta através da transcrição.

Benefícios

Automatização de processos dentro da empresa
Registro do áudio e processamento de entrega de acordo com a necessidade específica
Facilidade de customização de acordo com a interface da empresa (whitelabel)
Ganho de produtividade: não há necessidade de utilizar vários sistemas em paralelo

Uso

instalação

Para instalar o Daai component no seu projeto, basta rodar no terminal do projeto que você deseja usar o componente.

💻 Execute esse comando:

npm i @doctorassistant/daai-component

Como usar após a instalação:

Após instalar o pacote no seu projeto, basta adicionar a tag no local onde deseja que o componente seja renderizado:

import '@doctorassistant/daai-component';
<daai-component apiKey="YOUR_API_KEY"></daai-component>

onde ele for chamado vai ser renderizado nesse modelo:

propriedades

propriedades de funcionamento

// ⚠️ A propriedade professionalId não é obrigatória, o componente irá funcionar normalmente caso você não passe essa chave
professionalId =
  'aqui você deve passar um identificador para o usuário que irá utilizar a componente';

// ⚠️ A propriedade apiKey é obrigatória, sem ela o componente não irá fazer requisições a api
apikey = 'aqui você deve passar a chave da api para realizar as requisições';

// ⚠️ A propriedade specialty não é obrigatória, o componente irá funcionar normalmente caso você não passe essa chave, caso ela não seja passada o usuário pode selecionar a especialidade desejada no select.
specialty =
  'aqui você deve passar a especialidade que você quer que o usuário use';
// ⚠️ A propriedade metadata não é obrigatória, o componente irá funcionar normalmente caso você não passe essa chave, no entanto, a chave serve para enviar dados que você deseja recuperar posteriormente pela nossa API quando a gravação for finalizada, possibilitando a recuperação por meio do webhook.
metadata =
  'aqui você deve passar o valor que deseja recuperar, se atente ao formato, descrevo no tópico abaixo.';

⚠️ A propriedade ~~modeApi~~ não é mais necessária. A partir da versão 1.2.0, identificamos o ambiente de execução através da apiKey

Formato metadata

// ⚠️ Essse deve ser o formato
<body>
  <daai-component
    metadata='{"name": "doctor", "role": "Assistant"}'
    apiKey="YOUR_API_KEY"
  >
  </daai-component>
</body>

Após a instalação do componente e a sua inclusão no código, será possível customizá-lo passando as props correspondentes. Caso as props não sejam fornecidas, ele utilizará o layout padrão. 🎨

📂 Props que você pode passar para o componente:

theme: {
  icon,
    button - start - recording - color,
    button - recording - color,
    button - pause - color,
    button - resume - color,
    button - upload - color,
    border - color,
    animation - recording - color,
    animation - paused - color,
    text - badge - color,
    button - help - color;
}
onSuccess = {};
onError = {};
onEvent = {};

🖌️ exemplo de uso da customização:

import '@doctorassistant/daai-component';

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function onSuccess(data) {
        console.log(data);
      }
      function onError(data) {
        console.log(data);
      }
      function onEvent(data) {
        console.log(data);
      }
    </script>
  </head>
  <body>
    <daai-component
      apiKey="YOUR_API_KEY"
      theme='{
      "icon": "path/to/icon.png",
      "buttonStartRecordingColor": "#0600b1",
      "buttonRecordingColor": "#0600b1",
      "buttonPauseColor": "#0600b1",
      "buttonResumeColor": "#0600b1",
      "buttonUploadColor":"#0600b1",
      "borderColor": "#0600b1",
      "animationRecordingColor":"#0600b1",
      "animationPausedColor": "#0600b1",
      "textBadgeColor": "#0600b1",
      "buttonHelpColor":"#0600b1"
      }'
      onSuccess="onSuccess"
      onError="onError"
      onEvent="onEvent"
    >
    </daai-component>
  </body>
</html>

🔎 definição de cada propriedade:

📎 Sugestões:

As cores podem ser em hexadecimal mas você também pode usar o nome da cor ex: 'yellow'.
O ícone pode ser adicionado como Base64.

icon

⚠️ A imagem deve ter dimensões de no máximo 70px de altura e 70px de largura para ficar proporcional ao tamanho do componente

ícone que vai ser renderizado no componente.

button-start-recording-color

Essa propriedade é capaz de alterar a cor do botão de inciar registro.

button-recording-color

essa propriedade consegue mudar a cor do botão de Finalizar Registro

button-pause-color

essa propriedade consegue mudar a cor de botão de Pausar o registro.

button-resume-color

Essa propriedade consegue alterar a cor do botão de Continuar Registro

button-upload-color

Essa propriedade consegue alterar a cor do botão de Iniciar novo Registro

border-color

Essa propriedade altera a cor da borda externa do componente.

animation-recording-color

Essa propriedade altera a cor da animação de gravação quando ela está em andamento.

animation-paused-color

Essa propriedade é responsável por mudar a cor da animação quando ela está pausada.

text-badge-color

Essa propriedade altera a cor dos textos do componente.

button-help-color

Essa propriedade consegue alterar a cor do botão de Ajuda

onSuccess

função de callback que será executada em caso de sucesso

onError

função de callback que será executada em caso de erro

onEvent

função de callback que será executada e receberá o status de processamento em tempo real

Uso do componente via CDN

Caso a sua aplicação não utilize react, vue.js e angular, você pode optar por usar o nosso componente via CDN.

exemplo de uso no HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://cdn.jsdelivr.net/npm/@doctorassistant/daai-component@latest/dist/DaaiBadge.js"
      type="module"
    ></script>
  </head>
  <body>
    <h1>Exemplo de uso do componente via cdn</h1>
    <daai-component apiKey="YOUR_API_KEY"></daai-component>
  </body>
</html>

⚠️ Observações

Quando passar o daai-component dentro do body você ainda terá que passar as propriedades obrigatórias citadas acima.
Não é obrigatório passar a versão, caso o campo fique vazio ele irá pegar a versão mais recente.

Versão mais atualizada
<script
  src="https://cdn.jsdelivr.net/npm/@doctorassistant/daai-component@latest/dist/DaaiBadge.js"
  type="module"
></script>
Versão especificada
<script
  src="https://cdn.jsdelivr.net/npm/@doctorassistant/[email protected]/dist/DaaiBadge.js"
  type="module"
></script>

Especialidades

A propriedade specialty permite definir a especialidade desejada no componente, configurando o formato em que o registro será gerado. Quando essa propriedade é fornecida, o seletor de especialidade será desabilitado, garantindo que todos os usuários utilizem a mesma especialidade.

Especialidades disponíveis

cardiology: 'Cardiologia',
case_discussion: 'Discussão de Caso',
dermatology: 'Dermatologia',
emergency: 'Medicina de Emergência',
endocrinology: 'Endocrinologia',
family: 'Medicina de Família',
generic: 'SOAP Generalista',
geriatry: 'Geriatria',
gynecology: 'Ginecologia',
neurology: 'Neurologia',
occupational: 'Saúde Ocupacional',
oncology:'Oncologia',
ophthalmology:'Oftalmologia',
pediatry:'Pediatria',
pre_natal:'Pré-natal',
psychiatry: 'Psiquiatria',
rheumatology: 'Reumatologia',

🔎 consulte aqui para versões mais atualizada das especialidades

⚠️ O que deve ser passado para essa propriedade?

Você deve fornecer o valor em inglês conforme indicado acima. A versão exibida para o usuário será traduzida e formatada automaticamente.

exemplo: caso você queira setar a especialidade como Psiquiatria

<daai-component specialty="psychiatry"></daai-component>

⚠️ importante!

essa propriedade não é obrigatória, caso você não passe o usuário poderá escolher no select a especialidade desejada, caso isso não aconteça o valor default é genérico.
sempre verifique se o nome da especialidade está correto, caso esteja com erro de digitação o registro será gerado como genérico.

eventos

Eventos de processamento em tempo real disponíveis que serão recebidos pelo onEvent

{ "event": "consultation.processing" }

{ "event": "consultation.completed" }

{ "event": "consultation.integrated" }

construção

Shadow dom 👻

O Shadow DOM é uma parte do Web Components que permite encapsular a estrutura, estilo e funcionalidade de um elemento de forma isolada do resto da página. 🔒 Isso significa que o conteúdo do Shadow DOM não pode ser afetado por estilos ou scripts externos, criando um "mini DOM" dentro de um componente.