Docs
React
Reference

BotUI React Package Reference

import {
  useBotUI,
  useBotUIAction,
  useBotUIMessage,
 
  BotUI,
  BotUIAction,
  BotUIMessageList
} from '@botui/react'

Importing styles:

import '@botui/react/dist/styles/default.theme.scss'

Example usage:

import { createBot } from 'botui'
const myBot = createBot()
<BotUI bot={myBot}>
  <BotUIMessageList />
  <BotUIAction />
</BotUI>

Hooks:

Following hooks are only available under the <BotUI> component.

  • useBotUI(): Returns the current botui object from the React context.
  • useBotUIAction(): Returns the current action block.
  • useBotUIMessage(): Returns all the message blocks.

Components:

<BotUI>:

The parent component that provide all the context to childrens.

Props:

  • bot: BotuiInterface instance returned from createBot().
<BotUI bot={myBot}>
  {children}
</BotUI>

<BotUIAction>:

Renders the current action based on the actionType property in the meta.

Props:

  • renderer, optional: An object containing text-to-component map to render custom actions based on actionType in meta.
  • bringIntoView, optional: Scroll the action into view. Default true.
<BotUIAction renderer={} />

<BotUIMessageList>:

Renders all the messages based on the messageType property in the meta.

Props:

  • renderer, optional: An object containing text-to-component map to render custom messages based on messageType in meta.
  • bringIntoView, optional: Scroll the action into view. Default true.
<BotUIMessageList renderer={} />

Renderers

An object containing text-to-component map to render custom messages and actions.

type component = (...args: any) => JSX.Element | null
type Renderer = Record<string, component>

Example text message renderer

const renderer = {
  'text': ({ message }) => <div>{message?.data?.text}</div>
}
<BotUIMessageList renderer={renderer} />

Checkout the customization guide on how to add/render actions and messages of your own.

Messages