This code sample allows you to create a typeahead suggestion functionality for your custome copilot that can assist users finding things like frequently asked questions, auto correcting typos and showing a list of menu items like product names or topic names before sending a message to the copilot. The version one uses an API that returns topic names for given bot but the sample can be used with any RestFul endpoint to show relevant suggestions based on your usecase.
Please note that version 1 calls the API once and loads the suggestions for your bot when the chat is initiated. It then filters through these suggestions based on users questions. Please note that version 2 which is built using REACT component calls the API every time users asks a questions and shows the relevant suggestion based on each question when user type '/'
- Create your custom copilot using copilot studio with required topics and actions.
- Once you have published your copilot go to mobile channel and copy the directline endpoint url.
- Download the TypeAheadSuggestion.HTML canvas to your local machine and open in any code editor.
- On line 158 replace the direct enpoint you copied for your copilot. Please note that for best practices you can use directline token instead of using secret in the canvas.
- Next you will need to add a RestAPI that returns an array of suggestions for your bot. For testing, you can use the TypeAheadSolutionAPI Zip file that has a power automate flow that returns topic names for a given copilot bot. On the power automate flow you will need to edit the list row action and replace the exisiting botid with your botid.
-
On line 222 Add your RestAPI endpoint that returns an array of suggested topics.
-
Optional : If you would like to exclude any suggestions based on your business logic you can create a exclusion list as shown below on line 173.
-
Click Save and open the file in the browser to test. You can launch the bot by clicking on the chat bubble and initiating the chat.
-
To see list of suggestions before typying click the space bar which opens a dropdow list of suggested topcis
-
For getting type ahead suggestions continue to type in the chat bot canvas and suggestions will be shown below the chat area. Clicking on any suggestion submits the utterance to the bot.