AXIS
Agentic UI/MessageBubble

MessageBubble

채팅 메시지를 표시하는 버블 컴포넌트입니다. user, assistant, system 세 가지 역할을 지원합니다.

Installation

bash
npx @axis-ds/cli add message-bubble --agentic

Usage

tsx
import { MessageBubble } from '@axis-ds/agentic-ui'

export function Example() {
  return (
    <div className="space-y-4">
      <MessageBubble
        role="user"
        content="React 컴포넌트 설계 패턴에 대해 알려주세요."
        timestamp={new Date()}
        status="sent"
      />
      <MessageBubble
        role="assistant"
        content="React 컴포넌트 설계에는 여러 패턴이 있습니다..."
        timestamp={new Date()}
        metadata="GPT-4"
      />
    </div>
  )
}

Interactive Demo

안녕하세요! 오늘 날씨가 어때요?
안녕하세요! 오늘 서울은 맑고 기온은 15°C 정도입니다. 야외 활동하기 좋은 날씨네요.
GPT-4o

Roles

User

사용자 메시지입니다.

Assistant

AI 어시스턴트의 응답입니다.
GPT-4

System

시스템 알림: 새로운 세션이 시작되었습니다.

Props

roleRequired
Type:"user" | "assistant" | "system"

메시지 발신자 역할

contentRequired
Type:React.ReactNode

메시지 내용

timestamp
Type:Date
Default:-

메시지 타임스탬프

avatar
Type:React.ReactNode | string
Default:-

아바타 (ReactNode 또는 이미지 URL)

status
Type:"sending" | "sent" | "error"
Default:-

메시지 전송 상태

actions
Type:React.ReactNode
Default:-

메시지 액션 버튼

metadata
Type:string
Default:-

메타데이터 (모델명 등)

className
Type:string
Default:-

추가 CSS 클래스

locale
Type:string
Default:"ko-KR"

시각 표시 로케일

timeZone
Type:string
Default:-

시각 표시 시간대(예: "Asia/Seoul"). 지정하면 서버가 그 시간대로 만든 시각이 서버 렌더 HTML 에 그대로 들어가고 보는 사람의 시간대로 바뀌지 않아요. 없으면 서버 컴포넌트에서도 HTML 의 시각이 비고, JS 가 돈 뒤 브라우저 시간대로 채워요

formatTime
Type:(date: Date) => string
Default:-

시각 문자열을 직접 만드는 함수. 서버와 브라우저에서 같은 값을 돌려줘야 해요(서버 컴포넌트에서는 못 넘김)

Accessibility

메시지는 role="article"로 마크업되고, 작성자(role prop: user/assistant/system)가 aria-label로 식별됩니다.

  • 작성자가 접근 가능한 이름으로 노출됩니다.
  • 장식 요소는 aria-hidden으로 처리됩니다.
  • 전송 상태 아이콘은 role="img" 와 aria-label(전송 중 · 전송됨 · 전송 실패)로 읽혀요.
  • 시각은 timeZone 을 주지 않으면 하이드레이션 뒤에 브라우저 시간대로 채워요(서버와 브라우저 시간대가 달라 생기는 하이드레이션 오류 방지).