feat: tbot animation improvements

[corquaid]

Description

• Add animations to the TBot
• Add simple Onboarding as a Proof-of-concept for using TBotPrompt there
• Add react-devtools

Motivation and Context

189

How Has This Been Tested?

yarn test

https://www.loom.com/share/cc25a4d60aea40fb979d8ccab6970332

[tomaszantas]

TBot usage:

<TBotPrompt
  open={true}   //  -> open/show TBot
  messages={messages}  // -> list of messages
  floating  // -> make tbot floating in the right-bottom corner
  currentIndex={3} // -> render first 3 messages right away
/>

Onboarding and home screen are using the same TBot. Differences are:

1. Home screen uses floating property, onboarding don't.
2. Home screen reads messages and open from the Redux. Onboarding handles messages by itself.

Common scenarios

Skip next X messages

If you set currentIndex to the index of the given message on messages list, it will jump to that message skipping animations.

Wait for the user action

1. The last message on the messages list is a React Component containing the Button with a given onClick function.
2. onClick function can trigger any action. When action is completed, you can push new items to the messages.
3. TBot will recognise that messages list has changed, and will render newly added messages.