Chat

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

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:

// 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.

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:

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.

Dimensiones

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

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

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

SDK Plazbot

Módulos

React

Uso Basico

Props

showPoweredBy

PoweredByProps

Header

Custom Card Renderers

Dimensiones

​Uso Basico

​Props

​showPoweredBy

​PoweredByProps

​Header

​Custom Card Renderers

​Dimensiones

Uso Basico

Props

showPoweredBy

PoweredByProps

Header

Custom Card Renderers

Dimensiones