reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
ChatMessageList
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

ChatMessageList

Shell

Display role-based chat bubbles, typing indicators, and automatic scrolling.

chat
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { ChatMessageList } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

opt-charts에서 차트를 어떻게 사용하나요?

오후 06:51
A

차트는 @reopt-ai/opt-charts에서 제공합니다. LineChart, BarChart, AreaChart 등을 사용할 수 있습니다. ChartContainer로 감싸면 반응형 크기 조절이 자동으로 됩니다.

오후 06:52

데이터 포맷은 어떻게 되나요?

오후 06:53
A

ChartDataPoint 인터페이스를 따릅니다. name 필드가 필수이고, 나머지는 시리즈의 dataKey에 맞춰 자유롭게 추가하면 됩니다. 예: { name: "1월", revenue: 4000, users: 2400 }

오후 06:54

Usage examples

Message list

ChatMessageList

PropTypeDefaultDescription
messagesRequiredChatMessageDef[]—메시지 배열. { id, role, content, timestamp }
loadingbooleanfalse타이핑 인디케이터 표시
renderContent(message: ChatMessageDef) => ReactNode—커스텀 메시지 렌더러. 기본: plain text
assistantAvatarstring—어시스턴트 아바타 이미지 URL
showTimestampsbooleantrue타임스탬프 표시 여부
autoScrollbooleantrue새 메시지 시 자동 스크롤
labelsChatMessageListLabels—i18n 라벨 오버라이드

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (3)chat-assistantChatMessageListscroll-areaavatarempty-state
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • 메시지를 렌더링한다
  • 런타임 기본 locale과 무관한 시간을 렌더링한다
  • 빈 메시지 목록에 EmptyState를 표시한다
  • loading=true일 때 타이핑 인디케이터를 표시한다
  • showTimestamps=false일 때 시간을 숨긴다

Blocks that use this component

opt-ui

ChatAssistant

Blocks

Compose an AI assistant screen with ChatSidebar, ChatMessageList, and ChatInput.

Related components

opt-ui

ChatInput

Shells

Compose chat messages with an autoresizing textarea, file attachments, and model and style selectors.

opt-ui

ChatSidebar

Shells

Browse and search AI conversations and start a new chat.

opt-ui

Avatar

Core

Represent users with images, generated initials, accessible status indicators, and avatar groups.

opt-ui

EmptyState

Core

Explain an empty view with an icon, title, description, and action button.

opt-ui

ScrollArea

Core

Provide custom scrollbars for vertical, horizontal, or bidirectional scrolling.

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

PreviousChatInputNextTimeRangeControl