HyperSaaS
FrontendDocuments

Knowledge Bases

Knowledge base management and chat session attachment.

Knowledge Base List

The KnowledgeBaseList component uses TanStack React Table for a feature-rich data table:

ColumnDescription
SelectCheckbox for bulk actions
NameKB name with database icon
Access"Shared Globally" or "Restricted" badge
DocumentsDocument count
ActionsEdit, Delete dropdown

Features:

  • Global search — Filter KBs by name
  • Sorting — Click column headers to sort
  • Pagination — Navigate through large lists
  • Create KB — Modal dialog for new knowledge base
  • Delete — Confirmation dialog with cascade warning

Creating a Knowledge Base

// POST /api/workspaces/{workspaceId}/knowledge-bases/
{
  "name": "Product Documentation",
  "description": "Internal product docs and guides",
  "is_shared_with_workspace": true
}

Options:

  • Shared with workspace — All workspace members can access
  • Restricted — Only specific teams with KnowledgeBaseTeamAccess

Knowledge Base Detail

The detail page shows:

  1. KB Metadata — Name, description, access level, created date
  2. Documents Table — All documents in this KB with status badges
  3. Upload Section — Drag-and-drop upload directly into this KB
  4. Manage Documents — Add/remove documents from other workspace documents

Adding Documents

// POST /api/workspaces/{workspaceId}/knowledge-bases/{kbId}/add-documents/
{
  "document_ids": ["uuid1", "uuid2"]
}

Removing Documents

// POST /api/workspaces/{workspaceId}/knowledge-bases/{kbId}/remove-documents/
{
  "document_ids": ["uuid1"]
}

Documents are linked (not copied) — removing from a KB doesn't delete the document or its chunks.

Chat Session Attachment

Knowledge bases are attached to chat sessions so the AI agent can search them during conversation.

Attach via Settings Panel

The ChatSettingsForm includes a KB management section:

┌─────────────────────────────────────────┐
│ Knowledge Bases                          │
│                                         │
│ ✅ Product Documentation (12 docs)      │
│ ✅ API Reference (5 docs)               │
│ ☐  Internal Notes (3 docs)              │
│                                         │
│ [+ Attach Knowledge Base]               │
└─────────────────────────────────────────┘

API Calls

// Attach
POST /api/workspaces/{ws}/chats/{session}/knowledge-bases/attach/
{ "knowledge_base_ids": ["uuid1", "uuid2"] }

// Detach
POST /api/workspaces/{ws}/chats/{session}/knowledge-bases/detach/
{ "knowledge_base_ids": ["uuid1"] }

// List attached
GET /api/workspaces/{ws}/chats/{session}/knowledge-bases/

How RAG Works

Once attached, the AI agent's search_knowledge_base tool queries documents in those KBs:

  1. Agent decides to search based on user's question
  2. Tool sends query to backend retrieval system
  3. Backend runs hybrid search (semantic + keyword + RRF)
  4. Top results returned as tool output
  5. Agent synthesizes response with citations
  6. Frontend renders citations with source links

Document Viewer

When a citation is clicked in a chat message, the document viewer opens:

  • PDF files — Rendered with pdfjs-dist, page-by-page
  • Chunk highlighting — Relevant chunks are highlighted in the document
  • Page navigation — Jump to specific pages
  • Query params?chunks=id1,id2 for deep linking to specific chunks

The viewer occupies a resizable panel in the chat UI (desktop) or a slide-up sheet (mobile).

On this page