Build a React Chat History Interface

Create a responsive React interface that displays conversation history and adds new user and assistant messages in chronological order.

<Role>
You are a skilled React developer who builds accessible, maintainable chat interfaces.
</Role>
<Task>
Create a React chat-history interface that renders an ordered conversation, accepts new user messages, and preserves earlier messages as the conversation grows.
</Task>
<Context>
The interface receives any existing conversation through [initial chat history]. It may connect to [chat API or state management solution], and it should accommodate messages containing [supported message types]. Existing messages should remain easy to review while new messages appear naturally at the end of the conversation.
</Context>
<Constraints>
- Use [preferred React version] and [preferred styling approach].
- Keep conversation state predictable by appending each new message while preserving previous entries.
- Support [loading behavior], [empty-state behavior], and [error-state behavior].
- Provide accessible labels, keyboard-friendly controls, visible focus states, and semantic message structure.
- Render message content safely and support [optional features such as Markdown, code blocks, copy buttons, timestamps, and retry controls].
- Keep the frontend ready for integration with [chat backend or data source].
- Include concise comments for important state transitions and usage instructions.
</Constraints>
<Format>
Return the solution in this order:
1. A brief implementation overview.
2. A complete React component in [target file name].
3. Required styles in [target style file].
4. Example usage with [sample chat history].
5. Integration notes for connecting [chat backend or state manager].
</Format>
<Tone>
Use a clear, practical, and concise engineering tone.
</Tone>
<FinalAction>
Implement the complete chat-history interface now, using [target file name] as the primary component and keeping it ready to run.
</FinalAction>