✨ Add closing animation to ReasoningMessage

frontend/apps/app/components/SessionDetailPage/components/Chat/components/Messages/AiMessage/ReasoningMessage/ReasoningMessage.module.css

@@ -60,16 +60,44 @@
   overflow-wrap: break-word;
   word-break: break-word;
   letter-spacing: 0.01em;
-  animation: slideDown 0.2s ease;
+  overflow: hidden;
+  transform-origin: top;
+  will-change: opacity, transform;
 }
 
-@keyframes slideDown {
+.content[data-state='open'] {
+  animation: reasoningFadeIn 200ms ease-out;
+}
+
+.content[data-state='closed'] {
+  animation: reasoningFadeOut 200ms ease-in forwards;
+}
+
+@keyframes reasoningFadeIn {
   from {
     opacity: 0;
-    transform: translateY(-8px);
+    transform: translateY(-4px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+
+@keyframes reasoningFadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .content[data-state='open'],
+  .content[data-state='closed'] {
+    animation: none;
+  }
+}

frontend/apps/app/components/SessionDetailPage/components/Chat/components/Messages/AiMessage/ReasoningMessage/ReasoningMessage.tsx

@@ -1,4 +1,10 @@
-import { ChevronDown, ChevronRight } from '@liam-hq/ui'
+import {
+  ChevronDown,
+  ChevronRight,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '@liam-hq/ui'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { MarkdownContent } from '../../../../../../../MarkdownContent'
@@ -36,37 +42,36 @@ export const ReasoningMessage: FC<Props> = ({
     return () => clearTimeout(timer)
   }, [content, isWorkflowRunning])
 
-  const handleToggle = () => {
-    setIsExpanded(!isExpanded)
-  }
-
   return (
-    <div className={styles.container}>
-      <button
-        type="button"
-        className={styles.header}
-        onClick={handleToggle}
-        aria-expanded={isExpanded}
-      >
-        <span className={styles.chevron}>
-          {isExpanded ? <ChevronDown /> : <ChevronRight />}
-        </span>
-        <span className={styles.durationWrapper}>
-          {isContentStreaming ? (
-            <>
-              <span className={styles.workedForText}>Reasoning</span>
-              <WorkflowRunningIndicator size={4} />
-            </>
-          ) : (
-            <span className={styles.workedForText}>Reasoning finished</span>
-          )}
-        </span>
-      </button>
-      {isExpanded && (
-        <div className={styles.content}>
-          <MarkdownContent content={content} />
-        </div>
-      )}
-    </div>
+    <CollapsibleRoot
+      open={isExpanded}
+      onOpenChange={setIsExpanded}
+      className={styles.container}
+    >
+      <CollapsibleTrigger asChild>
+        <button
+          type="button"
+          className={styles.header}
+          aria-expanded={isExpanded}
+        >
+          <span className={styles.chevron}>
+            {isExpanded ? <ChevronDown /> : <ChevronRight />}
+          </span>
+          <span className={styles.durationWrapper}>
+            {isContentStreaming ? (
+              <>
+                <span className={styles.workedForText}>Reasoning</span>
+                <WorkflowRunningIndicator size={4} />
+              </>
+            ) : (
+              <span className={styles.workedForText}>Reasoning finished</span>
+            )}
+          </span>
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className={styles.content}>
+        <MarkdownContent content={content} />
+      </CollapsibleContent>
+    </CollapsibleRoot>
   )
 }