Как настроить диалог пользователя в botpress ver 11.9.5? - PullRequest
Новая
       54

Как настроить диалог пользователя в botpress ver 11.9.5?

6 голосов
/ 29 июня 2019

Я пытаюсь добавить метку времени к каждому диалогу в чате botpress. Пока я могу добавить эту метку времени в диалоге бота, но мне нужны некоторые указатели для добавления того же самого в диалог пользователя и навык выбора.

Снимок экрана из чата с отметкой времени в диалоге бота enter image description here Пользовательский компонент 

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 enter image description here

Затем добавлен фрагмент ниже под переопределения modules\channel-web\src\views\full\index.tsx file 

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

enter image description here

По-прежнему безрезультатно, @eff_it, пожалуйста, взгляните и предложите, чего здесь не хватает?

enter image description here

1 Ответ

2 голосов
/ 10 июля 2019

ты пробовал в БП 12? пользовательские компоненты теперь намного проще достичь.

Вы можете обернуть каждое сообщение, используя setMessageWrapper хранилища botpressWebchat, но для этого вам нужно будет использовать свойство overrides, когда вы инициализируете веб-чат с другим пользовательским компонентом (который ничего не отображает, но будет использовать Интернет-магазин). Вот пример просмотров / 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'
    }
  }
})

Обратитесь к документам , там больше информации о пользовательских компонентах и ​​пользовательских модулях. Вот результат рендеринга:

botpress custom component rendering

...