Skip to content
Docs

@hua-labs/ui
v1.2.0

bash
npm install @hua-labs/hua
tsx
import { ChatMessage } from "@hua-labs/hua";
AI Chat

사용자
사
사용자오후 05:36
AI
A
AI오후 05:36
joy

사용자
사
오후 05:36
AI
A
오후 05:36
joy

사용자
사
사용자오후 05:36
AI
A
AI오후 05:36
joy

AI
A
오후 05:36

joysadnessangercalmexcitementworrygratitudeloneliness

message*{ id, content, role, timestamp, emotion?, intensity?, isTyping? }-docs:components.chatMessage.props.messageData
message.role*"user" | "assistant" | "system"-docs:components.chatMessage.props.messageRole
variant"default" | "compact" | "bubble""default"docs:components.chatMessage.props.displayVariant
showAvatarbooleantruedocs:components.chatMessage.props.showAvatar
showTimestampbooleantruedocs:components.chatMessage.props.showTimestamp
showEmotionbooleantruedocs:components.chatMessage.props.showEmotion
user{ name?, avatar?, color? }-docs:components.chatMessage.props.userInfo
assistant{ name?, avatar?, color? }-docs:components.chatMessage.props.assistantInfo
theme{ userBubbleBg?, userBubbleText?, aiBubbleBg?, aiBubbleText? }-docs:components.chatMessage.props.customTheme

docs:common.basicUsagetsx
1import { ChatMessage } from '@hua-labs/hua';
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/>

  • •docs:components.chatMessage.accessibility.avatarAlt: docs:components.chatMessage.accessibility.avatarAltDesc
  • •docs:components.chatMessage.accessibility.timeFormat: docs:components.chatMessage.accessibility.timeFormatDesc
ScrollIndicatorScrollbar