SPFx Chat Bot - using SharePoint Framework Extension

 Hi Friends,


Today I have created an SPFx chatbot using the SharePoint Framework extension. This is a small simple to configure bot. It consumes the QnAMaker API to retrieve the answers for the asked questions.

SPFx Chat Bot - using SharePoint Framework Extension

The code can be found here

Features !!

  • Easy to configure with little configurations
  • Compatible with the prompts
  • Displays the formatted text as done in the knowledgebase
  • Can filter on single metadata value as well as multi values
  • Option to select the operator for the filter values
  • Its an SPFx extension, so can be deployed at a site collection level or the tenant level
 
SPFx Chat Bot - using SharePoint Framework Extension

Configuration Needed.

  • Login to the QnAMaker.ai
  • Create the knowledgebase (follow steps here )
  • Got to the settings 
  • follow the markers below to retrieve the configuration
SPFx Chat Bot - using SharePoint Framework Extension

To get the source code click here

Working Demo

SharePoint Framework chatbot using SPFx Extension


Steps for deployment

There are 2 ways how you can deploy

  • Deploying package directly
To deploy the package directly follow the below steps
  • Go to the release page on Github by clicking here
  • Download the .sppkg file from the latest release
  • Deploy the file in App Catalogue
  • When deployed successfully navigate to  Site Contents --> Tenant Wise Extensions
  • Look for the entry "ChatBot" 
  • Edit the item and fill in the Component Properties

  • Deploying via building the codebase
To deploy the package via build
  • Make a clone of the repository
  • Navigate to the folder sharepoint > assets
  • Update the properties in both ClientSiteInstance.xml & elements.xml file
  • Execute the below commands
    • npm install
    • npm bundle --ship
    • npm package-solution --ship
  • Navigate to the folder sharepoint > solution
  • you'll find the spfxqnabot.sppkg file
  • Follow the Steps mentioned in "Deploying package directly"



You can also check out my video on youtube




Happy Coding...!!
#MicrosoftSharePoint #SharePointWidgets

Comments

  1. ahSeptember 4, 2020 at 6:58 AM

    when i upload app It shows that I have a err " invaild sharepoint app package error hexadecimal value line 7 postion 68"

    ReplyDelete
    Replies
    1. Sumit KanchanSeptember 4, 2020 at 1:34 PM

      Hi, can you please send me the screenshot of the error on sumit.kanchan04@gmail.com

      Delete
    2. Sumit KanchanSeptember 5, 2020 at 1:14 AM

      Hi, issue has been fixed, please take the latest code/sppkg file from GitHub.

      Thanks,
      Sumit Kanchan

      Delete
  2. ahSeptember 4, 2020 at 6:58 AM

    This comment has been removed by a blog administrator.

    ReplyDelete
  3. ahSeptember 4, 2020 at 6:58 AM

    Could you explain step by step because I have a problem with uploading the application pls

    ReplyDelete
  4. Tarun VatsSeptember 6, 2020 at 9:06 AM

    Superb 🙂

    ReplyDelete
  5. UnknownDecember 18, 2020 at 7:42 PM

    Hey, thank you for the project it's really cool. I have a question please how to connect this with a directline secret whitout passing with Q&A Maker. thank you

    ReplyDelete
    Replies
    1. Sumit KanchanDecember 22, 2020 at 3:38 PM

      Good to know that you find the project interesting :). As for the question is to bypass the QnA Maker, we cannot as the KB and service is provided by the QnA Maker. Not sure if I have answered your query. Please let me know if I have misunderstood your query.

      Delete
    2. UnknownDecember 24, 2020 at 6:42 AM

      Actually I want to connect the bot with a directline service without using th e Q&A maker !

      Delete
  6. AnonymousMay 5, 2021 at 11:49 PM

    I have a QnA Maker multi-turn knowledge base set up, where I provide the user with clickable options versus just typing random text in the box. I have found several of these types of projects on Github but none of them seem to work with the conversational multi-turn QnA Maker template. Thoughts?

    ReplyDelete
    Replies
    1. Sumit KanchanMay 10, 2021 at 8:58 PM

      What error are you getting, Can you look into the browser logs and network logs if you are getting anything there. I have checked the application with multi-turn KB and it works just fine.

      Delete
  7. AnonymousJuly 11, 2021 at 4:49 PM

    Hello thank you for the project it's good but I have a question please how replace connection with a directline secret whitout passing with Q&A Maker. thank you

    ReplyDelete
  8. AnonymousDecember 23, 2021 at 10:13 PM

    What exactly are the configuration steps and location to make these? That info seems to be left out here and on the Git site.

    ReplyDelete
    Replies
    1. Sumit KanchanDecember 28, 2021 at 1:25 PM

      Configuration steps are mentioned in the same blog as well...

      Delete
  9. AnonymousNovember 4, 2022 at 2:42 PM

    Hi, i guess QnA maker is getting retirved..Can you please confirm if this bot will support new language services?

    ReplyDelete
  10. AnonymousFebruary 21, 2023 at 9:26 PM

    Hello, can it be used in SharePoint 2019 on-premise?

    ReplyDelete

Post a Comment

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Image
Hi Friends, Today blog is about renaming the folder in the document library using the MS FLOW or MS Power Automate. When I started working on this it seems to be an easy job, but if you look into the connectors you'll find it really difficult as there is no straight forwards connector to do the job. Issues encountered If you try using the " Get Folder Metadata " connector, you'll not be able to get the ID of the folder as it is returning as the negative value. If you get the ID somehow and try to update the folder name using the " Update File Properties " connector, you'll end up renaming only the title of the folder, but it will still have the old name as the display name which in case is again a failure. There is no other connector which can be utilized to achieve the task of renaming the folder in a document library directly. Solution The solution is a simple three-step (at least in this example). Step 1: Initialize variables In case you are computing
Read more

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

Image
  Q. How to add "New Line", while adding the text to the SharePoint multiline text field?  A . In order to add the new line while adding a text to the multiline SharePoint field, I will demonstrate the simplest approach. Although you can find multiple approaches, but this one seems to be very easy and quick. You need to append the below expression to the text to make it to the new line: decodeUriComponent('%0A') If you are adding any array, then join the array using this expression or if you are building this string, then append this expression to the string. Step 1:  Add a variable and add the below expression (Write the code under the Expression tab) STEP 2: This is how your variable will look like      STEP 3: Output of the Address columns which is of Type Multiline text field Happy Coding..!! #Microsft #SharePointWidgets #PowerAutomate
Read more

How to resolve certificate issue in SharePoint Framework Solution

Image
Hi Friends, Today i will be discussing about the certificate issue when we run the gulp command and try to run the SharePoint Framework Solution in local workbench. Issue: Warning - [spfx-serve] When serving in HTTPS mode, a PFX cert path or a cert path and a key path must be provided, or a dev certificate must be generated and trusted. If a SSL certificate isn't provided, a default, self-signed certificate will be used. Expect browser security warnings . If you read the issue , the issue is that it does not find the certificate that shows trust in the URL you are accessing, because of which you see the following message on the screen. Solution: So here is the simple solution and you won’t experience this issue any more. In your solution open the node command prompt. If you are working in Visual code then open the solution and then press the ~ + Cntrl . Now follow the 2 steps: Execute the command gulp trust-dev-cert Click Y
Read more