Maia-chat is an UI framework for chat applications that can be easily AI enabled with the power of dmpl and dmos.
npm install maia-chat
- Import the
MaiaChatcomponent and add it to the component of your choice
import React from 'react';
import { MaiaChat } from 'maia-chat';
class App extends React.Component {
render() {
return (
<div className="App">
<MaiaChat />
</div>
);
}
}
export default App;- Required props include
handleNewUserInputandinitialMessage, which is a function that is called everytime user input is received and the first message (act object) sent to the chat, respectively.
import React from 'react';
import { MaiaChat } from 'maia-chat';
const firstMessage = {
object: "maia",
action: "say",
params: {
ssml: "Hi! How are you doing?",
tts: true
}
}
class App extends React.Component {
//Handles what the return message will be based on the user input
handleUserInput = (userInput) => {
console.log('User said' + `${userInput}`);
}
render() {
return (
<div className="App">
<MaiaChat
handleNewUserInput={this.handleUserInput}
initialMessage={firstMessage}
/>
</div>
)};
}- Import methods for sending system messages
import React from 'react';
import { MaiaChat, addResponseMessage } from 'maia-chat';
const firstMessage = {
object: "maia",
action: "say",
params: {
ssml: "Hi! How are you doing?",
tts: true
}
}
class App extends React.Component {
handleUserInput = (userInput) => {
if (userInput === 'hello'){
addResponseMessage({
object: "maia",
action: "say",
params: {
ssml: "That's good to hear!",
tts: true
}
});
}
}
render() {
return (
<div className="App">
<MaiaChat
handleNewUserInput={this.handleUserInput}
initialMessage={firstMessage}
/>
</div>);
}
}
- Other props for MaiaChat
import React from 'react';
import { MaiaChat, addResponseMessage } from 'maia-chat';
const firstMessage = {
object: "maia",
action: "say",
params: {
ssml: "Hi! How are you doing?",
tts: true
}
}
class App extends React.Component {
handleUserInput = (userInput) => {
if (userInput === 'hello'){
addResponseMessage({
object: "maia",
action: "say",
params: {
ssml: "That's good to hear!",
tts: true
}
});
}
}
render() {
return (
<div className="App">
<MaiaChat
...
username="Daniel"
title="The Solar System"
/>
</div>);
}
}
| type | required | default | description | |
|---|---|---|---|---|
| handleNewUserInput(newInput) | Function | yes | None | Function that receives new input from user and handles what to send next |
| initialMessage | Object or Array | no | None | First message sent from Maia. Object needs to be in act message format or an array of act messages |
| username | String | no | "Kiana" | Name of user. First letter will be the user avatar ("Kiana" will show "K" for user avatar) |
| title | String | no | None | Title of chat lesson displayed above chat. Empty title will show no title |
| progressBar | Boolean | no | false | Displays progress bar of current chat. Default will show no progress bar |
| centerTitle | Boolean | no | false | If true, title and progress bar are centered to the viewport. When false, positions to the center of chat interface. |
| parameters | Description | |
|---|---|---|
| addResponseMessage | Act message/s (Object or Array) | Message outputted by Maia; If parameter is an array of act messages, speech bubbles will stack and only the last speech bubble will display pointy end and avatar. |
| addUserMessage | string or object | Message outputted by user |
tbd
- Jeremy Nelson (jnelson@dm.ai)