Skip to content

feat(i18n): RTL layout support (Arabic, Hebrew) #11

Description

@AimTune

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

  • 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions