From 6be3f798fcd6553a77e9ef060e180e50808815d3 Mon Sep 17 00:00:00 2001 From: Danny Avila Date: Mon, 31 Aug 2026 14:12:39 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=A9=20style:=20Shimmer=20Live=20Reason?= =?UTF-8?q?ing=20Labels=20and=20Timers=20(#15431)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ style: Shimmer the Thinking Label and Elapsed Timer While Generating The label above streaming reasoning and the elapsed-time reading beneath a streaming response both sat static while every other in-flight indicator on the row — a running tool call's label, a running skill, a pending question — carried the shimmer. Give them the same treatment so "in flight" reads the same way everywhere. Both are gated on state that is already established: - `Reasoning` shimmers only while `effectiveIsSubmitting && isLast`. Settled thoughts, an older row the reader paged to, and reasoning overtaken by later content all keep the plain label. The legacy `Thinking` component and `ThinkingLabel` (the detached-subagent marker) do not opt in. - `Elapsed` only ever renders under the streaming latest row at the newest sibling position (`shouldShowElapsed`), so there is no settled reading for the animation to misrepresent. Completed tool-call durations go through `getRunStepDurationLabels` and are untouched. `.shimmer` and Tailwind's `animate-in` entrance both drive `animation-name`, and `.shimmer` — plain CSS after `@tailwind utilities`, equal specificity — would win and silently kill the generated-label slide-in. The two therefore sit on nested spans, in the order that is safe for `background-clip: text`: the transform on the ancestor, the clipped background on the descendant. * 🎨 fix: Drive the Shimmer From Theme Roles and Honor Reduced Motion Two review findings, both against the shared `.shimmer` utility rather than this PR's call sites — but this PR adds two more consumers of it, one of which sweeps continuously for the whole generation, so they land here. Theme roles. The gradient hard-coded near-black and near-white and selected the second with `.dark`, so a stored or custom theme that restated its text colors got a shimmer that ignored them. Themes are applied as bare RGB triplets on the document element; the sweep now reads `--shimmer-base` / `--shimmer-dip` (with the established `-alpha` companions the border roles already use) and falls back to `--text-primary` when a theme states no base of its own. The fallback is resolved at the label, not in the `:root` declaration — `var()` substitutes where it is declared, so seeding `--shimmer-base: var(--text-primary)` on `html` would have frozen the default and ignored every theme scope applied further down. Dark still declares its base outright: that value is dimmer than the dark theme's text color, and restating it as `--text-primary` would have brightened every shimmer. Default light and dark are preserved: rendered old against new at a frozen sweep position, 144 of 137,280 pixels differ by a single 1/255 channel step, which is the alpha-syntax rounding path. A theme that sets only `--text-primary` now colors the sweep with no shimmer-specific override. Reduced motion. `.shimmer` was the one custom animation in `style.css` with no `prefers-reduced-motion` guard — `.t-icon-swap`, `.t-avatar`, `.scroll-animation-*` and `[data-lc-fade]` all carry one. Stopping the animation alone is not a fallback: the background settles at position 0 and shows only half the sweep, stranding the tail of the label in the near-invisible dip. The guard drops the gradient and hands the glyphs back to the color they would otherwise have had. * 🎨 fix: Register the Shimmer Stops and Keep the Sweep Whole Codex round 2, on the previous round's fixes. Register the stops. Moving the constants into CSS variables did not make them theme-owned: `applyResolvedTheme` writes only `themeColorTokens`, so nothing a theme declares could reach `--shimmer-base`. Dark was the case that mattered — `style.css` declares a `.dark` base outright, which a theme can only outrank by having the property applied to the document element — so a custom dark theme still got the stock white sweep. `rgb-shimmer-base` and `rgb-shimmer-dip` now sit in the registry beside the text roles, seeded with today's values in both modes; `registry.spec` already enforces light/dark key parity. The opacities stay in CSS as `--shimmer-*-alpha`, the way the border roles keep `--border-*-alpha`. This narrows the earlier claim: a *versioned* theme resolves every default, so it now states its own sweep rather than inheriting `--text-primary`. The `--text-primary` fallback still serves plain CSS and legacy partial `themeRGB` themes, which apply only the keys they name. Keep the sweep whole. `key` remounts the label row so the entrance replays, restarting the sweep with it; reasoning labels revise on a 3s default (`DEFAULT_UPDATE_INTERVAL_MS`) against a 4s sweep, so it never completes a cycle. Keying only when an entrance will actually play leaves an un-animated label — smooth streaming off, or reduced motion — with a stable identity and an unbroken sweep, instead of a bare snap with nothing to cover it. Not adopted: keeping the shimmer element stable and replaying the entrance inside it. The clipped element paints the glyphs itself, so a descendant's opacity cannot fade them — rendered at entrance t=0, the current nesting is correctly invisible while the swapped one sits fully lit through its own fade. The remaining restart happens only underneath a deliberate entrance animation. * 🎨 fix: Carry Legacy Themes Onto the Registered Shimmer Stops Codex round 3. Registering the stops migrated versioned themes but not stored or environment `themeRGB` ones: `ThemeProvider` routes those to the legacy `applyTheme` adapter, which bypasses `resolveTheme` and applies only the keys a theme names. A stored theme has no shimmer keys, so it kept the stock sweep while the rest of its palette moved — and in dark the CSS cannot recover on its own, because `.dark` declares a base outright and the `--text-primary` fallback never runs. `mapColors` already carries legacy themes across a token they predate: `--surface-composer-hover` derives from `rgb-surface-hover` when absent. The shimmer base follows the same shape, deriving from `rgb-text-primary` — which is what it already resolves to in light, so only dark changes. The dip has no legacy counterpart and stays at its default; it is the faded half of the sweep, carried at low alpha, so it reads as dimmed against any base. Not a regression being fixed but an improvement being extended: before this branch, every theme got the same hard-coded sweep. This is the last path that still did. * 🎨 fix: Mirror the Shimmer Fallback Onto Versioned Theme Resolution Codex round 4. The compat fallback added last round covered only the legacy adapter, but this codebase carries these fallbacks on both paths: the `rgb-surface-composer-hover` derivation exists in `mapColors` AND in `resolveTheme`. Adding the shimmer stop to just one left the halves disagreeing. The versioned path is the one where the omission actually hurts. A definition written before these keys existed cannot name them, so `resolveTheme` filled the gap from the bundled base and pinned that theme's in-flight labels to LibreChat's own sweep — a theme restating its text as white would light every label in the stock near-black. Omission there means "not written yet", not "wants the bundled sweep"; a theme that does want it still says so by naming the stop, exactly as it opts out of the composer-hover fallback. Both paths now behave the same: a theme that restates its text and names no shimmer base gets its sweep from that text color, whichever way it is applied. --- .../Chat/Messages/Content/Parts/Reasoning.tsx | 1 + .../Chat/Messages/Content/Parts/Thinking.tsx | 21 ++++++- .../Parts/__tests__/Reasoning.spec.tsx | 44 ++++++++++++++ .../src/components/Chat/Messages/Elapsed.tsx | 6 +- .../Chat/Messages/__tests__/Elapsed.spec.tsx | 3 + client/src/style.css | 42 +++++++++----- packages/client/src/theme/registry.spec.ts | 38 +++++++++++++ packages/client/src/theme/registry.ts | 20 ++++++- packages/client/src/theme/themes/dark.ts | 2 + packages/client/src/theme/themes/default.ts | 2 + packages/client/src/theme/types/index.ts | 7 +++ .../client/src/theme/utils/applyTheme.spec.ts | 57 ++++++++++++++++++- packages/client/src/theme/utils/applyTheme.ts | 14 +++++ 13 files changed, 237 insertions(+), 20 deletions(-) create mode 100644 client/src/components/Chat/Messages/Content/Parts/__tests__/Reasoning.spec.tsx diff --git a/client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx b/client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx index 70243f7a8e..bf2dd73e70 100644 --- a/client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx +++ b/client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx @@ -134,6 +134,7 @@ const Reasoning = memo((props: ReasoningProps) => { animateLabel={ smoothStreaming && effectiveIsSubmitting && Boolean(reasoningLabel?.trim()) } + shimmerLabel={effectiveIsSubmitting && isLast} />
) => void; @@ -50,6 +51,10 @@ export const ThinkingButton = memo( contentId: string; showCopyButton?: boolean; animateLabel?: boolean; + /** Reasoning is still being generated: carry the same shimmer a running + * tool call's label carries, so "thinking" reads as in-flight rather + * than as a settled disclosure. Off for finished thoughts. */ + shimmerLabel?: boolean; }) => { const localize = useLocalize(); const fontSize = useAtomValue(fontSizeAtom); @@ -93,15 +98,27 @@ export const ThinkingButton = memo( aria-hidden="true" /> + {/* The entrance and the shimmer both drive `animation-name`, so they + cannot share an element — and the nesting order is not a free + choice either. The clipped element paints the glyphs itself, so a + descendant's opacity cannot fade them: entrance outside and + shimmer inside fades correctly, while the reverse leaves the label + fully lit right through its own fade. + + `key` remounts the row so the entrance replays, and that restarts + the sweep with it. Reasoning labels revise on a 3s default against + a 4s sweep, so the restart is frequent; it reads as intentional + only while the entrance is there to cover it. With no entrance to + play, the row keeps its identity and the sweep runs unbroken. */} - {label} + {shimmerLabel ? {label} : label} {content && showCopyButton && ( diff --git a/client/src/components/Chat/Messages/Content/Parts/__tests__/Reasoning.spec.tsx b/client/src/components/Chat/Messages/Content/Parts/__tests__/Reasoning.spec.tsx new file mode 100644 index 0000000000..8c1c506e21 --- /dev/null +++ b/client/src/components/Chat/Messages/Content/Parts/__tests__/Reasoning.spec.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { MessageContext } from '~/Providers'; +import Reasoning from '../Reasoning'; + +type ContextOverrides = { + isSubmitting?: boolean; + isLatestMessage?: boolean; +}; + +function renderReasoning( + { isSubmitting = true, isLatestMessage = true }: ContextOverrides = {}, + isLast = true, +) { + return render( + + + , + ); +} + +describe('Reasoning label shimmer', () => { + it('shimmers the label while the reasoning is still being generated', () => { + renderReasoning(); + expect(screen.getByText('Thinking...')).toHaveClass('shimmer'); + }); + + it('leaves settled thoughts unanimated', () => { + renderReasoning({ isSubmitting: false }); + expect(screen.getByText('Thoughts')).not.toHaveClass('shimmer'); + }); + + it('leaves an older row unanimated while a newer one streams', () => { + renderReasoning({ isLatestMessage: false }); + expect(screen.getByText('Thoughts')).not.toHaveClass('shimmer'); + }); + + it('leaves reasoning that has been overtaken by later content unanimated', () => { + renderReasoning({}, false); + expect(screen.getByText('Thoughts')).not.toHaveClass('shimmer'); + }); +}); diff --git a/client/src/components/Chat/Messages/Elapsed.tsx b/client/src/components/Chat/Messages/Elapsed.tsx index 2029d68598..01e9af3a2c 100644 --- a/client/src/components/Chat/Messages/Elapsed.tsx +++ b/client/src/components/Chat/Messages/Elapsed.tsx @@ -43,6 +43,10 @@ export const shouldShowElapsed = ({ * re-render on its account. The compact reading is hidden from assistive * technology in favor of a spoken equivalent; neither is an `aria-live` region, * so the tick never announces. + * + * The reading carries the same shimmer a running tool call's label carries. It + * only ever renders mid-generation (see `shouldShowElapsed`), so there is no + * settled state for the animation to misrepresent. */ const Elapsed = memo(function Elapsed({ index }: { index: number }) { const submissionStart = useRecoilValue(store.submissionStartFamily(index)); @@ -73,7 +77,7 @@ export const ElapsedTimer = memo(function ElapsedTimer({ start: startAt }: { sta * the alignment holds in RTL. */ return ( -