Knowledge Base

Usage

import { Button } from "@tulipfarm/sprout/button";
import {
  KnowledgeBase,
  KnowledgeBaseActivity,
  KnowledgeBaseDiagram,
  KnowledgeBaseFooter,
  KnowledgeBaseHeader,
  KnowledgeBaseSources,
  KnowledgeBaseSummary,
} from "@tulipfarm/sprout/knowledge-base";

<KnowledgeBase
  sources={[
    { id: "slack", name: "Slack", brand: "slack", detail: "#support · live", status: "connected", chunks: 1284, newChunks: 36 },
    { id: "github", name: "GitHub", brand: "github", detail: "acme/platform", status: "syncing", progress: 40, chunks: 380 },
    { id: "jira", name: "Jira", brand: "jira", status: "error", error: "Token expired. Reconnect to resume." },
    { id: "notion", name: "Notion", brand: "notion", status: "available" },
  ]}
>
  <KnowledgeBaseHeader subtitle="Acme Assist" />
  <KnowledgeBaseDiagram mark={<YourLogo />}>
    <KnowledgeBaseActivity />
  </KnowledgeBaseDiagram>
  <KnowledgeBaseSummary>
    <Button size="sm">Upload files</Button>
  </KnowledgeBaseSummary>
  <KnowledgeBaseSources
    connectHref={source => `/integrations/${source.id}`}
    onRetry={retry}
    onSync={sync}
    onPauseSync={pause}
    onResumeSync={resume}
    onCancelSync={cancel}
    onSettings={openSettings}
    onDisconnect={disconnect}
  />
  <KnowledgeBaseFooter />
</KnowledgeBase>

• KnowledgeBaseSource: { id, name, brand, icon, detail, status }, plusprogress, chunks, newChunks, error, andcolor. newChunks shows as “+36 new” beside the count. error replaces the detail on a failed source.
• KnowledgeBaseDiagram: mark is your logo, laid on top of the index, such as an<svg> with a viewBox. It defaults to a document outline. Children float over the stage's top-left corner.
• KnowledgeBaseActivity: a small readout of what is indexed. It shows a spinner while sources sync, the chunk and source counts, and the chunks the latest syncs added. With nothing linked it reads “Nothing indexed”. Counts roll up as they change.
• KnowledgeBaseSources: onConnect shows Connect on available sources;connectHref makes it a link instead, such as to the integration's setup page, and wins overonConnect. onRetry shows Retry on failed sources. The row menu holdsonSync (“Sync now”), onPauseSync (“Pause syncing”), onResumeSync(“Resume syncing”), onCancelSync (“Cancel sync”), onSettings, andonDisconnect. Each item appears only for the statuses it fits. Rows without a menu keep its space, so statuses line up.

States

A source is available, queued, syncing (with progress from 0 to 100), connected, paused, or error. The panel works out its own state from them: empty, syncing, attention, partial, or ready. The summary heading, its sentence, and the footer follow it unless you pass title or description. The diagram shows up to six sources; the rest are counted on the last tile, syncing and failed sources first.

Motion

A syncing source's line draws toward the index as its progress grows, with data moving along it, and its share of the embedding dots lights up. Connected lines hold still and send one packet every few seconds. Failed lines turn red and dashed. With reduced motion, lines and dots change without moving and no packets run.

Accessibility

The diagram is hidden from screen readers; the list carries the same facts as text, and every status has a word, not only a color. Syncing rows are progress bars. Buttons name their source, such as “Connect Slack”. A polite live region reads out sources as they finish or fail.

Theme tokens

The panel uses --sprout-surface, --sprout-line, and --sprout-radius-panel. Each line takes its app's own color, such as Slack's or Jira's, and black marks like GitHub follow the text color. On dark surfaces, brand colors mix toward the text color by--sprout-knowledge-base-brand-mix so deep blues stay visible. Sources without a brand take categorical hues (--sprout-sky, --sprout-teal, …). Pass color on a source to choose its own. --sprout-knowledge-base-stage sets the diagram background.