MaiaChat

Description

Maia-chat is an UI framework for chat applications that can be easily AI enabled with the power of dmpl and dmos.

INSTALLATION

npm install maia-chat

USAGE

1. Import the MaiaChat component 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;

2. Required props include handleNewUserInput and initialMessage, 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>
	)};
}

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

  

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

  

API

Props

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

Functions

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

Act Messages

tbd

MAINTAINERS

• Jeremy Nelson ([email protected])