ichatbot

---

Examples of different workflows

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

---

Table of Contents

• What is ichatbot?
• Installation
  • 1. NPM-Angular
  • 2. HTML
• ichatbotconfig.js
• Dataset
• Methods

---

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

1. IntialQueryID: "1"
   Query to be loaded initially, you can also set this while initializing ichatbot
   ichatbot.initialize(config, dataset, IntialQueryID);

2. 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

3. FileMaxSize: "10485760"
   User file upload mazximum size in bytes

4. IChatBotCSSClass: "class1 class2"
   These css classes will be applied to chatbot outermost div by overriding default styles, specify multiple classes separated by space

5. DisableSelectedButton: true
   Whether the clickable option/button should be disabled after user clicks on it

6. 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

7. SearchNotFoundMsg: "Keyword not found!!"
   If not provided a default message will be shown

8. 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

1. ID A unique identifier that accepts input as an integer OR character OR combination of both

2. Query
   Can be a simple text OR HTML

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

3. Options
   Multiple option ID's seperated by ', ' "Options": "103, 104"

4. 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

5. 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"

6. 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

7. 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)

8. 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
   

9. 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

1. ID
   Unique identifier can be integer OR character OR combination of both

2. Type
   "Type" can be "Button" OR "Link"

3. Text
   Display text for "Button" OR "Link"

4. URL
   Valid when "Type" is link

5. Query
   Valid when "Type" is ""Button. Loads the "Query" when buton is selected by user
   "Query" ="1" OR "Query" = "2"

6. FireSubscribedEvent
   Valid when "Type" is "Button". The subscribed event will be fired

---

Methods

1. initialize(config, dataset, initialqueryID(nullable))
   Initializes the chatbot.

2. loadQuery(QueryID)
   Loads the query based on provided argument

3. openChatBot()

4. closeChatBot()
   closeChatBot() will close the chatbot
   closeChatBot(false) will not load the InitialQuery

5. resetChat()
   resetChat() will reset the chatbot and loads the InitialQueryID
   resetChat(false) will reset the chatbot and not load the InitialQuery

6. subscribeEvent()
   Pass the events as arguments

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

7. 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>");

8. getChatSession()
   iChatbot maintains all the user activity and can be retrieved by using this method

9. showLoader()
   showLoader() display the loader and will be hidden only on calling hideLoader()
   showLoader(2000) diplays loader for 2000 milli seconds

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

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

11. getDataset()
    Returns the dataset passed as part of initialize()

12. 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);
     }

---