innovative-chatbot

v1.0.3

Published

3 years ago

ichatbot is a fully customizable javascript library that enables you to create a chatbot with various workflows in a very short time.

Downloads

0High
0Medium
0Low

kishoreithadi

ichatbot

Examples of different workflows

https://kishoreithadi.github.io/ichatbot/

What is ichatbot?

ichatbot is a fully customizable javascript library that enables you to create a chatbot with various workflows in a very short time.

Installation

1. NPM Angular

npm install --save innovative-chatbot

Add styles and scripts in angular.json

"styles": [
  "node_modules/innovative-chatbot/ichatbotstyle-1.0.3.min.css"
],
"scripts": [
  "node_modules/innovative-chatbot/ichatbot-1.0.3.min.js",
  "src/ichatbotconfig.js"
]

NOTE if ichatbotconfig.js is not created in src folder, manually copy it from node_modules/innovative-chatbot/

Add below link for getting default font-awesome icons, later you can remove/updated based on requirement

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

Add below tag anywhere in html file

<div id="ichatbot-div"></div>

In your component file

import {
    Component
} from '@angular/core';

declare var ichatbot: any;
declare var ichatbotconfig: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'my-app';

    ngOnInit() {

        var ichatbotDataset = {
            "Queries": [{
                "ID": "1",
                "Query": "Welcome to chatbot",
                "Options": "101",
                "Type": "",
                "QueryID": "",
                "SearchInQueries": false,
                "SearchKeywords": "",
                "FireSubscribedEvent": false,
                "Validation": "",
                "ValidationErrorMsg": ""
            }],
            "Options": [{
                "ID": "101",
                "Text": "Documentation",
                "Type": "Link",
                "URL": "https://github.com/KishoreIthadi/ichatbot",
                "Query": "",
                "FireSubscribedEvent": false
            }]
        }

        // ichatbotconfig is loaded from ichatbotconfig.js
        ichatbot.initialize(ichatbotconfig, ichatbotDataset, null);

        //Subscribing to UserInput Entered, User Button Click, Chat Reset, Chat Close events
        var userTextEvent = function UserText(e: any) {
            console.log('ichatbot : user text input event fired')
            console.log(e.chatSession);
            console.log(e.userInput);
            console.log(e.searchFailed);

            // In case you want to execute own logic on search failed
            // e.stop() will stop the default functionality of showing "Keyword not found" message --> calling the configured query --> adding "text entered" in chat session
            // if (e.searchFailed) {
            //     e.stop();
            //     ichatbot.loadQuery(1);
            // }
        }

        var fileUploadEvent = function fileUpload(e: any) {
            console.log('ichatbot : file upload event fired')
            console.log(e.files);
            console.log(e.chatSession);

            // In case you want to execute your own logic
            // e.stop() will stop the default functionality of showing "File Upload Success" message --> calling the configured query--> adding "file uploaded" in chat session

            e.stop();

            ichatbot.simpleQuery("<b>File Uploaded Sucessfully</b>")
            ichatbot.loadQuery(5);
        }

        var buttonClickEvent = function buttonClick(chatSession: any) {
            console.log('ichatbot : user button click event fired')
            console.log(chatSession);

            //Fetchhing selected option
            console.log(chatSession.pop());
        }

        var resetEvent = function reset(chatSession: any) {
            console.log('ichatbot : chat reset event fired')
            console.log(chatSession);
        }

        var closeEvent = function close(chatSession: any) {
            console.log('ichatbot : chat close event fired')
            console.log(chatSession);
        }

        ichatbot.subscribeEvent(userTextEvent, buttonClickEvent, resetEvent, closeEvent, fileUploadEvent);

        // function getDataset(dataset: any) {
        //   console.log(ichatbot.getDataset());
        // }

        // function updateDataset() {
        //   var dataset = ichatbot.getDataset();
        //         dataset.Queries.push({
        //             "ID": "100",
        //             "Query": "Updated Query",
        //             "Options": "300",
        //             "Type": "",
        //             "QueryID": "",
        //             "SearchInQueries": false,
        //             "SearchKeywords": "",
        //             "FireSubscribedEvent": false,
        //             "Validation": "",
        //             "ValidationErrorMsg": ""
        //         });

        //         dataset.Options.push({
        //             "ID": "300",
        //             "Text": "Updated Option",
        //             "Type": "Button",
        //             "URL": "",
        //             "Query": "",
        //             "FireSubscribedEvent": true
        //         });
        //         ichatbot.resetChat(false);
        //         ichatbot.loadQuery(100);
        //   }          

        // ichatbot.showLoader(5000);
        // ichatbot.hideLoader();

        // ichatbot.openChatBot();
        // ichatbot.closeChatBot();

        //ichatbot.resetChat();

        // ichatbot.showErrorMsg("Error Message");
        // ichatbot.getChatSession();

        // ichatbot.loadQuery(1);
    }
}

2. HTML

Download latest ichatbot.js, ichatbotconfig.js & ichatbotstyle.css using below link

https://github.com/KishoreIthadi/ichatbot/releases

Add link and script in head section

<head>
    <!-- Font-Awesome is for appying default icons, please update as per your requirement -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

    <link rel="stylesheet" href="ichatbotstyle-1.0.3.min.css">

    <script src="ichatbot-1.0.3.min.js"></script>
    <script src="ichatbotconfig.js"></script>
</head>

Add below in body section

<body>
    <div id="ichatbot-div">
    </div>

    <script>
        var ichatbotDataset = {
            "Queries": [{
                "ID": "1",
                "Query": "Welcome to chatbot",
                "Options": "101",
                "Type": "",
                "QueryID": "",
                "SearchInQueries": false,
                "SearchKeywords": "",
                "FireSubscribedEvent": false,
                "Validation": "",
                "ValidationErrorMsg": ""
            }],
            "Options": [{
                "ID": "101",
                "Text": "Documentation",
                "Type": "Link",
                "URL": "https://github.com/KishoreIthadi/ichatbot",
                "Query": "",
                "FireSubscribedEvent": false
            }]
        }

        // ichatbotconfig is loaded from ichatbotconfig.js
        ichatbot.initialize(ichatbotconfig, ichatbotDataset, null);

        //Subscribing to UserInput Entered, User Button Click, Chat Reset, Chat Close events
        var userTextEvent = function UserText(e) {
            console.log('ichatbot : user text input event fired')
            console.log(e.chatSession);
            console.log(e.userInput);
            console.log(e.searchFailed);

            // In case you want to execute own logic on search failed
            // e.stop() will stop the default functionality of showing "Keyword not found" message --> calling the configured query --> adding "text entered" in chat session
            // if (e.searchFailed) {
            //     e.stop();
            //     ichatbot.loadQuery(1);
            // }
        }

        var fileUploadEvent = function fileUpload(e) {
            console.log('ichatbot : file upload event fired')
            console.log(e.files);
            console.log(e.chatSession);

            // In case you want to execute your own logic
            // e.stop() will stop the default functionality of showing "File Upload Success" message --> calling the configured query--> adding "file uploaded" in chat session

            e.stop();

            ichatbot.simpleQuery("<b>File Uploaded Sucessfully</b>")
            ichatbot.loadQuery(5);
        }

        var buttonClickEvent = function buttonClick(chatSession) {
            console.log('ichatbot : user button click event fired')
            console.log(chatSession);

            //Fetchhing selected option
            console.log(chatSession.pop());
        }

        var resetEvent = function reset(chatSession) {
            console.log('ichatbot : chat reset event fired')
            console.log(chatSession);
        }

        var closeEvent = function close(chatSession) {
            console.log('ichatbot : chat close event fired')
            console.log(chatSession);
        }

        ichatbot.subscribeEvent(userTextEvent, buttonClickEvent, resetEvent, closeEvent, fileUploadEvent);

        // function getDataset(dataset) {
        //   console.log(ichatbot.getDataset());
        // }

        // function updateDataset() {
        //   var dataset = ichatbot.getDataset();
        //         dataset.Queries.push({
        //             "ID": "100",
        //             "Query": "Updated Query",
        //             "Options": "300",
        //             "Type": "",
        //             "QueryID": "",
        //             "SearchInQueries": false,
        //             "SearchKeywords": "",
        //             "FireSubscribedEvent": false,
        //             "Validation": "",
        //             "ValidationErrorMsg": ""
        //         });

        //         dataset.Options.push({
        //             "ID": "300",
        //             "Text": "Updated Option",
        //             "Type": "Button",
        //             "URL": "",
        //             "Query": "",
        //             "FireSubscribedEvent": true
        //         });
        //         ichatbot.resetChat(false);
        //         ichatbot.loadQuery(100);
        //   }          

        // ichatbot.showLoader(5000);
        // ichatbot.hideLoader();

        // ichatbot.openChatBot();
        // ichatbot.closeChatBot();

        //ichatbot.resetChat();

        // ichatbot.showErrorMsg("Error Message");
        // ichatbot.getChatSession();

        // ichatbot.loadQuery(1);
    </script>
</body>

ichatbotconfig.js

The following image explains most of the properties

IntialQueryID: "1"
Query to be loaded initially, you can also set this while initializing ichatbot
ichatbot.initialize(config, dataset, IntialQueryID);
UserInputMinLen: "5",
UserInputMaxLen": "50"
User text input minimum and maximum character length. The text box border will be red if this criteria is not met
FileMaxSize: "10485760"
User file upload mazximum size in bytes
IChatBotCSSClass: "class1 class2"
These css classes will be applied to chatbot outermost div by overriding default styles, specify multiple classes separated by space
DisableSelectedButton: true
Whether the clickable option/button should be disabled after user clicks on it
TitleIconFAClass: "fa fa-info blue-color",
TitleImagePath: "", TitleImageCSSClass: ""
Icon displayed on top left of chatbot
Set either TitleIconFAClass (font-awesome class) OR TitleImagePath along with TitleImageCSSClass(optional) as below
TitleIconFAClass: "", TitleImagePath: "~/images/tiltleicon.png", TitleImageCSSClass: "class1 class2" The above is applicable for Reset, Close, FloatingIcon, ChatQueryIcon, ChatUserInputIcon properties
SearchNotFoundMsg: "Keyword not found!!"
If not provided a default message will be shown
ResetChatHistoryOnReset: true,
ResetChatHistoryOnClose: true
by default all the activity is stored in sequential order and this can be accessed by calling getChatSession() method

Dataset

Dataset consists of two arrays Queries and Options as shown below

var ichatbotDataset = {
    "Queries": [{
            "ID": "1",
            "Query": "Select a service",
            "Options": "101,102",
            "Type": "",
            "QueryID": "",
            "SearchInQueries": false,
            "SearchKeywords": "",
            "FireSubscribedEvent": false,
            "Validation": "",
            "ValidationErrorMsg": ""
        },
        {
            "ID": "2",
            "Query": "Select type of mobile service",
            "Options": "103,104",
            "Type": "",
            "QueryID": "",
            "SearchInQueries": false,
            "SearchKeywords": "",
            "FireSubscribedEvent": false,
            "Validation": "",
            "ValidationErrorMsg": ""
        }
    ]
    "Options": [{
            "ID": "101",
            "Text": "Mobile",
            "Type": "Button",
            "URL": "",
            "Query": "2",
            "FireSubscribedEvent": true
        },
        {
            "ID": "102",
            "Text": "Landline",
            "Type": "Button",
            "URL": "",
            "Query": "",
            "FireSubscribedEvent": false
        }
    ]
}

Queries

ID A unique identifier that accepts input as an integer OR character OR combination of both
Query Can be a simple text OR HTML

   "Query": "Please select from below"; ** OR **
   "Query": "<b>Please select from below </b>";

Options
Multiple option ID's seperated by ', ' "Options": "103, 104"
Type
"Type" can be "" OR "Text" OR "File" OR "MultipleFiles" When "Type" is "", query will be displayed with options(if provided) When "Type" is Text, enables user to enter text input When "Type" is File, enables user to upload single file When "Type" is MultipleFiles, enables user to upload multiple files
Validation
When "Type" is Text, provide Regex expression as below "Validation": "^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)$" OR "Validation": "^([0|+[0-9]{1, 5})?([7-9][0-9]{9})$"; When query "Type" is File OR MultipleFiles, provide file extension seperated by ', ' as below "Validation": ".js, .css"
ValidationErrorMsg This property takes simple text as input and gets displayed above textbox/file upload control when validation fails "ValidationErrorMsg": "Invalid email" OR "ValidationErrorMsg": "Supported .png extension" Note recommended to provide text less than 50 characters for better UI In case ValidationErrorMsg is empty, default messages will be shown
SearchInQueries
SearchKeywords These two properties work in sync. SearchInQueries takes true OR false as input if "SearchInQueries" = true && "Type" = "Text" then the text entered by the user will be matched against all the "SearchKeywords" in the Queries array if search is found then matched Query will be loaded else "Keyword not found" message will be displayed then --> "QueryID" is loaded if not null, if "QueryID" is null then the same query will be loaded. This flow can be paused by using e.stop() (go through the examples for more details)
QueryID This is typically the next query to be loaded. The case when "Type" = Text is explained above It works similarly for all types of queries
FireSubscribedEvent in case "FireSubscribedEvent" = true the subscribed events will be fired

   ichatbot.initialize(ichatbotconfig, dataset);

   //Subscribing to UserInput Entered, User Button Click, Chat Reset, Chat Close events
   var userTextEvent = function UserText(e) {
       console.log('ichatbot : user text input event fired')
       console.log(e.chatSession);
       console.log(e.userInput);
       console.log(e.searchFailed);

       // In case you want to execute own logic on search failed
       // e.stop() will stop the default functionality of showing "Keyword not found" message --> calling the configured query --> adding "text entered" in chat session
       // if (e.searchFailed) {
       //     e.stop();
       //     ichatbot.loadQuery(1);
       // }
   }

   var fileUploadEvent = function fileUpload(e) {
       console.log('ichatbot : file upload event fired')
       console.log(e.files);
       console.log(e.chatSession);

       // In case you want to execute your own logic
       // e.stop() will stop the default functionality of showing "File Upload Success" message --> calling the configured query--> adding "file uploaded" in chat session

       e.stop();

       ichatbot.simpleQuery("<b>File Uploaded Sucessfully</b>")
       ichatbot.loadQuery(5);
   }

   var buttonClickEvent = function buttonClick(chatSession) {
       console.log('ichatbot : user button click event fired')
       console.log(chatSession);

       //Fetchhing selected option
       console.log(chatSession.pop());
   }

   var resetEvent = function reset(chatSession) {
       console.log('ichatbot : chat reset event fired')
       console.log(chatSession);
   }

   var closeEvent = function close(chatSession) {
       console.log('ichatbot : chat close event fired')
       console.log(chatSession);
   }

   ichatbot.subscribeEvent(userTextEvent, buttonClickEvent, resetEvent, closeEvent, fileUploadEvent);

Options

ID
Unique identifier can be integer OR character OR combination of both
Type
"Type" can be "Button" OR "Link"
Text
Display text for "Button" OR "Link"
URL
Valid when "Type" is link
Query
Valid when "Type" is ""Button. Loads the "Query" when buton is selected by user "Query" ="1" OR "Query" = "2"
FireSubscribedEvent
Valid when "Type" is "Button". The subscribed event will be fired

Methods

initialize(config, dataset, initialqueryID(nullable))
Initializes the chatbot.
loadQuery(QueryID)
Loads the query based on provided argument
openChatBot()
closeChatBot()
closeChatBot() will close the chatbot
closeChatBot(false) will not load the InitialQuery
resetChat()
resetChat() will reset the chatbot and loads the InitialQueryID
resetChat(false) will reset the chatbot and not load the InitialQuery

subscribeEvent()
Pass the events as arguments

subscribeEvent(userTextEvent, buttonClickEvent, resetEvent, closeEvent, fileUploadEvent);

simpleQuery()
This will enable you to provide a simple message to the user. Takes text OR HTML as input

   simpleQuery("Welcome to ichatbot");
   simpleQuery("<b>Welcome to ichatbot</b>");

getChatSession()
iChatbot maintains all the user activity and can be retrieved by using this method
showLoader()
showLoader() display the loader and will be hidden only on calling hideLoader()
showLoader(2000) diplays loader for 2000 milli seconds

showErrorMsg()
Displays error message on top of textbox/fileupload.

showErrorMsg("This is error");
showErrorMsg(""); for removing the message

getDataset()
Returns the dataset passed as part of initialize()
updateDataset()
Update the entire Dataset

     function updateDataset() {
         var dataset = ichatbot.getDataset();
         dataset.Queries.push({
             "ID": "100",
             "Query": "update dataset",
             "Options": "300",
             "Type": "",
             "QueryID": "",
             "SearchInQueries": false,
             "SearchKeywords": "",
             "FireSubscribedEvent": false,
             "Validation": "",
             "ValidationErrorMsg": ""
         });

         dataset.Options.push({
             "ID": "300",
             "Text": "Mobile",
             "Type": "Button",
             "URL": "",
             "Query": "",
             "FireSubscribedEvent": true
         });

         ichatbot.resetChat(false);
         ichatbot.loadQuery(100);
     }

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme