# maia-chat

> ui for an ai chat

Latest version **1.0.4** (published 2019-10-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install maia-chat
pnpm add maia-chat
yarn add maia-chat
bun add maia-chat
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-10-02 |
| First published | 2019-08-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | DMAI Inc |
| Maintainers | jneljneljnel |

## Links

- npm: https://www.npmjs.com/package/maia-chat
- Repository: https://bitbucket.org/jnelsondmai/maia-chat
- Homepage: https://bitbucket.org/jnelsondmai/maia-chat#readme
- npm.io page: https://npm.io/package/maia-chat

## Dependencies (16)

- [redux](https://npm.io/package/redux.md) 4.0.4
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [react-redux](https://npm.io/package/react-redux.md) 6.0.1
- [recorder-js](https://npm.io/package/recorder-js.md) ^1.0.7
- [react-flippy](https://npm.io/package/react-flippy.md) ^0.1.5
- [react-player](https://npm.io/package/react-player.md) ^1.12.0
- [react-scroll](https://npm.io/package/react-scroll.md) ^1.7.14
- [react-stopwatch](https://npm.io/package/react-stopwatch.md) ^2.0.4
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^4.12.12
- [styled-components](https://npm.io/package/styled-components.md) ^4.4.0
- [react-audio-player](https://npm.io/package/react-audio-player.md) ^0.11.1
- [react-sweet-progress](https://npm.io/package/react-sweet-progress.md) ^1.1.2
- [react-multimedia-capture](https://npm.io/package/react-multimedia-capture.md) ^1.2.3
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.4
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.25
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.11.2

## Recent versions

- 1.0.4 (latest) — 2019-10-02
- 1.0.3 — 2019-10-02
- 1.0.2 — 2019-09-05
- 1.0.1 — 2019-08-28
- 1.0.0 — 2019-08-28

## README

# 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
```javascript

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.

  

```javascript

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

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

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 (jnelson@dm.ai)

---
_Source: https://npm.io/package/maia-chat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._