authorgravatar for 62337003+Bil0000@users.noreply.github.comBilal Bakr <62337003+Bil0000@users.noreply.github.com> 2026-08-04 22:41:07+03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-04 15:41:07-04:00
log90e3778660690e4f00bdd4e237fc541725dc1427
treede91d11a42df91a847473ca8fdc52105883ffc7e
parent94331c58ecda6b32ee101e8f5ce2dfe5b5195afd
signature Signed by PGP key B5690EEEBB952194

fix(web): stop the chat timeline reading through the provider status banner (#5353)

2 files changed, 13 insertions(+), 3 deletions(-)

apps/web/src/components/chat/ProviderStatusBanner.test.tsx+9
...@@ -44,6 +44,15 @@ describe("ProviderStatusBanner", () => {...@@ -44,6 +44,15 @@ describe("ProviderStatusBanner", () => {
44 expect(markup).toContain("absolute top-2 right-2");44 expect(markup).toContain("absolute top-2 right-2");
45 });45 });
4646
47 it("renders on a glass surface so the timeline never reads through the banner", () => {
48 const markup = renderToStaticMarkup(
49 <ProviderStatusBanner status={warningProvider()} onDismiss={() => {}} />,
50 );
51
52 expect(markup).toContain("alert-glass");
53 expect(markup).toContain('data-variant="warning"');
54 });
55
47 it("labels error dismiss controls with the correct severity", () => {56 it("labels error dismiss controls with the correct severity", () => {
48 const markup = renderToStaticMarkup(57 const markup = renderToStaticMarkup(
49 <ProviderStatusBanner58 <ProviderStatusBanner
apps/web/src/components/chat/ProviderStatusBanner.tsx+4-3
...@@ -46,11 +46,12 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({...@@ -46,11 +46,12 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
46 <div className="pointer-events-auto mx-auto w-fit max-w-[calc(100%-2rem)] pt-3">46 <div className="pointer-events-auto mx-auto w-fit max-w-[calc(100%-2rem)] pt-3">
47 <div47 <div
48 className={cn(48 className={cn(
49 "relative inline-flex items-center gap-3 rounded-xl border py-3 ps-3.5 pe-10 text-card-foreground text-sm",49 "alert-glass relative inline-flex items-center gap-3 rounded-xl border py-3 ps-3.5 pe-10 text-card-foreground text-sm",
50 status.status === "warning"50 status.status === "warning"
51 ? "border-warning/32 bg-warning/4 [&_svg]:text-warning"51 ? "border-warning/32 [&_svg]:text-warning"
52 : "border-destructive/32 bg-destructive/4 text-destructive-foreground [&_svg]:text-destructive",52 : "border-destructive/32 text-destructive-foreground [&_svg]:text-destructive",
53 )}53 )}
54 data-variant={status.status === "warning" ? "warning" : "error"}
54 role="alert"55 role="alert"
55 >56 >
56 <InfoIcon className="size-4 shrink-0" aria-hidden />57 <InfoIcon className="size-4 shrink-0" aria-hidden />