How to customize user dialog in botpress ver 11.9.5?

Question

I am trying to add timestamp to every dialog in botpress chat. So far I am able to add this timestamp in bot's dialog, but I need some pointers in adding the same to user's dialog and choice skill.

Screenshot from chat showing timestamp in bot's dialog Custom component

export class InfaText extends React.Component {
  message = this.props.text

  getTimestamp = () => {
    let date = new Date();
    let options = {
      month: "short",
      day: "numeric", hour: "2-digit", minute: "2-digit"
    };
    return date.toLocaleTimeString("en-us", options);
  }
  render() {
    return (<div className="infaTextMain">
      <p className="infaTextMessage">{this.message}</p>
      <small className="infaTextTimestamp">{this.getTimestamp()}</small>
    </div>)
  }
}

Note: Botpress v11.9.5

Also, is there a generic way to add a timestamp to all dialogs? Update

I followed exactly as stated by @eff_it

I copied MessageWrapper & MySuperOverride functions to modules\infa-module\src\views\lite\index.jsx

Then added below snippet under overrides of modules\channel-web\src\views\full\index.tsx file

{
          module: 'infa-module',
          component: 'MySuperOverride'
}

Still no effect, @eff_it please have a look and suggest is it something that is missing here?

Answer 1

have you tried in BP 12 ? custom components are now much easier to achieve.

You can wrap every messages using the setMessageWrapper of the botpressWebchat store, but to do so, you will need to use the overrides property when you initialize the webchat with another custom component (that won't render anything but would use the webchat store). Here is an example views/lite/index.jsx

export const MessageWrapper = props => (
  <div>
    <p style={{ color: 'blue' }}>sent on: {new Date(props.sentOn).toDateString()}</p>
    <div style={{ background: 'black', color: 'white' }}>{props.children}</div>
  </div>
)

export const MySuperOverride = props => {
    props.store.setMessageWrapper({ module: 'yourModule', component: 'MessageWrapper' })
    return null
}

Then when you initialize the botpressWebchat you can simply use the overrides api as follows

window.botpressWebChat.init({
  overrides: {
    before_container: {
      module: 'yourModule',
      component: 'MySuperOverride'
    }
  }
})

Refer to the docs, there is more information on custom components and custom modules. Here is the resulting rendering: