React-ChatBot
This is a ready-made simple chat bot component, to develop your own chat bots for the site.
Install
npm install rechatbot
or
yarn add rechatbot
Usage
; ; const options = id: 'welcome' text: 'Welcome, to React ChatBot!' buttons: label: 'Docs' call: 'docs' label: 'Github' { globallocationhref = 'https://github.com/Archakov06/react-chatbot'; } id: 'docs' buttons: label: 'Open docs on GitHub' { globallocationhref = 'https://github.com/Archakov06/rechatbot'; } id: null text: 'Sorry, I can not understand what you mean.' ; { superprops; thisstate = messages: ; thisaddMessage = thisaddMessage; } { this; } { const messages = thisstate; return <div className="chat"> <ChatBot welcomeId="welcome" delay=800 messages=messages options=options onSendMessage=thisaddMessage avatars= user: 'https://pp.userapi.com/c834104/v834104145/5ca01/AsZGGgLNr-4.jpg' bot: 'https://pp.userapi.com/c631216/v631216247/21c8b/qF8SubyAdsU.jpg' /> </div> ; } ReactDOM;
Documentation
ChatBot
Property | Type | Description |
---|---|---|
welcomeId |
PropTypes.oneOfType([PropTypes.string, PropTypes.number]) | First message when you start a chat |
messages |
PropTypes.array.isRequired | List of messages (You must be maintained in a this.state.messages ) |
options |
PropTypes.array.isRequired | List of all available commands |
avatars |
PropTypes.object | User and bot avatar |
delay |
PropTypes.number | Time delay message from the bot |
hideUserMessage |
PropTypes.bool | Hide user messages |
hideAvatar |
PropTypes.bool | Hide avatars |
inputPlaceholder |
PropTypes.string | Input placeholder text |
onSendMessage |
PropTypes.func.isRequired | Callback function when a new message comes from a bot or user |
ChatMessage
Property | Type | Description |
---|---|---|
loading |
PropTypes.bool | Message is loading |
text |
PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]) | Message text (text, component) |
buttons |
PropTypes.array | Inline buttons |
sendAction |
PropTypes.func | Inline buttons callback |
avatars |
PropTypes.object | User and bot avatar |
image |
PropTypes.string | Attached image |
isUser |
PropTypes.string | Message from the user |
hideAvatar |
PropTypes.bool | Hide avatars |
Author
- Name: Archakov Dennis
- Website: https://archakov.im
- E-Mail: hello@archakov.im
License
MIT