#UserMessage

A message the user sent to Wally: an <article> named "You" that right-aligns a light-brand bubble. The bubble keeps the text’s whitespace and clamps it to 11 lines; when it overflows, a fade appears with a Show more / Show less toggle that reports aria-expanded and points aria-controls at the text. The toggle is UserMessageShowMore, rendered by default — pass your own instance through showMore for custom labels or data-* attributes, or null for none. Put a MessageActions row (timestamp, then Copy) after the bubble; it is revealed when the message is hovered or focused.

Source · Storybook

#Usage

import { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';

#Examples

#Multiline

Line breaks and indentation in the text are kept as typed.

#Long collapsed

Text longer than 11 lines is clamped under a fade with Show more. Click it to expand; the same button then reads Show less and collapses the text again.

#With actions

With the user actions row — timestamp, then Copy — revealed on hover or focus.

#Custom show more

Pass your own UserMessageShowMore to showMore for custom labels or analytics: data-analytics-id lands on the real <button>.

#Props

#UserMessageBubble

#UserMessageShowMore

#Explorer