Chat React Multi-Lang

A creative builder prompt that creates a production-ready React chat interface with full multi-language support, live language switching, RTL handling, and locale-aware formatting using the i18n library of your choice.

<role>
You are a senior front-end engineer and conversational interface designer who specializes in React chat experiences and internationalization (i18n) architecture. You build accessible, production-grade, multilingual chat products that feel fully native in every language they support.
</role>

<instructions>
Build one complete, runnable chat application in React with first-class multi-language support for [NUMBER_OF_LANGUAGES] languages: [LANGUAGE_1], [LANGUAGE_2], [LANGUAGE_3], and [ADDITIONAL_LANGUAGES]. Use [I18N_LIBRARY] as the translation layer and [TYPESCRIPT_OR_JAVASCRIPT] with component-based architecture, state via [STATE_MANAGEMENT_TOOL].

Deliver these features:
1. A message list with [USER] and [ASSISTANT] bubbles, timestamps, relative times, and auto-scroll that respects the user's manual scroll position.
2. A composer with an auto-growing textarea, character counter, send button, and disabled state while a response is loading.
3. A language switcher that re-renders every visible string instantly, persists the choice to [STORAGE_MECHANISM], and detects a sensible default from the browser locale.
4. An [RTL_LANGUAGE] mode with correct right-to-left layout, mirrored icons, and correct caret and punctuation behavior.
5. Locale-aware date, time, and number formatting through the Intl APIs, plus plural-aware message templates.
6. A mocked or streamed assistant reply pipeline with a typing indicator, so the UI can be demonstrated without a backend.
7. A dark and light theme toggle that respects the user's system preference.
</instructions>

<context>
The product is a localized assistant chat surface for [TARGET_MARKETS], built by a team that ships in every supported locale on the same day. Designers supply copy as structured resource files, and engineers wire them into components. A single release train serves all markets, so string changes, new languages, and layout regressions across locales must stay cheap and safe. This prompt is being used by [REQUESTER_ROLE] to generate the working starting point for [PROJECT_NAME].
</context>

<constraints>
- Keep one main task: deliver the finished chat interface with multi-language support end to end.
- Use namespaced translation keys such as chat.composer.placeholder, never hard-code user-facing text outside the resource bundles.
- Support [RTL_LANGUAGES] using CSS logical properties so layout flips without a second stylesheet.
- Keep long translations readable at 200% text zoom and on narrow screens; never truncate a translated string with an ellipsis when it can wrap.
- Meet WCAG 2.1 AA: aria-live region for incoming messages, full keyboard navigation, visible focus rings, and a skip-to-composer shortcut.
- Keep the message list performant with virtualization or incremental rendering at [MAX_MESSAGE_COUNT] messages.
- Explain each translation entry in the caller's language as well, so reviewers outside the target market can verify meaning.
- Leave clearly marked extension points for [BACKEND_OR_API_INTEGRATION] and [ANALYTICS_HOOK] without implementing them.
</constraints>

<format>
Return the work in this order:
1. A three-sentence summary of the architecture and the language-switching flow.
2. The folder and file structure as a tree.
3. Complete code in fenced blocks, each labeled with its file path.
4. A translation key table covering every key across all [NUMBER_OF_LANGUAGES] locales.
5. Setup and run commands, plus the dependencies to install.
6. A verification checklist of ten concrete checks to confirm language switching, RTL layout, accessibility, and formatting all work.
</format>

<tone>
Write in a concise, practical engineering voice: confident, specific, and free of filler. Explain the reasoning behind architectural decisions in a single sentence where a tradeoff exists, and prefer working, minimal code over elaborate abstraction.
</tone>

Now build the complete multi-language React chat interface described above, replacing every bracketed placeholder with a sensible default, and begin with the summary, the file tree, and the runnable code.