Closed laholstege closed 2 months ago
The project has introduced a new feature for throwing confetti using the canvas-confetti
library and improved animations in various chat components. Confetti effects are triggered on user feedback, and components now leverage framer-motion
for smoother animations. Additionally, new types for canvas-confetti
have been added to ensure type safety.
File | Change Summary |
---|---|
package.json | Added canvas-confetti and @types/canvas-confetti to dependencies and devDependencies, respectively. |
.../chat/answer/chatActions.tsx | Integrated AnimatePresence from framer-motion to enhance conditional rendering animations. |
.../chat/answer/feedbackBar.tsx | Updated animation settings for motion.div to use spring effects for opacity and scale. |
.../chat/answer/feedbackButtons.tsx | Added confetti effect on thumbs-up feedback with throwConfettiAt and updated button click handling. |
.../ui/animatedButton.tsx | Introduced optional buttonRef prop for referencing button elements within AnimatedButton component. |
src/lib/confetti.ts | Added new utility functions throwConfetti and throwConfettiAt for creating confetti effects. |
sequenceDiagram
participant User
participant AnimatedButton
participant FeedbackButtons
participant ConfettiLib as Confetti Library
User ->> AnimatedButton: Click "Thumbs Up"
AnimatedButton ->> FeedbackButtons: Trigger onClick
FeedbackButtons ->> ConfettiLib: Call throwConfettiAt(element)
ConfettiLib -->> User: Display confetti
FeedbackButtons ->> onFeedback: Call onFeedback("thumbs_up")
In the code, a change we see, Confetti flies with jubilee! 🎉 Buttons now with grace collapse, Animations smooth, perhaps. User feedback brings delight, With colors bursting, oh so bright! 🌟🐇
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
closes #49
❗ requires npm install ❗
Summary by CodeRabbit
canvas-confetti
library for confetti effects.canvas-confetti
.