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
1918 iconName,1918 iconName,
1919 toolIcon,1919 toolIcon,
1920 failed = false,1920 failed = false,
1921 active = false,
1921}: {1922}: {
1922 label: string;1923 label: string;
1923 iconName?: WorkEntryIconName;1924 iconName?: WorkEntryIconName;
1924 toolIcon?: ToolActivityIcon | undefined;1925 toolIcon?: ToolActivityIcon | undefined;
1925 failed?: boolean;1926 failed?: boolean;
1927 active?: boolean;
1926}) {1928}) {
1927 return (1929 return (
1928 <div className="min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed">1930 <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
1932 toolIcon={toolIcon}1934 toolIcon={toolIcon}
1933 failed={failed}1935 failed={failed}
1934 announceFailure={failed}1936 announceFailure={failed}
1937 active={active}
1935 />1938 />
1936 </div>1939 </div>
1937 );1940 );
@@ -1943,12 +1946,14 @@ function LiveActivityContent({ · 5 unmodified lines
1943 toolIcon,1946 toolIcon,
1944 failed = false,1947 failed = false,
1945 announceFailure = false,1948 announceFailure = false,
1949 active = false,
1946}: {1950}: {
1947 label: string;1951 label: string;
1948 iconName: WorkEntryIconName | undefined;1952 iconName: WorkEntryIconName | undefined;
1949 toolIcon?: ToolActivityIcon | undefined;1953 toolIcon?: ToolActivityIcon | undefined;
1950 failed?: boolean;1954 failed?: boolean;
1951 announceFailure?: boolean;1955 announceFailure?: boolean;
1956 active?: boolean;
1952}) {1957}) {
1953 const showTrailingFailureMark =1958 const showTrailingFailureMark =
1954 failed && iconName !== undefined && !toolIconAcceptsTint(iconName, toolIcon);1959 failed && iconName !== undefined && !toolIconAcceptsTint(iconName, toolIcon);
@@ -1978,7 +1983,7 @@ function LiveActivityContent({ · 23 unmodified lines
1978 />1983 />
1979 </span>1984 </span>
1980 ) : null}1985 ) : 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>
1982 {showTrailingFailureMark ? (1987 {showTrailingFailureMark ? (
1983 <XIcon aria-hidden className={cn("size-3 shrink-0", failedToolIconClassName)} />1988 <XIcon aria-hidden className={cn("size-3 shrink-0", failedToolIconClassName)} />
1984 ) : null}1989 ) : null}
@@ -2004,6 +2009,7 @@ function LiveWorkEntryTimelineRow({ row }: { row: Extract<TimelineRow, { kind: " · 19 unmodified lines
2004 iconName={workEntryIconName(row.entry)}2009 iconName={workEntryIconName(row.entry)}
2005 toolIcon={row.entry.toolIcon ?? row.entry.toolSource?.icon}2010 toolIcon={row.entry.toolIcon ?? row.entry.toolSource?.icon}
2006 failed={failed}2011 failed={failed}
2012 active={row.active}
2007 />2013 />
2008 </button>2014 </button>
2009 );2015 );
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
425 }425 }
426}426}
427 427
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
428@property --assistant-citation-highlight-opacity {456@property --assistant-citation-highlight-opacity {
429 syntax: "<number>";457 syntax: "<number>";
430 inherits: true;458 inherits: true;