4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T63e,import { AppSidebar } from "../../components/app-sidebar" import { AppHeader } from "../../components/app-header" import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar" import { MessageCircle } from "lucide-react" // Customize the expanded sidebar width via the `--sidebar-width` CSS variable. const SIDEBAR_PROVIDER_STYLE = { "--sidebar-width": "17rem", } as React.CSSProperties export default function Page() { return (

How can I help you today?

Start a new conversation or select an existing chat from the sidebar.

) } 51:Tc3f,"use client" import * as React from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarTrigger } from "@/components/ui/sidebar" import { ChevronDown } from "lucide-react" const MODEL_OPTIONS = [ { value: "hex-1.0-pro", label: "Hex 1.0 Pro", description: "Best for deep reasoning", }, { value: "hex-1.0", label: "Hex 1.0", description: "Balanced for everyday conversations", }, { value: "hex-1.0-lite", label: "Hex 1.0 Lite", description: "Faster responses for lightweight tasks", }, ] as const export function AppHeader() { const [selectedModel, setSelectedModel] = React.useState(MODEL_OPTIONS[0].value) // Keep the displayed model metadata in sync with the selected value (fallback to the first). const activeModel = MODEL_OPTIONS.find((model) => model.value === selectedModel) ?? MODEL_OPTIONS[0] return (

} > {activeModel.label} {MODEL_OPTIONS.map((model) => (

{model.label} {model.description}

))}

) } 52:T12fb,"use client" import * as React from "react" import { Button } from "@/components/ui/button" import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarTrigger, useSidebar, } from "@/components/ui/sidebar" import { PanelLeftIcon, Search, SquarePen, Telescope, GalleryVerticalEnd, X, } from "lucide-react" import { AppBrand } from "./app-brand" import { NavHeader } from "./nav-header" import { NavRecents } from "./nav-recents" import { NavUser } from "./nav-user" const data = { user: { name: "Rion", email: "m@example.com", avatar: "https://avatars.githubusercontent.com/u/114809507", }, navMain: [ { title: "New chat", url: "#", icon: SquarePen, isActive: true, }, { title: "Search chat", url: "#", icon: Search, }, { title: "Projects", url: "#", icon: GalleryVerticalEnd, }, { title: "Deep research", url: "#", icon: Telescope, }, ], } const conversationItems = [ { title: "Q2 growth strategy brainstorm", url: "#" }, { title: "Landing page copy ideas", url: "#" }, { title: "Summarize customer interview notes", url: "#" }, { title: "Create a launch checklist", url: "#" }, { title: "Refactor sidebar animation", url: "#" }, { title: "Write onboarding email sequence", url: "#" }, { title: "Design a pricing page structure", url: "#" }, { title: "Research competitors in AI tooling", url: "#" }, { title: "Generate social post variations", url: "#" }, ] export function AppSidebar({ ...props }: React.ComponentProps) { return ( ) } // Renders the sidebar header per state: mobile drawer, collapsed (icon-only), and expanded. // Each branch returns its own layout and controls. function SidebarHeaderContent() { const { isMobile, setOpenMobile, state, toggleSidebar } = useSidebar() const isCollapsed = state === "collapsed" if (isMobile) { return (

) } if (isCollapsed) { return (

{/* On hover the brand fades out and the expand icon fades in (RTL-flipped). */}

) } return (

) } 53:T59f,"use client" import React from "react" import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar" export type NavigationItem = { title: string url: string icon: React.ElementType isActive?: boolean } type SidebarHeaderMenuProps = { items: NavigationItem[] } function NavHeaderContent({ items }: SidebarHeaderMenuProps) { return ( {items.map((item) => ( {/* Label fades out when the sidebar collapses to icon-only mode. */} {item.title} ))} ) } // Memoized: the header menu is static, so we skip re-renders when the sidebar toggles. export const NavHeader = React.memo(NavHeaderContent) 54:T705,import React from "react" import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export type ConversationItem = { title: string url: string isActive?: boolean } type NavRecentsProps = { items: ConversationItem[] } function NavRecentsContent({ items }: NavRecentsProps) { return ( // Whole group hides (and ignores pointer events) when the sidebar is icon-only. Recent {items.map((item) => ( {item.title} ))} ) } // Memoized: the conversation list is static, so we skip re-renders when the sidebar toggles. export const NavRecents = React.memo(NavRecentsContent) 55:T1376,"use client" import { User2, CreditCard, LifeBuoy, LogOut, Shapes, ArrowUpRight, } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage, } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from "@/components/ui/sidebar" export function NavUser({ user, }: { user: { name: string email: string avatar: string } }) { const { isMobile } = useSidebar() return ( } > RN

{user.name} {user.email}

Personalization Profile Settings Help Log out ) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hexui","registryDependencies":["avatar","button","dropdown-menu","sidebar","tooltip"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/sidebar/sidebar-3/source/app/sidebar/page.tsx","content":"$50","type":"registry:page","target":"app/sidebar/page.tsx"},{"path":"registry/blocks/sidebar/sidebar-3/source/components/app-brand.tsx","content":"import { Command } from \"lucide-react\";\n\ntype AppBrandProps = {\n href?: string;\n className?: string;\n size?: number;\n};\n\nexport function AppBrand({ href = \"#\", className, size = 20 }: AppBrandProps) {\n return (\n // Centralize the brand UI so header and sidebar stay visually consistent.\n \n \n \n );\n}\n","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-3/source/components/app-header.tsx","content":"$51","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-3/source/components/app-sidebar.tsx","content":"$52","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-3/source/components/nav-header.tsx","content":"$53","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-3/source/components/nav-recents.tsx","content":"$54","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-3/source/components/nav-user.tsx","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]