reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
ChatSidebar
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.

ChatSidebar

Shell

Browse and search AI conversations and start a new chat.

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

Live preview

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

100%

ChatSidebar

PropTypeDefaultDescription
conversationsRequiredChatConversationDef[]—대화 목록 배열. { id, title, lastMessage?, timestamp, unread? }
activeConversationIdstring—현재 활성 대화 ID
onConversationSelect(conversation: ChatConversationDef) => void—대화 선택 핸들러
onNewChat() => void—새 대화 생성 핸들러
onSearch(query: string) => void—검색 핸들러
labelsChatSidebarLabels—i18n 라벨 오버라이드

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (4)chat-assistantChatSidebarbuttoninputscroll-areaempty-state
View test results

테스트 커버리지

2026년 7월 9일6/6 통과
6성공
0실패
6전체
  • 대화 목록을 렌더링한다
  • 런타임 기본 locale과 무관한 날짜를 렌더링한다
  • 새 대화 버튼을 렌더링한다
  • 검색 입력을 렌더링한다
  • 대화 클릭 시 콜백을 호출한다
  • 빈 목록일 때 EmptyState를 표시한다

Blocks that use this component

opt-ui

ChatAssistant

Blocks

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

Related components

opt-ui

ContentTabs

Shells

Switch between content panels with a wrapper around the Tabs primitive.

opt-ui

SidebarNav

Shells

Navigate a sidebar with Composite keyboard support and automatic pathname synchronization.

opt-ui

AppMenubar

Shells

Use a desktop-style menu bar with checkbox and radio menu items.

opt-ui

CommandPalette

Shells

Find commands with a Cmd+K-style palette combining Dialog, Combobox, and fuzzy search.

opt-ui

CommandPaletteTrigger

Shells

Open CommandPalette with an automatically bound Cmd+K shortcut.

opt-ui

ProjectSwitcher

Shells

Search and switch projects with a fuzzy-search combobox.

PreviousAuditTimelineNextChatInput