Skip to content

Chatbot give instructions and guidance to user on specific instruction. You can add chatbot in your website. Your customize chatbot guide your user.

License

Notifications You must be signed in to change notification settings

kakadiyakeyur53/chatbot-using-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Create Chatbot using React

This project is use react-chatbot-kit for chatbot so you have to install it on your project.

Live Demo

npm requirements

npm react-chatbot-kit

using this feature you can add your chatbot in your project go to npm react-chatbot-kit

npm bootstrap

you can use bootstrap in your project for styling your page. for easy guide go to npm bootstrap

npm material-ui

you can use material ui for easy documentation and effective representation for easy guide go to npm material-ui core.

npm jquery

you can use jquery for solve inbuilde jquery for easy guide go to npm jquery.

coding section

this section is use for initialize chatbot configurations

Properties:

botName - defines the name of the bot

customStyles - object defining custom styles for different elements.

initialMessages - defines an array of initial messages from the bot. Required property.

state - defines state you want to place into the chatbot component.

customComponents - you can define your own components and swap out the components that come with react-chatbot-kit by replacing them here.

widgets - here you can define a list of widgets that you want to be able to render with a chatbot response.

The message parser controls what happens when the user sends a message.

You have to implement this yourself. The beauty of this is that you can make the message parsing as complex or as simple as you'd like.

The only method that the message parser needs to implement is the "parse" method. This method is called inside the chatbot when it receives a message from the user.

The actionprovider controls what kind of action that the chatbot is going to perform.

The actionprovider is given the createChatBotMessage and createClientMessage functions in the constructor, which you can use to create a new responses.

Widgets are custom components that you can render with chatbot messages.

In order to use widgets, you need to register them in the config. Here you will define the following properties:

widgetName - defines the name of the widget

widgetFunc - define a function that returns the component. The function must take props and spread it into the component.

mapStateToProps - defines which state properties you defined in config should be injected into the widget component.

props - option array of props you want to pass to your component.

When the widget component is rendered it will receive the following props:

actionProvider - the actionprovider class you have defined, so you can trigger other actions from your custom components.

setState - setState function that can manipulate the top level chatbot state.

scrollIntoView - helper function to scroll content into view when doing asynchronous calls, use in combination with useEffect when updating to state to ensure that the chat window is scrolled to bottom.

[state] - any piece of state you defined in the mapStateToProps section of the config.

[props] - any piece of props you defined in the props section of the config.

Example

here i create different widget to give overview of different properties of chatbot.

return simple chatbot message with text.

in this widget give simple overview of propery and use form for user input

this return specific message on button click event

simple use of state data passed in props by config section

simple use of data passed by backend or by array in widget itself.

use of action provider passing to widget by props

display buttons, on click use property action provider which is given to widget by props

use of API

fetch data using API and use in widget, live display by statechange

Live Demo

PreView

image image image image image image

About

Chatbot give instructions and guidance to user on specific instruction. You can add chatbot in your website. Your customize chatbot guide your user.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published