shadcn.io is not affiliated with official shadcn/ui
Message Translation Chat Block for Solid
A booth team's group thread in four languages: each message carries a language badge, and a Translate toggle on the German, Spanish and Japanese ones opens the typed English underneath with a Translated from label.
Installation
Overview
Let readers translate one message at a time, with this message translation chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Interlace, a chat for multilingual teams: you write in English and three colleagues write in German, Spanish and Japanese. Each Message sits in a Bubble in its sender's language with a language Badge beside the name, and every message in another language carries its own Toggle, "Translate", that opens the typed English underneath with a "Translated from German" label and closes it again. Your own messages need none, and there is no switch for the whole thread. The composer's Shine Button, the only colored control, sends what you type, and a typing line shows before a reply that arrives in its sender's language with its English ready behind the toggle. It's built from Toggle, Badge, Message, Bubble, Shine Button and Guides, with a CSS entrance only. For international teams, communities and any group where people choose when to translate.
FAQ
What stays in the page, and how do I make it real?
Everything. The originals and their English are typed next to each message in this file, the replies come from a short script, and nothing is sent or translated. To wire it for real, store each message's original text and language, call your translation service when a reader presses Translate, cache the result per message and language, and pass it to the same card. The toggle and the label already work from "original text plus translated text".
Can I translate the whole thread at once?
Not in this block: each message is its own choice, so a reader opens only the ones they need. The sibling block Language Selector chat sets one reading language for every message; use that when everyone should read the same language.
Are the translations computed?
No. They are typed, labelled samples, so what you see is always the same and no model or service runs. The wording of a real translation will differ, which is why the label says "Translated from" and the original stays visible above it.
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. The Translate toggles are real buttons with a pressed state, named with the language and the sender ("Translate German message from Wiebke Sandmann"), and each original is marked with its page language so it is pronounced correctly.