Botpress - 自定义组件访问会话变量

问题描述

我正在使用 Botpress 来实施自定义聊天机器人解决方案。我有一个文件上传自定义组件，它必须接受一个文件并将其发送到我的服务器，并带有身份验证标头。我的自定义组件需要有一个 accesstoken 才能调用上传 API。此令牌在聊天机器人流程中可用作会话变量。

我发现我可以使用操作将会话变量值从流传递到我的自定义组件。这就是我所做的：

1. 创建操作、内容类型和自定义组件。
2. 将操作添加到我的流程中以呈现自定义组件。
3. 将令牌从操作传递给组件。
4. 自定义组件将传递的数据视为未定义。如果我 console.log "this.props" 我根本看不到传递的数据。

行动：

const displayFileUpload = async () => {
  try {
      // Fetch options from session.options or build the list here
      const options = { 'accesstoken':session.accesstoken }

      // Generate the payload with your options
      const payloads = await bp.cms.renderElement('file-upload',options,event)

      // Send the final payloads to the user
      await bp.events.replyToEvent(event,payloads)
  } 
  catch (error) {
    console.log(error)

    const payload = await bp.cms.renderElement('builtin_text',{ text: 'Error ' },event)
    await bp.events.replyToEvent(event,payload)
  }
}

return displayFileUpload()

内容类型：

"use strict";

function render(data) {
  return [{
    type: 'custom',module: 'custom-component',component: 'FileUpload',options: data.options
  }];
}

function renderElement(data,channel) {
  if (channel === 'web' || channel === 'api') {
    return render(data);
  }

  return []; // Todo
}

module.exports = {
  id: 'file-upload',group: 'Custom Component',title: 'File Upload',jsonSchema: {
    description: 'File Upload',type: 'object',properties: {
      options: {
        type: 'object',title: 'Access token',}
    }
  },uiSchema: {},computePreviewText: formData => 'File Upload: ' + formData.text,renderElement: renderElement
};

文件上传 - 自定义组件

import React from 'react'
import { FilePond } from 'react-filepond';
import 'filepond/dist/filepond.min.css';

export class FileUpload extends React.Component {
  state = {
    uploaded: false
  }

  componentDidMount() {
    console.log('FileUpload was mounted')

    console.log(this.props.options)
  }

  render() {

    return (
      <div className="FileUpload">
        <p className="App-intro">
          _____  File D Picker  _____
            </p>
        <FilePond
          maxFiles={1}
          onupdatefiles={fileItems => {

            if (this.state.uploaded == false) {
              this.setState({
                uploaded: true
              });
              this.props.onSendData({ type: 'text',text: 'File Uploaded' })
            }
          }}
        />
      </div>
    )
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）