Chat message

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

I found the relevant docs and condensed them into three next steps.

Great. Keep the tone direct and action-oriented.

import { ChatMessage } from "density-base-ui";

export default function ChatMessageExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
      <ChatMessage author="agent">
        I found the relevant docs and condensed them into three next steps.
      </ChatMessage>
      <ChatMessage author="user">
        Great. Keep the tone direct and action-oriented.
      </ChatMessage>
    </div>
  );
}

Props

Prop	Attribute	Values	Default
`author`	`data-dn-author`	`user`, `agent`	None

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>
  );
}