Skip to main content
Our docs redesign is live!

ConciergeDrawer

Site-wide chat panel for Dex, the Contentstack developer experience assistant (built on Contentstack Concierge). Fixed to the right edge, opened from the header "Ask Dex" trigger (grouped with search) or the ⌘I / Ctrl+I shortcut. Mounted once in app/layout.tsx inside ConciergeProvider, alongside ConciergeShell which pads the site chrome when the panel is open on desktop.

Props

None. All chat and open/close state comes from useConcierge().

Usage

import { ConciergeDrawer } from "@/components/organisms/ConciergeDrawer";
import { ConciergeShell } from "@/components/system/ConciergeShell";

// app/layout.tsx, inside <ConciergeProvider>
<ConciergeShell>{appShell}</ConciergeShell>
<ConciergeDrawer />

Open it from anywhere with the context:

const { openDrawer, toggleDrawer } = useConcierge();

Behavior

  • Slides in from the right (translate-x transition, z-[60]).
  • Desktop (md+): push layout — ConciergeShell applies matching right padding so header, main, and footer shrink beside the panel. Default width max-w-md; widen expands to max-w-3xl / xl:max-w-4xl and updates shell padding in sync. aria-modal={false} so the page stays interactable.
  • Mobile: full-width overlay with dimmed backdrop (click to close). aria-modal={true}.
  • Header bar actions: new conversation, widen/narrow panel, close.
  • Escape closes; focus returns to the previously focused element. Panel is inert while closed.
  • Empty state shows a greeting plus compact SuggestedQuestions; composer auto-focuses on open.
  • Wide mode (isWide / toggleWide on ConciergeProvider) expands both the panel and the shell padding.

Notes

  • Dex is drawer-only. There is no standalone Dex route.
  • Set CONCIERGE_ENABLED=false to hide the drawer, header trigger, ⌘I / Ctrl+I shortcut, and disable POST /api/concierge.
  • Requires CONCIERGE_API_KEY on the server via POST /api/concierge. Optionally enrich prompts with site MCP content (default). Set CONCIERGE_SITE_CONTEXT_ENABLED=false for native Digital Concierge only.