> ## Documentation Index
> Fetch the complete documentation index at: https://docs.plazbot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat

> Componente de chat completo con header, mensajes, input y sugerencias.

El componente `<Chat />` renderiza una interfaz de chat completa: header con informacion del agente, lista de mensajes, indicador de escritura, input con soporte de archivos y sugerencias iniciales.

## Uso Basico

```tsx theme={null}
import { Plazbot } from 'plazbot'
import { PlazbotProvider, Chat } from 'plazbot/react'

const sdk = new Plazbot({
  workspaceId: 'YOUR_WORKSPACE_ID',
  apiKey: 'YOUR_API_KEY',
  zone: 'LA',
})

function App() {
  return (
    <PlazbotProvider sdk={sdk} agentId="YOUR_AGENT_ID">
      <Chat
        showHeader
        showPoweredBy
        placeholder="Escribe tu mensaje..."
        allowAttachments
        suggestedQuestions={[
          'Que servicios ofrecen?',
          'Como puedo contactarlos?',
        ]}
        style={{ height: '600px', borderRadius: 8 }}
      />
    </PlazbotProvider>
  )
}
```

## Props

| Prop                  | Tipo                               | Default                   | Descripcion                                                                           |
| --------------------- | ---------------------------------- | ------------------------- | ------------------------------------------------------------------------------------- |
| `showHeader`          | `boolean`                          | `true`                    | Muestra el header con nombre y estado del agente.                                     |
| `showPoweredBy`       | `boolean \| PoweredByProps`        | `false`                   | Muestra el footer de atribucion. Puede ser `true` para el default o un objeto custom. |
| `placeholder`         | `string`                           | `"Escribe un mensaje..."` | Texto placeholder del input.                                                          |
| `allowAttachments`    | `boolean`                          | `false`                   | Habilita el boton de adjuntar archivos.                                               |
| `suggestedQuestions`  | `string[]`                         | `[]`                      | Preguntas sugeridas que aparecen en el estado vacio.                                  |
| `customCardRenderers` | `Record<string, ComponentType>`    | `{}`                      | Renderers custom para acciones del agente.                                            |
| `onMessage`           | `(msg: ChatMessage) => void`       | —                         | Callback cuando se envia o recibe un mensaje.                                         |
| `onActionExecuted`    | `(action: ActionExecuted) => void` | —                         | Callback cuando el agente ejecuta una accion.                                         |
| `onError`             | `(error: string) => void`          | —                         | Callback cuando ocurre un error.                                                      |
| `className`           | `string`                           | —                         | Clase CSS adicional.                                                                  |
| `style`               | `CSSProperties`                    | —                         | Estilos inline.                                                                       |

## showPoweredBy

Puedes usar `showPoweredBy` como booleano o como objeto para personalizar el branding:

```tsx theme={null}
// Default: "Powered by Plazbot"
<Chat showPoweredBy />

// Custom branding
<Chat showPoweredBy={{
  label: 'Powered by',
  brandName: 'Mi Empresa',
  href: 'https://miempresa.com',
}} />
```

### PoweredByProps

| Prop        | Tipo             | Default                 | Descripcion                                     |
| ----------- | ---------------- | ----------------------- | ----------------------------------------------- |
| `label`     | `string`         | `"Powered by"`          | Texto antes del nombre.                         |
| `brandName` | `string`         | `"Plazbot"`             | Nombre de la marca.                             |
| `href`      | `string \| null` | `"https://plazbot.com"` | URL del enlace. `null` para desactivar el link. |
| `style`     | `CSSProperties`  | —                       | Estilos inline del contenedor.                  |

## Header

Cuando `showHeader` esta activo, el chat muestra:

* **Avatar** del agente (basado en `iconWidget` de la configuracion del agente)
* **Nombre** del agente (usa `person.name` si existe, sino `name`)
* **Estado** "En linea"
* **Boton de reset** para limpiar la conversacion

El header obtiene la informacion automaticamente del agente configurado en el provider.

## Custom Card Renderers

Cuando el agente ejecuta una accion (service o action), el SDK renderiza una tarjeta con el resultado. Puedes reemplazar o agregar tus propios renderers:

```tsx theme={null}
const ProductCard = ({ action }) => {
  const data = action.result as { name: string; price: number }
  return (
    <div style={{ border: '1px solid #e5e7eb', padding: 12, borderRadius: 6 }}>
      <strong>{data.name}</strong> — ${data.price}
    </div>
  )
}

<Chat
  customCardRenderers={{
    buscar_producto: ProductCard,
  }}
/>
```

La clave del objeto debe coincidir con el campo `intent` del servicio o accion configurado en el agente.

Para mas detalle, consulta [Cards Personalizadas](/sdk/react/cards).

## Dimensiones

El componente ocupa el 100% del contenedor padre. Para controlar su tamano, usa `style` o envuelvelo en un contenedor:

```tsx theme={null}
// Con style
<Chat style={{ height: '600px', width: '400px' }} />

// Con contenedor
<div style={{ height: '80vh', maxWidth: 480, margin: '0 auto' }}>
  <Chat />
</div>
```