feat: Add Timeline visualization component

[jezweb]

Summary

Adds a new Timeline visualization tool to BetterChat, allowing AI agents to display chronological events with status indicators.

Features

• ✨ Vertical timeline with connecting line
• 🎨 Status indicators: Complete (green), In Progress (blue), Pending (gray)
• ⏱️ Relative timestamp formatting (e.g., "2 hours ago")
• 🎯 Optional Lucide icon support for events
• 🌓 Dark/light theme support with CSS variables
• 📱 Responsive design with Tailwind
• 🎬 Smooth Framer Motion stagger animations
• 🔍 JSON view popup for debugging
• 🧰 Follows existing visualization tool patterns

Use Cases

• Project milestones and progress tracking
• Event chronologies and timelines
• Process steps with status indicators
• Audit trails and history logs
• Any time-based sequential data

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 schema
• src/components/tool-invocation/timeline.tsx - React component with animations

Files Modified (4)

• src/lib/ai/tools/index.ts - Added CreateTimeline enum
• src/lib/ai/tools/tool-kit.ts - Registered timeline tool
• src/components/message-parts.tsx - Added Timeline rendering
• src/components/default-tool-icon.tsx - Added LayoutList icon

Technical Stack

• Framework: React + Next.js
• Animations: Framer Motion (stagger effect with 100ms delay)
• Styling: Tailwind v4 + shadcn/ui components
• Validation: Zod schema
• Icons: Lucide React (LayoutList for menu, custom icons for events)
• Timestamps: date-fns (relative time formatting)

Testing

• ✅ TypeScript compilation succeeds
• ✅ Build succeeds without errors
• ✅ Dev server runs successfully
• ✅ Component renders with animations
• ✅ Dark/light themes work correctly
• ✅ Status colors are visually distinct
• ✅ Follows existing codebase patterns

Example Usage

AI agents can now use the timeline tool:

User: "Show me a timeline of the Rise of AI"
AI: [Uses createTimeline tool with events and statuses]

Notes

• No new dependencies added (all existing libraries)
• Follows exact same pattern as bar-chart, line-chart, pie-chart
• Compatible with existing MCP servers and workflows
• Auto-discovery by AI through tool registration

---

🤖 Generated with Claude Code

[vercel]

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.

[jezweb]

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.

[chenoka05]

Personally, I really liked it, thank you, I added it to my site.)