Chat Messages

Conversational UI with user (dark) and assistant (light) bubble styles.

Basic Chat

Which brand are you working on?

Brand A - Cardiovascular

Great choice! What are you trying to accomplish with this campaign?

<div class="sw-chat-message assistant">
  <div class="sw-message-bubble">Which brand are you working on?</div>
</div>
<div class="sw-chat-message user">
  <div class="sw-message-bubble">Brand A - Cardiovascular</div>
</div>

Message Types

Class	Use
`.sw-chat-message.user`	User messages (dark background, right-aligned)
`.sw-chat-message.assistant`	Assistant messages (light background, left-aligned)

CSS

.sw-chat-message {
  display: flex;
  margin-bottom: var(--sw-space-3);
}

.sw-chat-message.user {
  justify-content: flex-end;
}

.sw-chat-message.assistant {
  justify-content: flex-start;
}

.sw-message-bubble {
  max-width: 80%;
  padding: var(--sw-space-3) var(--sw-space-4);
  border-radius: var(--sw-radius-xl);
  font-size: var(--sw-text-md);
  line-height: var(--sw-leading-normal);
}

.sw-chat-message.user .sw-message-bubble {
  background: var(--sw-gray-900);
  color: var(--sw-gray-50);
  border-bottom-right-radius: var(--sw-radius-sm);
}

.sw-chat-message.assistant .sw-message-bubble {
  background: var(--sw-gray-100);
  color: var(--sw-text-primary);
  border-bottom-left-radius: var(--sw-radius-sm);
}