> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/UserMessage) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/ai-usermessage--overview)

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

export const Short = () => (
  <UserMessage data-testid='short'>
    <UserMessageBubble>Show me blocked attacks for the last 24 hours</UserMessageBubble>
  </UserMessage>
);
```

## Usage

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

## Examples

### Multiline

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

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

export const Multiline = () => (
  <UserMessage data-testid='multiline'>
    <UserMessageBubble>
      {
        'Compare these two endpoints:\n  - POST /api/v1/login\n  - POST /api/v2/login\n\nWhich one gets more attacks?'
      }
    </UserMessageBubble>
  </UserMessage>
);
```

### 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.

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

export const LongCollapsed = () => (
  <UserMessage data-testid='long'>
    <UserMessageBubble>{LONG}</UserMessageBubble>
  </UserMessage>
);
```

### With actions

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

```tsx
import { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';
import { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';
import { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';

export const WithActions = () => {
  const text = 'Show me blocked attacks for the last 24 hours';

  return (
    <UserMessage data-testid='with-actions'>
      <UserMessageBubble>{text}</UserMessageBubble>
      <MessageActions>
        <MessageTimestamp dateTime='2026-10-21T09:41:00Z'>2m ago</MessageTimestamp>
        <Copyable text={text}>
          <MessageAction aria-label='Copy'>
            <CopyableIcon />
          </MessageAction>
        </Copyable>
      </MessageActions>
    </UserMessage>
  );
};
```

### Custom show more

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

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

export const CustomShowMore = () => (
  <UserMessage data-testid='custom'>
    <UserMessageBubble
      showMore={
        <UserMessageShowMore
          showMoreLabel='Expand'
          showLessLabel='Collapse'
          data-analytics-id='WALLY_USER_MESSAGE_TOGGLE'
        />
      }
    >
      {LONG}
    </UserMessageBubble>
  </UserMessage>
);
```

## Props

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |

### UserMessageBubble

| Prop           | Type                                                 | Default | Description                                                                                                                                                                                                                            |
| -------------- | ---------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| showMore       | `ReactNode`                                          |         | The Show more / Show less toggle, rendered when the text overflows 11 lines. Defaults to `<UserMessageShowMore />`; pass your own instance to add `data-*` (the analytics seam) or custom labels; `null` or `false` renders no toggle. |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                        |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                                                                                                                                                                        |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                        |
| id             | `string \| undefined`                                |         |                                                                                                                                                                                                                                        |
| tabIndex       | `number \| undefined`                                |         |                                                                                                                                                                                                                                        |
| title          | `string \| undefined`                                |         |                                                                                                                                                                                                                                        |
| rel            | `string \| undefined`                                |         |                                                                                                                                                                                                                                        |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                                                                                                                                                                        |
| data-testid    | `string \| undefined`                                |         |                                                                                                                                                                                                                                        |

### UserMessageShowMore

| Prop           | Type                                                 | Default     | Description                       |
| -------------- | ---------------------------------------------------- | ----------- | --------------------------------- |
| showMoreLabel  | `ReactNode`                                          | `Show more` | Label while the text is clamped.  |
| showLessLabel  | `ReactNode`                                          | `Show less` | Label while the text is expanded. |
| title          | `string \| undefined`                                |             |                                   |
| defaultChecked | `boolean \| undefined`                               |             |                                   |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |             |                                   |
| autoFocus      | `boolean \| undefined`                               |             |                                   |
| id             | `string \| undefined`                                |             |                                   |
| tabIndex       | `number \| undefined`                                |             |                                   |
| rel            | `string \| undefined`                                |             |                                   |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |             |                                   |
| disabled       | `boolean \| undefined`                               |             |                                   |
| name           | `string \| undefined`                                |             |                                   |
| value          | `string \| number \| readonly string[] \| undefined` |             |                                   |
| data-testid    | `string \| undefined`                                |             |                                   |

## Explorer