BoCode-AppChat-React

An AppChat API library useful as interface for your React application.

Installation

Install the component in your project:

npm i bocode-chatbot-react --save

Usage

Import the component into your project:

import { AppChatProvider } from 'bocode-chatbot-react';

Use the component AppChatProvider as parent of your application as below:

<AppChatProvider>
    <YourComponentApp/>
</AppChatProvider>

Example-App

Let's go to define your component <YourComponentApp/> :

Import the AppChat UI and AppChatContext components:

import { AppChat, AppChatContext } from 'bocode-chatbot-react';

Define the AppChat context in this way:

 const { appchat } = useContext(AppChatContext);

It's possibile to create a custom InputDevice as the following InputNumberDevice:

export const InputNumberDevice: React.FC<InputInterfaceProps> = props => {

  const { value, onOutput, onEnterPressed, onError } = props;
  const [errorMessage, setErrorMessage] = useState('');

  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    const isError = Number(val) < 0 ? true : false;
    const updatedValidationStatus = {
      canSend: true,
      isError: false,
      message: '',
    };

    if (isError) {
      updatedValidationStatus.isError = true;
      updatedValidationStatus.message = 'The value ' + val + ' must be greater or equal of zero';
      setErrorMessage(updatedValidationStatus.message);
      onError(updatedValidationStatus);
      onOutput([val, val]);
    }
    else {
      setErrorMessage('')
      onError(updatedValidationStatus);
      onOutput([val, val]);
    }

  }, [onOutput, onError]);

  const handleEnter = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {

    if (e.key === 'Enter') {
      e.preventDefault();
      onEnterPressed();
    }

  }, [onEnterPressed]);

  return (
    <div css={styles['input-device']}>
      <input type="number" name="input" onKeyDown={handleEnter} value={value} onChange={handleChange} />
      <label className='name'>Number</label>
      <p className='error'>{errorMessage}</p>
    </div>
  );
};

Use the following API methods to interface with the AppChat:

    appchat.say('Hello World');
    appchat.question('What is your name ?').ask();
    appchat.question('Question with YesNo').yesNo().ask();
    appchat.question('Question with YesNo').yesNoCancel().ask();
    appchat.question('What is your favourite color ?').withOptions(options).singleChoice().ask();
    appchat.question('What is your favourite color ?').withOptions(options).multipleChoice().ask();
    appchat.question('How old are you ?').with(InputNumberDevice).ask();

Example-App (code)

import './app.css';

import React, { useCallback, useContext, useState, useEffect } from 'react';
 
import { AppChat, AppChatContext, AppChatAnswer, AppChatOptions } from 'bocode-chatbot-react';
 
export const YourComponentApp = () => {
  const { appchat } = useContext(AppChatContext);
  const [sidebar, setSidebar] = useState(true);
 
  const handleSidebar = useCallback(
    (open: boolean | null = null) => {
      if (!!open) {
        setSidebar(open);
      } else {
        setSidebar(!sidebar);
      }
    },
    [sidebar],
  );
 
  useEffect(() => {
    appchat.onBefore(() => {
      handleSidebar(true);
    });
  }, [handleSidebar, appchat]);
 
  const handleOnClick = useCallback(async () => {
    let currentAnswer: AppChatAnswer;
 
    currentAnswer = await appchat.question('What is your name ?').ask();
 
    if (!currentAnswer.hasBeenCancelled) {
      currentAnswer = await appchat
        .question('What is your lastname ?')
        .skippable()
        .ask();
 
      if (!currentAnswer.hasBeenCancelled) {
        currentAnswer = await appchat
          .question('How old are you ?')
          .skippable()
          .ask();
        if (!currentAnswer.hasBeenCancelled) {
          //continue...
        }
      }
    }
  }, [appchat]);
 
  const handleOnClickOption = useCallback(async () => {
    let currentAnswer: AppChatAnswer;
 
    const options: AppChatOptions[] = [
      { name: 'red', value: 'rosso' },
      { name: 'white', value: 'bianco' },
      { name: 'green', value: 'verde' },
    ];
 
    currentAnswer = await appchat
      .question('What is your favourite color ?')
      .withOptions(options)
      .singleChoice()
      .ask();
    if (!currentAnswer.hasBeenCancelled) {
      //continue...
    }
  }, [appchat]);
 
  const handleOnClickMultipleOption = useCallback(async () => {
    let currentAnswer: AppChatAnswer;
 
    const options: AppChatOptions[] = [
      { name: 'red', value: 'rosso' },
      { name: 'white', value: 'bianco' },
      { name: 'green', value: 'verde' },
      { name: 'maroon', value: 'marrone' },
      { name: 'grey', value: 'grigio' },
      { name: 'orange', value: 'arancione' },
      { name: 'white', value: 'bianco' },
    ];
 
    currentAnswer = await appchat
      .question('Which are your favourite colors ?')
      .withOptions(options)
      .multipleChoice()
      .ask();
 
    if (!currentAnswer.hasBeenCancelled) {
        currentAnswer = await appchat
          .question('How old are you ?')
          .with(InputNumberDevice)
          .ask();
        if (!currentAnswer.hasBeenCancelled) {
              //continue...
        }    
    }
  }, [appchat]);
 
  const handleOnClickYesNo = useCallback(async () => {
    let currentAnswer: AppChatAnswer;
 
    currentAnswer = await appchat
      .question('Are you happy ? (Yes No Cancel)')
      .yesNoCancel()
      .ask();
 
    if (!currentAnswer.hasBeenCancelled) {
      currentAnswer = await appchat
        .question('Are you happy ? (Yes No)')
        .yesNo()
        .ask();
    }
    if (!currentAnswer.hasBeenCancelled) {
      //continue...
    }
 
  }, [appchat]);
 
  return (
    <div className="app">
      <div className={'app__sidebar' + (sidebar ? ' open' : '')}>
        <AppChat />
      </div>
      <div className="app__content">
        <button className="btn" onClick={handleOnClickYesNo}>
          YesNo yesNoCancel
        </button>
        <button className="btn" onClick={handleOnClickOption}>
          Single Options
        </button>
        <button className="btn" onClick={handleOnClickMultipleOption}>
          Multiple Options
        </button>
        <button className="btn" onClick={handleOnClick}>
          Ask me some question
        </button>
        <button className="btn" onClick={() => handleSidebar()}>
          Toggle sidebar
        </button>
      </div>
    </div>
  );
};

Resources

Icons: https://www.flaticon.com/packs/interface-icon-assets