index.tsx

Overview

This file defines a React functional component ParsingStatusCell that visually represents the processing status of a document in a knowledge management system. It displays the current running status (e.g., running, failed, done) of a document processing task with appropriate UI elements such as badges, tags, icons, progress percentages, and detailed popover information.

The component also supports user interactions to trigger document re-processing or cancel ongoing tasks via clickable icons with confirmation dialogs.

Key highlights:

• Uses Ant Design UI components for layout and styling.

• Incorporates localized text using react-i18next and custom translation hooks.

• Shows detailed progress and error messages inside a popover.

• Uses different icons to represent different running statuses.

• Handles user actions for running, canceling, or refreshing document processing.

Detailed Documentation

Interfaces

IProps

Defines the props for components in this file.

Components

PopoverContent

A helper component that displays detailed information about the document's processing status inside a popover.

Props

• record: IDocumentInfo - The document whose details are shown.

Functionality

• Cleans up duplicated newline characters from progress messages.

• Highlights error strings ([ERROR]) with styled spans.

• Displays three fields:

  • Process begin time

  • Process duration (formatted to 2 decimal places with seconds)

  • Progress message (with error highlights)

Usage Example

<PopoverContent record={documentRecord} />

Implementation Details

• Uses react-string-replace to find and wrap [ERROR] messages.

• Uses Flex layout for vertical alignment.

• Localization support for labels via useTranslate('knowledgeDetails').

ParsingStatusCell (default export)

Main component representing the parsing status cell in a table or list.

Props

• record: IDocumentInfo - Document info including type, status, progress, and IDs.

Functionality

• Maps the document's run status string to a running status object and icon.

• Displays a colored tag with a badge and progress percentage if the document is running.

• Shows a popover with detailed progress info on hover.

• Provides an icon button to trigger:

  • Canceling the running process (if running)

  • Refreshing or rerunning the process (if not running)

• Displays a confirmation dialog before re-processing if the document has chunks.

• Hides the status cell completely if the document is of type Virtual.

• Disables re-processing if there are zero chunks.

Parameters

• record: IDocumentInfo

Returns

• A JSX element rendering the status tag, popover, and operation icon unless the document is virtual.

Usage Example

<ParsingStatusCell record={documentRecord} />

Important Implementation Details

• Uses RunningStatusMap and iconMap to associate statuses with colors and icons.

• Uses useHandleRunDocumentByIds hook to get the callback for running/canceling document processes.

• Uses Ant Design's Popover, Tag, Popconfirm, Badge, and Space components for UI.

• Prevents accidental rerun with confirmation dialog.

• Uses classnames for conditional CSS styling.

• Relies on isParserRunning utility to determine running status.

• Localized labels with useTranslation and useTranslate.

Constants and Utilities

iconMap

An object mapping running statuses to React SVG icon components:

Interaction with Other Parts of the System

• Imports SVG icons from assets for visual representation.

• Uses translation hooks to support multiple languages.

• Depends on the IDocumentInfo interface to structure document data.

• Uses constants from ../constant such as RunningStatus, RunningStatusMap, and DocumentType.

• Calls useHandleRunDocumentByIds custom hook from ../hooks for triggering document processing actions.

• Checks document processing state with utility isParserRunning from ../utils.

• Styles are imported from a CSS module index.less.

• Integrates tightly with Ant Design components for UI consistency.

Visual Diagram

componentDiagram
    component ParsingStatusCell {
        +record: IDocumentInfo
        +render()
    }
    component PopoverContent {
        +record: IDocumentInfo
        +replaceText(text: string): ReactNode
        +render()
    }
    ParsingStatusCell --> PopoverContent : uses
    ParsingStatusCell --> useHandleRunDocumentByIds : calls hook
    ParsingStatusCell --> isParserRunning : calls utility
    ParsingStatusCell --> Antd Components : uses (Popover, Tag, Popconfirm, Badge, Space, Flex)
    PopoverContent --> reactStringReplace : uses for highlighting
    ParsingStatusCell --> iconMap : selects icon based on status

Summary

The index.tsx file implements a self-contained React component that visually and interactively presents the processing status of knowledge documents. It encapsulates all necessary UI logic including localized labels, status icons, progress display, error highlighting, and user interaction for task control. This component is designed to integrate smoothly into a larger knowledge management frontend, leveraging custom hooks and utilities for state management and side effects.

If you need further details on related hooks, constants, or utilities, please refer to their respective modules.