Implement a ChatGPT-like Chat UI in React (Streaming + Loading + Message Flow)

Prompt

Create a ChatGPT-style conversation interface in React, suitable for implementation during a live coding interview and visually similar to chatgpt.com.

Requirements

1. Conversation Display

   • Show messages in the order they were sent.
   • The interface must recognize at least two roles: user and assistant.
   • Once a message is submitted, place it at the end of the conversation and manage scrolling so the latest content remains appropriately visible.

2. Composer (Input Area)

   • Include a text field and a Send button.
   • Pressing Enter should submit the message; pressing Shift+Enter should add a newline instead of sending.
   • Submitting a message must empty the composer and add the user's message to the conversation.

3. Loading State

   • While the assistant response is pending, present a loading state, such as a disabled composer or a temporary loading bubble.

4. Streaming Response

   • Add the assistant's answer progressively to one assistant message, either token by token or chunk by chunk.
   • Represent the beginning, ongoing updates, and finished state of the stream correctly.

Edge Cases / Error Handling (address at least these)

• Prevent or appropriately manage rapid submissions and repeated Send clicks.
• When the component is removed while a response is streaming, clean up the subscription or abort the request.
• Provide suitable failure behavior, including an error state and a way to retry.

Data / API Assumptions

• You may rely on an API named sendMessage(text) that either produces a complete response or exposes a subscribable stream; a mock implementation is acceptable.
• Establish an explicit message shape, for example {id, role, content, status}.

Output

• Supply working React components, either as one component or several, with emphasis on state management and the logic that updates streamed assistant content.

Examples

Example 1

Input: A user submits "Hi there".

Output: The conversation immediately contains the user message "Hi there"; an assistant message is created, its text arrives progressively, and the loading state disappears when streaming finishes.

Explanation: The submitted text is displayed first, followed by one assistant response that is updated until the stream completes.

Example 2

Input: A user types "Line one", presses Shift+Enter, types "Line two", and then presses Enter.

Output: One user message is sent with the content "Line one\nLine two".

Explanation: Shift+Enter preserves the line break, while the later Enter submits the complete multiline message.

Example 3

Input: A user clicks Send twice quickly while the assistant is still responding.

Output: The interface applies its duplicate-submission policy, such as ignoring the second click until the active response finishes, and keeps the conversation state consistent.

Explanation: The loading and in-progress safeguards prevent rapid actions from creating conflicting requests or assistant messages.