.pds-chat-message {
--chat-message-max-width: 80%;
color: var(--pds-color-foreground-default);
display: flex;
flex-direction: column;
font-family: var(--pds-typography-ff-default);
font-size: var(--pds-typography-size-s);
line-height: var(--pds-typography-lh-m);
min-width: 0;
}
.pds-chat-message__content {
min-width: 0;
overflow-wrap: anywhere;
}
/* User: a bubble on the right that hugs its text. Line breaks the user typed
are kept. */
.pds-chat-message--user {
align-items: flex-end;
}
.pds-chat-message--user .pds-chat-message__content {
background-color: var(--pds-color-surface-default-secondary);
border-radius: var(--pds-border-radius-card);
max-width: var(--chat-message-max-width);
padding-block: var(--pds-spacing-2xs);
padding-inline: var(--pds-spacing-s);
white-space: pre-wrap;
}
/* Agent: no container, full width. */
.pds-chat-message--agent .pds-chat-message__content {
width: 100%;
}
/* Lists in agent content keep their markers inside the message (the PDS reset
removes list padding). */
.pds-chat-message--agent .pds-chat-message__content :is(ul, ol) {
padding-inline-start: var(--pds-spacing-l);
}
Chat Message
ChatMessage, with sender: user or agent.
Net-new componentOpen in Storybook