Ability to keep user input enabled while buttons are displayed

[ninele7]

Description

Sometimes, when I ask user a question, it can require an additional explanation. So I want to let user type his message, but if he didn't quite understand my question he may use help button and get more info about question. Or in other case, I can suggest most common answers to my question but leave user with ability to type his answer.

For first case I see variant of allowing typing both user: true and options: [*] in the same block, so if user just type his answer default trigger will be used, but if user select on of the buttons, button trigger will be active. For second case I think that buttons should work simulary to first situation, but shouldn't have they own trigger and use main trigger of the step.

[LucasBassetti]

Hi,

I just create a new release v0.3.2 and add a new prop for each step name metadata. This props is an object that enable you add any custom data that can be use that is useful in your chat.

So, with that you can create some like that:

import React, { Component } from 'react';

class Help extends Component {
  componentWillMount() {
    const { previousStep } = this.props;
    const { metadata = {} } = previousStep;
    const trigger = previousStep.value === 'help' ? 'help-message' : metadata.triggerNext;

    this.props.triggerNextStep({ value: metadata.triggerNext, trigger });
  }

  render() {
    return null;
  }
}

class HelpMessage extends Component {
  componentDidMount() {
    const { previousStep } = this.props;
    this.props.triggerNextStep({ trigger: previousStep.id });
  }

  render() {
    return (
      <div>
        Help Message
      </div>
    );
  }
}

const steps = [
  {
    id: '1',
    message: 'Some Question. Type "help" if you need help',
    trigger: '2',
  },
  {
    id: '2',
    user: true,
    trigger: 'help',
    metadata: {
      triggerNext: '3',
    },
  },
  {
    id: 'help',
    replace: true,
    component: <Help />,
    delay: 8,
    waitAction: true,
  },
  {
    id: 'help-message',
    component: <HelpMessage />,
    asMessage: true,
    waitAction: true,
  },
  {
    id: '3',
    message: 'End',
    end: true,
  },
];

const Example = () => (
   <ChatBot steps={steps} />
);

Basically. If user type "help" he will receive a help message and will be able to type again after that.

[vinayprajapatiaurotfp]

@LucasBassetti would be great if you could update the documentation with same.

[LucasBassetti]

I just did :)

[Cyclodex]

Buttons & User Input Actually was also looking for the possibility as asked in this issue here: Having an option to allow user input, even if we show options. For cases like: Yes, No options, one may simply type this as well. Or could we at least update the "input placeholder" during options? So we could write "Please select an option" ?

Metadata: I am just testing this new feature, which would allow me to save some custom data. It works when using the previousStep prop, if you are in the next step... However when I later in the process look at the steps within a custom component, the "metadata" is not within the props.steps (only the id, message and value), is this by reason or would this be another feature request ?

Or how would you safe a custom data and access it later again as easy as possible with your simple-chatbot?

Thx for your component, I will give you some beers, I am just developing a small but real client project with this component. Might have some more request we can talk about...

[LucasBassetti]

I just add the v0.3.3 with the placeholder prop in the steps schema. Now you can do:

{
  id: '1',
  placeholder: 'Please select an option',
  options: [
        { value: 'op1', label: 'Option 1', target: '2' },
        { value: 'op2', label: 'Option 2', target: '3' },
   ],
}

[Jaikant]

Is there a way to have the option step and user input enabled simultaneously. The option step does not have a user prop.