History

fix(web): restore the running tool label shine (#9777)

maria committed 2 months ago

Commit 935917f1 parent 24aef0e2 files · +35 −1Browse files

Unified · Split

2 files
  1. apps/web/src/components/chat/MessagesTimeline.tsx +7 −1
  2. apps/web/src/index.css +28 −0
apps/web/src/components/chat/MessagesTimeline.tsx+7−1
@@ -1918,11 +1918,13 @@ function LiveActivityRow({ · 1917 unmodified lines
19181918 iconName,
19191919 toolIcon,
19201920 failed = false,
1921+ active = false,
19211922 }: {
19221923 label: string;
19231924 iconName?: WorkEntryIconName;
19241925 toolIcon?: ToolActivityIcon | undefined;
19251926 failed?: boolean;
1927+ active?: boolean;
19261928 }) {
19271929 return (
19281930 <div className="min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed">
@@ -1932,6 +1934,7 @@ function LiveActivityRow({ · 3 unmodified lines
19321934 toolIcon={toolIcon}
19331935 failed={failed}
19341936 announceFailure={failed}
1937+ active={active}
19351938 />
19361939 </div>
19371940 );
@@ -1943,12 +1946,14 @@ function LiveActivityContent({ · 5 unmodified lines
19431946 toolIcon,
19441947 failed = false,
19451948 announceFailure = false,
1949+ active = false,
19461950 }: {
19471951 label: string;
19481952 iconName: WorkEntryIconName | undefined;
19491953 toolIcon?: ToolActivityIcon | undefined;
19501954 failed?: boolean;
19511955 announceFailure?: boolean;
1956+ active?: boolean;
19521957 }) {
19531958 const showTrailingFailureMark =
19541959 failed && iconName !== undefined && !toolIconAcceptsTint(iconName, toolIcon);
@@ -1978,7 +1983,7 @@ function LiveActivityContent({ · 23 unmodified lines
19781983 />
19791984 </span>
19801985 ) : null}
1981− <span className="min-w-0 flex-1 truncate">{label}</span>
1986+ <span className={cn("min-w-0 flex-1 truncate", active && "live-tool-shine")}>{label}</span>
19821987 {showTrailingFailureMark ? (
19831988 <XIcon aria-hidden className={cn("size-3 shrink-0", failedToolIconClassName)} />
19841989 ) : null}
@@ -2004,6 +2009,7 @@ function LiveWorkEntryTimelineRow({ row }: { row: Extract<TimelineRow, { kind: " · 19 unmodified lines
20042009 iconName={workEntryIconName(row.entry)}
20052010 toolIcon={row.entry.toolIcon ?? row.entry.toolSource?.icon}
20062011 failed={failed}
2012+ active={row.active}
20072013 />
20082014 </button>
20092015 );
apps/web/src/index.css+28−0
@@ -425,6 +425,34 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil · 424 unmodified lines
425425 }
426426 }
427427
428+@keyframes live-tool-shine {
429+ from {
430+ background-position:
431+ -4.5rem 0,
432+ 0 0;
433+ }
434+ to {
435+ background-position:
436+ calc(100% + 4.5rem) 0,
437+ 0 0;
438+ }
439+}
440+
441+@utility live-tool-shine {
442+ @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
443+ color: transparent;
444+ background-image:
445+ linear-gradient(to right, transparent, var(--contrast-foreground), transparent),
446+ linear-gradient(var(--contrast-secondary-label), var(--contrast-secondary-label));
447+ background-size:
448+ 4.5rem 100%,
449+ 100% 100%;
450+ background-repeat: no-repeat;
451+ background-clip: text;
452+ animation: live-tool-shine 2.2s steps(30) infinite;
453+ }
454+}
455+
428456 @property --assistant-citation-highlight-opacity {
429457 syntax: "<number>";
430458 inherits: true;