Can you help me build a simple React app with TypeScript?
Agent Chat History
A comprehensive chat history component that displays conversation sessions with search, filtering, and management capabilities.
Features
- Session Management: View and manage multiple chat sessions
- Search Functionality: Search through conversations by title or content
- Filtering Options: Filter by starred or archived sessions
- Message Preview: View full conversation history for selected sessions
- Actions: Star, archive, export, and delete sessions
- Token Tracking: Display token usage per message
- Time Formatting: Smart date/time display (Today, Yesterday, etc.)
Examples
Basic Chat History
A complete chat history interface with sessions list and message preview.
Building a React App
2 messages | Updated Today
I'd be happy to help you build a React app with TypeScript! Let me guide you through the process step by step.
Installation
npx shadcn@latest add "https://agents-ui.github.io/agents-kit/c/agent-chat-history.json"API Reference
AgentChatHistory
| Prop | Type | Default | Description |
|---|---|---|---|
| sessions | ChatSession[] | - | Array of chat sessions |
| selectedSessionId | string | - | ID of the currently selected session |
| onSelectSession | (session: ChatSession) => void | - | Callback when a session is selected |
| onDeleteSession | (sessionId: string) => void | - | Callback to delete a session |
| onStarSession | (sessionId: string) => void | - | Callback to star/unstar a session |
| onArchiveSession | (sessionId: string) => void | - | Callback to archive a session |
| onExportSession | (sessionId: string) => void | - | Callback to export a session |
| className | string | - | Additional CSS classes |
ChatSession
| Property | Type | Required | Description |
|---|---|---|---|
| id | string | Yes | Unique session identifier |
| title | string | Yes | Session title |
| messages | ChatMessage[] | Yes | Array of messages in the session |
| createdAt | Date | Yes | Session creation date |
| updatedAt | Date | Yes | Last update date |
| starred | boolean | No | Whether session is starred |
| archived | boolean | No | Whether session is archived |
ChatMessage
| Property | Type | Required | Description |
|---|---|---|---|
| id | string | Yes | Unique message identifier |
| role | "user" | "assistant" | Yes | Message sender role |
| content | string | Yes | Message content |
| timestamp | Date | Yes | Message timestamp |
| tokens | number | No | Token count for the message |
| model | string | No | Model used (for assistant messages) |