diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx index 4e55991f870371832e077dd0553637334e24f503..df952aeca3828fbe6a9cf10febef5d5c426a6d0e 100644 --- a/apps/web/src/components/chat/MessagesTimeline.tsx +++ b/apps/web/src/components/chat/MessagesTimeline.tsx @@ -1918,11 +1918,13 @@ function LiveActivityRow({ iconName, toolIcon, failed = false, + active = false, }: { label: string; iconName?: WorkEntryIconName; toolIcon?: ToolActivityIcon | undefined; failed?: boolean; + active?: boolean; }) { return (
@@ -1932,6 +1934,7 @@ function LiveActivityRow({ toolIcon={toolIcon} failed={failed} announceFailure={failed} + active={active} />
); @@ -1943,12 +1946,14 @@ function LiveActivityContent({ toolIcon, failed = false, announceFailure = false, + active = false, }: { label: string; iconName: WorkEntryIconName | undefined; toolIcon?: ToolActivityIcon | undefined; failed?: boolean; announceFailure?: boolean; + active?: boolean; }) { const showTrailingFailureMark = failed && iconName !== undefined && !toolIconAcceptsTint(iconName, toolIcon); @@ -1978,7 +1983,7 @@ function LiveActivityContent({ /> ) : null} - {label} + {label} {showTrailingFailureMark ? ( ) : null} @@ -2004,6 +2009,7 @@ function LiveWorkEntryTimelineRow({ row }: { row: Extract ); diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 54bb5b70d5fa81606493c888646b28301d189f53..1369cd31f5b3c74968d1331c064a54aa5df36671 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -425,6 +425,34 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil } } +@keyframes live-tool-shine { + from { + background-position: + -4.5rem 0, + 0 0; + } + to { + background-position: + calc(100% + 4.5rem) 0, + 0 0; + } +} + +@utility live-tool-shine { + @media (prefers-reduced-motion: no-preference) and (forced-colors: none) { + color: transparent; + background-image: + linear-gradient(to right, transparent, var(--contrast-foreground), transparent), + linear-gradient(var(--contrast-secondary-label), var(--contrast-secondary-label)); + background-size: + 4.5rem 100%, + 100% 100%; + background-repeat: no-repeat; + background-clip: text; + animation: live-tool-shine 2.2s steps(30) infinite; + } +} + @property --assistant-citation-highlight-opacity { syntax: ""; inherits: true;