maia-chat v1.0.4

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

Functions

Act Messages

tbd

MAINTAINERS

• Jeremy Nelson (jnelson@dm.ai)