Chat UI

You might say

Complete this chat window with a message list, input area, sending state, and retry on failure—do not hide errors.

A chat UI is the interactive interface that organizes a message list, input area, and conversation feedback states.After someone sends a question, the interface should add their message to the list, show waiting or streamed output, and provide an understandable error and retry path on failure. Customer support chat and AI chat both need these interface capabilities. It is the shell people see and use, not the model or support system behind it.

Know first

Input Streaming Response

Chat Interface

Which states a chat UI must show after one message is sent

Project assistantOnline

Plan a two-day weekend trip, with no more than two places per day.

Write a message…

What the chat interface owns in a conversation

The message list keeps context: Messages from each role need clear order and distinction. A long conversation must remain scrollable and readable, and new messages should not interrupt someone reading earlier content.

Input and feedback cannot disappear: After send, people need to know work is in progress. Network failures, unsendable content, and interrupted replies require a specific state and a useful next action.

Quick checkChoose the best answer

A user sends a message and the network disconnects. What chat-interface feedback fits best?

Keep the unsent message, clearly show sending failed, and offer retry or edit-and-send-againDelete the message so the chat list looks cleanerShow a successful reply first and handle it when the network returns

You can say this to an AI Agent

Complete this Chat UI: distinguish both sides in the message list, show pending after sending from the input area, and keep the original message with retry on failure. Do not alter the model prompt or response content. Test successful send, pending, and offline failure states afterward.

Learn next

1Streaming Response→2State→