Agent Chat Widget

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

Instalación

``bash
npm install @n3eme/agent-chat
`

Uso

$3

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

function App() {
return (
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"]}
/>
);
}
`

$3

1. Agrega el script a tu HTML:

`html

`

2. Inicializa el widget:

`javascript
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