Saltar al contenido principal
Esta guía muestra cómo integrar SofIA SDK en aplicaciones que utilizan JavaScript nativo sin frameworks adicionales.

Configuración inicial

1. Instalación

npm install @omniloy/sofia-sdk

2. Importación del componente

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SofIA SDK - Vanilla JS</title>
    
    <!-- Importar el componente -->
    <script type="module">
        import '@omniloy/sofia-sdk';
    </script>
</head>
<body>
    <!-- El componente estará disponible aquí -->
</body>
</html>

Implementación básica

HTML Structure

<div id="sofia-container">
    <sofia-sdk
        id="sofia-component"
        baseurl="https://api.example.com/v1"
        wssurl="wss://ws.example.com"
        apikey="sk-your-api-key-here"
        userid="user_12345"
        patientid="patient_67890"
        isopen="false"
        toolsargs='{
            "$schema": "http://json-schema.org/draft-07/schema#",
            "title": "clinical_notes",
            "type": "object",
            "required": ["diagnosis"],
            "properties": {
                "diagnosis": {"type": "string", "description": "Diagnóstico principal"}
            }
        }'
    ></sofia-sdk>
    
    <button id="toggle-sofia">Abrir/Cerrar SofIA</button>
</div>

JavaScript Configuration

// Esperar a que el componente esté definido
customElements.whenDefined('sofia-sdk').then(() => {
    const sofiaComponent = document.getElementById('sofia-component');
    const toggleButton = document.getElementById('toggle-sofia');
    
    // Configurar callback para recibir reportes
    sofiaComponent.handleReport = (report) => {
        console.log('Reporte clínico recibido:', report);
        
        // Procesar el reporte según sus necesidades
        displayReport(report);
        sendToEHR(report);
    };
    
    // Configurar callback para cambios de visibilidad
    sofiaComponent.setIsOpen = (isOpen) => {
        console.log('Estado del componente:', isOpen ? 'Abierto' : 'Cerrado');
        sofiaComponent.isopen = isOpen;
        toggleButton.textContent = isOpen ? 'Cerrar SofIA' : 'Abrir SofIA';
    };
    
    // Manejar click del botón
    toggleButton.addEventListener('click', () => {
        const currentState = sofiaComponent.isopen === 'true';
        sofiaComponent.isopen = !currentState;
    });
});

// Función para mostrar el reporte en la interfaz
function displayReport(report) {
    const reportContainer = document.getElementById('report-display');
    if (reportContainer) {
        reportContainer.innerHTML = `
            <h3>Reporte Clínico</h3>
            <pre>${JSON.stringify(report, null, 2)}</pre>
        `;
    }
}

// Función para enviar al sistema EHR/HIS
function sendToEHR(report) {
    // Implementar integración con su sistema
    fetch('/api/clinical-reports', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(report)
    }).then(response => {
        console.log('Reporte enviado al EHR:', response.status);
    }).catch(error => {
        console.error('Error enviando reporte:', error);
    });
}

Gestión de estados

Control de visibilidad

const sofiaComponent = document.querySelector('sofia-sdk');

// Abrir programáticamente
function openSofia() {
    sofiaComponent.isopen = true;
}

// Cerrar programáticamente  
function closeSofia() {
    sofiaComponent.isopen = false;
}

// Alternar estado
function toggleSofia() {
    const isCurrentlyOpen = sofiaComponent.isopen === 'true';
    sofiaComponent.isopen = !isCurrentlyOpen;
}

Actualización de datos del paciente

// Actualizar información del paciente
function updatePatientData(newPatientId, patientInfo) {
    sofiaComponent.patientid = newPatientId;
    sofiaComponent.patientdata = JSON.stringify(patientInfo);
}

// Ejemplo de uso
updatePatientData('patient_98765', {
    edad: 45,
    antecedentes: 'Diabetes tipo 2, Hipertensión',
    alergias: 'Penicilina'
});

Manejo de errores

// Escuchar errores del componente
sofiaComponent.addEventListener('error', (event) => {
    console.error('Error en SofIA SDK:', event.detail);
    
    // Mostrar mensaje al usuario
    showErrorMessage(event.detail.message);
});

function showErrorMessage(message) {
    const errorDiv = document.createElement('div');
    errorDiv.className = 'error-message';
    errorDiv.textContent = `Error: ${message}`;
    document.body.appendChild(errorDiv);
    
    // Remover después de 5 segundos
    setTimeout(() => {
        errorDiv.remove();
    }, 5000);
}

Ejemplo completo

Para ver una implementación completa y funcional, consulte nuestro ejemplo en GitHub: Ver ejemplo completo de Vanilla TypeScript → El ejemplo incluye:
  • Configuración completa del proyecto
  • Manejo avanzado de estados
  • Integración con APIs mockadas
  • Gestión de errores robusta
  • Estilado CSS personalizado

Consideraciones adicionales

Performance

  • El componente se inicializa de forma lazy para optimizar el tiempo de carga
  • Use customElements.whenDefined() para evitar condiciones de carrera

Seguridad

  • Nunca exponga su apikey en el código del cliente en producción
  • Implemente validación del lado del servidor para todos los reportes
  • Use HTTPS obligatoriamente para todas las comunicaciones