Chatbot input field: Support overriding of individual attributes per steps

[Cyclodex]

Goal

We wanted to have several changes to the user input field, according to the step we are on.
Similar to the hideInput feature or metadata, but we wanted to have flexible access to override the input-fields attributes. This basically to reach 2 goals:

1. Use autofill/autocomplete feature of browsers so user could select their data (firstname, lastname, email, phone etc)
2. Use correct keyboard layout on mobile phone depending on the type of input (tel, email etc.)

Changes

• I added the possibility to add an object inputAttributes to the steps and a default on the chatbot itself. This makes it a bit more flexible to add whatever attributes are needed.
• This would make it also possible to override the placeholder, however I kept the placeholder feature separate and as is.

Test

I also added some tests for testing the feature / schemas

Usage example

We can now set individual attributes on the input, like:

• type
  • tel: Shows telephone keyboard layout (mobile)
  • email: Show email keyboard layout (mobile)
• autocomplete:
  • firstname, lastname, tel, email etc. (browser which support autofill/autocomplete will show users saved data)

Chatbot steps examples

Lastname

{
    id: 'Lastname',
    placeholder: 'Lastname',
    user: true,
    inputAttributes: {
      name: 'lastname',
      autoComplete: 'family-name',
    },
    trigger: 'next',
  },

Email

{
    id: 'Email',
    placeholder: 'Email',
    user: true,
    inputAttributes: {
      type: 'email',
      name: 'email',
      autoComplete: 'home email',
    },
    trigger: 'next',
  },

Phone

{
    id: 'Phone',
    placeholder: 'Phone',
    user: true,
    inputAttributes: {
      type: 'tel',
      name: 'tel',
      autoComplete: 'tel',
    },
    trigger: 'next',
  },

Chatbot component example

Initial / Global settings
You can globally set any attributes on the input field using the inputAttributes prop on the ChatBot Component:

const inputAttributes = {
  autoComplete: 'firstname',
};

...

<ChatBot
    steps={steps}
    inputAttributes={inputAttributes}
/>

Feature Sponsored by

This feature/PR is sponsored by the company I work: Garaio AG

[Cyclodex]

To show what this makes possible:

Autofill/Autocomplete

Keyboard layout

[LucasBassetti]

Loved that! Thank you @Cyclodex!