predoc-sdk v0.0.23

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

🚀 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

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

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

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 info@umasalud.com
• Visitar nuestra documentación completa