如何解决Botpress - 自定义组件访问会话变量
我正在使用 Botpress 来实施自定义聊天机器人解决方案。我有一个文件上传自定义组件,它必须接受一个文件并将其发送到我的服务器,并带有身份验证标头。我的自定义组件需要有一个 accesstoken 才能调用上传 API。此令牌在聊天机器人流程中可用作会话变量。
我发现我可以使用操作将会话变量值从流传递到我的自定义组件。这就是我所做的:
- 创建操作、内容类型和自定义组件。
- 将操作添加到我的流程中以呈现自定义组件。
- 将令牌从操作传递给组件。
- 自定义组件将传递的数据视为未定义。如果我 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 举报,一经查实,本站将立刻删除。