feat: RTL support

[liorkesos]

Is your feature request related to a problem? Please describe.
To enable multi-lingual support for Arabic , hebrew , Farsi etc most apps have RTL capabilities.
This is needed for optimal experience for these languages

Describe the solution you'd like
The CSS implementation needs to know that certain languages should have a RTL layout

[justinh-rahb]

Great idea, a PR would be welcomed!

[liorkesos]

I'll issue a PR for the hebrew translation and see how I can bring them both to a stage where they give a good hebrew user experience.

[liorkesos]

Basic RTL can be easily added if we map certain languages to RTL and than push dir="RTL" to the HTML tag.
That does a decent job (I checked it in my browser)
tailwind implicit RTL support lets us yuse the rtl and ltr modifiers.
The only thing I don't know is how to inject the class or attribute based on a certain trigger (choice of lang)
If anybody can give me the basic direction I can attempt to implement.

[LebToki]

Here's a possible solution:

First, you need to detect the chosen language and store it in a variable.
You can use the navigator.language property or a library like i18n-js to detect the language.

Once you have the chosen language, you can use JavaScript to add the dir attribute to the HTML tag.
You can use the setAttribute method to add the attribute.
To use the Tailwind classes, you need to add the rtl or ltr class to the HTML tag based on the chosen language. You can use the classList.add method to add the class.

Here's some code to get you started:

// Detect the chosen language
const language = navigator.language || navigator.userLanguage;

// Add the dir attribute to the HTML tag
document.documentElement.setAttribute('dir', language === 'ar' || language === 'he' ? 'rtl' : 'ltr');

// Add the Tailwind classes
document.documentElement.classList.add(language === 'ar' || language === 'he' ? 'rtl' : 'ltr');

This is also try that then we can pass font-family and css property to get things shape up

[idomamia]

Hey, I've recently started developing something similar.
In the settings, under the "Interface" section, I implemented a toggle button that allows users to switch between LTR and RTL layouts.
Additionally, I thought it would be useful to restrict the RTL layout to only apply to the Chat section (Code blocks will always remain LTR). What are your thoughts on this?

Here's a gif of my implementation: