DemoBuy

Knowledge Base Screens

Last updated on 2026-05-31

The Help Desk Kit includes 5 knowledge base screens for creating, organizing, and analyzing self-service support content. All screens live under the /knowledge-base/ route within the (app) route group.

Article Browser

Route: /knowledge-base

Public-facing knowledge base homepage with search, category browsing, and popular content discovery.

  • Hero search bar -- prominent search input at the top with popular search suggestions displayed below
  • Category grid -- cards with icon, category name, article count, and brief description; each card links to a filtered article list
  • Popular Articles -- horizontal carousel of the most-viewed articles
  • Recently Updated -- list of articles updated most recently
  • Most Helpful -- list sorted by upvote count (thumbs up percentage)
  • Sidebar -- table of contents tree for all categories and subcategories
  • Article cards -- each card shows title, excerpt, category badge, view count, helpfulness rating (thumbs up percentage), and last updated date

Key Components

import { ArticleBrowserHero } from "@/components/knowledge-base/article-browser-hero"
import { CategoryGrid } from "@/components/knowledge-base/category-grid"
import { ArticleCard } from "@/components/knowledge-base/article-card"

Data Sources

Data Source Location
Articles articles data/seed.ts
Categories articleCategories data/seed.ts

Article Detail

Route: /knowledge-base/[slug]

Full article reading experience with table of contents, feedback collection, and related content.

  • Breadcrumb -- Knowledge Base > Category > Article navigation path
  • Table of contents sidebar -- left sidebar with auto-generated heading list, highlights the active section on scroll
  • Article content -- rendered markdown with syntax highlighting for code blocks, embedded images, callout boxes (info/warning/tip), step-by-step numbered sections, and anchor links on headings
  • Feedback widget -- "Was this helpful?" section at the bottom with thumbs up/down buttons and optional comment textarea
  • Related Articles -- card grid of 3 related articles below the feedback section
  • Article metadata sidebar -- right sidebar showing author avatar and name, created date, last updated date, view count, and helpfulness statistics
  • Share button -- share the article via link
  • Edit link -- quick link for agents to jump to the article editor

Key Components

import { ArticleDetailView } from "@/components/knowledge-base/article-detail-view"
import { ArticleCard } from "@/components/knowledge-base/article-card"

Article Editor

Route: /knowledge-base/editor

Rich article creation and editing interface with live preview and version history.

  • Title input -- large article title field at the top
  • Status badge -- shows current status (draft/published/archived)
  • Action buttons -- save, publish, and archive buttons
  • Metadata panel -- left panel with category selector, tags input, SEO fields (meta title, meta description), visibility toggle (public/internal-only), and author selector
  • Rich text editor -- main editing area with toolbar for headings, bold, italic, lists, code blocks, image upload, callout insertion, table insertion, video embeds, and dividers
  • Live preview -- toggle to show rendered article side-by-side with the editor
  • Version history -- collapsible right sidebar showing previous versions with diff view highlighting changes between versions
  • Auto-save indicator -- visual indicator showing save status

Key Components

import { ArticleEditor } from "@/components/knowledge-base/article-editor"

Category Manager

Route: /knowledge-base/categories

Organize the knowledge base structure with drag-and-drop category management.

  • Tree view -- drag-and-drop tree of categories and subcategories
  • Category details -- each node shows icon (customizable), name, article count, and status (active/hidden)
  • Edit panel -- right panel for editing: name, description, icon selector, parent category dropdown, display order, and visibility toggle
  • Management actions -- "Add Category" and "Add Subcategory" buttons with bulk reorder mode
  • Preview -- panel showing how the category structure appears on the public knowledge base
  • Category statistics -- per-category stats including total views, average helpfulness, and most viewed article

Key Components

import { CategoryManager } from "@/components/knowledge-base/category-manager"

Article Analytics

Route: /knowledge-base/analytics

Knowledge base performance metrics with content gap analysis and underperforming content identification.

  • Top KPIs -- total articles, total views (last 30 days), average helpfulness percentage, search-to-article conversion rate, and most searched term
  • Charts -- views over time (line chart), top 10 articles by views (horizontal bar chart), helpfulness distribution (histogram), and search terms word cloud
  • Content Gaps section -- table of searches with no results, showing search term, frequency, and "Create Article" action button for each gap
  • Underperforming Articles table -- articles with low helpfulness or high bounce rate, with suggestions for improvement
  • Filters -- filter by date range, category, and author

Key Components

import { KbAnalyticsDashboard } from "@/components/knowledge-base/kb-analytics-dashboard"

Next Steps

Previous

Customer Screens

Next

Chat Screens