reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Explore/Blocks/ChatMessageList

ChatMessageList

Block

채팅 메시지 목록. 역할별 말풍선, 타이핑 인디케이터, 자동 스크롤.

chat
Related docs
npx @reopt-ai/opt-cli surface add chat-message-list
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

Dependencies

corescroll-areacoreavatarcoreempty-state

Related components

ChatInput

채팅 입력 컴포넌트. 자동 리사이즈 textarea, 파일 첨부, 모델/스타일 Select.

Chat

ChatAssistant

AI 챗봇 어시스턴트 화면. ChatSidebar + ChatMessageList + ChatInput 조합.

Chat

ChatSidebar

AI 채팅 사이드바. 대화 목록, 검색, 새 대화 버튼.

NavChat

Avatar

사용자 아바타. 이미지, 이니셜 자동 생성, 상태 인디케이터, 그룹 지원.

Indicator

EmptyState

데이터가 없을 때 표시하는 빈 상태 컴포넌트. 아이콘, 제목, 설명, 액션 버튼 지원.

Indicator

ScrollArea

커스텀 스크롤바를 제공하는 스크롤 컨테이너. 수직/수평/양방향 지원.

Layout
PreviousChatInput
ShiftEnter로 줄바꿈

프로젝트 구조 설계

AI

새 프로젝트의 구조를 어떻게 잡으면 좋을까요?

오후 06:41
A

모노레포 구조를 추천합니다. Turborepo를 사용하면 빌드 캐싱과 태스크 오케스트레이션이 쉬워집니다. 기본 구조: - apps/ (애플리케이션) - packages/ (공유 패키지) - turbo.json (파이프라인)

오후 06:42
ShiftEnter로 줄바꿈

Sizes

XSMLX

Status Indicators

김

online

이

busy

박

away

최

offline

Initials Generation

홍

홍길동

JD

John Doe

A

Alice

No name

Fallback

FU

이미지가 없을 때 커스텀 fallback 표시

이미지 로딩 & 폴백 상태머신

정이

로드 성공 → 이미지

홍

로드 실패 → 이니셜 폴백

이미지는 오프스크린에서 먼저 디코딩되며, 로드 전·실패 시 폴백을 보여줘 broken-image 깜빡임이 없습니다.

반응형 이미지 (srcSet / sizes)

R

DPR에 따라 1x/2x 후보 중 선택됩니다.

Avatar Group

max=4

김이박최+1

max=2

김이+3

기본 사용

데이터가 없습니다

새로운 항목을 추가하여 시작하세요.

아이콘 포함

작업이 없습니다

모든 작업을 완료했습니다. 휴식을 취하세요!

액션 버튼

프로젝트 없음

새 프로젝트를 만들어 시작하세요.

기본 사용

수직 스크롤

항목 1

항목 2

항목 3

항목 4

항목 5

항목 6

항목 7

항목 8

항목 9

항목 10

항목 11

항목 12

항목 13

항목 14

항목 15

항목 16

항목 17

항목 18

항목 19

항목 20

수평 스크롤

1
2
3
4
5
6
7
8
9
10