Components

IBee UI 컴포넌트 라이브러리 - 버튼, 입력, 카드, 메시지 등

Buttons

Button Variants
Primary, Secondary, Ghost 버튼 스타일
Button Sizes
Small, Default, Large 사이즈
Icon Buttons
아이콘만 있는 정사각형 버튼
✏️

Input

Chat Input
GPT 스타일 - corp 테두리 + 원형 버튼
PDF
mission-statement.pdf
PDF
XLS
손익분석_2024Q1.xlsx
XLSX
File Preview
첨부 파일 칩 - input-box 내부 상단 배치

Avatars & Badges

IB
IB
IB
김
효
Avatars
단색 배경, 3가지 사이즈
IBee
Logo
corp 색상 로고 + 텍스트
User Profile
사이드바 하단 프로필
사내 검색 완료 대기 오류
Badges
상태 표시 뱃지

Message Bubbles

출장비 규정에 대해 알려줘
User Message
corp-bg 배경 + corp-border 테두리
효성 출장비 규정에 대해 안내해 드리겠습니다.
Bot Message + Actions
아바타 없음, 액션 버튼 항상 표시

Navigation

Search Toggle
사내/웹 검색 토글
출장비 규정 안내
손익분석 데이터 검토
Chat List Item
사이드바 대화 목록 아이템
월별매출
채널별
제품별
Sheet Tabs
Excel 시트 탭

Data Display

분기 총 매출
40.3억원
전년 동기 대비
+12.5%
Summary Card
KPI 요약 카드
Action Buttons
복사, 좋아요, 공유 등
⏳

Loading States

검색 중...
Thinking Indicator
AI 생각 중 표시
응답을 생성하고 있습니다
Streaming Cursor
타이핑 커서 애니메이션
응답을 생성하고 있습니다
Shimmer Text (ChatGPT Style)
텍스트 자체에 shimmer gradient 효과
정보를 분석하고 있습니다
Rolling Status + Shimmer
메시지가 주기적으로 변경 (thinking 상태별)
Typing Indicator
ChatGPT 스타일 입력 표시

Admin Components

대시보드
Nav Item (Active)
사이드바 메뉴 활성 상태
사용자 관리
Nav Item (Default)
사이드바 메뉴 기본 상태
오늘 질의
1,247
↑ 12.5% vs 어제
KPI Card
핵심 지표 카드
성공 실패 ↻ 재시도 ● 진행중
Status Badge
상태 표시 뱃지
성공 스킵 실패
Progress Bar
상태 분포 바
임베딩 작업 완료
자동 실행 • 2분 전
Activity Item
활동 피드 아이템
작업 ID 상태 시간
EMB-001 성공 2분 전
EMB-002 실패 5분 전
Data Table
데이터 테이블
메뉴 검색 (⌘K)
Sidebar Search
사이드바 검색 입력
홍
홍길동
AI사업팀 선임
User Avatar
사용자 아바타 + 정보
Logout Button
GNB 로그아웃 버튼
태스크 현황
상세 →
Widget Card
대시보드 위젯 카드
임베딩 설정
임베딩 현황 3
Nav Badge
네비게이션 알림 뱃지