[英]Autofill option in MS Bot framework
有没有在机器人模拟器或任何其他使用 MS Bot 框架的通道中显示自动填充选项。 如果没有,你能提出任何其他选择吗?
是否有任何使用 MS Bot 框架在机器人模拟器或任何其他通道中显示自动填充选项
我在我的网站中嵌入了网络聊天,我使用以下方法实现网络聊天输入框的自动填充(自动建议),您可以参考它。
html代码:
<div id="bot"></div>
<div>
<datalist id="mylists">
<option value="Hello World">
<option value="Azure">
<option value="botframework">
<option value="LUIS">
<option value="QNA">
</datalist>
</div>
JS代码:
<script>
BotChat.App({
directLine: { secret: "{directline_secret}" },
user: { id: 'You'},
bot: { id: '{bot_id}' },
resize: 'detect'
}, document.getElementById("bot"));
$(function () {
//in this sample, I use a static datalist
//you can also retrieve data from external storage, such as database,
//and dynamically generate datalist based on records
//then append dynamic datalist to web page
//attach the datalist to webchat input box
$("input.wc-shellinput").attr("list", "mylists");
})
</script>
测试结果:
我还使用 HTML5 datalist 来实现自动建议。 在这里,我分享我的示例编码。
html代码:
<div id="bot"></div> //bot directline div
<datalist id="mylists"></datalist> //(suggestion list)
<template id="resultstemplate">
<option>Ray0</option>
<option>Ray1</option>
<option>Ray2</option>
<option>Ray3</option>
<!--etc ... similar options skipped -->
<option>Ray2123</option>
<option>Ray3123</option>
</template>
</div>
JS代码
$("input.wc-shellinput").attr("list", "mylists"); //append data list option with input box
var search = document.querySelector('.wc-shellinput'); // chat input box class(.wc-shellinput)
var results = document.querySelector('#mylists'); // suggestion list
// below query for showing suggestion list in the chat & with limited count or otherwise large suggestion list will appear in the chat bot
var templateContent = document.querySelector('#resultstemplate').content;
search.addEventListener('keyup', function handler(event) {
while (results.children.length) results.removeChild(results.firstChild);
var inputVal = new RegExp(search.value.trim(), 'i');
var set = Array.prototype.reduce.call(templateContent.cloneNode(true).children, function searchFilter(frag, item, i) {
if (inputVal.test(item.textContent) && frag.children.length < 6) frag.appendChild(item);
return frag;
}, document.createDocumentFragment());
results.appendChild(set);
});
如果您要将其部署到网络,则可以使用自动建议,要在聊天机器人中使用自动建议,您必须:
在 azure 存储中创建一个表,并保留您希望它们出现在自动建议中的问题/查询。
在 azure 中创建搜索服务,您必须在搜索服务中添加索引并将您的表链接到它。
然后将创建的索引与索引器链接并运行索引器。
在您的 chatter.html 中添加以下代码以在您的聊天机器人中获取自动建议
<script> var searchServiceName = "search-service-name-here"; var searchServiceApiKey = "xxxxxxxxxxxxxxxxxxxxxxxx"; var indexName = "index-name"; var suggestName = "suggestername"; var apiVersion = "2019-05-06"; var suggestUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/suggest?api-version=" + apiVersion; var autocompleteUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/autocomplete?api-version=" + apiVersion; var searchUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/search?api-version=" + apiVersion;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.