index.tsx

Overview

index.tsx defines the SearchPage React component, which serves as a sophisticated search interface within the application. This page integrates multiple UI components and custom hooks to enable users to:

• Perform knowledge-based searches with dynamic input.

• View AI-generated answers with references.

• Explore related documents and chunks of content.

• Navigate paginated results.

• Interact with advanced features like mind maps and PDF document drawers.

The file orchestrates data fetching, user interaction handling, and presentation logic to deliver a seamless knowledge retrieval and exploration experience.

Detailed Component and Function Descriptions

SearchPage Component

The sole exported component of this file, SearchPage, is a functional React component that encapsulates the entire search page UI and its behavior.

Purpose

• Provides a search input supporting question submission.

• Displays AI-generated answers with rich markdown content and references.

• Shows related questions as clickable tags.

• Lists relevant document chunks with highlights and images.

• Supports pagination of chunk results.

• Enables opening PDF drawers for more details.

• Offers a mind map visualization related to the search.

• Manages state and side effects with various hooks.

Internal State

• checkedList: string[] — List of user-selected knowledge document IDs.

• Derived checkedWithoutEmbeddingIdList — Filters checkedList to only those present in the fetched knowledge list.

Custom Hooks Used

• useSelectTestingResult() — Retrieves current testing result chunks and total count.

• useFetchKnowledgeList() — Fetches available knowledge documents.

• useSendQuestion(checkedWithoutEmbeddingIdList) — Manages sending search questions, receiving answers, related questions, and loading states.

• useClickDrawer() — Controls PDF drawer visibility and selected document/chunk state.

• useGetPaginationWithRouter() — Handles pagination state synced with the router.

• useShowMindMapDrawer(checkedWithoutEmbeddingIdList, searchStr) — Controls mind map drawer display and data.

UI Libraries and Components

• Ant Design components (Button, Card, Pagination, Input.Search, Skeleton, Spin, Tag, Tooltip, Layout, Divider, List, Space, Flex, FloatButton).

• Custom components such as SearchSidebar, MarkdownContent, PdfDrawer, MindMapDrawer, RetrievalDocuments, FileIcon, HightLightMarkdown, ImageWithPopover, and SvgIcon.

Key Methods and Handlers

• onChange(pageNumber, pageSize) — Pagination change handler that triggers chunk testing for the selected documents.

• handleSearch() — Memoized callback to send the current search string as a question.

• handleSearchStrChange() — Updates the search string based on user input (via useSendQuestion).

• handleClickRelatedQuestion(question) — Handler for clicking a related question tag (from useSendQuestion).

• clickDocumentButton(documentId, chunk) — Opens the PDF drawer for a specific document chunk.

Render Logic

• Initial render: Shows only the search input centered on the page.

• After first search: Displays the answer card, list of chunks with highlights, related questions, and pagination.

• Floating mind map button appears when conditions are met (non-empty search, selection, after first render).

• Conditionally renders PdfDrawer and MindMapDrawer modals.

Parameters

SearchPage is a React functional component without props.

Return Value

Returns JSX describing the full search page UI.

Usage Example

import SearchPage from './index';

function App() {
  return (
    <div>
      <SearchPage />
    </div>
  );
}

Important Implementation Details and Algorithms

• State Filtering: The component filters the user-selected document IDs to only those available in the knowledge base (checkedWithoutEmbeddingIdList), preventing invalid selections from affecting search queries.

• Search Submission and Answer Handling: The useSendQuestion hook encapsulates complex logic around submitting search questions, handling loading states, retrieving answers and related questions, and controlling output streaming and stopping.

• Pagination Integration: Pagination state is managed via useGetPaginationWithRouter, which synchronizes pagination with the URL router to preserve navigation state.

• Content Sanitization: Highlighted content snippets are sanitized using DOMPurify before setting as inner HTML to prevent XSS attacks while allowing HTML formatting.

• Lazy Loading and Skeletons: The UI shows skeleton loaders while the AI answer is being fetched and spinners during chunk loading for better UX.

• Conditional Rendering: The page layout dynamically switches between a minimal initial state and a full results view based on isFirstRender.

• Mind Map Visualization: The mind map drawer integrates with a dedicated hook and floats a button to toggle it, providing a visual overview of the knowledge network related to the search.

Interaction with Other System Parts

• Hooks:

  • useFetchKnowledgeList and useSelectTestingResult connect to the backend or state stores to retrieve knowledge documents and search result chunks.

  • useSendQuestion manages the Q&A interaction with the AI or knowledge engine.

  • useClickDrawer controls PDF drawer state, enabling document preview.

  • useShowMindMapDrawer manages the mind map feature, likely fetching or generating mind map data.

  • useGetPaginationWithRouter ties pagination to the app's routing system.

• Components:

  • SearchSidebar manages the list of selectable knowledge documents.

  • MarkdownContent renders AI answers with markdown and clickable references.

  • RetrievalDocuments lists and manages selected documents for testing.

  • PdfDrawer and MindMapDrawer display modal drawers for documents and mind maps.

  • Various utility UI components (FileIcon, ImageWithPopover, SvgIcon) enhance visual representation.

• External Libraries:

  • Ant Design for UI components.

  • DOMPurify for sanitizing HTML content.

  • lodash for utility functions.

  • lucide-react for iconography.

  • react-i18next for translations.

Visual Diagram

componentDiagram
  direction LR
  SearchPage <|-- SearchSidebar : renders
  SearchPage <|-- MarkdownContent : renders
  SearchPage <|-- RetrievalDocuments : renders
  SearchPage <|-- PdfDrawer : conditionally renders
  SearchPage <|-- MindMapDrawer : conditionally renders
  SearchPage ..> useSendQuestion : uses
  SearchPage ..> useFetchKnowledgeList : uses
  SearchPage ..> useSelectTestingResult : uses
  SearchPage ..> useClickDrawer : uses
  SearchPage ..> useShowMindMapDrawer : uses
  SearchPage ..> useGetPaginationWithRouter : uses
  SearchPage ..> AntDesignComponents : uses
  SearchPage ..> DOMPurify : uses

Summary

The index.tsx file implements a rich search page component that integrates knowledge base selection, AI-powered answers, document chunk browsing, related question suggestions, and advanced visual tools such as mind maps and PDF previews. It leverages multiple custom hooks to manage data flow and state, coordinating between UI components and backend services to provide a responsive and user-friendly knowledge exploration environment.

This file is a critical part of the application's knowledge search and retrieval feature set.