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

Prompt Implement a ChatGPT-like chat experience in React (similar to chatgpt.com) during a live coding interview. Requirements Message List Render conversation messages in chronological order. Support at least two roles: user and assistant. After sending, append the new message to the bottom and handle scrolling behavior appropriately. Composer (Input Area) Text input plus a Send button. Support Enter-to-send (clarify whether Shift+Enter inserts a newline). On send: clear the input and append the user message. Loading State While waiting for the assistant response, show a loading indicator (e.g., disable input, show placeholder bubble/loader). Streaming Response Render the assistant reply incrementally into the same assistant message (token-by-token or chunk-by-chunk). Correctly handle streaming start, in-progress updates, and completion. Edge Cases / Error Handling (address at least these) Handling rapid consecutive sends / multiple clicks. Cleanup on unmount during streaming (cancel subscription/abort request). UI/logic for failures (error state, retry capability). Data / API Assumptions You may assume an API sendMessage(text) that either returns a full response (non-streaming) or a subscribable streaming source (you may mock it). Define a clear message data model (e.g., {id, role, content, status} etc.). Output Provide working React components (can be split) focusing on state management and streaming update logic. Example Input (UI interaction) user sends: "Hello" Output Message list shows user: "Hello"; assistant message appears and streams content until completion; loading indicator clears.