MS Bot 框架中的自动填充选项

Question

无论如何，在机器人模拟器或使用 MS Bot 框架的任何其他频道中显示自动填充选项。 如果不能，您能推荐其他替代方案吗？

Answer 1

是否有在机器人模拟器或使用 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>

测试结果：

Answer 2

我也使用 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);
        });

Answer 3

如果您将自动建议部署到网络，则可以使用自动建议，要在聊天机器人中使用自动建议，您必须：

• 在 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;