> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.doctorassistant.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Consultation Recorder

> Componente web para gravação e transcrição de consultas médicas

export const Specialties = () => {
  const [specialties, setSpecialties] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch('https://apim.doctorassistant.ai/api/sandbox/specialties').then(response => response.json()).then(data => {
      const sortedSpecialties = Object.entries(data.specialties).sort(([, a], [, b]) => a.title.localeCompare(b.title)).reduce((obj, [key, value]) => ({
        ...obj,
        [key]: value
      }), {});
      setSpecialties(sortedSpecialties);
    }).catch(error => console.error('Erro ao buscar especialidades:', error)).finally(() => setLoading(false));
  }, []);
  if (loading) {
    return <div>Carregando especialidades...</div>;
  }
  return <ul>
        {Object.keys(specialties).map(specialty => <li key={specialty}>
                <span>{specialties[specialty].title} - <code>{specialty}</code></span>
                
            </li>)}
    </ul>;
};

## Instalação

Para instalar o componente no seu projeto:

### Via NPM

```bash theme={null}
npm i @doctorassistant/daai-component
```

### Via CDN

Alternativamente, você pode incluir o componente diretamente via CDN:

```html theme={null}
<script
  src="https://cdn.jsdelivr.net/npm/@doctorassistant/daai-component@latest/dist/web-components/web-components.esm.js"
  type="module"
></script>
```

## Uso Básico

Após a instalação, importe e utilize o componente:

```jsx theme={null}
import '@doctorassistant/daai-component';

<daai-consultation-recorder
  apiKey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
/>
```

## Propriedades

### Propriedades Obrigatórias

| Propriedade    | Tipo   | Descrição                                                      |
| -------------- | ------ | -------------------------------------------------------------- |
| `apiKey`       | string | Chave da API necessária para realizar requisições              |
| `professional` | string | Identificador único do profissional que utilizará o componente |

### Propriedades Opcionais

| Propriedade            | Tipo             | Descrição                                                                                                                               |
| ---------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `specialty`            | string           | Define a especialidade médica para o registro                                                                                           |
| `metadata`             | object           | Dados adicionais para recuperação via webhook                                                                                           |
| `telemedicine`         | boolean          | Ativa funcionalidade de telemedicina                                                                                                    |
| `videoElement`         | HTMLVideoElement | Referência para um elemento de vídeo HTML personalizado que será usado para captura durante a consulta de telemedicina                  |
| `hideTutorial`         | boolean          | Desativa o modal de tutorial da telemedicina                                                                                            |
| `maxRecordingTime`     | number           | Tempo máximo de gravação em segundos                                                                                                    |
| `warningRecordingTime` | number           | Tempo em segundos antes do limite para aviso                                                                                            |
| `reportSchema`         | object           | Esquema customizado do relatório, conforme especificação da API. Permite definir instruções, schema e exemplos para o relatório gerado. |
| `skipConsultationType` | boolean          | Pula a seleção de tipo de consulta, levando em consideração a propriedade `telemedicine` e o `videoElement`.                            |

## Integração com Vídeo para Telemedicina

A propriedade `videoElement` permite que você integre o componente com um elemento de vídeo HTML personalizado para consultas de telemedicina. Esta funcionalidade é especialmente útil quando você já possui uma estrutura de videochamada implementada e deseja usar o áudio dessa chamada como fonte para a gravação e transcrição.

### Como Funciona

Quando você fornece um `videoElement`, o componente utilizará o stream de áudio deste elemento de vídeo como fonte principal juntamente com o microfone do dispositivo do profissional.

### Implementação

```jsx theme={null}
<body>
  // Elemento de vídeo que será passado para o componente
  <video id="consultation-video" controls style="width: 100%; max-width: 600px; margin-bottom: 20px;">
    <source src="./assets/test.mp4" type="video/mp4">
    <p>Seu navegador não suporta vídeos HTML5.</p>
  </video>

  <daai-consultation-recorder
    apikey="sua-api-key" 
    professional="12345" 
    telemedicine="true">
  </daai-consultation-recorder>

  <script>
    // Aguarda o carregamento do DOM
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Passa o elemento de vídeo para o componente
      recorder.videoElement = videoElement;
    });
  </script>
</body>

```

### Exemplo Prático com React

```jsx theme={null}
import React, { useRef, useEffect } from 'react';
import '@doctorassistant/daai-component';

function ConsultaTelemedicina() {
  const videoRef = useRef(null);
  const recorderRef = useRef(null);
  
  useEffect(() => {
    // Configurar o stream de vídeo (exemplo com WebRTC)
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      });
    
    // Configurar o componente de gravação
    if (recorderRef.current && videoRef.current) {
      recorderRef.current.videoElement = videoRef.current;
    }
  }, []);

  return (
    <div>
      <video 
        ref={videoRef} 
        id="videochamada"
        autoPlay 
        muted 
        width="640" 
        height="480"
      />
      
      <daai-consultation-recorder
        ref={recorderRef}
        apiKey="SUA_API_KEY"
        professional="ID_DO_PROFISSIONAL"
        telemedicine={true}
      />
    </div>
  );
}
```

### Requisitos Técnicas

* O elemento de vídeo deve ter um stream ativo (`srcObject` definido)
* A propriedade `telemedicine` deve estar habilitada (`true`)
* O stream deve conter pelo menos uma trilha de áudio

## Eventos

O componente emite os seguintes eventos que podem ser capturados:

```jsx theme={null}
// Início da gravação
onStart = (data) => {
  console.log("Gravação iniciada:", data);
};

// Sucesso na gravação
onSuccess = (data) => {
  console.log("Gravação finalizada com sucesso:", data);
};

// Erro durante a gravação
onError = (error) => {
  console.log("Erro:", error);
};

// Eventos do componente
onEvent = (event) => {
  console.log("Evento:", event);
};

// Aviso de tempo restante
onWarningRecordingTime = () => {
  console.log("Aviso de tempo restante");
};
```

## Especialidades Disponíveis

O componente suporta várias especialidades médicas, sendo elas:

<Specialties />

## Customização

O componente pode ser customizado através de variáveis CSS:

```css theme={null}
daai-consultation-recorder {
  --recorder-primary-color: #ff0000;
  --recorder-secondary-color: #808080;
  --recorder-success-color: #00ff00;
  --recorder-error-color: #ff0000;
  --recorder-background-color: #ffffff;
  --recorder-border-color: #000000;
  --recorder-text-color: #000000;
  --recorder-button-radius: 4px;
  --recorder-border-radius: 8px;
  --recorder-large-device-height: 52px;
  --recorder-small-device-height: 120px;
  --recorder-font-family: "Arial, sans-serif";
}
```

## Integração com Frameworks

### React

```jsx theme={null}
import "@doctorassistant/daai-component";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const recorder = document.getElementById("recorder");
    
    if (recorder) {
      recorder.onSuccess = (response) => {
        console.log("Sucesso:", response);
      };
      
      recorder.onError = (error) => {
        console.log("Erro:", error);
      };
    }
  }, []);

  return (
    <daai-consultation-recorder
      id="recorder"
      apiKey="SUA_API_KEY"
      professional="ID_DO_PROFISSIONAL"
    />
  );
}
```

### Vue

```vue theme={null}
<template>
  <daai-consultation-recorder
    ref="recorder"
    :apiKey="apiKey"
    :professional="professionalId"
  />
</template>

<script>
import { onMounted, ref } from 'vue';
import '@doctorassistant/daai-component';

export default {
  setup() {
    const recorder = ref(null);
    const apiKey = 'SUA_API_KEY';
    const professionalId = 'ID_DO_PROFISSIONAL';

    onMounted(() => {
      if (recorder.value) {
        recorder.value.onSuccess = (response) => {
          console.log('Sucesso:', response);
        };
      }
    });

    return {
      recorder,
      apiKey,
      professionalId
    };
  }
};
</script>
```

## Segurança

O componente foi desenvolvido seguindo as melhores práticas de segurança:

* Criptografia de ponta a ponta
* Conformidade com HIPAA
* Controle de acesso
* Auditoria transparente

## Limitações de Tempo

Para configurar limites de tempo de gravação:

```jsx theme={null}
<daai-consultation-recorder
  apiKey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  maxRecordingTime={300} // 5 minutos
  warningRecordingTime={30} // Aviso 30 segundos antes
/>
```

## Esquema customizado do relatório

<Info>
  A funcionalidade de customização do relatório (`report-schema`) está disponível apenas a partir da versão **2.3.1** do componente.
</Info>

Você pode customizar o relatório gerado pelo componente utilizando a propriedade `report-schema`. Isso permite definir instruções, um schema e exemplos para o relatório, tornando a geração do conteúdo mais flexível e adaptada à sua necessidade.

> **Dica:** É possível testar e validar a configuração do relatório customizado diretamente no backoffice, na aba de transformação nas configurações da aplicação. Assim, você pode experimentar diferentes schemas e exemplos antes de aplicar em produção.

* O campo `schema` deve ser um **JSON Schema válido**, conforme a [especificação oficial](https://json-schema.org/specification). Isso garante que o relatório gerado siga a estrutura esperada.
* O campo `fewShots` deve conter exemplos que **satisfazem o schema definido**. Dessa forma, os exemplos servem como referência para o preenchimento correto do relatório.

Por exemplo:

```javascript theme={null}
<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  report-schema='{
    "instructions": "O relatório deve ser escrito em português brasileiro...",
    "schema": {
      "type": "object",
      "required": ["foo", "bar"],
      "properties": {
        "foo": { "type": "integer" },
        "bar": { "type": "string" }
      },
      "additionalProperties": true
    },
    "fewShots": [
      {"foo":1,"bar":"test"},
      {"foo":2,"bar":"test2"}
    ]
  }'
/>
```

## Desabilitando a seleção de tipo de consulta

<Info>
  A funcionalidade de desabilitar a seleção de tipo de consulta (`skipConsultationType`) está disponível em versão de teste na versão **2.5.0** do componente.
</Info>

Você pode desabilitar a seleção de tipo de consulta utilizando a propriedade `skipConsultationType`. Isso permite que o componente ja inicie a gravação automaticamente, sem a necessidade de selecionar o tipo de consulta.

* Caso a propriedade `telemedicine` seja `true`, o componente irá exibir a caixa de seleção aba do navegador para a seleção da fonte de áudio.

```jsx theme={null}
<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  telemedicine
  skip-consultation-type
/>
```

* Caso também seja informado um `videoElement`, o componente irá usar o áudio deste elemento como fonte de áudio diretamente.

```jsx theme={null}
<body>
  // Elemento de vídeo que será passado para o componente
  <video id="consultation-video" controls style="width: 100%; max-width: 600px; margin-bottom: 20px;">
    <source src="./assets/test.mp4" type="video/mp4">
    <p>Seu navegador não suporta vídeos HTML5.</p>
  </video>

  <daai-consultation-recorder
    apikey="SUA_API_KEY"
    professional="ID_DO_PROFISSIONAL"
    telemedicine
    skip-consultation-type
  />

  <script>
    // Aguarda o carregamento do DOM
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Passa o elemento de vídeo para o componente
      recorder.videoElement = videoElement;
    });
  </script>
</body>
```

* Caso não seja informado nem `telemedicine` nem `videoElement`, o componente irá usar o áudio do dispositivo do profissional como fonte de áudio apenas.

```jsx theme={null}
<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  skip-consultation-type
/>
```

## Enviando dados para prescrição médica

O componente pode ser configurado para enviar dados para prescrição médica utilizando a propriedade `prescription-data`. Isso permite que você envie dados adicionais para que a prescrição médica seja gerada com base nos dados enviados.

<Info>
  A funcionalidade de envio de dados para prescrição médica (`prescription-data`) está disponível para teste a partir da versão **2.5.0** do componente.
</Info>

### Mevo

Para a plataforma MEVO, você deve enviar os seguintes dados:

* `provider`: "MEVO"
* `externalReference`: Identificador único na plataforma MEVO

```jsx theme={null}
<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  prescription-data='{"provider": "MEVO", "externalReference": "IDENTIFICADOR_UNICO"}'
/>
```

### Memed

<Info>
  A funcionalidade de envio de dados para prescrição médica para a plataforma Memed (`prescription-data`) está disponível para teste a partir da versão **2.6.0-rc.0** do componente.
</Info>

Para a plataforma Memed, você deve enviar os seguintes dados:

* `provider`: "MEMED"
* `token`: Token de autenticação da plataforma Memed para o profissional
* `patient`: Que é um objeto com os seguintes campos:
  * `externalId`: Identificador único do paciente na plataforma Memed
  * `name`: Nome do paciente
  * `email`: Email do paciente
  * `phone`: Telefone do paciente
  * `document`: CPF do paciente (somente números - opcional)

```jsx theme={null}
<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  prescription-data='{"provider": "MEMED", "token": "TOKEN_DE_AUTENTICACAO", "patient": {"externalId": "IDENTIFICADOR_UNICO", "name": "NOME_DO_PACIENTE", "email": "EMAIL_DO_PACIENTE", "phone": "TELEFONE_DO_PACIENTE", "document": "CPF_DO_PACIENTE"}}'
/>
```

Ao finalizar a gravação, o componente irá enviar os dados para a prescrição médica da o sdk de prescrição médica da Memed, que irá gerar a prescrição médica com base nos dados resultantes da gravação.