tjtanjin / react-chatbotify

A modern React library for creating flexible and extensible chatbots.
https://react-chatbotify.com
MIT License
167 stars 79 forks source link

[Feat] Possibility to apply input masks #64

Closed nellysbr closed 4 months ago

nellysbr commented 4 months ago

Is your feature request related to a problem? Please describe.

It's a good practice to sanitze input fields on any type of input. So for example, when the bot asks a name, the user can't type numbers or when the bot asks a phone number, the user can't type letters and have a limited characters to type (we can use regexe for this and apply input maks).

Describe the solution you'd like

For phone example, something like this:

image

Describe alternatives you've considered

I think the easiest way to implement this would be to allow the developer to implement custom regex in the bot's input. However, the ideal way would be to allow the user to use their own input component instead of the bot's current input.

tjtanjin commented 4 months ago

Hey @nellysbr! Supporting custom components directly to replace portions of the chatbot is a little tricky, as the chatbot has quite a fair bit of logic spanning across components. In v2.0.0, we try to improve the situation a little by allowing custom buttons and its re-arrangement in headers, footers and chat input - but that's not very helpful for your issue at hand 😥

At present, the input area functions much like your typical messaging apps (Whatsapp, Telegram) or LLMs (ChatGPT, Gemini) where there isn't a built-in validation feature while users are typing. That said, input validation for the chatbot is currently done only after the user submits the message.

I can see how doing validation within the text area can make things simpler, perhaps by providing users with an inputValidator prop in each block. However, that also means I need to re-look at how to design the chat input area (where should error messages go, how should this be provided as options to users etc). It'll take some time before I can see how best to approach this but I'll try. In the meantime, feel free to suggest ideas!

nellysbr commented 4 months ago

❤️