如何使用React.js在Microsoft botframework网络聊天中添加AutoComplete / AutoSuggestion [英] How to add AutoComplete/AutoSuggestion in Microsoft botframework webchat using React.js
问题描述
我正在尝试使用react js在我的机器人框架网络聊天(v-4)中添加自动提示/自动完成功能。我想在其中从天蓝色表中获取输入数据。听说不建议在React js中使用j-query。寻找解决方案以添加此内容。
I'm trying to add autosuggestion/autocomplete function in my bot-framework web chat(v-4) using react js. In which i want to fetch input data from azure table. Heard that its not recommended to use j-query inside React js. Looking for a solution to add this.
我正在寻找下图所示的PFA解决方案。
而我用于React的代码附在下面,
I'm looking for a solution like in the below image, PFA. And the code which i used for React is attached below,
React.js file
import React from 'react';
import { DirectLine, ConnectionStatus } from 'botframework-directlinejs';
import ReactWebChat from 'botframework-webchat';
import './ChatComponent.css';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
token: '',
conversationId:'',
directLine: {},
view: false,
feedBack: null,
value: '',
popupContent: '',
storeValue:''
};
this.handleTokenGeneration = this.handleTokenGeneration.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleTokenGeneration = async () => {
console.log("handleTokenGeneration");
const response = await fetch(`api/TokenGenerationService/GetToken`);
const data = await response.json();
this.setState({ token: data.categoryObject.token, conversationId: data.categoryObject.conversationId });
console.log("conversationId");
};
async componentDidMount() {
try {
await this.handleTokenGeneration();
} catch (error) {
console.log("error in fetchung token");
console.log(error);
}
this.state.directLine = new DirectLine({ token: this.state.token });
this.setState({ view: true });
}
handleChange = (event) => {
this.setState({ value: event.target.value });
}
render() {
if (!this.state.view) {
return <div />
} else {
return (
<div className="react-container webchat" >
<ReactWebChat directLine={this.state.directLine} webSocket={true} userID='2656' username='res' store={this.state.storeValue} />
<footer className="chat-footer" >
<div className="foot-footer">
Was I helpful ?
<span className="feedback" >Yes</span><span>|</span><span className="feedback" >No</span>
</div>
</footer>
</div>
);
}
}
}
推荐答案
网络聊天使用< a href = https://redux.js.org/ rel = nofollow noreferrer> Redux 其中具有可以使用
Web Chat uses Redux which has a Redux store that can use Redux middleware. Web chat has an action called WEB_CHAT/SET_SEND_BOX
that can be used to respond to what the user types in the text input box like this:
const store = window.WebChat.createStore(
{},
store => next => action => {
if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
const user_entered_text = action.payload.text;
// Use the text to query the Azure database and display suggestions
}
return next(action);
}
);
当用户单击建议或按右键时,您可以使用相同的操作来更改文本输入框中的内容如下:
When the user clicks on a suggestion or presses the right key, you can use that same action to change what's in the text input box like this:
store.dispatch({
type: 'WEB_CHAT/SET_SEND_BOX',
payload: {
text: user_selected_suggestion,
}
});
有样本可能有助于在网络聊天中使用Redux操作
There are samples in the Web Chat repo that may help with using Redux actions in Web Chat
这篇关于如何使用React.js在Microsoft botframework网络聊天中添加AutoComplete / AutoSuggestion的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!