[Draft] Dylan/quick actions animations + UI

[starmorph]

Here's a PR summary of the changes made to the quick actions toolbar:

Quick Actions Toolbar Enhancements

Loom Overview

Overview

This PR introduces several improvements to the quick actions toolbar, focusing on enhanced animations, better user interaction, and consistent styling across both code and text toolbars.

Key Changes

1. Animation Improvements

• Added smooth spring-based animations for toolbar expansion/collapse
• Implemented Framer Motion transitions for all interactive elements
• Added hover and click animations for toolbar options
• Improved animation timing and physics for more natural feel

2. Toolbar Behavior

• Added hover-to-expand functionality
• Improved click handling with visual feedback
• Added proper state management for active options
• Implemented smooth transitions between states

3. UI Enhancements

• Standardized button sizes and spacing
• Added consistent hover and focus states
• Improved tooltip positioning and animations
• Enhanced visual feedback for user interactions

4. Component-Specific Improvements

Length Options

• Added smooth slider animations
• Improved tooltip positioning to the left
• Enhanced slider styling with proper track and thumb colors
• Added spring-based animations for value changes

Reading Level Options

• Added expand/collapse animations
• Improved tooltip positioning
• Enhanced visual feedback for selection

Translate Options

• Added smooth expansion animations
• Improved tooltip positioning
• Enhanced visual feedback for language selection

5. Technical Improvements

• Standardized animation parameters across components
• Improved state management
• Added proper TypeScript types
• Enhanced component organization

Animation Parameters

• Spring stiffness: 300
• Spring damping: 30
• Transition durations: 0.2-0.3s
• Consistent animation patterns across all components

Testing Notes

• Tested hover interactions
• Verified animation smoothness
• Checked mobile responsiveness
• Validated state management
• Confirmed proper cleanup on unmount

Future Considerations

• Consider adding keyboard navigation
• Potential for additional animation refinements
• Possible optimization of animation performance
• Consider adding more interactive feedback states

This PR significantly improves the user experience of the quick actions toolbar by making it more responsive, visually appealing, and consistent across different contexts.

[vercel]

@starmorph is attempting to deploy a commit to the LangChain Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
open-canvas	❌ Failed (Inspect)			Mar 18, 2025 1:11am

[bracesproul]

seeing some issues with the selected state for custom quick actions

1. when i submit an action, it doesn't reset the tool bar state, so when I open it again it shows the selected quick action as selected still. ideally these states reset if the quick action toolbar collapses/an action is submitted.
2. im also seeing some cases where i click on an action which requires the double "click to confirm", but it instead sends the request right away. see loom (I only clicked the fix bugs icon once in this video) also some other weird stuff is happening around the expanded/collapsed state.

other nits:

1. the "confirm" step when a user clicks the icon should ideally be an arrow like in ChatGPT, instead of the same icon with inverted colors. imo this UX is a little more clear to the user that clicking again will actually execute the task.
2. for the actions which are nested (e.g changing languages, reading level, etc), these should also require the click to confirm. see this loom showing how ChatGPT does it for the text length slider

Other than that, the animations are much better now! Thanks for this