shadcn.io is not affiliated with official shadcn/ui
Language Selector Chat Block for Vue
A narrow support thread with a language Select in the top bar: incoming messages show their typed translation with a translated-from badge and a per-message Show original toggle, and an order card formats its total and date for the chosen locale.
Installation
Overview
Let people read a conversation in their own language, with this language selector chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Lingoholm, a messaging service: two colleagues write from the global desk, one in Spanish and one in French, and a Select in the top bar sets the language you read in (English, Español, Français). Every incoming Message shows its typed translation with a "Translated from French" Badge and a Toggle that swaps that one message back to the words it was written in; messages in the language you picked carry neither, and yours stay as typed. An order card in the thread writes its total and delivery date with the formats of the chosen language (12,345.50 or 12.345,50, and the date order). The composer's Shine Button, the only colored control, sends what you type, and a typing line shows before a typed reply. It's built from Select, Badge, Toggle, Message, Shine Button and Guides, with a CSS entrance only. For support desks, marketplaces and any chat between people who do not share a language.
FAQ
What stays in the page, and how do I make it real?
Everything. The translations are typed next to each message in this file, the replies come from a short script, and nothing is sent. To wire it for real, keep each message's original text and its language, call your translation service when the reader's language changes (or when a message arrives), cache the result per message and language, and pass it to the same line. The badge and the Show original toggle already work from "original text plus translated text".
How are the price and the date formatted?
With the browser's own Intl number and date formatters, set to a fixed locale per language (en-US, es-ES, fr-FR), so the same 12,345.50 euros reads as 12,345.50, 12.345,50 or 12 345,50 and the date follows the local order. They are filled in after the page mounts, with a dash first, because the server and the browser can write the same number slightly differently. The line under the card names the locale in use.
How does Show original work?
It is a toggle on each translated message. Pressed, that one bubble shows the words as the colleague wrote them and the badge reads "Original in French"; pressed again, it returns to the translation. Changing the reading language starts every message back on its translation, and the page language of each bubble is set so a screen reader pronounces it correctly.
Does the rest of the interface change language?
No. Only the conversation is translated: the buttons, labels and status line stay in English so you can see exactly what is and is not translated. To translate the interface too, run your own strings through your usual message catalogue and keep this block for the thread.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and every message starts with a hidden "Joaquim Barros, 09:36". The Select opens with the keyboard like any select, the toggles have names such as "Show original, French, message from Emeric Fontaine", and a change of language is announced by the status line under the composer.