From 3b9bd2181da06862aea5875d901bba3dd68b16de Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 14 Aug 2026 11:23:11 -0400
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=20fix:=20Honor=20reduced=20motion=20o?=
 =?UTF-8?q?n=20manual=20phase=20disclosure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The entrance already respected the preference, but manually opening or
closing a phase did not: `useExpandCollapse` writes its transition as an
inline style, which cannot carry a `prefers-reduced-motion` media query,
and there is no global reduced-motion reset in the stylesheet. Before this
PR the phase used `<details>`, which had no animation at all — so the swap
to an animated disclosure handed reduced-motion readers a 300ms fold they
did not have.

Resolve the preference in the hook and drop the transition outright. Every
expanding panel in the message content shares it, so tool calls, thinking
blocks, attachments and web-search sources are covered by the same change.
The chevron and the fold's own utility classes get `motion-reduce`
overrides, which the inline styles cannot express.
---
 .../Messages/Content/ActivityPhaseGroup.tsx   |  4 +-
 .../__tests__/useExpandCollapse.spec.tsx      | 54 +++++++++++++++++++
 .../src/hooks/Messages/useExpandCollapse.ts   | 12 ++++-
 3 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 client/src/hooks/Messages/__tests__/useExpandCollapse.spec.tsx

diff --git a/client/src/components/Chat/Messages/Content/ActivityPhaseGroup.tsx b/client/src/components/Chat/Messages/Content/ActivityPhaseGroup.tsx
index 0d786a21a5..431b285ce1 100644
--- a/client/src/components/Chat/Messages/Content/ActivityPhaseGroup.tsx
+++ b/client/src/components/Chat/Messages/Content/ActivityPhaseGroup.tsx
@@ -18,7 +18,7 @@ import { cn } from '~/utils';
 /** Matches `EXPAND_TRANSITION` so the header, the panel, and the card chrome
  *  all resolve on the same curve — three properties animating on two different
  *  easings is what makes a fold read as two separate movements. */
-const FOLD_EASING = 'duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]';
+const FOLD_EASING = 'duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none';
 
 type ActivityPhasePart = Extract<TMessageContentParts, { type: ContentTypes.ACTIVITY_LABEL }> & {
   activity_label_type?: 'phase';
@@ -200,7 +200,7 @@ export default function ActivityPhaseGroup({
             </span>
             <ChevronDown
               className={cn(
-                'size-4 shrink-0 transition-transform duration-200 ease-out',
+                'size-4 shrink-0 transition-transform duration-200 ease-out motion-reduce:transition-none',
                 isExpanded && 'rotate-180',
               )}
               aria-hidden="true"
diff --git a/client/src/hooks/Messages/__tests__/useExpandCollapse.spec.tsx b/client/src/hooks/Messages/__tests__/useExpandCollapse.spec.tsx
new file mode 100644
index 0000000000..a09bbd8f8b
--- /dev/null
+++ b/client/src/hooks/Messages/__tests__/useExpandCollapse.spec.tsx
@@ -0,0 +1,54 @@
+import { renderHook } from '@testing-library/react';
+import useExpandCollapse, { EXPAND_TRANSITION } from '../useExpandCollapse';
+
+function stubReducedMotion(reduce: boolean) {
+  window.matchMedia = jest.fn().mockImplementation((query: string) => ({
+    matches: query.includes('prefers-reduced-motion') ? reduce : false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })) as unknown as typeof window.matchMedia;
+}
+
+describe('useExpandCollapse', () => {
+  const original = window.matchMedia;
+
+  afterEach(() => {
+    window.matchMedia = original;
+  });
+
+  test('animates the disclosure by default', () => {
+    stubReducedMotion(false);
+
+    const { result } = renderHook(() => useExpandCollapse(true));
+
+    expect(result.current.style.transition).toBe(EXPAND_TRANSITION);
+    expect(result.current.style.gridTemplateRows).toBe('1fr');
+    expect(result.current.style.opacity).toBe(1);
+  });
+
+  /** The transition is an inline style, so it cannot carry a media query.
+   *  Without this the panel still folds over 300ms for a reader who asked
+   *  the platform for no motion. */
+  test('drops the transition under prefers-reduced-motion', () => {
+    stubReducedMotion(true);
+
+    const { result } = renderHook(() => useExpandCollapse(true));
+
+    expect(result.current.style.transition).toBe('none');
+  });
+
+  test('still collapses to a zero row under reduced motion', () => {
+    stubReducedMotion(true);
+
+    const { result } = renderHook(() => useExpandCollapse(false));
+
+    expect(result.current.style.transition).toBe('none');
+    expect(result.current.style.gridTemplateRows).toBe('0fr');
+    expect(result.current.style.opacity).toBe(0);
+  });
+});
diff --git a/client/src/hooks/Messages/useExpandCollapse.ts b/client/src/hooks/Messages/useExpandCollapse.ts
index dc298c7f6c..2e48e8d6b4 100644
--- a/client/src/hooks/Messages/useExpandCollapse.ts
+++ b/client/src/hooks/Messages/useExpandCollapse.ts
@@ -1,14 +1,22 @@
 import { useRef, useLayoutEffect, useMemo } from 'react';
+import { useMediaQuery } from '@librechat/client';
 import type { CSSProperties } from 'react';
 
 export const EXPAND_TRANSITION =
   'grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)';
 
+/**
+ * The disclosure motion is an inline style, so it cannot carry a
+ * `prefers-reduced-motion` media query the way a utility class can. Resolve
+ * the preference here instead and drop the transition outright — every
+ * expanding panel in the message content shares this hook.
+ */
 export default function useExpandCollapse(isExpanded: boolean): {
   style: CSSProperties;
   ref: React.RefObject<HTMLDivElement>;
 } {
   const ref = useRef<HTMLDivElement>(null);
+  const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
 
   useLayoutEffect(() => {
     const el = ref.current;
@@ -27,10 +35,10 @@ export default function useExpandCollapse(isExpanded: boolean): {
     () => ({
       display: 'grid',
       gridTemplateRows: isExpanded ? '1fr' : '0fr',
-      transition: EXPAND_TRANSITION,
+      transition: reducedMotion ? 'none' : EXPAND_TRANSITION,
       opacity: isExpanded ? 1 : 0,
     }),
-    [isExpanded],
+    [isExpanded, reducedMotion],
   );
 
   return { style, ref };