document-toolbar.tsx

Overview

document-toolbar.tsx is a React functional component that provides a toolbar interface for managing a list of documents within an application. It includes features such as searching documents, bulk actions (enable, disable, run, cancel, delete), and adding new documents via upload or creation. This component integrates with various hooks to perform document-related operations and uses Ant Design UI components for layout and interaction.

The toolbar is designed to support selection-based bulk operations on documents and offers localized UI text via a translation hook, making it adaptable for internationalization.

Component: DocumentToolbar

Description

DocumentToolbar is the main React component exported by this file. It renders a user interface toolbar that allows users to:

Search documents by name or content.
Perform bulk operations on selected documents: enable, disable, run, cancel, delete.
Add new documents via upload or by creating empty documents.

It handles user interactions, calls appropriate hooks to mutate document state, and confirms destructive actions such as deletion.

Props Interface: `IProps`

Prop Name	Type	Description
`selectedRowKeys`	`string[]`	Array of selected document IDs for bulk operations.
`showCreateModal`	() => void	Callback to show the modal dialog for creating a new empty document.
showWebCrawlModal	() => void	(Unused in this file) Callback to show web crawl modal, possibly for adding documents.
`showDocumentUploadModal`	() => void	Callback to show the modal dialog for uploading local documents.
`searchString`	`string`	Current string in the search input box.
`handleInputChange`	React.ChangeEventHandler	Event handler for changes in the search input box.
`documents`	`IDocumentInfo[]`	Array of all document objects currently loaded/displayed.

Hooks Used

useTranslate - Provides localization translation function t scoped to 'knowledgeDetails'.
useRemoveNextDocument - Provides removeDocument function to delete documents by ID.
useShowDeleteConfirm - Provides a confirmation dialog function before deletion.
useRunNextDocument - Provides runDocumentByIds to start or cancel document processing.
useSetNextDocumentStatus - Provides setDocumentStatus to enable or disable documents.

Internal Variables and Functions

`actionItems: MenuProps['items']`

Memoized menu items shown in the "Add File" dropdown.
Items include:
- Upload local files (calls showDocumentUploadModal)
- Divider
- Create empty files (calls showCreateModal)

`handleDelete`

Callback that deletes selected documents that are not currently running.
Shows an error toast if user attempts to delete running documents.
Uses showDeleteConfirm to confirm deletion.
Calls removeDocument on confirmed deletion.

`runDocument(run: number)`

Runs or cancels running documents by IDs (selectedRowKeys).
run parameter is numeric: 1 to run, 2 to cancel.
Calls runDocumentByIds hook with document IDs and run/cancel flag.

handleRunClick & `handleCancelClick`

Wrap runDocument with predefined run states (start or cancel).

`onChangeStatus(enabled: boolean)`

Enables or disables all selected documents by calling setDocumentStatus for each.

handleEnableClick & `handleDisableClick`

Wrap onChangeStatus for enabling or disabling documents.

`disabled`

Boolean indicating whether bulk action dropdown should be disabled (true if no document selected).

`items: MenuProps['items']`

Memoized menu items for the bulk action dropdown.
Includes actions:
- Enable documents
- Disable documents
- Divider
- Run documents
- Cancel running documents
- Divider
- Delete documents (confirmed)

Rendered JSX Structure

A container <div> with CSS class filter.
A Dropdown button for bulk actions with menu items from items.
A Space container holding:
- An Input search box with a search icon and controlled by searchString and handleInputChange.
- Another Dropdown button for "Add File" actions with menu items from actionItems.

Usage Example

<DocumentToolbar
  selectedRowKeys={selectedIds}
  showCreateModal={() => setCreateModalVisible(true)}
  showDocumentUploadModal={() => setUploadModalVisible(true)}
  searchString={searchText}
  handleInputChange={handleSearchChange}
  documents={documentList}
/>

Implementation Details

State Management: This component is stateless and relies entirely on props and hooks for data and operations.
Localization: Uses a translation hook scoped to 'knowledgeDetails' for all UI text, enabling multi-language support.
Performance: Uses useMemo and useCallback hooks to optimize rendering and avoid unnecessary recalculations of menus and handlers.
Safety: Prevents deletion of documents that are currently running, showing an error toast instead.
UI Framework: Utilizes Ant Design components (Button, Dropdown, Input, Space) and custom SVG icons imported as React components.

Interaction with Other Parts of the System

Hooks: The component depends on multiple custom hooks from the application (useRemoveNextDocument, useRunNextDocument, useSetNextDocumentStatus, useShowDeleteConfirm, useTranslate). These hooks encapsulate business logic, API calls, and state mutation related to document management.
Document Data: The component receives a list of documents and selection state from parent components, which manage the main document table or list.
Modals: Triggers modal dialogs for document creation and uploading through callback props.
Toast Notifications: Uses the toast utility from sonner to show user feedback on invalid actions.
Styling: Uses CSS Modules for scoped styles imported from index.less.

Mermaid Component Diagram

The diagram below represents the DocumentToolbar component’s structure and its interaction with hooks and UI elements:

componentDiagram
    component DocumentToolbar {
      +selectedRowKeys: string[]
      +showCreateModal(): void
      +showDocumentUploadModal(): void
      +searchString: string
      +handleInputChange(event): void
      +documents: IDocumentInfo[]
    }
    component useTranslate
    component useRemoveNextDocument
    component useShowDeleteConfirm
    component useRunNextDocument
    component useSetNextDocumentStatus
    component AntDesign_UI {
      Button
      Dropdown
      Input
      Space
    }
    component Toast

    DocumentToolbar --> useTranslate : get translation function (t)
    DocumentToolbar --> useRemoveNextDocument : removeDocument()
    DocumentToolbar --> useShowDeleteConfirm : showDeleteConfirm()
    DocumentToolbar --> useRunNextDocument : runDocumentByIds()
    DocumentToolbar --> useSetNextDocumentStatus : setDocumentStatus()
    DocumentToolbar --> AntDesign_UI : renders UI components
    DocumentToolbar --> Toast : shows error messages

Summary

document-toolbar.tsx is a well-structured React component providing a localized, interactive toolbar for document management. It enables searching, bulk status changes, running/cancelling processes, deletion with confirmation, and document addition through upload or creation. The component's reliance on custom hooks ensures separation of concerns, with UI logic distinct from business logic.

This file is a critical piece of the document management UI, interacting with parent components managing document data and triggering modals as well as calling mutation hooks to update backend state.