WIZ Design System

한눈에#

AI 채팅 입력입니다 — Enter 전송, Shift+Enter 줄바꿈, 한글 IME 보호, 자동 높이. 스트리밍 중에는 전송 버튼이 중단 버튼으로 바뀝니다.

Enter 전송 · Shift+Enter 줄바꿈 · 한글 조합 중 Enter는 무시됩니다

전송하면 2초간 스트리밍을 시뮬레이션합니다 — 중단 버튼도 눌러 보세요

WIZ AI 제품군의 채팅 입력이면 AiChatInput — 일반 멀티라인·단일 라인 입력은 다른 컴포넌트입니다.

쓴다

Enter 전송 · Shift+Enter 줄바꿈 · 한글 조합 중 Enter는 무시됩니다

AI 응답 스트리밍이 있는 채팅 입력(Enter 전송·한글 IME 보호·중단 버튼)

대신 Textarea

전송·스트리밍 없는 일반 여러 줄 텍스트 입력

대신 Input

한 줄짜리 단순 텍스트 입력

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

플레이스홀더

import { AiChatInput } from '@wds/ui-web';

<AiChatInput onSend={handleSend} />

단일 형태입니다 — WIZ AI 제품군의 채팅 입력을 하나의 어휘로 통일하는 것이 목적이라, 변형 대신 상태(idle/streaming)로 분기합니다.

textarea가 내용에 맞춰 자동으로 자랍니다(약 7줄 상한, 초과분은 내부 스크롤). 폭은 부모 100%.

스트리밍은 소비자가 소유하는 상태입니다 — 전송 후 응답 스트림이 시작되면 state="streaming"으로 바꾸고, 종료/중단 시 "idle"로 되돌립니다.

Prop	타입	기본값	설명
`state`	`'idle' \| 'streaming'`	`'idle'`	응답 생성 상태 — streaming이면 중단 버튼 노출
`onSend`	`(message: string) => void`	—	전송 콜백 — trim된 비어있지 않은 메시지만 호출
`onStop`	`() => void`	—	스트리밍 중단 콜백
`sendLabel`	`string`	`'전송'`	전송 버튼 aria-label
`stopLabel`	`string`	`'생성 중단'`	중단 버튼 aria-label
`…rest`	`TextareaHTMLAttributes`	—	placeholder · disabled · maxLength 등 (value/onChange는 내부 관리)

키보드 계약: Enter 전송 · Shift+Enter 줄바꿈 — 둘 다 textarea 표준 동작 위에 구현
한글 IME 보호: 조합 확정 Enter(isComposing)는 전송으로 처리하지 않습니다 — 한국어 입력에서 마지막 글자만 전송되는 고질 버그 차단
아이콘 전용 버튼에 aria-label(전송/생성 중단) 기본 제공
포커스 링은 래퍼 :focus-within — Input과 동일 어휘
상태 변화 안내는 소비자 책임: idle↔streaming 전환을 스크린리더에 알리려면 컴포넌트 옆에 aria-live="polite" 상태 영역을 두세요(위 데모가 기준 구현 — 라이브 영역에는 상태 텍스트만, 입력 에코는 비-라이브 노드에)

component 토큰 없이 input.*과 semantic을 소비합니다(신설 기준 §4 미충족).

속성	토큰
배경/보더/포커스	`input.bg` · `input.border` · `input.border-focus`
라운드	`radius.xl` (채팅 표면 어휘)
전송 버튼	`color.primary` 계열 + `color.on-primary` · `radius.full`
아이콘	`icon.size-sm`