I want to implement autocomplete in my c# bot which i developed using microsoft bot framework and added into my portal as iframe. is it possible to implement query suggestion or query auto-completion in this bot? i tried this solution also
Auto complete in Bot Framework
but i did not find it helpful for me. can i use jquery auto-completion here ?
https://jqueryui.com/autocomplete/
please help me in this.
Thanks in advance.
can i use jquery auto-completion here ?
Based on my test, we can attach jQuery Autocomplete widgets to webchat input box. The following sample code is for your reference.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 500px;
position: relative;
}
</style>
</head>
<body>
<div id="mybot" />
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{your_bot_id}' },
resize: 'detect'
}, document.getElementById("mybot"));
$(function () {
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL"];
$("input.wc-shellinput").autocomplete({
source: availableTags
});
})
</script>
Test result:
Note: I enter a, it show a list items for my selecting, and then I select an item, such as ActionScript, if I directly click send button, it will only send a to bot. To avoid it, we can manually enter a white-space (or other characters) and remove them before click send button.
I was facing this issue since 4 days.Finally I made it work.
You need to write jQuery for input.wc-shellinput element. I have implemented it with azure search.
<!DOCTYPE html>
<html>
<head>
<link href="../Styles/Skins/botchat.css" rel="stylesheet" />
<link href="../Styles/skins/customwebchat.css" rel="stylesheet">
<link href="styles/pages.css" rel="stylesheet" />
</head>
<body>`enter code here`
<div id="body-container">
<div class="bot-container">
<div id="bot" class="snow"></div>
</div>
</div>
<!-- <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>-->
<script src="js/botchat.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>
<script>
const speechOptions = {
speechRecognizer: new CognitiveServices.SpeechRecognizer({ subscriptionKey: '' }),
speechSynthesizer: new CognitiveServices.SpeechSynthesizer({
gender: CognitiveServices.SynthesisGender.Female,
subscriptionKey: '',
voiceName: 'Microsoft Server Speech Text to Speech Voice (en-US, JessaRUS)'
})
};
BotChat.App({
directLine: { secret: '' },
user: { id: 'userid' },
bot: { id: 'botid' },
speechOptions: speechOptions,
resize: 'detect'
}, document.getElementById("bot"));
</script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery.autocompleteInline.js"></script>
<link href="/Content/jquery-ui.css" rel="stylesheet" />
<link href="/Content/tutorial.css" rel="stylesheet" />
<link href="/Content/jquery.autocompleteInline.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$("input.wc-shellinput").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: suggestUri,
dataType: "json",
headers: {
"api-key": searchServiceApiKey,
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,PUT,POST,DELETE"
},
data: JSON.stringify({
top: 5,
fuzzy: false,
suggesterName: "", //Suggester Name according to azure search index.
search: request.term
}),
success: function (data) {
if (data.value && data.value.length > 0) {
userinput = data.value;
console.log(userinput);
response(data.value.map(x => x["@search.text"]));
}
}
});
},
minLength: 3,
position: {
my: "left top",
at: "left bottom",
collision: "fit flip"
},
select: function (Event, ui) {
$(document).ready(function () {
var input = document.getElementsByClassName("wc-shellinput")[0];
var lastValue = input.value;
input.value = ui.item.value;
var event = new CustomEvent('input', { bubbles: true });
// hack React15
event.simulated = true;
// hack React16
var tracker = input._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
input.dispatchEvent(event);
})
$('wc-textbox').val("");
Event.preventDefault();
$(".wc-send:first").click();
}
});
});
</script>
<script>
var searchServiceName = "";
var searchServiceApiKey = "";
var indexName = "";
var apiVersion = "";
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;
</script>
</body>
</html>
