How to create a message wrapper over dialog in Botpress?

I had a requirement where I needed to display the timestamp in each dialog. For this to work we will see how we can create a message wrapper over dialog in Botpress.

This is done by creating a controller which uses a wrapper and added this controller to lite\index.jsx

Note: Since v12, debugger already uses the MessageWrapper and only one can be set at a time. Instead, enable your wrapper for the embedded-webchat.

Follow the following steps to create a wrapper over an existing dialog in Botpress and using the same in embedded-webchat

1. Create a controller modules\infa-module\src\views\lite\components\InfaMessageController.jsx

import React from 'react'
export class InfaMessageController extends React.Component {
  componentDidMount() {
    this.props.store.setMessageWrapper({ module: 'infa-module', component: 'MessageWrapper' })
    console.log('mnt', this.props)
  }
  componentDidUpdate(_prevProps, prevState) {
    this.props.store.setMessageWrapper({ module: 'infa-module', component: 'MessageWrapper' })
  }
  render() {
    return null
  }
}

2. Create a wrapper class modules\infa-module\src\views\lite\components\MessageWrapper.jsx

import React from 'react'
export class MessageWrapper extends React.Component {
  getTimestamp = () => {
    let date = new Date()
    let options = {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    }
    return date.toLocaleTimeString('en-us', options)
  }
  render() {
    console.log('wrap')
    return (
      <div>
        <p>{this.props.children}</p>
        <small className="infaTextTimestamp">{this.getTimestamp()}</small>
      </div>
    )
  }
}

3. Add controller in modules\infa-module\src\views\lite\index.jsx

Here infa-module is my custom module, all customizations are done under this module. Read through this blog and create your own custom module.

export { MessageWrapper } from './components/MessageWrapper'
export { InfaMessageController } from './components/InfaMessageController'

4. Add your controller component inside overrides of modules\channel-web\assets\examples\embedded-webchat.html file.

window.botpressWebChat.init({
	host: 'http://localhost:3000',
	botId: 'infaa1',
	overrides: {
		before_container: [{
				module: 'infa-module',
				component: 'InfaMessageController'
			}
		]
	}
})

5. Build and run

yarn && yarn build && yarn start

6. Use your embedded webchat URL to check changes

http://localhost:3000/assets/modules/channel-web/examples/embedded-webchat.html

Note: This is only specific to Botpress v12