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.

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

📝 License

ISC © ÜMA Salud

🙋‍♂️ Soporte

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

• Abrir un issue en GitHub
• Contactarnos en [email protected]
• Visitar nuestra documentación completa