Agent Chat Widget

Un widget de chat embebible para tu aplicación web.

Instalación

npm install @n3eme/agent-chat

Uso

Como componente React

import { AgentChat } from '@n3eme/agent-chat';

function App() {
  return (
    <AgentChat
      agentId="tu-agent-id"
      apiKey="tu-api-key"
      conversationId="opcional-conversation-id"
      windowTitle="Título del Chat"
      initialMessage="Mensaje inicial"
      brandColor="#007bff"
      bubblePosition="right"
      messageSuggestions={["Sugerencia 1", "Sugerencia 2"]}
    />
  );
}

Como script embebible

1. Agrega el script a tu HTML:

<script src="https://unpkg.com/@n3eme/agent-chat@latest/dist/embed.js"></script>

2. Inicializa el widget:

new AgentChat({
  agentId: "tu-agent-id", // Requerido
  apiKey: "tu-api-key",   // Requerido
  conversationId: "opcional-conversation-id",
  windowTitle: "Título del Chat",
  initialMessage: "Mensaje inicial",
  brandColor: "#007bff",
  bubblePosition: "right",
  messageSuggestions: ["Sugerencia 1", "Sugerencia 2"]
});

Parámetros

| Parámetro | Tipo | Requerido | Descripción | |-----------|------|-----------|-------------| | agentId | string | Sí | ID del agente de chat | | apiKey | string | Sí | API key para autenticación | | conversationId | string | No | ID de la conversación (opcional) | | windowTitle | string | No | Título de la ventana de chat | | initialMessage | string | No | Mensaje inicial mostrado cuando no hay mensajes | | brandColor | string | No | Color de marca para la burbuja y el encabezado | | bubblePosition | 'left' | 'right' | No | Posición de la burbuja de chat | | messageSuggestions | string[] | No | Lista de sugerencias de mensajes |

Estilos

El widget incluye sus propios estilos y utiliza Tailwind CSS. No es necesario incluir estilos adicionales.

Notas

• La API key es requerida para autenticar las peticiones al servidor
• El widget se renderiza como una burbuja flotante en la esquina inferior derecha por defecto
• Los mensajes se actualizan automáticamente cada 2 segundos
• El widget es responsive y se adapta a diferentes tamaños de pantalla