@dogcalas/sami-chat-widget

Widget de chat interactivo para SaMi, el asistente virtual de elTOQUE.

Instalación

npm install @dogcalas/sami-chat-widget

o con pnpm:

pnpm add @dogcalas/sami-chat-widget

Uso

En Next.js (App Router)

'use client';
import { SamiChat } from '@dogcalas/sami-chat-widget';

export default function MyPage() {
  return (
    <div>
      <h1>Mi Página</h1>
      <SamiChat 
        backendUrl="https://web-bot.eltoque.org"
        initialMessage="¡Hola! Soy SaMi. ¿Cómo puedo ayudarte?"
        buttonPosition="fixed bottom-5 right-5"
      />
    </div>
  );
}

En React (Vite, CRA, etc.)

import { SamiChat } from '@dogcalas/sami-chat-widget';

function App() {
  return (
    <div>
      <h1>Mi Aplicación</h1>
      <SamiChat />
    </div>
  );
}

Props

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | backendUrl | string | 'https://web-bot.eltoque.org' | URL del backend del chatbot | | initialMessage | string | '¡Hola! Soy SaMi...' | Mensaje inicial del asistente | | buttonPosition | string | 'fixed bottom-5 right-5' | Clases de Tailwind para posicionar el botón flotante |

Características

• ✅ Server-Sent Events (SSE): Conexión en tiempo real con el backend
• ✅ Persistencia de sesión: Los mensajes se guardan en sessionStorage
• ✅ Reconexión automática: Manejo inteligente de desconexiones
• ✅ Previews de enlaces: Muestra tarjetas enriquecidas para URLs
• ✅ Soporte de imágenes: Detecta y renderiza imágenes automáticamente
• ✅ Diseño responsive: Funciona perfectamente en móviles y escritorio
• ✅ TypeScript: Totalmente tipado para mejor DX

Estilos

El componente utiliza Tailwind CSS. Asegúrate de tener Tailwind configurado en tu proyecto:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

En tu tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@dogcalas/sami-chat-widget/dist/**/*.{js,mjs}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tipos TypeScript

interface SamiChatProps {
  buttonPosition?: string;
  initialMessage?: string;
  backendUrl?: string;
}

interface Message {
  id: number;
  role: 'user' | 'assistant';
  content: string;
  image?: string;
  preview?: LinkPreview[] | null;
}

interface LinkPreview {
  url: string;
  title?: string;
  description?: string;
  image?: string;
  source?: string;
}

Desarrollo

# Instalar dependencias
pnpm install

# Compilar en modo watch
pnpm dev

# Compilar para producción
pnpm build

Licencia

MIT © elTOQUE

Soporte

Para reportar problemas o solicitar funcionalidades, abre un issue en GitHub.