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, on } = useContext(AppChatContext);

Use the following API methods to interface with the AppChat:

    appchat.say("Hello World");
    appchat.question('Question with YesNo').yesNo().ask();

Example-App (code)

import React, { useCallback, useContext, useState, useEffect } from 'react';

import { AppChat, AppChatContext } 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) {
      //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