Pop Up

Implementación del Pop-Up: Código y Manejo de Datos

💡 Importante: Autorización de ventanas emergentes.
Es indispensable habilitar las ventanas emergentes para que el pop-up funcione correctamente. Si esta función está bloqueada, la ventana no se abrirá y no será posible continuar con el proceso. Le recomendamos permitir ventanas emergentes en su navegador o incluir este sitio en la lista de excepciones para evitar inconvenientes.

Una vez que tengas el token de acceso, debes levantar el Pop-Up (o ventana emergente) dentro de tu aplicación utilizando la siguiente lógica:

const response = await login(); // La función login() simula la función que obtiene el token.

const data = {
  view: "analysis",
  token: response.access_token, // Se obtiene el token de la sentencia de login.
  doctorId: "", // Ingrese el ID del doctor que está generando el informe.
  appointmentId: "", // Ingrese el ID de la consulta médica a la cual se le está generando el informe.
  reportExampleId: "", // (Opcional) Id de plantilla que quieran preseleccionar.
};

// Crea un objeto URLSearchParams para enviar los datos dentro de la URL.
const urlParams = new URLSearchParams(data);

// Define las dimensiones y posicion del Pop-Up
const height = 650;
const width = 900;
const left = (window.screen.width - width) / 2;
const top = (window.screen.height - height) / 2.5;

// Construye la URL para el Pop-Up de Speaknosis.
const popUpUrl = `http://qa-portal.speaknosis.com/#/pop-up/?${urlParams}`; // Ambiente de QA
const popUpUrl = `http://portal.speaknosis.com/#/pop-up/?${urlParams}`; // Ambiente de PROD

// Abre el modal con la función window.open
const popup = window.open(
  popUpUrl, // URL con parámetros de la consulta.
  "SpeaknosisPopUp",
  `width=${width},height=${height},top=${top},left=${left}` // Entregar configuración del Pop-Up.
);

// Validación para verificar si se abrió correctamente el Pop-Up.
if (!popup) {
  console.error("No se pudo abrir el pop-up");
}

Uso y Funcionamiento del Pop-Up

Si el Pop-Up recibió los datos de la consulta (token, doctorId y appointmentId) de manera correcta, se debería visualizar el componente del Pop-Up.

Puedes usar tu teléfono como micrófono externo escaneando el código QR que se muestra en el Pop-up:

Imagen de referencia:

Una vez que el Pop-up se levante, puedes comenzar a realizar una grabación de audio utilizando el micrófono de tu computadora o tu teléfono como micrófono externo. Al momento de comenzar la grabación de audio, se habilitarán dos nuevos botones: el de pausa/reanudación de grabación ( / ) y el botón que detiene la grabación ().

Imagen de referencia:

Una vez que se finalice la grabación de audio (al presionar el botón de detener), se visualizará una nueva sección donde deberás seleccionar la plantilla a utilizar para generar el informe médico.

📝 Pre-selección de Plantilla (Opcional) Si incluiste el parámetro reportExampleId en la URL inicial, el sistema utilizará ese ID de reporte de ejemplo para pre-seleccionar la plantilla en esta vista automáticamente. El doctor solo tendrá que revisar y confirmar la plantilla antes de hacer clic en 'Generar informe'. Si no se envía este parámetro, el doctor deberá seleccionar manualmente la plantilla del menú desplegable.

Imagen de referencia:

Escoge la plantilla que vas a utilizar en el menú desplegable. Una vez seleccionada, podrás hacer clic en el botón 'Generar informe'.

Imagen de referencia:

Imagen de referencia:

Una vez que se comience a generar el informe, se verá una animación que indicará que se está generando el informe. Luego, se podrá visualizar el informe médico, editarlo y aprobarlo.

Método para recibir el informe

Para recibir los informes en tu sistema, debes configurar un endpoint personalizado y seguro. La comunicación se autenticará utilizando el método que tu sistema prefiera (por ejemplo, una API Key, tokens de autorización, etc).

Una vez configurado, nuestro sistema enviará la información del informe a la URL que nos proporciones. Este proceso se activa cuando un informe es aprobado en nuestra plataforma, generando los datos en el formato acordado y enviándolos a tu endpoint.

Estructura Base de la Respuesta

La carga útil (payload) que recibirás en tu endpoint tendrá la siguiente estructura fundamental:

{
  "response": {
    "message": {
      "appointmentId": "123123",
      "report": { /* ... Contenido del informe ... */ },
      "metaData": { /* ... Datos adicionales ... */ }
    }
  }
}

Detalle de los Campos

• appointmentId (string): Identificador único de la consulta o cita médica.
• report (object | string): Contiene el informe médico. Su formato es flexible y depende de la configuración acordada.
• metaData (object): Contiene datos adicionales y estructurados, como catálogos o códigos.

El campo report es dinámico. Puede contener un objeto JSON estructurado o una cadena de texto (string) con el informe en formato MARKDOWN o HTML.

Contenido del Campo "report"

Opción 1: JSON Estructurado (report como objeto)

Si necesitas los datos del informe de manera segmentada, el campo report contendrá un objeto JSON.

Ejemplo:

"report": {
  "reasonForVisit": "Motivo de consulta: Dolor de garganta persistente.",
  "anamnesis": "Paciente refiere dolor y dificultad para tragar desde hace 3 días.",
  "physicalExam": "Se observan amígdalas enrojecidas e inflamadas."
}

Opción 2: Markdown (report como string)

Para una presentación de texto enriquecido simple y legible, el campo report contendrá un objeto MARKDOWN.

Ejemplo:

"report": "## Motivo de consulta\nDolor de garganta persistente.\n\n## Anamnesis\nPaciente refiere dolor y dificultad para tragar desde hace 3 días."

Opción 3: HTML (report como string)

Si necesitas renderizar el informe directamente en una vista web, el campo report contendrá un objeto HTML.

Ejemplo:

"report": "<h2>Motivo de consulta</h2><p>Dolor de garganta persistente.</p><h2>Anamnesis</h2><p>Paciente refiere dolor y dificultad para tragar desde hace 3 días.</p>"

Contenido del Campo "metaData"

El campo metaData alberga información complementaria y estructurada que enriquece el informe, como códigos de catálogos previamente configurados.

Ejemplo de metaData con catálogos:

"metaData": {
  "catalogs": {
    "cie-10": [
      { "key": "J03.9", "code": "J03.9", "description": "Amigdalitis aguda, no especificada" }
    ],
    "vademecum": [
      { "key": "IBU600", "code": "IBUPROFENO 600MG", "subcode": "24COMP" }
    ]
  }
}

Una vez que el Pop-Up envíe los datos a tu endpoint, se cerrará automáticamente, permitiéndote utilizar la información recibida en tu aplicación.