Ticktur Chat Widget

Un widget de chat personalizable construido con React y TypeScript, perfecto para integrar funcionalidades de chat en cualquier aplicación web.

✨ Características

• 🎨 Altamente personalizable - Estilos y temas configurables
• 📱 Responsive - Funciona perfectamente en todos los dispositivos
• 🔧 TypeScript - Tipado completo para mejor desarrollo
• 🎭 Componentes modulares - Usa solo lo que necesites
• 🪝 Hooks personalizados - Lógica reutilizable incluida
• 📦 Zero config - Funciona out-of-the-box

📦 Instalación

npm install ticktur-chat-widget

🚀 Uso básico

import { ChatWidget } from 'ticktur-chat-widget';
// Opción 1: Importar el CSS directamente
import 'ticktur-chat-widget/style.css';

// Opción 2: Si la opción 1 no funciona, prueba:
// import 'ticktur-chat-widget/dist/ticktur-chat-widget.css';

function App() {
  return (
    <div>
      <ChatWidget />
    </div>
  );
}

📚 Componentes disponibles

ChatWidget (Principal)

El componente principal que incluye todo el sistema de chat.

import { ChatWidget } from 'ticktur-chat-widget';

<ChatWidget 
  // Props opcionales aquí
/>

Componentes individuales

import {
  FloatingButton,
  ChatWindow,
  MessageList,
  MessageInput,
  SuggestedReplies
} from 'ticktur-chat-widget';

🪝 Hooks disponibles

import {
  useChatWidget,
  useChatWindow,
  useFloatingButton,
  useMessageInput,
  useMessageList,
  useMockConversation
} from 'ticktur-chat-widget';

🔧 Tipos TypeScript

import type {
  Message,
  FloatingButtonProps,
  ChatConfig,
  ChatWindowProps
} from 'ticktur-chat-widget';

💡 Ejemplo completo

import React from 'react';
import { ChatWidget } from 'ticktur-chat-widget';
// Importa los estilos
import 'ticktur-chat-widget/style.css';

function MyApp() {
  return (
    <div className="app">
      <h1>Mi Aplicación</h1>
      
      {/* El widget se posiciona automáticamente */}
      <ChatWidget />
    </div>
  );
}

export default MyApp;

🎨 Personalización

El widget viene con estilos por defecto usando Tailwind CSS. Puedes personalizarlo:

1. Sobrescribiendo clases CSS
2. Usando tus propios temas de Tailwind
3. Implementando componentes personalizados

📋 Requisitos

• React ^18.0.0 || ^19.0.0
• React DOM ^18.0.0 || ^19.0.0

🛠️ Desarrollo

# Instalar dependencias
npm install

# Desarrollo
npm run dev

# Build
npm run build

# Lint
npm run lint

📄 Licencia

MIT

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor:

1. Haz fork del repositorio
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📞 Soporte

Si tienes problemas o preguntas:

• Abre un issue
• Revisa la documentación
• Contacta al equipo de desarrollo

Hecho con ❤️ por el equipo de Ticktur