maia-chat

1.0.4 • Public • Published

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i maia-chat

Weekly Downloads

1

Version

1.0.4

License

ISC

Unpacked Size

2.04 MB

Total Files

125

Last publish

Collaborators

  • jneljneljnel