Skip to content

fix(web): extend graph gradient backdrop across the chat panel #1060

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sreedharsreeram wants to merge 4 commits into
base: main
Choose a base branch
from
+38 −10
Open

fix(web): extend graph gradient backdrop across the chat panel #1060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7979b1c
fix(web): extend graph gradient backdrop across the chat panel
sreedharsreeram Jun 7, 2026
27df084
fix(web): add hairline divider between graph and chat panels
sreedharsreeram Jun 7, 2026
78d9494
fix(web): recess the chat panel with a soft darkening overlay
sreedharsreeram Jun 7, 2026
39e9c75
fix(web): drop hard hairline divider, keep soft fade only
sreedharsreeram Jun 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions apps/web/components/chat/chat-graph-context-rail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ export function ChatGraphContextRail({
messages,
containerTags,
className,
showBackdrop = true,
}: {
messages: UIMessage[]
containerTags?: string[] | null
className?: string
showBackdrop?: boolean
}) {
const { effectiveContainerTags } = useProject()
const graphContainerTags =
Expand All @@ -32,14 +34,22 @@ export function ChatGraphContextRail({
<div
id="chat-graph-context-rail"
className={cn(
"relative flex min-h-0 min-w-0 flex-1 flex-col bg-[#05080D] overflow-hidden",
"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
showBackdrop && "bg-[#05080D]",
dmSansClassName(),
className,
)}
>
<AnimatedGradientBackground animateFromBottom={false} topPosition="55%" />
<div className="pointer-events-none absolute inset-0 z-0 bg-[#05080D]/50" />
<div className="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(circle_at_center,rgba(105,167,240,0.25)_1px,transparent_1px)] bg-size-[32px_32px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />
{showBackdrop && (
<>
<AnimatedGradientBackground
animateFromBottom={false}
topPosition="55%"
/>
<div className="pointer-events-none absolute inset-0 z-0 bg-[#05080D]/50" />
<div className="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(circle_at_center,rgba(105,167,240,0.25)_1px,transparent_1px)] bg-size-[32px_32px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />
</>
)}
<div className="pointer-events-none absolute top-3 left-4 z-20">
<p className="text-xs font-medium text-white/70">Memory map</p>
<p className="mt-0.5 max-w-[14rem] text-[10px] leading-snug text-white/35">
Expand All @@ -48,7 +58,6 @@ export function ChatGraphContextRail({
: "Memories used by Nova will be highlighted here"}
</p>
</div>
<div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-r from-transparent to-[#05080D]" />
<div className="relative z-[2] min-h-0 flex-1 pt-10">
<MemoryGraph
containerTags={graphContainerTags}
Expand Down
29 changes: 24 additions & 5 deletions apps/web/components/chat/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import { SuperLoader } from "../superloader"
import { UserMessage } from "./message/user-message"
import { AgentMessage } from "./message/agent-message"
import { ChatGraphContextRail } from "./chat-graph-context-rail"
import { AnimatedGradientBackground } from "@/components/animated-gradient-background"
import { ChainOfThought } from "./input/chain-of-thought"
import { useIsMobile } from "@hooks/use-mobile"
import { useAuth } from "@lib/auth-context"
Expand Down Expand Up @@ -1601,17 +1602,35 @@ export function ChatSidebar({
>
{chatHistorySheet}
{isPageDesktop ? (
<div className="flex h-full min-h-0 w-full flex-1 flex-row">
<div className="relative flex h-full min-h-0 w-full flex-1 flex-row overflow-hidden bg-[#05080D]">
{/* Shared backdrop spanning both the graph rail and the chat so the
gradient flows continuously across the whole panel instead of
stopping at the graph edge. */}
<div className="pointer-events-none absolute inset-0 z-0">
<AnimatedGradientBackground
animateFromBottom={false}
topPosition="55%"
/>
<div className="absolute inset-0 bg-[#05080D]/50" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(105,167,240,0.25)_1px,transparent_1px)] bg-size-[32px_32px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />
</div>
<ChatGraphContextRail
showBackdrop={false}
messages={messages}
containerTags={
chatProject === AUTO_CHAT_SPACE_ID ? null : [chatProject]
}
/>
<div className="flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] shrink-0 basis-[min(720px,50vw)] flex-col">
{pageDesktopToolbarRow}
<div className="relative mx-auto flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] flex-1 flex-col px-3 sm:px-4 md:px-0">
{shell}
<div className="relative z-[2] flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] shrink-0 basis-[min(720px,50vw)] flex-col">
{/* Soft left→right darkening so the chat reads as a distinct,
recessed panel (like prod) while the dots/glow still show
through. The gradient handles the separation — no hard line. */}
<div className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-r from-transparent via-[#05080D]/40 to-[#05080D]/80" />
<div className="relative z-[1] flex h-full min-h-0 w-full flex-col">
{pageDesktopToolbarRow}
<div className="relative mx-auto flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] flex-1 flex-col px-3 sm:px-4 md:px-0">
{shell}
</div>
</div>
</div>
</div>
Expand Down
Loading