predoc-sdk

Predoc SDK 🏥

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

✨ 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

ISC © ÜMA Salud

🙋‍♂️ Soporte

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

• Abrir un issue en GitHub
• Contactarnos en [e-mail]
• Visitar nuestra documentación completa