index.tsx)¶

Overview¶

The Knowledge Base page provides a centralised repository for storing, organising, and retrieving company documents, templates, and knowledge resources. It enables users to build a comprehensive company knowledge archive that can be utilised by the AI for improved response accuracy.

Features¶

Document upload and management
Category-based organisation
Advanced search capabilities
Document tagging and metadata
Version control for documents
Grid and list view options
Access control and permissions
Bulk operations (delete, move, tag)

URL Parameters¶

None - authenticated route

Implementation¶

State Management¶

// Session and user state
const { data: session } = useSession();
const userID = session?.user?.userID;

// Document and folder state
const [documents, setDocuments] = useState<KnowledgeBaseDocument[]>([]);
const [folders, setFolders] = useState<KnowledgeBaseFolder[]>([]);
const [currentFolder, setCurrentFolder] = useState<string | null>(null);
const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([]);

// UI state
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const [isUploading, setIsUploading] = useState<boolean>(false);
const [searchTerm, setSearchTerm] = useState<string>("");
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const [sortBy, setSortBy] = useState<string>("dateCreated");
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");

Methods¶

// Document and folder operations
const fetchDocuments = async (folderId: string | null = null) =>
// Retrieves all documents in the current folder

const createFolder = async (name: string) =>
// Creates a new folder in the current location

const uploadDocument = async (file: File, metadata: DocumentMetadata) =>
// Uploads a new document with metadata

const deleteItems = async (itemIds: string[]) =>
// Deletes selected documents or folders

const moveItems = async (itemIds: string[], targetFolderId: string) =>
// Moves selected items to a different folder

// Navigation and UI
const navigateToFolder = async (folderId: string | null) =>
// Navigates to a specific folder and updates breadcrumbs

const handleSearch = (term: string) =>
// Searches documents and folders by name and content

const toggleViewMode = () =>
// Toggles between grid and list view

const handleSort = (field: string) =>
// Updates sort criteria and direction

HTML Structure¶

<div className="knowledge-base-container h-full">
  {/* Header and controls */}
  <div className="header-container mb-6">
    <div className="flex justify-between items-center">
      <h1 className="text-2xl font-bold">Knowledge Base</h1>
      <div className="controls flex gap-2">
        <Button onClick={() => setIsNewFolderModalOpen(true)}>
          <FolderIcon className="mr-2 h-4 w-4" />
          New Folder
        </Button>
        <Button onClick={() => setIsUploadModalOpen(true)}>
          <UploadIcon className="mr-2 h-4 w-4" />
          Upload
        </Button>
      </div>
    </div>

    {/* Search and filters */}
    <div className="search-filter-container mt-4 flex gap-4">
      <div className="search-container relative flex-grow">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
        <Input
          placeholder="Search knowledge base..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="pl-10"
        />
      </div>
      <div className="view-toggle flex gap-2">
        <Button variant="outline" onClick={() => setViewMode("grid")}>
          <Grid className="h-4 w-4" />
        </Button>
        <Button variant="outline" onClick={() => setViewMode("list")}>
          <List className="h-4 w-4" />
        </Button>
      </div>
    </div>

    {/* Breadcrumb navigation */}
    <div className="breadcrumbs-container mt-4">
      <nav className="flex" aria-label="Breadcrumb">
        <ol className="inline-flex items-center space-x-1 md:space-x-3">
          {breadcrumbs.map((crumb, index) => (
            <li key={crumb.id} className="inline-flex items-center">
              {index > 0 && (
                <ChevronRight className="mx-2 h-4 w-4 text-gray-400" />
              )}
              <button
                onClick={() =>
                  navigateToFolder(crumb.id === "root" ? null : crumb.id)
                }
                className="text-sm font-medium text-blue-600 hover:text-blue-900"
              >
                {crumb.name}
              </button>
            </li>
          ))}
        </ol>
      </nav>
    </div>
  </div>

  {/* Content grid/list */}
  <div
    className={
      viewMode === "grid"
        ? "grid-container grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4"
        : "list-container"
    }
  >
    {/* Folders */}
    {folders.map((folder) => (
      <FolderCard
        key={folder.id}
        folder={folder}
        viewMode={viewMode}
        isSelected={selectedItems.includes(folder.id)}
        onSelect={toggleItemSelection}
        onNavigate={() => navigateToFolder(folder.id)}
      />
    ))}

    {/* Documents */}
    {documents.map((document) => (
      <DocumentCard
        key={document.id}
        document={document}
        viewMode={viewMode}
        isSelected={selectedItems.includes(document.id)}
        onSelect={toggleItemSelection}
        onView={() => viewDocument(document.id)}
      />
    ))}
  </div>
</div>

Props¶

No props - page component

Components/API Routes Used¶

Components¶

API Routes¶

/api/knowledgebase/documents - Manages knowledge base documents
/api/knowledgebase/folders - Manages knowledge base folders
/api/knowledgebase/search - Searches knowledge base content

Routes to Page¶

Direct: /knowledgebase
From: Navigation sidebar
From: Home page knowledge base shortcut

Dependencies¶

import { useState, useEffect, useRef } from "react";
import { useSession } from "next-auth/react";
import { motion, AnimatePresence } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { KnowledgeBaseSearch } from "@/components/KnowledgeBaseSearch";

Notes¶

Requires authentication
Supports document versioning and history
Implements document tagging for improved organisation
Features advanced search capabilities with content indexing
Integrates with the AI system to enhance responses with knowledge base content
Supports multiple file formats including PDF, DOCX, XLSX, PPTX, and images