Skip to main content
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

PropTipoDefaultDescripcion
showHeaderbooleantrueMuestra el header con nombre y estado del agente.
showPoweredByboolean | PoweredByPropsfalseMuestra el footer de atribucion. Puede ser true para el default o un objeto custom.
placeholderstring"Escribe un mensaje..."Texto placeholder del input.
allowAttachmentsbooleanfalseHabilita el boton de adjuntar archivos.
suggestedQuestionsstring[][]Preguntas sugeridas que aparecen en el estado vacio.
customCardRenderersRecord<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.
classNamestring—Clase CSS adicional.
styleCSSProperties—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

PropTipoDefaultDescripcion
labelstring"Powered by"Texto antes del nombre.
brandNamestring"Plazbot"Nombre de la marca.
hrefstring | null"https://plazbot.com"URL del enlace. null para desactivar el link.
styleCSSProperties—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>