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

🚀 Instalación

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

📖 Uso Básico

1. Importa los componentes

import { ChatBot, ChatSummary } 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)
`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

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
}

📋 Componente de Resumen

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

<ChatSummary
  companyName="Mi Clínica"
  userData={userData}
  position="top-right"
  animation="scale"
/>

ChatSummary Props

Prop	Tipo	Default	Descripción
`companyName`	string	-	Nombre de la empresa
`userData`	UserData	-	Datos del usuario
`position`	string	"bottom-right"	Posición del botón de resumen
`animation`	string	"pulse"	Tipo de animación ("none", "pulse", "bounce", "spin", "scale")

🌈 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 Completa

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

function App() {
  const userData = {
    name: "Juan Pérez",
    uid: "user123",
    uniqueId: "unique123"
  };

  return (
    <>
      <ChatSummary
        animation="scale"
        position="top-right"
        userData={userData}
        companyName="Mi Clínica"
      />
      
      <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)}
      />
    </>
  );
}

export default App;

🔧 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