Multi Language Support

[dtcyad1]

Hi Fredrik,

Really great app!! I am trying to add multi language support. How can i change the orientation of the input text field to be from right to left instead of left to right(default)? I can do that permanently by adding this in the App.js

.react-chatbot-kit-chat-input-form { direction: rtl; }

However, it needs to be dynamic. It needs to change based on whatever the language code is set to in the browser. I can set a prop like so in the config.js.

direction:(navigator.language || navigator.userLanguage)=='ar'?'rtl':'ltr',

While I can read that property and make use of it in the ActionProvider.js, I cannot use this to set the above css property and override the default:

Please let me know if there is any way to achieve this. Thanks

[dtcyad1]

Hi Fredrik,

this change in the index.js seems to work fine

if ((navigator.language === "ar") || (navigator.userLanguage === "ar")) { document.getElementsByClassName('react-chatbot-kit-chat-input-form')[0].style.direction='rtl'; }

Let me know if this is correct or you have some other suggestion.

Thanks

[FredrikOseberg]

Hi Fredrik,

this change in the index.js seems to work fine

if ((navigator.language === "ar") || (navigator.userLanguage === "ar")) { document.getElementsByClassName('react-chatbot-kit-chat-input-form')[0].style.direction='rtl'; }

Let me know if this is correct or you have some other suggestion.

Thanks

Hey! Sorry, not sure I got it. Does the code above solve your problem in the parent application?

[dtcyad1]

Hi Fredrik, yes that solves my issue. But i wanted to check and see if there is anything that you recommend that should be used as the correct way - instead of my fix.

Thanks

[dtcyad1]

You can close out the issue if you think this is good.

Thanks!!

[FredrikOseberg]

You can close out the issue if you think this is good.

Thanks!!

I think it's completely fine to do it like that :)