ChatMessage

@hua-labs/ui

v1.2.0

사용자/어시스턴트/시스템 역할, 감정, 타이핑 표시, 다양한 표시 변형을 지원하는 채팅 메시지 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { ChatMessage } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

AI Chat

라이브 데모

기본 변형

사

사용자AM 04:45

안녕하세요! 오늘 기분이 어때요?

AIAM 04:45

joy

안녕하세요! 저는 항상 도움을 드릴 준비가 되어있어요. 무엇을 도와드릴까요?

말풍선 변형

사

안녕하세요! 오늘 기분이 어때요?

AM 04:45

안녕하세요! 저는 항상 도움을 드릴 준비가 되어있어요. 무엇을 도와드릴까요?

AM 04:45

joy

컴팩트 변형

사

사용자AM 04:45

안녕하세요! 오늘 기분이 어때요?

AIAM 04:45

joy

안녕하세요! 저는 항상 도움을 드릴 준비가 되어있어요. 무엇을 도와드릴까요?

타이핑 표시

AM 04:45

지원 감정

joysadnessangercalmexcitementworrygratitudeloneliness

Props

이름	타입	기본값	설명
`message*`	`{ id, content, role, timestamp, emotion?, intensity?, isTyping? }`	-	메시지 데이터 객체
`message.role*`	`"user" \| "assistant" \| "system"`	-	메시지 발신자 역할
`variant`	`"default" \| "compact" \| "bubble"`	`"default"`	표시 스타일 변형
`showAvatar`	`boolean`	`true`	아바타 표시
`showTimestamp`	`boolean`	`true`	타임스탬프 표시
`showEmotion`	`boolean`	`true`	감정 뱃지 표시
`user`	`{ name?, avatar?, color? }`	-	사용자 정보 커스터마이징
`assistant`	`{ name?, avatar?, color? }`	-	어시스턴트 정보 커스터마이징
`theme`	`{ userBubbleBg?, userBubbleText?, aiBubbleBg?, aiBubbleText? }`	-	커스텀 테마 색상

코드 예시

docs:common.basicUsagetsx

1import { ChatMessage } from '@hua-labs/ui/data';
2 
3<ChatMessage
4  message={{
5    id: "1",
6    content: "안녕하세요!",
7    role: "user",
8    timestamp: new Date()
9  }}
10/>

docs:components.chatMessage.examples.withEmotiontsx

1<ChatMessage
2  message={{
3    id: "2",
4    content: "도와드릴게요!",
5    role: "assistant",
6    timestamp: new Date(),
7    emotion: "joy",
8    intensity: 0.8
9  }}
10  variant="bubble"
11/>

docs:components.chatMessage.examples.typingtsx

1<ChatMessage
2  message={{
3    id: "3",
4    content: "",
5    role: "assistant",
6    timestamp: new Date(),
7    isTyping: true
8  }}
9/>

접근성

•아바타 대체 텍스트: 아바타에 사용자/어시스턴트 이름이 대체 텍스트로 포함
•시간 포맷: 로케일 인식 시간 포맷

ScrollIndicator Scrollbar