Density

Chat message

The chat message component separates user and agent turns while keeping the transcript compact.

I found three relevant results.
import { ChatMessage } from "density-base-ui";

export default function ChatMessageExample() {
  return (
    <ChatMessage author="agent">I found three relevant results.</ChatMessage>
  );
}

Props

Prop Attribute Values Default
author data-dn-author user, agent None
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
size data-dn-size sm, md md

Author

Use author to distinguish the human message from the agent message.

Agent messages align to the start.
User messages align to the end.
import { ChatMessage } from "density-base-ui";

export default function ChatMessageAuthorExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
      <ChatMessage author="agent">
        Agent messages align to the start.
      </ChatMessage>
      <ChatMessage author="user">User messages align to the end.</ChatMessage>
    </div>
  );
}

Padding

Padding applies only to user bubbles. User messages default to uniform md padding; use padding="none" for a flush bubble. Agent messages remain without padding.

No padding
2xs padding
xs padding
Small padding
Medium padding
Large padding
xl padding
2xl padding
3xl padding
import { ChatMessage } from "density-base-ui";

export default function ChatMessagePaddingExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
      <ChatMessage author="user" padding="none">
        No padding
      </ChatMessage>
      <ChatMessage author="user" padding="2xs">
        2xs padding
      </ChatMessage>
      <ChatMessage author="user" padding="xs">
        xs padding
      </ChatMessage>
      <ChatMessage author="user" padding="sm">
        Small padding
      </ChatMessage>
      <ChatMessage author="user" padding="md">
        Medium padding
      </ChatMessage>
      <ChatMessage author="user" padding="lg">
        Large padding
      </ChatMessage>
      <ChatMessage author="user" padding="xl">
        xl padding
      </ChatMessage>
      <ChatMessage author="user" padding="2xl">
        2xl padding
      </ChatMessage>
      <ChatMessage author="user" padding="3xl">
        3xl padding
      </ChatMessage>
    </div>
  );
}

Size

Small message
Medium message
import { ChatMessage } from "density-base-ui";

export default function ChatMessageSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
      <ChatMessage author="agent" size="sm">
        Small message
      </ChatMessage>
      <ChatMessage author="agent" size="md">
        Medium message
      </ChatMessage>
    </div>
  );
}