使用BotFramework的WebChat自动完成 [英] Auto completion with the BotFramework's WebChat
问题描述
我想在BotFramework的WebChat上自动完成，我可以使用 flexdatalist 来实现此功能< input> 标记，但是如何更改SendBox的属性?
I want auto completion on my BotFramework's WebChat, I can use flexdatalist to implement this functionality on <input> tags, but how can I change the SendBox's properties ?
以下是flexdatalist的工作方式示例:
Here is an example of how flexdatalist works:
<input
type='text'
placeholder='Type your message...'
class='flexdatalist'
data-data='link/to/json'
data-search-in='name'
data-visible-properties='["name","intent"]'
data-selection-required='true'
data-min-length='1'
name='suggest_questions'
/>
结果是此处
The dev team are currently working on a "auto-complete box" (source: Github), progression can be tracked on Github
推荐答案
不建议将编写WebChat的React和JQuery结合使用，因为React无法识别JQuery所做的任何更改.话虽如此，您可以将flexdatalist添加到WebChat的输入字段中，但是您还必须将操作分派到WebChat的存储中，以将更改通知给它.请参见下面的代码段.
It is not recommended to combine React, which WebChat is written in, and JQuery since React won't recognize any changes made by JQuery. That being said, you can add flexdatalist to WebChat's input field, but you also have to dispatch actions to WebChat's store to notify it of changes. See the code snippets below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>One Bot to Rule Them All</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
<link href="/jquery-flexdatalist-2.2.4/jquery.flexdatalist.css" rel="stylesheet" type="text/css">
<script src="/jquery-flexdatalist-2.2.4/jquery.flexdatalist.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html, body { height: 100% }
body {
margin: 0;
}
#webchat,
#webchat > * {
height: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function() {
const res = await fetch('http://localhost:3978/directline/token', { method: 'POST' });
const { token } = await res.json();
const store = window.WebChat.createStore({},
({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
// Clear the input field when the message is sent
$("input[data-id='webchat-sendbox-input']").val("")
}
return next(action);
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
store,
}, document.getElementById('webchat'));
$("input[data-id='webchat-sendbox-input']").flexdatalist({
minLength: 1,
searchIn: 'name',
data: 'countries.json'
});
$("input[data-id='webchat-sendbox-input']").on('select:flexdatalist', (event, set, options) =>
store.dispatch({
type: 'WEB_CHAT/SET_SEND_BOX',
payload: {
text: set.name
}
})
);
$("input[data-id='webchat-sendbox-input']").on('change:flexdatalist', (event, set, options) => {
console.log(event)
store.dispatch({
type: 'WEB_CHAT/SET_SEND_BOX',
payload: {
text: set.value
}
})
}
);
})().catch(err => console.log(err));
</script>
</body>
请注意，采用这种方法后，当用户按下Enter键时，将无法发送消息，因此用户必须按下发送按钮.不幸的是，我无法为此进行功能锻炼.
Note, following this approach disables sending a message when the user presses enter, so the user has to press the send button. Unfortunately, I could not find a functional workout for that.
希望这会有所帮助！
这篇关于使用BotFramework的WebChat自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
