shadcn.io is not affiliated with official shadcn/ui
AI Translation Comments Block for React Aria
Three customer comments in French, Spanish and Japanese with a Show English toggle, a select of four typed replies and a composer that shows what you wrote beside what they will read before it posts.
Installation
Overview
Answer customers in their own language, with this translated reply desk for React with React Aria. A compact header introduces three open conversations, and one hairline frame holds them in a labelled scroll region that keeps its height. Each comment is in its original language with a language tag; a Toggle, Show English, swaps in the English text without moving anything, because both texts share one cell. Under each comment a Native Select offers four typed replies. Choosing one fills the composer's two cells, "You wrote" in English and "They will read" in the customer's language, and the one Shine Button posts the translated reply under that comment, with your English words under it. It is built from Toggle, Native Select, Shine Button, Badge, Avatar and Guides, with a CSS entrance only. For support desks, community managers and any team that answers in many languages.
FAQ
Is anything translated live?
No. BOOK is a phrase book written by hand: four replies in French, Spanish and Japanese, and the block says "Phrase book in this demo; nothing is translated live." The English versions of the customers' comments are typed too. To use a translation service, replace textOf(code, phrase) with a call that returns the reply in the customer's language, show the result in "They will read" before posting, and keep the English original with the posted reply so your team can read the thread.
How do I add a language or a phrase?
Add the language code to NAMES and NATIVE, add the customer comment with its code, original text and English version to COMMENTS, and add one entry to BOOK for each phrase in PHRASES (the key is the language code, a dash and the phrase id). A phrase with no entry in a language shows an empty "They will read" cell, so fill every pair before shipping.
What stays local?
Everything. A posted reply is added to a list in the page, shown under its comment and announced as "Posted in French, in this demo. Nothing was sent." In a real app, send the reply in the customer's language, store both texts and the language code, and let a speaker of that language review replies for important accounts.
Is it accessible?
Each text carries its language (lang), so a screen reader switches voice for the French, Spanish and Japanese. Show English is a toggle button that keeps its name and reports its pressed state; the select is named for the customer it answers ("Reply to Margaux Delisle with"). A missing choice is a message in a line that is always in place, and the status region speaks each choice and each post. React Aria's Toggle follows the same name and state; its press events are the only difference you will see in the code.