shadcn.io is not affiliated with official shadcn/ui
Translation Relay Chat Block for React Aria
A cross-language team thread where every message shows its original and its translation together: Kenji writes Japanese, Marta Spanish, and your English goes out as eight typed sample phrases that show what each of them sees.
Installation
Overview
Talk across languages without a switch, with this translation relay chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Bridgetalk, a chat for teams that work in several languages: you write in English, Kenji in Japanese and Marta in Spanish. Every Message shows two lines at once, the original in its sender's language and the translation in yours, with a language Badge by each name. What you send goes out as one of eight typed sample phrases, from the chips under the field or typed in full, and shows "Kenji sees:" and "Marta sees:" with the typed translation under your words; any other text sends with "No translation in this demo" and no second line. The composer's Shine Button, the only colored control, sends it, and a typing line shows before a reply. It's built from Badge, Button, Textarea, Message, Shine Button and Guides, with a CSS entrance only. For support desks, distributed teams and any pair of people who do not share a language.
FAQ
What stays in the page, and how do I make it real?
Everything. The eight phrases and their translations are typed in this file, the replies come from a short script, and nothing is sent or translated. To wire it for real, send the text and the sender's language to your translation service on each message, store both lines with the message, and pass them to the same two-line layout; the card already works from "original plus translation".
Which phrases get a translation?
Eight: Where is the meeting, Thank you, Can you send it today, I will be ten minutes late, Does that work for you, Let's talk tomorrow, The meeting is at ten, and I checked the notes. Six are chips under the field; typing one in full, with or without punctuation, works the same. Anything else is sent as typed and says it has no translation, rather than inventing one.
Why are both lines always visible?
Because a relay is two-way: people on both sides need to check what was said and what the other person will read. Nothing hides the original, and there is no reading-language switch. The sibling Message Translation block makes the translation a per-message choice instead.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, every message starts with a hidden sender and time, and the composer's status line announces what each action did. Each translated line carries its own page language so a screen reader pronounces Japanese and Spanish correctly, the chips are buttons in a named group, and they scroll sideways on a narrow screen.