mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
lukasmoschitz
6756eac460
## Problem The "CopilotKit Intelligence" indicator's icon (spinner → checkmark) rendered **blank in Safari and Firefox**. Its geometry was defined through the CSS `d:` property, which is Blink-only (Chrome/Edge) — so in any other engine the stylesheet-driven path drew nothing. ## Fix - **Geometry in the `d` attribute, not CSS `d:`** — renders in every browser. - **Two overlaid paths instead of one morphing path.** A spinning **arc** that fades out, and a **checkmark** that draws itself in via `stroke-dashoffset`, upright. Cross-fading two static shapes is more robust than path-morphing (the old `d:` morph was Chrome-only anyway). - **Arc spins via `transform-box: fill-box; transform-origin: center`** — the Safari-safe way to rotate an SVG sub-element about its center. (`transform-box: view-box` is mis-resolved by WebKit and spins off-center; a SMIL `<animateTransform>` fixes Safari but stalls for a beat on first paint in Chrome — `fill-box` + `center` is correct and instant in both.) - **Spin isolated to the arc**, so the checkmark always renders upright regardless of where the spin was when the turn finished, and the arc keeps spinning as it fades (no abrupt stop / snap-back). - **`pathLength="1"` on both paths** so dashes are expressed as plain fractions — one consistent, self-documenting idiom for both shapes. - **`prefers-reduced-motion` support** added: the arc doesn't spin and the in-progress → finished states swap instantly. - Both stale design docblocks rewritten to describe the actual implementation. ## Scope Two files — `IntelligenceIndicatorView.tsx` and `globals.css`. No behavior/runtime changes; purely the indicator's presentation. The settle choreography (glass chrome, hue shift, faux-italic label) is unchanged. ## Testing - `nx test react-core` — 24 intelligence-indicator tests pass (the suite asserts DOM structure/behavior; cross-browser rendering itself isn't observable in jsdom and was verified manually in Chrome + Safari). - oxlint / oxfmt clean; type-check clean for the changed files. - Manually verified in **Chrome and Safari**: icon renders, spins centered, fades out mid-spin, checkmark draws in upright; no Chrome startup stall, no Safari wobble.