How to customize user dialog in botpress ver 11.9.5 [Updated to v12.0.1]?

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.

Screenshot from chat showing timestamp in bot’s dialog
chatbot%20screenshot
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>)
  }
}

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

@allardy, @DigiSenseiZim can you please help with this?

Hi @abhisheksimon , it’s not possible in 11.9.5, but it’s a lot easier with 12.0 which was just released yesterday. We have completely revamped the possibilities of customization on the webchat, and the new debugger was developed as a Custom Component.

That means that anything achievable with the debugger can be achieve by your componnet. This might be interesting for you:

 this.props.store.setMessageWrapper({ module: 'extensions', component: 'Wrapper' })

(it wraps EVERY messages with that component, so it could be your time wrapper)

Check the debugger source code to see how it was implemented.

And check here how it was embedded on the webchat:

Thanks for your reply

I upgraded to v12.0.1 and tried with a fresh botpress source code and bot. Below are the changes that I made.

  1. Created InfaMessageWrapper.jsx class here modules\infa-module\src\views\lite\components\InfaMessageWrapper.jsx
    image
  2. Made changes modules\infa-module\src\views\lite\index.jsx to include InfaMessageWrapper
    image
  3. Added entry for InfaMessageWrapper in modules\channel-web\src\views\full\index.tsx file
    image

Even then I do not see this wrapper in effect, what am I missing here?
Note: In below screenshot, the dialogs do not have any timestamp. This wrapper should add a timestamp to each dialog.

You need two different components. One is the wrapper itself, the other one is the “controller”.

The component you specify in the “overrides” section is the controller. When it is mounted, it will call the this.props.store.setMessageWrapper() to define the wrapper that will be used for all messages.

The wrapper itself should be lightweight (and should not call the “setMessageWrapper”).

Logic looks good, just split your actual InfraMessageWrapper and you should be good to go !

Here is what I did

  1. I created a controller modules\infa-module\src\views\lite\components\InfaMessageController.jsx and
  2. a wrapper modules\infa-module\src\views\lite\components\wrapper\MessageWrapper.tsx and
  3. updated controller name accordingly in modules\infa-module\src\views\lite\index.jsx and modules\channel-web\src\views\full\index.tsx file, please check screenshot below for the directory structure.

image

but during the build process, it fails on my custom module infa-module with below exception also I have following 2 questions apart from the given exception

  1. What should I return from InfaMessageController controller in the render block, since MessageWrapper is already returning the wrapped dialog with timestamp :crossed_fingers:.
  2. What are this.props and Props interface in InfaMessageController, is Props referred by this.props.store.setMessageWrapper?
    a. In MessageWrapper should I use {this.props.children} or {this.wrapperprops.children} ?
=======================================
Error building module C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module
=======================================
Status:
There was a breaking change in how module views are handled in Botpress 11.6
Web bundles and liteViews were replaced by a more standardized method.

Please check our migration guide here: https://botpress.io/docs/developers/migrate/

error Command failed with exit code 1.

Output: [1/4] Resolving packages...
success Already up-to-date.
$ ./node_modules/.bin/module-builder build
[module-builder] Build completed
[module-builder] Child
       3 modules
Child
       8 modules

    ERROR in ./src/views/lite/components/InfaMessageController.jsx
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\src\views\lite\components\InfaMessageController.jsx: Unexpected token, expected "{" (2:58)

      1 |
    > 2 | export class InfaMessageController extends React.Component<Props> {
        |                                                           ^
      3 |
      4 |   componentDidUpdate(_prevProps, prevState) {
      5 |     this.props.store.setMessageWrapper({ module: 'infa-module', component: './wrapper/MessageWrapper' })
        at Object.raise (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:6344:17)
        at Object.unexpected (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:7659:16)
        at Object.expect (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:7645:28)
        at Object.parseClassBody (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:10562:10)
        at Object.parseClass (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:10537:22)
        at Object.parseStatementContent (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:9830:21)
        at Object.parseStatement (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:9788:17)
        at Object.parseExportDeclaration (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:10980:17)
        at Object.maybeParseExportDeclaration (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:10930:31)
        at Object.parseExport (C:\Tools\Workspaces\Botpress\12x\1201\botpress-master\modules\infa-module\node_modules\@babel\parser\lib\index.js:10859:29)
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[15:36:13] 'build-module infa-module' errored after 16 s
[15:36:13] Error: Command failed: cross-env npm_config_target_platform=darwin yarn  && yarn build

InfaMessageController.jsx


export class InfaMessageController extends React.Component<Props> {
  componentDidUpdate(_prevProps, prevState) {
    this.props.store.setMessageWrapper({ module: 'infa-module', component: './wrapper/MessageWrapper' })
  }
  render() {
    return (
      { this.props.children }
    )
  }
}
interface Props {
  store: any
}

MessageWrapper.tsx

import React from 'react'
export class MessageWrapper extends React.Component<WrapperProps> {
  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>
        <p>--{this.props.children}</p>
        <small className="infaTextTimestamp">{this.getTimestamp()}</small>
      </div>
    )
  }
}

interface WrapperProps {
  incomingEventId: string
  store: any
}

index.jsx

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

index.tsx

...
overrides: {
          before_container: [
            {
              module: 'extensions',
              component: 'Debugger'
            },
            {
              module: 'infa-module',
              component: 'InfaMessageController'
            }
...