ChatMessageList

shell

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

깊이

100%

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

오후 06:51

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

오후 06:52

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

오후 06:53

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

오후 06:54

2026년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

ChatMessageList 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Prop	타입	기본값	설명
`messages`*	`ChatMessageDef[]`	—	메시지 배열. { id, role, content, timestamp }
`loading`	`boolean`	`false`	타이핑 인디케이터 표시
`renderContent`	`(message: ChatMessageDef) => ReactNode`	—	커스텀 메시지 렌더러. 기본: plain text
`assistantAvatar`	`string`	—	어시스턴트 아바타 이미지 URL
`showTimestamps`	`boolean`	`true`	타임스탬프 표시 여부
`autoScroll`	`boolean`	`true`	새 메시지 시 자동 스크롤
`labels`	`ChatMessageListLabels`	—	i18n 라벨 오버라이드

tsx

import { ChatMessageList } from "@reopt-ai/opt-ui";