0.3.2 • Published 3 years ago
react-chatbot-ui v0.3.2
React-Chatbot-UI
Install
npm install react-chatbot-ui
Usage
// Example
...
import ChatBotUI, { MessageList, ButtonInput, TextInput } from 'react-chatbot-ui';
...
const config = {
width: '500px', // default: 400px
height: '400px', // default: 600px
inputBox: true, // show inputBox
sendCallback: (value: TextInput) => {
// TextInput { payload: string }
// InputBox's value and Clicked Button values are passed into this function
console.log(`you typed(clicked) text(button) ${value}`);
// you can update "messageList" here with input values for new message
},
buttonCallback: (value: ButtonInput) => {
// ButtonInput { payload: MessageButton }
console.log('button clicked', value);
},
};
const messageList: MessageList = [
{
mid: 1,
type: 'left',
text: 'Hello world'
},
{
mid: 2,
type: 'left',
youtube: 'https://www.youtube.com/watch?v=eDEFolvLn0A'
},
{
mid: 3,
type: 'right',
button: [
{ name: 'displayName1', value: 'buttonValue1' },
{ name: 'displayName2', value: 'buttonValue2' }
]
},
];
...
<ChatBotUI
config={config}
messageList={messageList}
/>
...
);
// Type
interface Message {
mid: number; // id of Message, should be unique
// (be used in react element's key)
type: 'left' | 'right'; // position of message balloon
text?: string; // text contents (support html)
image?: string; // image source
button?: Array<MessageButton> // buttons
youtube?: string; // youtube video url
}
interface MessageButton {
name: string;
value: any;
}
type MessageList = Array<Message>;
text
, image
, button
, youtube
cannot be used together.
you should use
immer.js
orimmutable.js
for MessageList
Features
Markdown Syntax
- bold :
**bold**
- italic :
*italic*
strikethrough:~~strikethrough~~
- underline :
__underline__
code
:`code`
- gincheong's github :
[gincheong's github](https://github.com/gincheong)
- bold :
Enlarging image with click
Support Youtube video url
- click to show youtube video player
0.3.0
3 years ago
0.3.2
3 years ago
0.3.1
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.1
3 years ago
0.1.11
3 years ago
0.1.10
3 years ago
0.0.10
3 years ago
0.0.9-a.1
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago