Core Concepts
메시지 파트
opt-chat은 메시지 content 배열의 각 파트 타입에 대응하는 전용 렌더러를 제공합니다. MessageParts가 이들을 자동으로 매핑합니다.
reopt designUpdated
1. 파트 카탈로그
각 파트 컴포넌트는 독립적으로도 사용할 수 있고, MessageParts의 자동 매핑을 통해 메시지 내부에서 렌더링될 수도 있습니다.
| 파트 | 설명 | 주요 Props |
|---|---|---|
| Reasoning | 모델의 사고 과정(thinking)을 접기/펼치기로 표시합니다. | content, isOpen, onToggle |
| Tool | 도구 호출 이름, 인자, 실행 상태를 배지와 함께 렌더링합니다. | toolName, args, status, result |
| CodeBlock | Shiki 기반 구문 하이라이팅. 복사 버튼과 언어 레이블을 포함합니다. | code, language, title, showLineNumbers |
| Sources | 접을 수 있는 출처 URL 목록. favicon을 자동으로 표시합니다. | sources, isOpen, maxVisible |
| Artifact | 생성된 파일/문서를 카드 형태로 표시하며 다운로드를 지원합니다. | title, type, content, onDownload |
| Context | 토큰 사용량, 모델 정보 등 컨텍스트 메타데이터를 표시합니다. | tokenUsage, model, latency |
| Plan | 단계별 실행 계획을 체크리스트 형태로 보여줍니다. | steps, currentStep |
| ChainOfThought | 연속적인 추론 단계를 타임라인으로 시각화합니다. | steps, isStreaming |
| Terminal | 터미널 명령어와 출력을 모노스페이스로 렌더링합니다. | command, output, exitCode |
| FileTree | 파일/폴더 구조를 트리 형태로 표시합니다. 접기/펼치기를 지원합니다. | files, defaultExpanded |
| StackTrace | 에러 스택 트레이스를 파싱하여 프레임별로 하이라이팅합니다. | error, frames, language |
| TestResults | 테스트 실행 결과를 통과/실패/건너뜀 배지와 함께 보여줍니다. | results, summary |
| Image | 인라인 이미지를 반응형으로 표시하며 확대를 지원합니다. | src, alt, width, height |
| Snippet | 짧은 코드 조각을 인라인으로 표시합니다. CodeBlock의 경량 버전입니다. | code, language |
| Confirmation | 도구 호출 승인/거부 UI. compound 패턴으로 상태별 콘텐츠를 분리합니다. | state, approvalId, approved, onApprove, onDeny |
| Task | 가벼운 collapsible 작업 항목. Plan과 별개로 세부 단계 / 검색 결과를 토글합니다. | title, defaultOpen, children |
| Commit | Git 커밋 메타데이터를 표시하는 컴파운드. 해시, 메시지, 저자, 파일 변경 +/-. | hash, message, files (compound) |
| PackageInfo | npm 패키지 메타. 이름, 버전 변경, semver 배지(major/minor/patch), 의존성 목록. | name, currentVersion, newVersion, changeType |
| JSXPreview | JSX 문자열을 React로 파싱해 미리보기. 스트리밍 중 미완성 태그 자동 보완. | jsx, isStreaming, components, bindings, onError |
| Sandbox | 코드 실행 결과를 탭(코드/결과)으로 보여주는 collapsible 카드. | state, defaultOpen (Tabs compound) |
| WebPreview | iframe + 콘솔 패널. URL 네비게이션, sandbox 속성, 로그 콜렉션 컨텍스트. | defaultUrl, onUrlChange, labels |
| OpenIn | 외부 챗봇/도구로 프롬프트 공유. ChatGPT, Claude, Cursor, GitHub, T3, v0. | query, labels (compound: Trigger/Content/<Provider>) |
2. 사용 방식
파트 컴포넌트는 두 가지 방식으로 사용됩니다. (1) MessageParts가 메시지의 content 배열에서 type을 읽어 자동으로 렌더링하거나, (2) 개별 컴포넌트를 직접 import하여 독립적으로 사용할 수 있습니다. 자동 매핑을 커스터마이즈하려면 renderPart 콜백을 참고하세요.