Chat thread
betaThe canonical message bubble: incoming/outgoing, attachments inside, meta (avatar, name, time, delivery state, actions) below. Used by chats and the e-mail conversation view.
Canon 17 Oct 2026 (owner decision): bubble from prototype proto/mail-konverzace@6355a0399 (.kvb-*) replaces the K7-4 chat bubble (accent-tint, meta inside). Incoming --line-100, outgoing solid --accent; --radius-xl with --radius-xs sender-side corner; padding --sp-3 --sp-5; attachments inside under the text; meta below; max 80% (phone 85%). Voice/video outgoing stays on --accent-tint (follow-up). History: K7-4 (acrm !4447), AD review 2 Oct 2026, sending/failed states (!4514), published = meta text only (13 Oct 2026). Registry repaired 17 Oct 2026 (review F2): removed classes with no CSS definition and no TSX use on main: .cht-bubble, .cht-atts, .cht-att, .cht-who, .cht-link. Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories.
Used in 2 files · 2 areas · 3× — components/mail, pages/komunikace
Import
import { ChatThread, ChatBubble } from '@acrm/ui'Props
ChatThread packages/ui/src/components/ChatThread.tsx
| Name | Type | Default | Description |
|---|---|---|---|
ariaLabel * | string | — | Přístupný popisek vlákna (jméno protistrany) — aria-label na role="log". |
children * | ReactNode | — | — |
ChatBubble packages/ui/src/components/ChatThread.tsx
| Name | Type | Default | Description |
|---|---|---|---|
text | ReactNode | — | Obsah bubliny — prostý text (víceřádkový, white-space: pre-wrap) NEBO hotový uzel (odstavce, tučné, HTML přes dangerouslySetInnerHTML s již sanitizovaným obsahem — pak dej rich). Prázdný/null text se nekreslí (bublina jen s přílohou). |
rich | boolean | — | true = obsah je formátovaný (odstavce <p>, tučné…): vypne pre-wrap a mezi odstavce dá mezeru. |
clampLines | number | — | Zkrátí text na tolik řádků (zbytek skrytý); expanded zkrácení zruší. Přepínač „Zobrazit vše / méně" dodá hostitel (more). |
expanded | boolean | — | true = zkrácený text je rozbalený. |
textRef | Ref<HTMLDivElement> | — | Ref na element s textem — hostitel podle něj zjistí, jestli se zkrácení uplatnilo (scrollHeight). |
time * | string | — | Čas zprávy, UŽ naformátovaný hostitelem (např. „9:12"). |
out * | boolean | — | true = odchozí (naše strana) — zarovná doprava, plná akcentní bublina. false = protistrana. |
fromLabel * | string | — | Kdo zprávu poslal, UŽ přeloženo hostitelem (např. „Já" / „Jan Novák"). Vykreslí se jako sr-only (.acrm-sr) prefix PŘED bublinou — NE přes aria-label (u víceřádkového textu by přebil reálný DOM obsah, nešel by najít přes „Najít na stránce" ani přeložit rozšířením). |
senderName | ReactNode | — | Viditelné jméno odesílatele v meta řádku pod bublinou (volitelné; čtečka ho má z fromLabel). |
senderTop | ReactNode | — | Skupinový chat: jméno autora NAD příchozí bublinou (jen první zpráva po sobě jdoucí řady téhož autora). |
avatar | ReactNode | — | Avatar odesílatele v meta řádku (typicky jen u protistrany); hotový uzel dodá hostitel. |
state | 'sending' | 'sent' | 'delivered' | 'read' | 'failed' | — | Stav doručení — vykreslí se jen pro out. sending = odesílá se (hodiny), failed = neodesláno (ikona chyby, --critical-ink). |
errorText | string | — | Vysvětlení chyby u failed — tooltip na ikoně; text pro čtečku nese stateLabel. |
stateLabel | string | — | Sr-only popisek stavu doručení (např. „přečteno") — bez textu se nevykreslí. Kreslí se kanonickou .acrm-sr, ne lokální kopií. |
more | ReactNode | — | Přepínač zkrácení UVNITŘ bubliny hned pod textem („Zobrazit vše" / „Zobrazit méně"), jak to mají chatovací aplikace (zadavatel 19. 10. 2026). Hostitel dodá tlačítko .cht-more. |
media | ReactNode | — | Fotky UVNITŘ bubliny NAD titulkem (náhled obrázku jako ve WhatsAppu): bublina se zúží na rámeček kolem fotky (.media), text je titulek pod ní. tone="sticker" = nálepka bez bubliny. Tvar fotky (poměr, mřížka, akce, lightbox) si skládá hostitel. |
mediaTone | 'photo' | 'sticker' | 'photo' | photo (výchozí, když je media) = fotka v rámečku bubliny; sticker = bez bubliny. |
attachments | ReactNode | — | Přílohy UVNITŘ bubliny POD textem — tvar přílohy si skládá hostitel (Attachment, .cht-att pilulka). |
published | boolean | — | IM-3b — zpráva je zveřejněná u kontaktu: třída .pub pro hostitele/testy; tvar bubliny se NEMĚNÍ. |
metaExtra | ReactNode | — | IM-3b — drobná meta za časem (kdo · kdy zveřejnil / „Soukromé"); hotový uzel dodá hostitel. |
actions | ReactNode | — | Akce zprávy v meta řádku za časem a stavem (např. „Původní"); hostitel dodá tlačítka .cht-link. |
reactions | ReactNode | — | Reakce na zprávu (odznaky s emoji, .cht-rx) — přesahují spodní hranu bubliny na straně OPAČNÉ k ostrému rohu (odchozí vlevo, příchozí vpravo). Hotový uzel dodá hostitel; bez něj se bublina nebalí a markup zůstává beze změny. Viz withReactions. |
reactable | boolean | — | Na zprávu jde reagovat: řádek je fokusovatelný (tabIndex=-1), takže na dotykovém zařízení ťuknutí na zprávu ukáže „+" přes :focus-within. |
className | string | — | — |
CSS classes
Files
packages/ui/src/components/ChatThread.tsxapps/web/src/ds/chat-thread.cssapps/web/src/ds/chat-thread.css