feat: Add Timeline visualization component #307
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements new Timeline tool for displaying chronological events with status indicators. Features: - Vertical timeline with connecting line - Status indicators: Complete (green), In Progress (blue), Pending (gray) - Relative timestamp formatting with date-fns - Optional Lucide icon support - Framer Motion stagger animations - Dark/light theme support - Responsive design Files Added: - src/lib/ai/tools/visualization/create-timeline.ts - Tool definition - src/components/tool-invocation/timeline.tsx - React component - screenshots/ - Example screenshots Files Modified: - src/lib/ai/tools/index.ts - Added CreateTimeline enum - src/lib/ai/tools/tool-kit.ts - Registered tool - src/components/message-parts.tsx - Added Timeline rendering 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Added LayoutList icon from Lucide React - Styled with text-blue-500 to match other visualization tools - Timeline displays with structured list icon in App Tools menu 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
Someone is attempting to deploy a commit to the cgoinglove's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
Author
|
If this is not good enough to be part of the repo thats ok I won't be offended. I've made it all with claude code and tried to make sure we checked for patterns and ways things were done to follow. I'd like to be able to contribute if possible with other ideas too thank you for considering this submission. |
|
Personally, I really liked it, thank you, I added it to my site.) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new Timeline visualization tool to BetterChat, allowing AI agents to display chronological events with status indicators.
Features
Use Cases
Screenshots
Dark Mode
Light Mode
Creating Timeline
Real-world Example
JSON View
Implementation Details
Files Created (2)
src/lib/ai/tools/visualization/create-timeline.ts- Tool definition with Zod schemasrc/components/tool-invocation/timeline.tsx- React component with animationsFiles Modified (4)
src/lib/ai/tools/index.ts- Added CreateTimeline enumsrc/lib/ai/tools/tool-kit.ts- Registered timeline toolsrc/components/message-parts.tsx- Added Timeline renderingsrc/components/default-tool-icon.tsx- Added LayoutList iconTechnical Stack
Testing
Example Usage
AI agents can now use the timeline tool:
Notes
🤖 Generated with Claude Code