AI 코딩 화면용 새 컴포넌트 묶음
AI SDK ToolLoopAgent 구성부터 코드, 터미널, 테스트 결과까지 보여주는 새 컴포넌트 세트를 추가했습니다.
교안에 영향
기존에 Message, PromptInput 등에서 attachment를 쓰던 안내는 새 attachment 컴포넌트 분리 내용을 반영해야 합니다.
요약
- AI SDK ToolLoopAgent 구성을 보여주는 컴포넌트를 추가했습니다. - 코드 블록, Commit, EnvironmentVariables, FileTree, PackageInfo, Sandbox, SchemaDisplay, Snippet, StackTrace, Terminal, TestResults 컴포넌트를 새로 제공합니다. - attachment를 별도 컴포넌트로 분리해 파일, 이미지, 비디오, 오디오, 소스 문서를 유연하게 표시할 수 있게 했습니다. - 코드 블록 렌더러와 여러 컴포넌트의 표시 방식, 복사 기능, 접기/탭 전환, 상태 표시를 강화했습니다.
바뀐 것
새 기능
- AI SDK ToolLoopAgent 구성을 보여주는 컴포넌트를 추가했습니다.
- 코드 블록 컴포넌트를 개선해 header, icon, filename, multiple languages, 더 나은 렌더러를 지원합니다.
- Commit 컴포넌트로 hash, message, author, timestamp, changed files를 표시할 수 있습니다.
- EnvironmentVariables 컴포넌트에 value masking, visibility toggle, copy 기능을 추가했습니다.
- FileTree 컴포넌트로 계층형 파일 구조, 폴더 펼치기, 파일 선택을 지원합니다.
- PackageInfo 컴포넌트로 dependency 정보, version changes, change type badges를 표시할 수 있습니다.
- Sandbox 컴포넌트로 AI-generated code와 실행 출력을 채팅에서 함께 보여줄 수 있습니다.
- SchemaDisplay 컴포넌트로 REST API endpoint, HTTP methods, path, parameter, request/response schema를 시각화합니다.
- Snippet 컴포넌트로 terminal commands와 짧은 code snippet을 복사 가능하게 표시합니다.
- StackTrace 컴포넌트로 JavaScript/Node.js error stack trace를 포맷해 보여줍니다.
- Terminal 컴포넌트로 ANSI color가 있는 console output, streaming indicator, auto-scroll을 지원합니다.
- TestResults 컴포넌트로 test suite 결과, summary statistics, progress, individual tests, error details를 표시합니다.
- attachment 컴포넌트를 별도로 분리해 files, images, videos, audio, source documents를 표시합니다.