Chat UI
채팅 UI
채팅 UI는 메시지, 보낸 사람 이름, 입력란, 전송 상태, 첨부 파일을 묶어요. 오류를 고치는 방법도 보여줘요.
V.Which pattern are you building?
YouA compact picker with search.
실제 예시
AI 채팅은 사용자와 비서의 메시지를 구분해요. 답변을 조금씩 보여주고, 출처도 알려주며, 멈춤과 다시 시도 단추도 제공해요.
주요 부분
- 01Trigger or task context
- 02Primary control surface
- 03Feedback, focus, and dismissal
사용할 때
채팅에서 차례로 진행하는 것이 작업을 완료하는 가장 명확한 방법일 때 사용하십시오.
다음 경우에는 사용하지 마세요
불분명한 채팅 안에 세트 단계, 오류, 권한, 취소할 수 없는 작업을 절대 숨기지 마세요.
코드에서 사용된 이름
message list + composer + status 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with 채팅 UI (Chat UI)。 User context：AI 채팅은 사용자와 비서의 메시지를 구분해요. 답변을 조금씩 보여주고, 출처도 알려주며, 멈춤과 다시 시도 단추도 제공해요. Recommended pattern：채팅 UI (Chat UI)。 Why it fits：채팅에서 차례로 진행하는 것이 작업을 완료하는 가장 명확한 방법일 때 사용하십시오. Do not use it when：불분명한 채팅 안에 세트 단계, 오류, 권한, 취소할 수 없는 작업을 절대 숨기지 마세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：하나의 공식 표준이 전체 용어를 통제하지 않음. 의미는 팀, 플랫폼 또는 프레임워크마다 달라질 수 있음. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 채팅 UI (Chat UI) is used now. Definition: 채팅 UI는 메시지, 보낸 사람 이름, 입력란, 전송 상태, 첨부 파일을 묶어요. 오류를 고치는 방법도 보여줘요. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.