DS | Adila.coComponentes
Message
Componente message do design system adila.co.
Assistente
agora
Instalação
bun add @adila-sh/uiUso
Message é puramente de layout: define alinhamento (align="start" | "end"), avatar,
cabeçalho e rodapé. Combine com Bubble para o balão estilizado.
import {
MessageGroup,
Message,
MessageAvatar,
MessageContent,
MessageHeader,
MessageFooter,
} from '@adila-sh/ui';
import { Bubble, BubbleContent } from '@adila-sh/ui';
export function Example() {
return (
<MessageGroup>
<Message align="start">
<MessageAvatar className="size-8 text-xs font-medium">IA</MessageAvatar>
<MessageContent>
<MessageHeader>Assistente</MessageHeader>
<Bubble variant="muted">
<BubbleContent>Olá! Como posso ajudar?</BubbleContent>
</Bubble>
</MessageContent>
</Message>
<Message align="end">
<MessageContent>
<Bubble align="end">
<BubbleContent>Quero ver o engajamento do lead.</BubbleContent>
</Bubble>
<MessageFooter>agora</MessageFooter>
</MessageContent>
</Message>
</MessageGroup>
);
}