Skip to content

feat: enhance chat sidebar and landing components #136

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

Merged
ssdeanx merged 1 commit into from
Apr 15, 2026
Merged

feat: enhance chat sidebar and landing components #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 18 additions & 18 deletions app/chat/components/chat-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,63 +487,63 @@ export function ChatSidebar() {
onValueChange={(v) => { setActiveTab(v as TabKey); }}
className="flex flex-col flex-1 min-h-0 overflow-hidden"
>
<div className="px-4 py-3 border-b border-white/5 bg-white/5 backdrop-blur-xl shrink-0">
<TabsList className="w-full grid grid-cols-8 gap-0.5 p-1 bg-black/40 rounded-xl h-auto border border-white/10 shadow-inner overflow-x-auto no-scrollbar">
<div className="shrink-0 border-b border-white/5 bg-white/5 px-4 py-3 backdrop-blur-xl">
<TabsList className="grid h-auto w-full grid-cols-4 gap-1 overflow-x-auto rounded-2xl border border-white/10 bg-black/40 p-1.5 shadow-inner no-scrollbar sm:grid-cols-8">
<TabsTrigger
value="threads"
className="flex flex-col items-center gap-1 text-[10px] py-1.5 data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300 rounded-lg group/tab data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)] border border-transparent data-[state=active]:border-primary/20"
className="group/tab flex flex-col items-center gap-1 rounded-lg border border-transparent py-2 text-[9px] transition-all duration-300 data-[state=active]:border-primary/20 data-[state=active]:bg-primary/20 data-[state=active]:text-primary data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)]"
>
<MessageSquareIcon className="size-3 group-hover/tab:scale-110 transition-transform duration-300" />
<span className="opacity-70 group-data-[state=active]:opacity-100 font-semibold tracking-tight text-[8px]">Threads</span>
<span className="font-semibold tracking-tight opacity-70 group-data-[state=active]:opacity-100">Threads</span>
</TabsTrigger>
<TabsTrigger
value="agents"
className="flex flex-col items-center gap-1 text-[10px] py-1.5 data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300 rounded-lg group/tab data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)] border border-transparent data-[state=active]:border-primary/20"
className="group/tab flex flex-col items-center gap-1 rounded-lg border border-transparent py-2 text-[9px] transition-all duration-300 data-[state=active]:border-primary/20 data-[state=active]:bg-primary/20 data-[state=active]:text-primary data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)]"
>
<BotIcon className="size-3 group-hover/tab:scale-110 transition-transform duration-300" />
<span className="opacity-70 group-data-[state=active]:opacity-100 font-semibold tracking-tight text-[8px]">Agents</span>
<span className="font-semibold tracking-tight opacity-70 group-data-[state=active]:opacity-100">Agents</span>
</TabsTrigger>
<TabsTrigger
value="tools"
className="flex flex-col items-center gap-1 text-[10px] py-1.5 data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300 rounded-lg group/tab data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)] border border-transparent data-[state=active]:border-primary/20"
className="group/tab flex flex-col items-center gap-1 rounded-lg border border-transparent py-2 text-[9px] transition-all duration-300 data-[state=active]:border-primary/20 data-[state=active]:bg-primary/20 data-[state=active]:text-primary data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)]"
>
<CpuIcon className="size-3 group-hover/tab:scale-110 transition-transform duration-300" />
<span className="opacity-70 group-data-[state=active]:opacity-100 font-semibold tracking-tight text-[8px]">Tools</span>
<span className="font-semibold tracking-tight opacity-70 group-data-[state=active]:opacity-100">Tools</span>
</TabsTrigger>
<TabsTrigger
value="workflows"
className="flex flex-col items-center gap-1 text-[10px] py-1.5 data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300 rounded-lg group/tab data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)] border border-transparent data-[state=active]:border-primary/20"
className="group/tab flex flex-col items-center gap-1 rounded-lg border border-transparent py-2 text-[9px] transition-all duration-300 data-[state=active]:border-primary/20 data-[state=active]:bg-primary/20 data-[state=active]:text-primary data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)]"
>
<WorkflowIcon className="size-3 group-hover/tab:scale-110 transition-transform duration-300" />
<span className="opacity-70 group-data-[state=active]:opacity-100 font-semibold tracking-tight text-[8px]">Flows</span>
<span className="font-semibold tracking-tight opacity-70 group-data-[state=active]:opacity-100">Flows</span>
</TabsTrigger>
<TabsTrigger
value="traces"
className="flex flex-col items-center gap-1 text-[10px] py-1.5 data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300 rounded-lg group/tab data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)] border border-transparent data-[state=active]:border-primary/20"
className="group/tab flex flex-col items-center gap-1 rounded-lg border border-transparent py-2 text-[9px] transition-all duration-300 data-[state=active]:border-primary/20 data-[state=active]:bg-primary/20 data-[state=active]:text-primary data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)]"
>
<ActivityIcon className="size-3 group-hover/tab:scale-110 transition-transform duration-300" />
<span className="opacity-70 group-data-[state=active]:opacity-100 font-semibold tracking-tight text-[8px]">Traces</span>
<span className="font-semibold tracking-tight opacity-70 group-data-[state=active]:opacity-100">Traces</span>
</TabsTrigger>
<TabsTrigger
value="vectors"
className="flex flex-col items-center gap-1 text-[10px] py-1.5 data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300 rounded-lg group/tab data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)] border border-transparent data-[state=active]:border-primary/20"
className="group/tab flex flex-col items-center gap-1 rounded-lg border border-transparent py-2 text-[9px] transition-all duration-300 data-[state=active]:border-primary/20 data-[state=active]:bg-primary/20 data-[state=active]:text-primary data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)]"
>
<LayersIcon className="size-3 group-hover/tab:scale-110 transition-transform duration-300" />
<span className="opacity-70 group-data-[state=active]:opacity-100 font-semibold tracking-tight text-[8px]">Vectors</span>
<span className="font-semibold tracking-tight opacity-70 group-data-[state=active]:opacity-100">Vectors</span>
</TabsTrigger>
<TabsTrigger
value="memory"
className="flex flex-col items-center gap-1 text-[10px] py-1.5 data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300 rounded-lg group/tab data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)] border border-transparent data-[state=active]:border-primary/20"
className="group/tab flex flex-col items-center gap-1 rounded-lg border border-transparent py-2 text-[9px] transition-all duration-300 data-[state=active]:border-primary/20 data-[state=active]:bg-primary/20 data-[state=active]:text-primary data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)]"
>
<BrainIcon className="size-3 group-hover/tab:scale-110 transition-transform duration-300" />
<span className="opacity-70 group-data-[state=active]:opacity-100 font-semibold tracking-tight text-[8px]">Memory</span>
<span className="font-semibold tracking-tight opacity-70 group-data-[state=active]:opacity-100">Memory</span>
</TabsTrigger>
<TabsTrigger
value="config"
className="flex flex-col items-center gap-1 text-[10px] py-1.5 data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300 rounded-lg group/tab data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)] border border-transparent data-[state=active]:border-primary/20"
className="group/tab flex flex-col items-center gap-1 rounded-lg border border-transparent py-2 text-[9px] transition-all duration-300 data-[state=active]:border-primary/20 data-[state=active]:bg-primary/20 data-[state=active]:text-primary data-[state=active]:shadow-[0_0_20px_rgba(var(--primary),0.1)]"
>
<SettingsIcon className="size-3 group-hover/tab:scale-110 transition-transform duration-300" />
<span className="opacity-70 group-data-[state=active]:opacity-100 font-semibold tracking-tight text-[8px]">Config</span>
<span className="font-semibold tracking-tight opacity-70 group-data-[state=active]:opacity-100">Config</span>
</TabsTrigger>
</TabsList>
</div>
Expand Down
46 changes: 41 additions & 5 deletions app/chat/components/main-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { useCallback, useMemo } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { usePathname, useRouter } from 'next/navigation'

import { useChatContext } from '@/app/chat/providers/chat-context-hooks'
import { useAuthQuery } from '@/lib/hooks/use-auth-query'
import { useThreads } from '@/lib/hooks/use-mastra-query'
import { useAgent, useThreads } from '@/lib/hooks/use-mastra-query'
import { LogoutButton } from '../_components/logout-button'
import {
Sidebar,
Expand Down Expand Up @@ -42,7 +42,6 @@ import {
WrenchIcon,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import router from 'next/router'

interface SidebarThread {
id?: string
Expand Down Expand Up @@ -87,11 +86,40 @@ const formatThreadMeta = (thread: SidebarThread) => {
*/
export function MainSidebar() {
const pathname = usePathname()
const router = useRouter()
const { data: session } = useAuthQuery()
const { selectedAgent, setThreadId, threadId } = useChatContext()
const selectedAgentQuery = useAgent(selectedAgent)
const threadsResult = useThreads({ agentId: selectedAgent })

const threads = (threadsResult.data ?? []) as unknown as SidebarThread[]
const selectedAgentSummary = useMemo(() => {
const agent = selectedAgentQuery.data as Record<string, unknown> | undefined
if (!agent) {
return `Loading details for ${selectedAgent}...`
}

const agentName =
typeof agent.name === 'string' && agent.name.trim().length > 0
? agent.name
: selectedAgent
const modelId =
typeof agent.modelId === 'string' && agent.modelId.trim().length > 0
? agent.modelId
: typeof agent.model === 'string' && agent.model.trim().length > 0
? agent.model
: ''
const provider =
typeof agent.provider === 'string' && agent.provider.trim().length > 0
? agent.provider
: typeof agent.modelProvider === 'string' && agent.modelProvider.trim().length > 0
? agent.modelProvider
: ''

return [agentName, provider ? `Provider: ${provider}` : '', modelId ? `Model: ${modelId}` : '']
.filter((part) => part.length > 0)
.join(' • ')
}, [selectedAgent, selectedAgentQuery.data])

const pageItems = useMemo(
() => [
Expand Down Expand Up @@ -210,7 +238,7 @@ export function MainSidebar() {
setThreadId(nextThreadId)
router.push(`/chat/agents/${selectedAgent}`)
},
[selectedAgent, setThreadId]
[router, selectedAgent, setThreadId]
)

return (
Expand Down Expand Up @@ -244,7 +272,15 @@ export function MainSidebar() {
</button>
</TooltipTrigger>
<TooltipContent side="right">
Return to the main chat dashboard.
<div className="space-y-1">
<div className="font-medium">Return to the main chat dashboard.</div>
<div className="max-w-xs text-xs text-muted-foreground">
{selectedAgentSummary}
</div>
<div className="text-xs text-muted-foreground">
{threads.length} thread{threads.length === 1 ? '' : 's'} loaded
</div>
</div>
</TooltipContent>
</Tooltip>
</SidebarHeader>
Expand Down
18 changes: 9 additions & 9 deletions app/components/landing-hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export function LandingHero() {
return (
<section
ref={sectionRef}
className="relative h-[100vh] min-h-[800px] w-full overflow-hidden bg-background"
className="relative min-h-[min(100vh,900px)] w-full overflow-hidden bg-background py-16 sm:py-20 lg:py-24"
>
{/* Network Architectural Background (Strict Grid) */}
<NetworkBackground className="opacity-40" />
Expand All @@ -86,11 +86,11 @@ export function LandingHero() {

<div
ref={containerRef}
className="container relative z-10 mx-auto grid h-full grid-cols-1 lg:grid-cols-2 items-center gap-16 px-6 pt-24"
className="container relative z-10 mx-auto grid h-full grid-cols-1 items-center gap-12 px-6 lg:grid-cols-2 lg:gap-16"
>
{/* Left: Logical Architecture */}
<div className="relative z-10 max-w-2xl">
<div className="mb-12 inline-flex items-center gap-3 rounded-full border border-primary/20 bg-primary/5 px-5 py-2 backdrop-blur-2xl hero-reveal">
<div className="mb-8 inline-flex items-center gap-3 rounded-full border border-primary/20 bg-primary/5 px-4 py-2 backdrop-blur-2xl hero-reveal sm:px-5">
<div className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary/40 opacity-75"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-primary"></span>
Expand All @@ -100,33 +100,33 @@ export function LandingHero() {
</span>
</div>

<h1 className="mb-8 text-7xl font-black tracking-tight text-foreground sm:text-9xl leading-[0.8] hero-reveal">
<h1 className="mb-6 text-5xl font-black leading-[0.85] tracking-tight text-foreground sm:text-7xl lg:text-8xl hero-reveal">
AGENT
<br />
<span className="text-transparent bg-clip-text bg-linear-to-b from-foreground via-foreground/90 to-primary/60">
SYSTEM
</span>
</h1>

<p className="mb-14 max-w-xl text-balance text-xl leading-relaxed text-muted-foreground/80 font-medium md:text-2xl hero-reveal">
<p className="mb-10 max-w-xl text-balance text-lg leading-relaxed text-muted-foreground/80 font-medium sm:text-xl md:text-2xl hero-reveal">
The framework for high-precision multi-agent systems.
Engineered for
<span className="text-foreground"> architectural stability</span>,
observability, and production deployment at scale.
</p>

<div className="flex flex-col gap-6 sm:flex-row hero-reveal">
<button className="group relative h-16 w-full overflow-hidden rounded-2xl bg-primary px-12 text-lg font-bold text-primary-foreground shadow-2xl transition-all hover:scale-[1.02] active:scale-95 sm:w-auto">
<div className="flex flex-col gap-4 sm:flex-row hero-reveal">
<button className="group relative h-14 w-full overflow-hidden rounded-2xl bg-primary px-8 text-base font-bold text-primary-foreground shadow-2xl transition-all hover:scale-[1.02] active:scale-95 sm:w-auto sm:px-10 sm:text-lg">
<span className="relative z-10 flex items-center justify-center gap-4">
Deployment Start
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className="size-5 transition-transform group-hover:translate-x-1">
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</span>
<div className="absolute inset-0 bg-linear-to-r from-white/0 via-white/10 to-white/0 translate-x-[-100%] group-hover:duration-700 group-hover:translate-x-[100%] transition-transform" />
<div className="absolute inset-0 bg-linear-to-r from-white/0 via-white/10 to-white/0 -translate-x-full group-hover:duration-700 group-hover:translate-x-full transition-transform" />
</button>

<button className="h-16 w-full rounded-2xl border border-white/10 bg-white/5 px-12 text-lg font-bold text-foreground/80 backdrop-blur-3xl transition-all hover:bg-white/10 hover:border-white/20 sm:w-auto">
<button className="h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-8 text-base font-bold text-foreground/80 backdrop-blur-3xl transition-all hover:bg-white/10 hover:border-white/20 sm:w-auto sm:px-10 sm:text-lg">
System Docs
</button>
</div>
Expand Down
Loading
Loading