Dynamic steps about react-simple-chatbot

[markmanx]

@lackdaz is correct, but just to show a simpler example, say you have 2 steps like so:

...
{
      id: 'staticStep',
      component: <Button />,
      waitAction: true
},
{
      id: 'dynamicallyReachedStep',
      message: 'This step was reached dynamically.'
}

You can use the hook called triggerNextStep (which is passed as a prop to your dynamic component) to reach any step you want. So to reach the second step you could have a component like so:

const Button = props => (
      <button onClick={() => props.triggerNextStep({trigger: 'dynamicallyReachedStep'})}>
        Click me to go to the next step
      </button>
);

[pravash02]

@lackdaz, Can you please give us an example of how you can add custom steps by reading user's input and then calling an API to interprete that and return a matching response from API

[lackdaz]

Hey just wanted to let you know that if you wanted to really use dynamic steps -- try passing the trigger via the TriggerNext function in custom components, it works and this is how I've managed to create 'dynamic' steps.

[lackdaz]

Hi @johncg182 , you can find the steps here: https://github.com/lackdaz/wdi-project4#reactsimplechatbot

And you can take a closer look at my codebase to see how its implemented. The trick is to pass your intended chat node as a trigger prop to the chatbot custom component that @LucasBassetti so elegantly provided. But just take note that longer conversations might run into memory issues.

[lackdaz]

the trick is to use custom components and the provided method triggetNext which overrides the the trigger specified when defining your steps.

Here is an example of how I used triggetNext to send the route to a step named 'Are you looking for a parcel? Sad' instead of the self.state.result which in this case was 'intent1'.

      if (tonesObj.Anger >= 0.5) {
        // this is the angry man condition
        self.setState({ loading: false, result: 'angry', show: 'Chill!' })
        self.triggetNext(self.state.result)
      }
      else if (entities && Object.keys(entities).length > 0 && entities.intent[0].value && tonesObj.Sadness >= 0.5) {
      self.setState({ loading: false, result: entities.intent[0].value })
      self.triggetNext('Are you looking for a parcel? Sad')
    }

and the step was defined as:

...
      {
        id: 'intent1',
        message: 'Hi {previousValue}!',
        trigger: 'intent'
      },
      {
        id: 'intent',
        component: <Wit_ai />,
        replace: true,
        waitAction: true,
        asMessage: true,
        trigger: 'askintent1'
      },
      {
        id: 'Are you looking for a parcel? Sad',
        message: 'I\'m sorry for your loss. We\'re trying our best to locate your parcel',
        trigger: 'Missing1'
      },
...

This way, you could get it to loop from intent to intent1 depending on your logical flow if that is your intent instead of having only a linear course for conversation.

I hope this was sufficiently clear!

[LucasBassetti]

Hi,

It is no possible create dynamic steps, but you can create a component step and render the content based on the previous steps. If you want render the component as a text message you can the element asMessage: true to that (Like this example).

[johncg182]

Hi @lackdaz were you able to get your custom components to add dynamic steps over and over, as in continuing the conversation until the user signals an end? Can you show how you added your 'dynamic' steps...thanks!

[GilbertMizrahi]

@lackdaz, I looked at https://github.com/lackdaz/wdi-project4#reactsimplechatbot, but I don't see how you pass the trigger dynamically on a component.

Can you elaborate?

[GilbertMizrahi]

@lackdaz, I don't really get it.

I don't know how to use the triggerNextStep prop. It expects a value and a trigger. I know what I need for the trigger, but not for the value.

You mentioned the triggetNext method, but I don't see it in the documentation.

Do you have an example of using the triggerNextStep?

[sangeetmukherjee]

Hello @lackdaz and @LucasBassetti Just going through the ways of creating the steps array dynamic for react simple chatbot. The way you used is a simple user input object block. Can I use the same way for a dynamic Options Array where every time I will get the count different for the no of options to select. (As per the response)
Can any body assist me for the same......provided the snippet below

for(let i=0;i<this.props.actionArray.length;i++){
let item= {
value: this.props.actionArray[i],
label: this.props.actionArray[i],
trigger: (input) => {
this.props.eventHandler(input.value);
return this.props.trigger
}
}
actionItems.push(item);
}
dynamicAddInSteps = {
id:this.props.trigger,
options:actionItems
};

steps.push(dynamicAddInSteps);

[sjain3097]

Hey just wanted to let you know that if you wanted to really use dynamic steps -- try passing the trigger via the TriggerNext function in custom components, it works and this is how I've managed to create 'dynamic' steps.

any example?

[louloub]

@lackdaz is correct, but just to show a simpler example, say you have 2 steps like so:

...
{
      id: 'staticStep',
      component: <Button />,
      waitAction: true
},
{
      id: 'dynamicallyReachedStep',
      message: 'This step was reached dynamically.'
}

You can use the hook called triggerNextStep (which is passed as a prop to your dynamic component) to reach any step you want. So to reach the second step you could have a component like so:

const Button = props => (
      <button onClick={() => props.triggerNextStep({trigger: 'dynamicallyReachedStep'})}>
        Click me to go to the next step
      </button>
);

It's work for me thank you

[Ganeshsharma36866]

HI @team

I'm using a custom header and using floating true. show's button on the bottom of the component and when i click on it a chat container is open . but don't know how I can minimize cross button click in the custom header component.

Please its urgent