FredrikOseberg / react-chatbot-kit

MIT License
301 stars 141 forks source link

Loading message from History #39

Open dtcyad1 opened 3 years ago

dtcyad1 commented 3 years ago

Hi Fredrik,

I have come across an unusual issue. When we save message and then click on the button to open the chat again, all the messages with widgets are essentially re-run to create the widgets. However - for widgets like the WidgetDocs with InformationBox, then end result is that the InfoBox will pop up - although it was a past message. Is there a way to not "render" the old messages?

On a similar note, for widgets like forms with submit buttons, i guess we could make use of the state info and have some logic in there that if there are filled values, then have the submit button greyed out.For this to work, we will need to have the form fields as part of the state info in the config.js?

Thanks

FredrikOseberg commented 3 years ago

Hi Fredrik,

I have come across an unusual issue. When we save message and then click on the button to open the chat again, all the messages with widgets are essentially re-run to create the widgets. However - for widgets like the WidgetDocs with InformationBox, then end result is that the InfoBox will pop up - although it was a past message. Is there a way to not "render" the old messages?

On a similar note, for widgets like forms with submit buttons, i guess we could make use of the state info and have some logic in there that if there are filled values, then have the submit button greyed out.For this to work, we will need to have the form fields as part of the state info in the config.js?

Thanks

You're right. Because the widgets are plain javascript functions they will execute again when rendered into the chatbot. This is based on have javascript works at the core. I've been trying to think of ways to handle this elegantly.

One thing we could try is to attach metadata to the widgets that define whether or not they have been rendered, which would update to true when the widget is dropped into the chat. You'd still have to implement logic for what the widget is supposed to do, but you could have two different execution paths in your widget based on that information.

I'd love to hear ideas on this.

dtcyad1 commented 3 years ago

Hi Fredrik,

I was thinking on the same lines - to have some sort of a flag. Would it be possible to save this flag as part of the message so when the chatbot is reloaded, each widget can get this flag and then decide what they want to do. That way, we don't need to add things to the state object in the config.js file. By default, all messages that get rendered the first time will have this flag set. Also, those widgets that don't need this flag will not have to do anything!!

Thanks

FredrikOseberg commented 3 years ago

Hi Fredrik,

I was thinking on the same lines - to have some sort of a flag. Would it be possible to save this flag as part of the message so when the chatbot is reloaded, each widget can get this flag and then decide what they want to do. That way, we don't need to add things to the state object in the config.js file. By default, all messages that get rendered the first time will have this flag set. Also, those widgets that don't need this flag will not have to do anything!!

Thanks

It could work. Another option that perhaps is more elegant if you truly trust the source is to save the messages as strictly rendered HTML, and inject the HTML into the chatbot message container once it boots up if it receives a string. That way we can guarantee that javascript does not evaluate the messages array and execute the widgets, it would only render out strict HTML.

That will allow you to keep the existing widget structure and not do any extra work in the widgets.

What do you think of this option?

dtcyad1 commented 3 years ago

Hi Fredrik,

Brilliant!!! - Love this approach!! - Thanks for taking the time to look into this.

Thanks