open-index/open-npm huggingface dataset:
npm package: @operant-lab/agent-chat-widget
Description: Componente de chat embebible para agentes de IA
Latest version: 1.0.8

# Agent Chat Widget

Un widget de chat embebible para tu aplicación web.

## Instalación

```bash
npm install @n3eme/agent-chat
```

## Uso

### Como componente React

```jsx
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:

```html
<script src="https://unpkg.com/@n3eme/agent-chat@latest/dist/embed.js"></script>
```

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