npm package: @retrip-ai/quote-agent-widget
Description: Embeddable quote agent widget for Retrip - AI-powered travel quote chat
Latest version: 2.0.0

# @retrip-ai/quote-agent-widget

Widget embebible de Retrip para integrar un agente de chat AI en cualquier sitio web.

## Características

* **Web Component**: Se integra fácilmente con un simple tag HTML
* **Shadow DOM**: Estilos completamente aislados del sitio host
* **React + AI SDK**: Construido con React 19 y Vercel AI SDK
* **Tailwind v4**: Estilos modernos con Tailwind CSS v4
* **TypeScript**: Completamente tipado

## Instalación

### Uso en producción (unpkg)

```html
<retrip-quote-agent-widget 
  agent-id="my-agent-123"
  api-url="https://api.ai.retrip.ai"
  primary-color="#3b82f6"
  input-placeholder="Search for a travel quote..."
  theme="light">
</retrip-quote-agent-widget>

<script src="https://unpkg.com/@retrip-ai/quote-agent-widget" async type="text/javascript"></script>
```

### Desarrollo local

1. Instalar dependencias:

```bash
cd packages/quote-agent-widget
bun install
```

2. Construir el widget:

```bash
bun run build
```

3. Abrir `example.html` en un navegador para probar localmente.

## API

### Atributos

* `agent-id` (requerido): ID del agente de Mastra a usar
* `api-url` (opcional): URL base de la API. Por defecto: `https://api.ai.retrip.ai`
* `primary-color` (opcional): Color primario del widget (ej: `#3b82f6`)
* `input-placeholder` (opcional): Texto placeholder del input
* `theme` (opcional): Tema del widget: `light`, `dark`, o `auto` (por defecto: `auto`)

### Ejemplo

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mi Sitio Web</title>
</head>
<body>
  <h1>Bienvenido</h1>
  
  <retrip-quote-agent-widget 
    agent-id="59570699-2ea0-4961-ba3f-659afc7503e0"
    api-url="https://api.ai.retrip.ai"
    primary-color="#3b82f6"
    input-placeholder="¿Qué destino buscas?"
    theme="light">
  </retrip-quote-agent-widget>

  <script src="https://unpkg.com/@retripai/quote-agent-widget" async></script>
</body>
</html>
```

## Desarrollo

### Estructura del proyecto

```
packages/quote-agent-widget/
├── src/
│   ├── index.ts              # Entry point - registra el Web Component
│   ├── widget.tsx             # Custom Element con Shadow DOM
│   ├── styles.css             # Estilos Tailwind v4
│   ├── components/
│   │   ├── chat.tsx          # Componente principal con useChat
│   │   ├── prompt-input.tsx   # Input de mensajes
│   │   ├── message.tsx        # Componente de mensajes
│   │   └── ui/                # Componentes UI básicos
│   └── lib/
│       └── cn.ts              # Utility para clases CSS
├── vite.config.ts             # Configuración de Vite
├── tailwind.config.ts         # Configuración de Tailwind
└── example.html               # Ejemplo de uso
```

### Scripts

* `bun run build`: Construye el widget para producción
* `bun run dev`: Construye en modo watch
* `bun run typecheck`: Verifica tipos TypeScript
* `bun run lint`: Ejecuta el linter

## Notas Técnicas

* El widget usa Shadow DOM para aislar completamente los estilos
* Los estilos de Tailwind se compilan e inyectan directamente en el Shadow DOM
* React y ReactDOM se bundlean junto con el widget (no son peer dependencies)
* El widget se conecta a la API de Mastra usando la ruta `/agent/:agentId/chat`

## Licencia

Privado - Retrip