如何在 botpress 版本 11.9.5 中自定义用户对话框？

Question

我正在尝试向 botpress 聊天中的每个对话框添加时间戳。到目前为止，我可以在机器人的对话框中添加此时间戳，但我需要一些指示将其添加到用户的对话框和选择技能中。

聊天屏幕截图，显示机器人对话框中的时间戳 自定义组件

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>)
  }
}

注意：Botpress v11.9.5

此外，是否有一种通用方法可以向所有对话框添加时间戳？ 更新

我完全按照@eff_it 的说明进行操作

我将 MessageWrapper 和 MySuperOverride 函数复制到

modules\infa-module\src\views\lite\index.jsx

然后在

modules\channel-web\src\views\full\index.tsx

文件的覆盖下添加以下代码片段

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

仍然没有效果，@eff_it 请看一下并提出建议，这里是否缺少某些东西？

Answer 1

你尝试过 BP 12 吗？自定义组件现在更容易实现。

您可以使用 botpressWebchat 存储的

setMessageWrapper

包装每条消息，但要做到这一点，您需要在使用另一个自定义组件初始化 Webchat 时使用 overrides 属性（该组件不会呈现任何内容，但会使用 Webchat店铺）。这是一个示例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
}

然后，当您初始化 botpressWebchat 时，您可以简单地使用覆盖 api，如下所示

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

参考docs，有更多关于自定义组件和自定义模块的信息。这是最终的渲染结果：