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'
    }
]

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