Predoc SDK 🏥

Un SDK de React para integrar un chat médico pre-consulta en tu aplicación

Chatbot para pacientes pre consulta Modo Pantalla Completa

✨ Características

💬 Chat interactivo para pre-consultas médicas
🎨 Totalmente personalizable
📱 Diseño responsive
🔄 Integración seamless con React
🎯 Dos variantes: burbuja flotante o pantalla completa
🖼️ Soporte para envío de imágenes
📋 Resumen de consulta para profesionales médicos
📝 Generación de recetas médicas

🚀 Instalación

npm install predoc-sdk
# o
yarn add predoc-sdk

📖 Uso Básico

1. Importa los componentes

import { ChatBot, Predoc } from 'predoc-sdk';
import 'predoc-sdk/dist/index.css';

2. Implementa el chat

function App() {
  const userData = {
    name: "Juan Pérez",
    uid: "user123",
    // opcional
    uniqueId: "unique123",
    img: "https://example.com/avatar.jpg",
    link: "https://ejemplo.com/perfil"
  };

  return (
    <ChatBot
      userData={userData}
      companyName="Mi Clínica"
      primaryColor="#3562FF"
      variant="bubble"
    />
  );
}

🎨 Personalización

ChatBot Props

Prop	Tipo	Default	Descripción
`companyName`	string	-	Nombre de la empresa que se mostrará en el chat
`userData`	UserData	-	Datos del usuario (ver interfaz abajo)
`apiKey`	string	""	Clave API opcional para autenticación
`apiUrl`	string	""	URL de la API para el servicio de chat
`primaryColor`	string	"#091c1a"	Color principal para el tema del chat
`position`	string	"bottom-right"	Posición de la burbuja ("bottom-right", "bottom-left", "top-right", "top-left")
`placeholder`	string	"Escribe un mensaje"	Texto placeholder del input
`variant`	string	"bubble"	Variante del chat ("bubble" o "fullscreen")
`onError`	function	console.error	Callback para manejar errores
`onFinish`	function	undefined	Callback que se ejecuta cuando finaliza la consulta

Interfaz UserData

interface UserData {
  uid: string;           // ID único del usuario (requerido)
  uniqueId?: string;     // ID único alternativo (opcional)
  name?: string;         // Nombre del usuario
  img?: string;         // URL de la imagen de perfil
  link?: string;        // Link al perfil del usuario
  reason?: string;      // Motivo de la consulta
}

Interfaz MessageContent

interface MessageContent {
  message: string;      // Texto del mensaje
  time?: string;        // Hora del mensaje
  image?: string;       // URL de la imagen adjunta
  file?: File;          // Archivo adjunto
}

📋 Componente de Resumen

El componente Predoc proporciona un resumen de la consulta para profesionales médicos:

<Predoc
  companyName="Mi Clínica"
  userData={userData}
  position="top-right"
  animation="scale"
  apiUrl="https://api.miservicio.com"
  onGeneratePrescription={(data) => {
    // Lógica para generar receta médica
    console.log("Generando receta...", data);
  }}
/>

Predoc Props

Prop	Tipo	Default	Descripción
`companyName`	string	-	Nombre de la empresa
`userData`	UserData	-	Datos del usuario
`apiUrl`	string	-	URL de la API para obtener los datos del resumen
`position`	string	"bottom-right"	Posición del botón de resumen ("bottom-right", "bottom-left", "top-right", "top-left", "custom")
`customPosition`	string	undefined	Clase CSS personalizada para posicionamiento cuando position es "custom"
`animation`	string	"pulse"	Tipo de animación ("none", "pulse", "bounce", "spin", "scale")
`modal`	boolean	false	Si es true, el resumen se muestra como un modal
`onGeneratePrescription`	function	undefined	Función que se ejecuta al hacer clic en "Generar receta" (recibe los datos del resumen)
`isLoadingPrescription`	boolean	false	Indica si la receta se está generando actualmente
`prescriptionError`	boolean	false	Indica si ha ocurrido un error durante la generación de la receta
`prescriptionGenerated`	boolean	false	Indica si la receta ha sido generada exitosamente
`isOpen`	boolean	true	Controla si el modal está abierto o cerrado
`renderAsModal`	boolean	false	Si es true, renderiza el componente como un modal; si es false, lo renderiza como un componente normal

🌈 Ejemplos

Chat con Tema Personalizado

<ChatBot
  userData={userData}
  companyName="Mi Clínica"
  primaryColor="#FF5733"
  position="bottom-left"
  placeholder="Chatea con nuestro asistente médico..."
/>

Chat en Pantalla Completa

<ChatBot
  userData={userData}
  companyName="Mi Clínica"
  variant="fullscreen"
  primaryColor="#3562FF"
/>

Implementación con Generación de Receta

import React, { useState } from 'react';
import { ChatBot, Predoc } from 'predoc-sdk';
import 'predoc-sdk/dist/index.css';

function App() {
  const userData = {
    name: "Juan Pérez",
    uid: "user123",
    uniqueId: "unique123"
  };
  
  const [isPrescriptionGenerated, setIsPrescriptionGenerated] = useState(false);
  const [isLoadingPrescription, setIsLoadingPrescription] = useState(false);
  const [prescriptionError, setPrescriptionError] = useState(false);

  const handleGeneratePrescription = (summaryData) => {
    // Implementar lógica para generar receta con los datos del resumen
    setIsLoadingPrescription(true);
    console.log("Generando receta con datos:", summaryData);
    
    // Simular una llamada API
    setTimeout(() => {
      // API call u otras operaciones
      setIsLoadingPrescription(false);
      setIsPrescriptionGenerated(true);
      
      // En caso de error:
      // setPrescriptionError(true);
    }, 2000);
  };

  return (
    <>
      <Predoc
        animation="scale"
        position="top-right"
        userData={userData}
        companyName="Mi Clínica"
        apiUrl="https://api.miservicio.com"
        modal={true}
        onGeneratePrescription={handleGeneratePrescription}
        isLoadingPrescription={isLoadingPrescription}
        prescriptionError={prescriptionError}
        prescriptionGenerated={isPrescriptionGenerated}
      />
      
      <ChatBot
        userData={userData}
        companyName="Mi Clínica"
        primaryColor="#3562FF"
        variant="bubble"
        position="bottom-right"
        placeholder="Escribe tu consulta..."
        onError={(error) => console.error('Chat error:', error)}
        apiUrl="https://api.miservicio.com"
        onFinish={() => console.log("Consulta finalizada")}
      />
      
      {isPrescriptionGenerated && (
        <div className="notification">
          ¡Receta generada con éxito!
        </div>
      )}
    </>
  );
}

export default App;

🚨 Manejo de Mensajes y Archivos

El SDK permite el envío de mensajes de texto e imágenes:

// Estructura de mensaje utilizada internamente
const message = {
  message: "Texto del mensaje",
  time: "12:30",
  image: "https://example.com/image.jpg", // URL de imagen
  file: fileObject // Objeto File de JavaScript
};

🔧 Manejo de Errores

El componente incluye un manejador de errores que puede ser personalizado a través de la prop onError:

<ChatBot
  userData={userData}
  companyName="Mi Clínica"
  onError={(error) => {
    console.error('Error en el chat:', error);
    // Tu lógica de manejo de errores
  }}
/>

📱 Responsive Design

El SDK está diseñado para ser completamente responsive:

En móviles, la burbuja se adapta automáticamente
El modo fullscreen utiliza todo el espacio disponible
Los mensajes y elementos se ajustan al tamaño de la pantalla

🤝 Contribución

Las contribuciones son bienvenidas. Por favor, abre un issue primero para discutir los cambios que te gustaría hacer.

Fork el repositorio
Crea tu rama de feature (git checkout -b feature/amazing-feature)
Commit tus cambios (git commit -m 'Add: amazing feature')
Push a la rama (git push origin feature/amazing-feature)
Abre un Pull Request

📝 License

🙋‍♂️ Soporte

¿Tienes preguntas? ¿Necesitas ayuda? No dudes en:

Abrir un issue en GitHub
Contactarnos en info@umasalud.com
Visitar nuestra documentación completa