> ## 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 grabación y transcripción 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('Error al buscar especialidades:', error)).finally(() => setLoading(false));
  }, []);
  if (loading) {
    return <div>Cargando especialidades...</div>;
  }
  return <ul>
        {Object.keys(specialties).map(specialty => <li key={specialty}>
                <span>{specialties[specialty].title} - <code>{specialty}</code></span>
                
            </li>)}
    </ul>;
};

## Instalación

Para instalar el componente en tu proyecto:

### Vía NPM

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

### Vía CDN

Alternativamente, puedes incluir el componente directamente vía 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

Después de la instalación, importa y utiliza el componente:

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

<daai-consultation-recorder
  apiKey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
/>
```

## Propiedades

### Propiedades Obligatorias

| Propiedad      | Tipo   | Descripción                                                     |
| -------------- | ------ | --------------------------------------------------------------- |
| `apiKey`       | string | Clave de la API necesaria para realizar solicitudes             |
| `professional` | string | Identificador único del profesional que utilizará el componente |

### Propiedades Opcionales

| Propiedad              | Tipo             | Descripción                                                                                                                                      |
| ---------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `specialty`            | string           | Define la especialidad médica para el registro                                                                                                   |
| `metadata`             | object           | Datos adicionales para recuperación vía webhook                                                                                                  |
| `telemedicine`         | boolean          | Activa funcionalidad de telemedicina                                                                                                             |
| `videoElement`         | HTMLVideoElement | Referencia a un elemento de video HTML personalizado que será usado para captura durante la consulta de telemedicina                             |
| `hideTutorial`         | boolean          | Desactiva el modal de tutorial de la telemedicina                                                                                                |
| `maxRecordingTime`     | number           | Tiempo máximo de grabación en segundos                                                                                                           |
| `warningRecordingTime` | number           | Tiempo en segundos antes del límite para aviso                                                                                                   |
| `reportSchema`         | object           | Esquema personalizado del reporte, conforme especificación de la API. Permite definir instrucciones, schema y ejemplos para el reporte generado. |
| `skipConsultationType` | boolean          | Pula la selección de tipo de consulta, teniendo en cuenta las propiedades `telemedicine` y `videoElement`.                                       |

## Integración con Video para Telemedicina

La propiedad `videoElement` permite que integres el componente con un elemento de video HTML personalizado para consultas de telemedicina. Esta funcionalidad es especialmente útil cuando ya tienes una estructura de videollamada implementada y deseas usar el audio de esa llamada como fuente para la grabación y transcripción.

### Cómo Funciona

Cuando proporcionas un `videoElement`, el componente utilizará el stream de audio de este elemento de video como fuente principal junto con el micrófono del dispositivo del profesional.

### Implementación

```jsx theme={null}
<body>
  // Elemento de video que será pasado al componente
  <video id="consultation-video" controls style="width: 100%; max-width: 600px; margin-bottom: 20px;">
    <source src="./assets/test.mp4" type="video/mp4">
    <p>Tu navegador no soporta videos HTML5.</p>
  </video>

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

  <script>
    // Espera la carga del DOM
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Pasa el elemento de video al componente
      recorder.videoElement = videoElement;
    });
  </script>
</body>

```

### Ejemplo Práctico con 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 el stream de video (ejemplo con WebRTC)
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      });
    
    // Configurar el componente de grabación
    if (recorderRef.current && videoRef.current) {
      recorderRef.current.videoElement = videoRef.current;
    }
  }, []);

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

### Requisitos Técnicos

* El elemento de video debe tener un stream activo (`srcObject` definido)
* La propiedad `telemedicine` debe estar habilitada (`true`)
* El stream debe contener al menos una pista de audio

## Eventos

El componente emite los siguientes eventos que pueden ser capturados:

```jsx theme={null}
// Inicio de la grabación
onStart = (data) => {
  console.log("Grabación iniciada:", data);
};

// Éxito en la grabación
onSuccess = (data) => {
  console.log("Grabación finalizada con éxito:", data);
};

// Error durante la grabación
onError = (error) => {
  console.log("Error:", error);
};

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

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

## Especialidades Disponibles

El componente soporta varias especialidades médicas, siendo ellas:

<Specialties />

## Personalización

El componente puede ser personalizado a través de variables 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";
}
```

## Integración con 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("Éxito:", response);
      };
      
      recorder.onError = (error) => {
        console.log("Error:", error);
      };
    }
  }, []);

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

### 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 = 'TU_API_KEY';
    const professionalId = 'ID_DEL_PROFESIONAL';

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

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

## Seguridad

El componente fue desarrollado siguiendo las mejores prácticas de seguridad:

* Cifrado de extremo a extremo
* Conformidad con HIPAA
* Control de acceso
* Auditoría transparente

## Limitaciones de Tiempo

Para configurar límites de tiempo de grabación:

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

## Esquema personalizado del reporte

<Info>
  La funcionalidad de personalización del reporte (`report-schema`) está disponible solo a partir de la versión **2.3.1** del componente.
</Info>

Puedes personalizar el reporte generado por el componente utilizando la propiedad `report-schema`. Esto permite definir instrucciones, un schema y ejemplos para el reporte, haciendo la generación del contenido más flexible y adaptada a tu necesidad.

> **Consejo:** Es posible probar y validar la configuración del reporte personalizado directamente en el backoffice, en la pestaña de transformación en las configuraciones de la aplicación. Así, puedes experimentar diferentes schemas y ejemplos antes de aplicar en producción.

* El campo `schema` debe ser un **JSON Schema válido**, conforme a la [especificación oficial](https://json-schema.org/specification). Esto garantiza que el reporte generado siga la estructura esperada.
* El campo `fewShots` debe contener ejemplos que **satisfagan el schema definido**. De esta forma, los ejemplos sirven como referencia para el llenado correcto del reporte.

Por ejemplo:

```javascript theme={null}
<daai-consultation-recorder
  apikey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
  report-schema='{
    "instructions": "El reporte debe ser escrito en español...",
    "schema": {
      "type": "object",
      "required": ["foo", "bar"],
      "properties": {
        "foo": { "type": "integer" },
        "bar": { "type": "string" }
      },
      "additionalProperties": true
    },
    "fewShots": [
      {"foo":1,"bar":"test"},
      {"foo":2,"bar":"test2"}
    ]
  }'
/>
```

## Deshabilitando la selección de tipo de consulta

<Info>
  La funcionalidad de deshabilitación de la selección de tipo de consulta (`skipConsultationType`) está disponible como una funcionalidad de prueba en la versión **2.5.0** del componente.
</Info>

Puedes deshabilitar la selección de tipo de consulta utilizando la propiedad `skipConsultationType`. Esto permite que el componente inicie la grabación automáticamente, sin la necesidad de seleccionar el tipo de consulta.

* Si la propiedad `telemedicine` es `true`, el componente mostrará la caja de selección de pestañas del navegador para seleccionar la fuente de audio.

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

* Si la propiedad `videoElement` también es proporcionada, el componente usará el audio de este elemento como fuente principal.

```jsx theme={null}
<body>
  // Elemento de video que será pasado al componente
  <video id="consultation-video" controls style="width: 100%; max-width: 600px; margin-bottom: 20px;">
    <source src="./assets/test.mp4" type="video/mp4">
    <p>Your browser does not support HTML5 videos.</p>
  </video>

  <daai-consultation-recorder
    apikey="TU_API_KEY"
    professional="ID_DEL_PROFESIONAL"
    telemedicine
    skip-consultation-type
  />

  <script>
    // Espera la carga del DOM
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Pasa el elemento de video al componente
      recorder.videoElement = videoElement;
    });
  </script>
</body>
```

* Si no se proporciona ni `telemedicine` ni `videoElement`, el componente usará el audio del dispositivo del profesional como fuente principal.

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

## Enviando datos para prescripción

El componente puede ser configurado para enviar datos para prescripción utilizando la propiedad `prescription-data`. Esto permite que se envíen datos adicionales para que la prescripción se genere basado en los datos enviados.

<Info>
  La funcionalidad de envío de datos para prescripción (`prescription-data`) está disponible para prueba a partir de la versión **2.5.0** del componente.
</Info>

### Mevo

Para la plataforma MEVO, debe enviar los siguientes datos:

* `provider`: "MEVO"
* `externalReference`: Identificador único en la plataforma MEVO

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

### Memed

<Info>
  La funcionalidad de envío de datos para prescripción para la plataforma Memed (`prescription-data`) está disponible para prueba a partir de la versión **2.6.0-rc.0** del componente.
</Info>

Para la plataforma Memed, debe enviar los siguientes datos:

* `provider`: "MEMED"
* `token`: Token de autenticación de la plataforma Memed para el profesional
* `patient`: Que es un objeto con los siguientes campos:
  * `externalId`: Identificador único del paciente en la plataforma Memed
  * `name`: Nombre del paciente
  * `email`: Email del paciente
  * `phone`: Teléfono del paciente
  * `document`: Documento del paciente (sólo números - opcional)

```jsx theme={null}
<daai-consultation-recorder
  apikey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
  prescription-data='{"provider": "MEMED", "token": "TOKEN_DE_AUTENTICACION", "patient": {"externalId": "IDENTIFICADOR_UNICO", "name": "NOMBRE_DEL_PACIENTE", "email": "EMAIL_DEL_PACIENTE", "phone": "TELEFONO_DEL_PACIENTE", "document": "DOCUMENTO_DEL_PACIENTE"}}'
/>
```

Al finalizar la grabación, el componente enviará los datos para la prescripción médica de la o sdk de prescripción médica de Memed, que generará la prescripción médica con base en los datos resultantes de la grabación.