← All proposals

Chat Message

ChatMessage, with sender: user or agent.

Net-new componentOpen in Storybook

proposals/ChatMessage/chat-message.css43 lines · View on GitHub
.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);
}