scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-09-10 22:41:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
The chat-page layout split into a graph rail (left) and chat shell
(right). The gradient + dotted-grid backdrop lived inside the rail with
overflow-hidden, so the chat side fell back to flat #05080D — pure black.

Lift the backdrop to span both columns so the gradient flows continuously:
- ChatGraphContextRail gains a `showBackdrop` prop (default true); when
  false it skips its own gradient/grid/opaque bg.
- The page-desktop chat layout renders one shared backdrop behind both
  columns and passes showBackdrop={false} to the rail.
- Drop the rail's right-edge fade-to-#05080D overlay, which painted a
  hard vertical seam over the now-continuous gradient.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sreeram Sreedhar 2026-06-06 18:38:15 -07:00
parent 5b129d7d32
commit 7979b1c16a
2 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
apps/web/components/chat/chat-graph-context-rail.tsx
View file

@ -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 =
@ -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">
@ -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}

17
apps/web/components/chat/index.tsx
View file

@ -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"
@ -1601,14 +1602,26 @@ 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">
<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">
{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}