✨ Add closing animation to ReasoningMessage

[devin-ai-integration]

Issue

• resolve: https://github.com/route06/liam-internal/issues/5816

Why is this change needed?

The ReasoningMessage component currently only has a slideDown animation when expanding, but no closing animation when collapsing - it just disappears instantly. This creates an asymmetric and jarring user experience. Issue #5816 requested implementing a smooth closing animation using Option 1 (Radix UI Collapsible approach).

Changes Made

Migration to Radix UI Collapsible:

• Replaced manual state management with CollapsibleRoot, CollapsibleTrigger, and CollapsibleContent
• Removed custom handleToggle function in favor of Radix's onOpenChange
• Used CollapsibleTrigger asChild to maintain button semantics while letting Radix control behavior

Enhanced Animations:

• Added smooth slideUp animation for closing transitions
• Updated animation from transform-based to height-based using var(--radix-collapsible-content-height)
• Changed timing from 0.2s ease to 200ms ease-out (consistent with ViewErrorsCollapsible)
• Added overflow: hidden to content for smooth height transitions

Accessibility:

• Added @media (prefers-reduced-motion: reduce) support
• Maintained aria-expanded attribute for screen readers

Implementation Details

This follows the exact pattern used in ViewErrorsCollapsible component. Radix UI automatically manages the data-state attribute ("open" or "closed") and provides the --radix-collapsible-content-height CSS variable for smooth animations.

Human Review Checklist

⚠️ Critical: Visual testing required - Local dev environment had missing Supabase credentials, so animations were not visually verified.

Must test:

• Opening animation looks smooth and natural
• Closing animation works correctly (main feature being added)
• Auto-collapse after 500ms during workflow execution still works
• Manual expand/collapse via button click functions properly
• Animations work across different browsers
• prefers-reduced-motion: reduce disables animations appropriately
• No console errors or React warnings

Requested by: [email protected]
Link to Devin run: https://app.devin.ai/sessions/fa5c15d75ce341f48cd70517f50f9a38

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[giselles-ai]

Unexpected error on running flow

Step	Status	Updated(UTC)
1	✅	Oct 10, 2025 3:04am
2	✅	Oct 10, 2025 3:05am
3	❌	Oct 10, 2025 3:05am

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
liam-app	Ready	Preview	Comment	Oct 10, 2025 9:42am
liam-assets	Ready	Preview	Comment	Oct 10, 2025 9:42am
liam-storybook	Ready	Preview	Comment	Oct 10, 2025 9:42am

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
liam-docs	Ignored	Preview		Oct 10, 2025 9:42am
liam-erd-sample	Skipped			Oct 10, 2025 9:42am

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[supabase]

Updates to Preview Branch (devin/1760065164-add-reasoning-message-closing-animation) ↗︎

Deployments	Status	Updated
Database	✅	Fri, 10 Oct 2025 09:38:53 UTC
Services	✅	Fri, 10 Oct 2025 09:38:53 UTC
APIs	✅	Fri, 10 Oct 2025 09:38:53 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Fri, 10 Oct 2025 09:38:54 UTC
Migrations	✅	Fri, 10 Oct 2025 09:38:56 UTC
Seeding	✅	Fri, 10 Oct 2025 09:38:56 UTC
Edge Functions	✅	Fri, 10 Oct 2025 09:38:56 UTC

---

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

[giselles-ai]

Check changeset necessity

Status: NOT REQUIRED

Reason:

• Changes are limited to frontend/apps/app/... which maps to the ignored package @liam-hq/app.
• No modifications to target packages that require publishing: @liam-hq/cli, @liam-hq/erd-core, @liam-hq/schema, or @liam-hq/ui.
• The UI behavior change (closing animation) is app-level and consumer-side; it does not alter any shared package APIs.
• No user-facing change in a publishable package; therefore, no version bump is needed.

Changeset (copy & paste):

<!-- No changeset required: changes only affect @liam-hq/app (ignored). -->