AI-Native

MessageBubble

user / assistant / system 채팅 말풍선.

role에 따라 자동 정렬·색·꼬리 모서리 처리. assistant에 gradientBorder옵션을 켜면 background-clip 트릭으로 1.5px 그라디언트 보더가 자연스럽게 그려집니다.

import { MessageBubble } from "@nxtgen-org/react";

Roles

user / assistant / system

에이전트가 활성화되었습니다.

NxtGen 디자인시스템 알려줘.

방금

AI 애플리케이션을 위한 디자인시스템입니다.

방금

tsx

1<MessageBubble role="system">에이전트가 활성화되었습니다.</MessageBubble>
2<MessageBubble role="user" timestamp="방금">NxtGen 디자인시스템 알려줘.</MessageBubble>
3<MessageBubble role="assistant" timestamp="방금">
4  AI 애플리케이션을 위한 디자인시스템입니다.
5</MessageBubble>

Gradient border (assistant)

AI 강조 메시지

Pretendard·Geist 폰트와 시그니처 그라디언트를 기반으로 합니다.

방금

tsx

1<MessageBubble role="assistant" gradientBorder>
2  Pretendard·Geist 폰트와 시그니처 그라디언트를 기반으로 합니다.
3</MessageBubble>

API

Name	Type	Default	Description
role	"user" \| "assistant" \| "system"	"assistant"	—
timestamp	string	—	말풍선 아래 시각 표시.
avatar	ReactNode	—	assistant 좌측 아바타. 기본 AgentAvatar.
gradientBorder	boolean	—	assistant에만 적용. 그라디언트 1.5px border.