> 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.
# MessageActions
The small row of icon buttons under a chat message โ copy, feedback, a more menu and a timestamp. Every `MessageAction` is a ghost icon button whose required `aria-label` doubles as its tooltip, so the row never needs a visible caption. By default the row is transparent until the nearest `group/message` parent is hovered or holds focus, keeping its 30px height so the conversation does not jump; pass `visible` for the latest answer. Copy is composed with `Copyable` and `CopyableIcon`, menus with `DropdownMenuTrigger asChild`, and feedback with `aria-pressed` โ the row itself holds no state. Give a menu-trigger action an explicit `data-testid`: the trigger injects its own `--trigger` id, which replaces the cascaded `--action` one.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/MessageActions) ยท [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/ai-messageactions--overview)
```tsx
import { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';
import { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';
export const User = () => (
2m ago
);
```
## Usage
```tsx
import { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';
import { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';
```
## Examples
### Wally
Under a Wally answer: Copy, thumbs up and down, a more menu, then the timestamp. The
Ellipsis button is the menu trigger and keeps its own tooltip anchored to it.
```tsx
import { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';
import { Ellipsis, ThumbsDown, ThumbsUp } from '@wallarm-org/design-system/icons';
import { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';
export const Wally = () => (
RegenerateReport a problem1m ago
);
```
### Visible
Default versus `visible`. The first row stays transparent (but tabbable) until its message
is hovered or focused; the second is forced on, as for the latest answer.
```tsx
import { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';
import { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';
export const Visible = () => (
Hover to reveal
1m ago
visible
1m ago
);
```
### Pressed feedback
Thumbs feedback is a plain toggle: pass `aria-pressed` and the button keeps the
`states-primary-active` background while pressed. Click one to try it.
```tsx
import { useState } from 'react';
import { ThumbsDown, ThumbsUp } from '@wallarm-org/design-system/icons';
import { MessageAction, MessageActions } from '@wallarm-org/design-system/MessageActions';
export const PressedFeedback = () => {
const [feedback, setFeedback] = useState<'up' | 'down' | null>('up');
const handleGoodClick = () => {
setFeedback(current => (current === 'up' ? null : 'up'));
};
const handleBadClick = () => {
setFeedback(current => (current === 'down' ? null : 'down'));
};
return (
);
};
```
### Analytics
`data-analytics-id` and `data-analytics-props` go straight onto each `MessageAction` and
land on its real `