Help Center Page

Previous

Build a modern help center with PromptInput search and a floating Sidekick chatbot.

Overview

This recipe mirrors the help-page example: a dark help center landing page with a centered search input, a “Popular Articles” list, a grid of categories, and a support chat widget in the bottom-right.

It’s intentionally visual-first: dummy content, no real search backend, and no real chat API. The goal is to show how far you can get with @repo/design-system building blocks.

Where To Look

  • App implementation: apps/help-page/src/app/page.tsx
  • Search composer: packages/design-system/components/ui/prompt-input.tsx
  • Floating chat panel: packages/design-system/components/ui/sidekick.tsx
  • Chat primitives: packages/design-system/components/ai-elements/conversation.tsx

Page Structure

  • Top navigation (brand + links + CTA)
  • Hero heading + centered search
  • Popular articles list (simple rows)
  • Browse categories (card grid)
  • Footer
  • Floating Sidekick chatbot (bottom-right)

Search: Use PromptInput As A Search Bar

Instead of a plain Input, the example uses PromptInput to get consistent shadcn styling, keyboard-friendly behavior, and easy composition.

Pattern used:

  • Wrap with PromptInputCard for a pill container
  • Use PromptInputTextarea in single-row mode (rows={1}) to mimic an input
  • Add left icon + right shortcut hints
<PromptInputCard className="rounded-full">
  <PromptInput size="sm" variant="none" focusRing={false} onSubmit={onSearch}>
    <PromptInput.Body className="items-center">
      {/* search icon */}
      <PromptInput.Textarea rows={1} placeholder="Search articles..." />
      {/* ⌘K hint */}
    </PromptInput.Body>
  </PromptInput>
</PromptInputCard>

Lists + Cards: Keep It Simple

  • “Popular Articles” are buttons styled as rows
  • “Browse Categories” uses Card for consistent borders/radius/shadows

This is a good place to later plug in real data (CMS, database, static JSON) without changing the UI structure.

Floating Chat Widget (Bottom Right)

The example implements a familiar chat-launcher pattern:

  • A round button toggles open/close
  • When open, render a Sidekick panel inside a fixed container
  • Use Conversation + Message primitives for the transcript
  • Use PromptInput for the message composer

Key idea: Sidekick can be used in standalone mode as a reusable panel.

<div className="fixed bottom-6 right-6">
  <Button size="icon" className="rounded-full" />
 
  {open ? (
    <div className="h-[560px] w-[360px] rounded-2xl border bg-background">
      <Sidekick standalone>
        {/* header */}
        {/* conversation */}
        {/* PromptInput composer */}
      </Sidekick>
    </div>
  ) : null}
</div>

Enhancements (Optional)

  • Wire real search (Algolia / Meilisearch / your API)
  • Persist chat messages + “open” state
  • Add quick actions (“Report bug”, “Billing”, “Talk to sales”)
  • Add escalation: “Open a ticket” / “Email support”