3

我正在使用 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>
    )
  }
}
4

0 回答 0