MessageBubble
먼저 보고, 그다음 계약을 읽습니다
아바타·역할 라벨·본문 슬롯을 가진 채팅 메시지 한 줄.
Component intent의도와 경계 읽기
user/assistant/system 세 역할(role)로 한 메시지를 렌더하는 forwardRef<div> 컴포넌트다. 좌측 원형 아바타(기본 = 역할 첫 글자 U/A/S)와 우측 본문(역할 라벨 USER/AI/SYSTEM + children)으로 구성되며, children 에 StreamingMarkdown·ToolCallCard·첨부 등 아무 노드나 넣는다. 역할별로 axe-message--{role} 수정자 클래스가 붙지만 현재 시각 차이는 user 아바타의 accent 색뿐이다. avatar/label 을 넘겨 기본 문자·라벨을 덮어쓰고, showRole=false 로 라벨 줄을 감출 수 있다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { MessageBubble } from "@axe/ui";export function Example() { return ( <> <MessageBubble role="user">오늘 환율 알려줘</MessageBubble> <MessageBubble role="assistant" label="AI · 09:12"> 현재 원/달러 환율은 … </MessageBubble> </> );}import { MessageBubble } from "@axe/ui";<MessageBubble role="user" avatar="강" showRole={false}> 요약해줘</MessageBubble><div class="axe-message axe-message--assistant"> <div class="axe-message__avatar" aria-hidden="true">A</div> <div class="axe-message__body"> <div class="axe-message__role">AI</div> <div class="axe-message__content">현재 원/달러 환율은 …</div> </div></div>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
role | "user" | "assistant" | "system" | 필수 | — | 메시지 화자. axe-message--{role} 수정자와 기본 아바타·라벨을 결정. |
children | React.ReactNode | — | — | 본문 — markdown·tool call·첨부 등 어떤 노드든. |
avatar | React.ReactNode | — | — | 아바타 자리에 들어갈 단일 문자 또는 컴포넌트. 기본 = 역할 첫 글자(U/A/S). |
label | React.ReactNode | — | — | 본문 위 라벨(시간·화자명 등). 기본 = 역할 라벨(USER/AI/SYSTEM). |
showRole | boolean | — | true | 역할 라벨 줄 표시 여부. false 면 라벨 없이 본문만. |
...rest | React.HTMLAttributes<HTMLDivElement> | — | — | className 은 루트와 병합, 나머지는 루트 <div> 로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-message | stable | 메시지 루트(아바타+본문 가로 flex, 세로 패딩). |
.axe-message--user | stable | user 역할 수정자 — 아바타를 accent 색으로. (--assistant/--system 클래스도 붙지만 현재 전용 규칙 없음.) |
.axe-message__avatar | stable | 좌측 원형 아바타(28px, gray-9 배경, display 폰트). aria-hidden. |
.axe-message__body | stable | 우측 본문 컬럼(flex:1, min-width:0 으로 오버플로 방지). |
.axe-message__role | stable | 본문 위 역할 라벨(uppercase·wide tracking·secondary). |
.axe-message__content | stable | children 래퍼 — 직계 형제 사이 space-3 세로 간격. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
루트는 의미 없는 <div> — 별도 role 을 붙이지 않는다. 아바타 요소는 aria-hidden 이라 스크린리더가 무시하고 역할은 텍스트 라벨(axe-message__role)로만 전달된다.
키보드 상호작용 없음(순수 표시 컴포넌트). showRole=false 로 라벨을 숨기면 시각적 화자 구분이 아바타 색에만 의존하므로, 스크린리더 사용자에게 역할이 중요하면 label 을 남기거나 별도로 제공할 것.