You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Make Chativa render correctly in right-to-left languages (Arabic, Hebrew, Persian, Urdu) so the upcoming `ar` / `he` translations don't ship into a broken layout.
Background
The widget today is hardcoded LTR: message bubbles align left/right by sender, the composer's send button sits on the right, the chat-launcher FAB is positioned bottom-right, and emoji picker / typing indicator / survey screens all assume LTR. Translating strings is necessary but not sufficient — under `dir="rtl"` the layout has to mirror.
Scope
Add RTL support across `@chativa/ui` and `@chativa/genui`. Track translation work in #10.
Detection / wiring
Maintain a list of RTL languages (`ar`, `he`, `fa`, `ur`) somewhere in core or ui.
When the active i18next language changes, set `:host([dir]="...")` on the root chat element so all internal CSS can use `[dir="rtl"]` selectors.
Allow user override via `<chat-iva dir="rtl">` on the host element.
CSS
Audit every rule using `left` / `right` / `margin-left` / `padding-right` / `text-align: left|right` / `transform: translateX(...)`. Replace with logical properties: `inset-inline-start`, `margin-inline-start`, `text-align: start`, etc.
Fixed-position overlays (chat-launcher FAB, fullscreen close button, search clear button) must mirror.
Avatar + bubble alignment: bot on the inline-start, user on the inline-end. (Today this is left/right.)
Send button + attach button order in the composer must mirror.
Emoji picker, slash command picker, typing indicator dots, scroll-to-bottom button — all need a pass.
Survey screen: rating stars rendered LTR even in RTL UIs (this is the conventional rule), but labels and buttons mirror.
Components beyond CSS
Animations: slide-in / slide-out for the widget panel currently translates X — flip the sign under RTL.
Virtualized message list (`@lit-labs/virtualizer`) — confirm it handles RTL container correctly; file a workaround if not.
Markdown links / numbers inside RTL text should render as bidi-isolated (``) where needed.
Tests
Add a Vitest suite that mounts the widget under `dir="rtl"` and asserts a few key style/layout invariants (e.g. send button is at `inline-end`).
Manual visual QA: capture sandbox screenshots in EN, AR, HE.
Acceptance
Switching the language switcher to `ar` (or setting `dir="rtl"`) flips the entire UI cleanly: no half-mirrored components, no overflow into the wrong edge.
LTR languages render unchanged.
The fix is structural (logical CSS properties), not a per-language hack.
Notes
A subset of GenUI components may need their own pass — the built-ins (form, appointment, rating, date picker) should be covered here; user-supplied custom GenUI components are the user's responsibility, but the docs page should call this out.
Goal
Make Chativa render correctly in right-to-left languages (Arabic, Hebrew, Persian, Urdu) so the upcoming `ar` / `he` translations don't ship into a broken layout.
Background
The widget today is hardcoded LTR: message bubbles align left/right by sender, the composer's send button sits on the right, the chat-launcher FAB is positioned bottom-right, and emoji picker / typing indicator / survey screens all assume LTR. Translating strings is necessary but not sufficient — under `dir="rtl"` the layout has to mirror.
Scope
Add RTL support across `@chativa/ui` and `@chativa/genui`. Track translation work in #10.
Detection / wiring
CSS
Components beyond CSS
Tests
Acceptance
Notes