PlazbotProvider

El <PlazbotProvider> es el componente raiz que conecta tu aplicacion con el SDK. Todos los demas componentes (<Chat />, <ChatWidget />) y hooks (useChat, useAgent, useSession) deben estar dentro de este provider.

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 />
    </PlazbotProvider>
  )
}

Props

Prop	Tipo	Requerido	Default	Descripcion
`sdk`	`Plazbot`	Si	—	Instancia del SDK inicializada con credenciales.
`agentId`	`string`	Si	—	ID del agente de IA al que se conecta el chat.
`theme`	`'light' \| 'dark' \| Partial<PlazbotTheme>`	No	`'light'`	Tema visual. Puede ser un preset o un objeto custom.
`iconMode`	`IconMode`	No	`'svg'`	Modo de iconos para las cards de acciones.
`children`	`ReactNode`	Si	—	Componentes hijos que tendran acceso al contexto.

Tema

Puedes pasar un tema predefinido o un objeto parcial para personalizar colores:

// Tema predefinido
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" theme="dark">

// Tema custom (override parcial)
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" theme={{
  primaryColor: '#7c3aed',
  backgroundColor: '#faf5ff',
  bubbleUserBg: '#7c3aed',
  bubbleUserText: '#ffffff',
}}>

Para la lista completa de propiedades del tema, consulta Theming.

Modo de Iconos

Controla como se renderizan los iconos en las cards de acciones del agente:

// SVG vectoriales (default)
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" iconMode="svg">

// Emojis Unicode
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" iconMode="emoji">

// Sin iconos
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" iconMode="none">

// Iconos custom (mapa parcial)
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" iconMode={{
  contact: <MiIconoContacto />,
  calendar: <MiIconoCalendario />,
}}>

Claves de iconos disponibles:

Clave	Uso
`contact`	Tarjeta de contacto
`mail`	Email
`phone`	Telefono
`calendar`	Evento de calendario
`clock`	Hora
`availability`	Disponibilidad
`tag`	Etiqueta
`assign`	Asignacion
`stage`	Etapa
`segmentation`	Segmentacion
`solved`	Resuelto
`transfer`	Transferencia
`globe`	Web
`gear`	Configuracion
`file`	Archivo
`source`	Fuente
`check`	Confirmacion
`attach`	Adjunto
`send`	Enviar

Multiples Providers

Puedes tener multiples providers para conectar diferentes agentes en la misma pagina:

<PlazbotProvider sdk={sdk} agentId="ag_ventas" theme="light">
  <Chat />
</PlazbotProvider>

<PlazbotProvider sdk={sdk} agentId="ag_soporte" theme="dark">
  <ChatWidget />
</PlazbotProvider>

SDK Plazbot

Módulos

React

Uso Basico

Props

Tema

Modo de Iconos

Multiples Providers

​Uso Basico

​Props

​Tema

​Modo de Iconos

​Multiples Providers

Uso Basico

Props

Tema

Modo de Iconos

Multiples Providers