nabta-aya v1.5.7
Aya Component
This component represents the Aya chatbot screen presentation layer
Installation
npm install --save nabta-aya
Props
Prop Name | Description | Type | Default Value |
---|---|---|---|
avatar | (optional) The avatar for Aya in the chatbot screen | Image source | Typical Aya icon |
bdiEnvironment | (required) The environment variable created by the BDI engine | BDI environment | ----- |
machines | (required) List of finite state machines defined in the YML file | Machines list created by createFsm | ----- |
navigation | (required) Navigation object as passed in the props | Navigation props object | ----- |
NabtaButton | (required) Button object used to render chatbot options | React Component | ----- |
Selector | (required) Modal object that renders different selection options for users | React Component | ----- |
userInfo | (required) Redux userInfo object | Javascript object | ----- |
updateUserInfo | (required) Redux updating function accepting an update to userInfo | Javascript function | ----- |
translations | (required) Translations object. At least the key Aya.text206 => "Aya is typing" is needed | Javascript object | ----- |
addBeliefRun | (required) Function that updates the belief-set of the BDI engine and runs an iteration of the environment | Javascript function | ----- |
refreshInfo | (required) Function that updates the userInfo object with remote-stored user information, should return the information object as well as update userInfo | Javascript function | ----- |
implementMachine | (optional) Code that executes at startup when a machine is selected | Javascript function | empty function |
typicalProcess | (optional) Function that processes input messages from the user (list of Gifted-Chat message structs) and returns an array of two arrays: list of strings for response and list of objects for response params | Javascript function | (messages) => [[messages[0].text], [{}]] |
renderMessageText | (optional) Function that returns a special rendering of an Aya response, based on messageParams returned by typical process, or null | Javascript function | () => null |
getBubbleColor | (optional) Function that returns the theme color of the chat | Javascript Function | () => '#3CB0DC' (blue color) |
getSendButton | (optional) Function that returns the customized send button | Javascript Function | a function that returns the blue send button |
buttonOnlyCallback | (optional) Function that is invoked when the send button is clicked in a "button only" state (should involved a call to this.messagePress to send a message as the user) | Javascript function | empty function |
setAppLanguage | (required) Function that sets the application language and resets it if needed | Javascript function | ----- |
navigateToHome | (required) Function that navigates the application to the home page in case of already-logged-in user | Javascript function | ----- |
canGoBack | (optional) Function that returns a boolean value indicating whether it is allowed to backtrack a question | Javascript function | () => true |
componentDidMount | (optional) Function is called at the end of componentDidMount in the Chatbot component | Javascript function | () => {} |
PASSWORDSTATES | (optional) List of states for which the messages are replaced with a string of * | List | [] |
CODESTATES | (optional) List of states for which the code input field is displayed | List | [] |
SELECTORSTATES | (optional) List of states for which the entry field is replaced by a button triggering a selector modal | List | [] |
HIDECLOSEMACHINES | (optional) List of states for which the close X symbol of the chatbot is hidden (cannot be skipped) | List | [] |
HELPINFO | (optional) An object matching states to a text shown in a popup after clicking "What is this?" that appears for these states | Javascript Object | {} |
Sample Usage
import Chatbot from 'nabta-aya';
import { navigateAndReset } from '../utils/navigationUtils';
import NabtaButton from './NabtaButton';
import Selector from './Selector';
import { addBeliefRun } from '../utils/bdi';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { LocalizationContext } from'./Translations';
import { refreshInfo } from '../utils/refreshInfo.js';
import { ntohm } from '../utils/process.js';
import implementMachine from '../utils/aya/implementMachine';
import typicalProcess from '../utils/aya/typicalProcess';
import renderMessageText from '../utils/aya/renderMessageText';
import buttonOnlyCallback from '../utils/aya/buttonOnlyCallback';
import componentDidMount from '../utils/aya/componentDidMount';
import { getSendButton, getBubbleColor } from '../utils/aya/themes';
import canGoBack from '../utils/aya/canGoBack';
const PASSWORDSTATES = ["loginPasswordState", "signupPasswordState", "startupIncorrectPasswordState",
"invalidPasswordState", "confirmOldPasswordState", "invalidOldPasswordState",
"invalidNewPasswordState"];
const CODESTATES = ["emailCodeState", "codeErrorState", "resendCodeState",
"newEmailState", "resendCodeToEmailState", "invalidCodeState"];
const SELECTORSTATES = ["weightState", "goalWeightState","heightState", "bdateState",
"whenConceivedState", "lastPeriodState", "cycleLengthState",
"tryingToConceivePeriodState", "familyMethodsState", "locationState",
"covid19_dob", "covid19_height", "covid19_weight", "covid19_base",
"lastBabyBDState", "lastMiscarriageDateState", "covid19_taken_temp_value"];
const HIDECLOSEMACHINES = ["startupMachine", "startupContMachine", "signupMachine",
"PrepareForMenopauseSignupMachine", "GetFitAndHealthySignupMachine",
"MonitorMyPregnancySignupMachine", "TrackMyCycleSignupMachine"];
class Aya extends Component {
static navigationOptions = {
headerShown: false,
};
static contextType = LocalizationContext;
render(){
return(
<Chatbot
avatar={require("../assets/aya.png")}
bdiEnvironment={global.environment}
machines={global.machines}
navigation={this.props.navigation}
NabtaButton={NabtaButton}
Selector={Selector}
userInfo={this.props.userInfo}
updateUserInfo={this.props.updateUserInfo}
translations={this.context.translations}
addBeliefRun={addBeliefRun}
refreshInfo={refreshInfo}
implementMachine={implementMachine}
typicalProcess={typicalProcess}
renderMessageText={renderMessageText}
getBubbleColor={getBubbleColor}
getSendButton={getSendButton}
buttonOnlyCallback={buttonOnlyCallback}
setAppLanguage={this.context.setAppLanguage}
navigateToHome={() => {
navigateAndReset(ntohm(this.props.userInfo.mode));
}}
componentDidMount={componentDidMount}
canGoBack={canGoBack}
PASSWORDSTATES={PASSWORDSTATES}
CODESTATES={CODESTATES}
SELECTORSTATES={SELECTORSTATES}
HIDECLOSEMACHINES={HIDECLOSEMACHINES}
/>
);
}
}
createFsm
This is a function that creates proper finite state machines from an interpretation of the machines described in a yaml file.
Usage
this.createFsm = createFsm.bind(this);
let yaml = require('js-yaml');
let doc = yaml.safeLoad(yamlString);
global.machines = this.createFsm(doc);
initiateBDIEngine
This is a function that initiates Aya's BDI engine.
It takes the following parameters:
1. initialBeliefs: a JS object with the beliefs the agent will begin with
2. initialState: a JS object of the initial agent state. For Aya, the most important state variable is fsm
, which is the current finite state machine.
3. desires: a JS list of desires. Each desire is a JS object with a name (string) a machine it invokes when it is activated (string) and a function that takes the agent beliefs and returns a boolean whether or not this desire should be activated.
An example of desires is:
[
{
name: 'signup',
condition: beliefs => !beliefs.logged_in && beliefs.requested_signup,
fsm: 'signupMachine'
},
{
name: 'logout',
condition: beliefs => beliefs.requested_logout,
fsm: 'startupMachine'
}
]
- disablers: a JS list of belief items that should be removed when a particular machine is invoked (so not to keep activating the desire and re-loading the machine). Each of the disablers is a JS object with a machine name (string) and a JS object of beliefs that should be changed (disabled) when this machine is invoked. An example of disablers is:
[
{
machine: 'startupMachine',
changes: {
starting_up: false,
requested_logout: false,
}
},
{
machine: 'signupMachine',
changes: {
requested_signup: false,
}
}
];
3 months ago
8 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
2 years ago
2 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago