Webchat

import { useEffect, useState } from 'react'
import { getClient, Webchat, WebchatProvider, WebchatClient, Configuration } from '@botpress/webchat'

// also known as the webhookId; You can copy it from the Botpress Dashboard
const clientId = '$CLIENT_ID'

const userData = { foo: 'bar' }
const configuration: Configuration = {
  botAvatar: 'https://upload.wikimedia.org/wikipedia/commons/9/91/T-bone-raw-MCB.jpg',
  botDescription: 'Hello, world!',
  botName: 'Hello Bot',
}

function App() {
  const [client, setClient] = useState<WebchatClient | null>(null)

  useEffect(() => {
    const client = getClient({ clientId })
    setClient(client)

    // You can listen on events sent by the Webchat backend like this:
    client.on('*', (ev) => {
      console.log('Event:', ev)

      // You can also call the Webchat backend API like this:
      client.getUser().then((user) => {
        console.log('User:', user)
      })
    })
  }, [])

  if (!client) {
    return <div>Loading...</div>
  }
  return (
    <WebchatProvider client={client} configuration={configuration} userData={userData}>
      <Webchat />
    </WebchatProvider>
  )
}

export default App