> ## 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

> Web component for recording and transcribing medical consultations

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 fetching specialties:', error)).finally(() => setLoading(false));
  }, []);
  if (loading) {
    return <div>Loading specialties...</div>;
  }
  return <ul>
        {Object.keys(specialties).map(specialty => <li key={specialty}>
                <span>{specialties[specialty].title} - <code>{specialty}</code></span>
                
            </li>)}
    </ul>;
};

## Installation

To install the component in your project:

### Via NPM

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

### Via CDN

Alternatively, you can include the component directly 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>
```

## Basic Usage

After installation, import and use the component:

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

<daai-consultation-recorder
  apiKey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
/>
```

## Properties

### Required Properties

| Property       | Type   | Description                                                      |
| -------------- | ------ | ---------------------------------------------------------------- |
| `apikey`       | string | API key required to make requests                                |
| `professional` | string | Unique identifier of the professional who will use the component |

### Optional Properties

| Property               | Type             | Description                                                                                                                       |
| ---------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `specialty`            | string           | Defines the medical specialty for the record                                                                                      |
| `metadata`             | object           | Additional data for webhook retrieval                                                                                             |
| `telemedicine`         | boolean          | Enables telemedicine functionality                                                                                                |
| `videoElement`         | HTMLVideoElement | Reference to a custom HTML video element that will be used for capture during telemedicine consultation                           |
| `hideTutorial`         | boolean          | Disables the telemedicine tutorial modal                                                                                          |
| `maxRecordingTime`     | number           | Maximum recording time in seconds                                                                                                 |
| `warningRecordingTime` | number           | Time in seconds before the limit for warning                                                                                      |
| `reportSchema`         | object           | Custom report schema, according to API specification. Allows defining instructions, schema and examples for the generated report. |
| `skipConsultationType` | boolean          | Skips the consultation type selection, taking into account the `telemedicine` and `videoElement` properties.                      |

## Video Integration for Telemedicine

The `videoElement` property allows you to integrate the component with a custom HTML video element for telemedicine consultations. This functionality is especially useful when you already have an implemented video call structure and want to use the audio from that call as a source for recording and transcription.

### How It Works

When you provide a `videoElement`, the component will use the audio stream from this video element as the primary source along with the professional's device microphone.

### Implementation

```jsx theme={null}
<body>
  // Video element that will be passed to the component
  <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="your-api-key" 
    professional="12345" 
    telemedicine="true">
  </daai-consultation-recorder>

  <script>
    // Wait for DOM loading
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Pass the video element to the component
      recorder.videoElement = videoElement;
    });
  </script>
</body>

```

### Practical Example with React

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

function TelemedicineConsultation() {
  const videoRef = useRef(null);
  const recorderRef = useRef(null);
  
  useEffect(() => {
    // Configure video stream (example with WebRTC)
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      });
    
    // Configure recording component
    if (recorderRef.current && videoRef.current) {
      recorderRef.current.videoElement = videoRef.current;
    }
  }, []);

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

### Technical Requirements

* The video element must have an active stream (`srcObject` defined)
* The `telemedicine` property must be enabled (`true`)
* The stream must contain at least one audio track

## Events

The component emits the following events that can be captured:

```jsx theme={null}
// Start of recording
onStart = (data) => {
  console.log("Recording started:", data);
};

// Recording success
onSuccess = (data) => {
  console.log("Recording completed successfully:", data);
};

// Error during recording
onError = (error) => {
  console.log("Error:", error);
};

// Component events
onEvent = (event) => {
  console.log("Event:", event);
};

// Remaining time warning
onWarningRecordingTime = () => {
  console.log("Remaining time warning");
};
```

## Available Specialties

The component supports various medical specialties, which are:

<Specialties />

## Customization

The component can be customized through CSS variables:

```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";
}
```

## Framework Integration

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

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

### 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 = 'YOUR_API_KEY';
    const professionalId = 'PROFESSIONAL_ID';

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

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

## Security

The component was developed following security best practices:

* End-to-end encryption
* HIPAA compliance
* Access control
* Transparent auditing

## Time Limitations

To configure recording time limits:

```jsx theme={null}
<daai-consultation-recorder
  apiKey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
  maxRecordingTime={300} // 5 minutes
  warningRecordingTime={30} // Warning 30 seconds before
/>
```

## Custom report schema

<Info>
  The report customization functionality (`report-schema`) is only available from component version **2.3.1** onwards.
</Info>

You can customize the report generated by the component using the `report-schema` property. This allows you to define instructions, a schema and examples for the report, making the content generation more flexible and adapted to your needs.

> **Tip:** You can test and validate the custom report configuration directly in the backoffice, in the transformation tab in the application settings. This way, you can experiment with different schemas and examples before applying them in production.

* The `schema` field must be a **valid JSON Schema**, according to the [official specification](https://json-schema.org/specification). This ensures that the generated report follows the expected structure.
* The `fewShots` field must contain examples that **satisfy the defined schema**. This way, the examples serve as a reference for the correct filling of the report.

For example:

```javascript theme={null}
<daai-consultation-recorder
  apikey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
  report-schema='{
    "instructions": "The report should be written in Brazilian Portuguese...",
    "schema": {
      "type": "object",
      "required": ["foo", "bar"],
      "properties": {
        "foo": { "type": "integer" },
        "bar": { "type": "string" }
      },
      "additionalProperties": true
    },
    "fewShots": [
      {"foo":1,"bar":"test"},
      {"foo":2,"bar":"test2"}
    ]
  }'
/>
```

## Disabling consultation type selection

<Info>
  The consultation type selection disabling functionality (`skipConsultationType`) is available as a test feature in component version **2.5.0**.
</Info>

You can disable the consultation type selection using the `skipConsultationType` property. This allows the component to start recording automatically, without the need to select the consultation type.

* If the `telemedicine` property is `true`, the component will display the browser tab selection box for selecting the audio source.

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

* If the `videoElement` property is also provided, the component will use the audio from this element as the primary source.

```jsx theme={null}
<body>
  // Video element that will be passed to the component
  <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="YOUR_API_KEY"
    professional="PROFESSIONAL_ID"
    telemedicine
    skip-consultation-type
  />

  <script>
    // Wait for DOM loading
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Pass the video element to the component
      recorder.videoElement = videoElement;
    });
  </script>
</body>
```

* If neither `telemedicine` nor `videoElement` is provided, the component will use the audio from the professional's device as the primary source.

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

## Sending data for prescription

The component can be configured to send data for prescription using the `prescription-data` property. This allows you to send additional data so that the prescription is generated based on the sent data.

<Info>
  The prescription data sending functionality (`prescription-data`) is available for test from component version **2.5.0**.
</Info>

### Mevo

For the MEVO platform, you must send the following data:

* `provider`: "MEVO"
* `externalReference`: Unique identifier in the MEVO platform

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

### Memed

<Info>
  The prescription data sending functionality for the Memed platform (`prescription-data`) is available for test from component version **2.6.0-rc.0**.
</Info>

For the Memed platform, you must send the following data:

* `provider`: "MEMED"
* `token`: Authentication token for the Memed platform for the professional
* `patient`: That is an object with the following fields:
  * `externalId`: Unique identifier of the patient in the Memed platform
  * `name`: Name of the patient
  * `email`: Email of the patient
  * `phone`: Phone of the patient
  * `document`: Document of the patient (only numbers - optional)

```jsx theme={null}
<daai-consultation-recorder
  apikey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
  prescription-data='{"provider": "MEMED", "token": "AUTHENTICATION_TOKEN", "patient": {"externalId": "UNIQUE_IDENTIFIER", "name": "PATIENT_NAME", "email": "PATIENT_EMAIL", "phone": "PATIENT_PHONE", "document": "PATIENT_DOCUMENT"}}'
/>
```

When the recording is finished, the component will send the data to the prescription medical sdk of Memed, which will generate the prescription medical based on the data resulting from the recording.