chunk-method-card.tsx

Overview

The chunk-method-card.tsx file defines a React component that provides a user interface card for selecting and displaying information about different "chunk methods" (parsers) within a knowledge configuration context. This component integrates a selection dropdown to choose a chunk method and dynamically displays related information including title, description, example images, and dialogue examples associated with the selected chunk method.

The file contains two main React functional components:

• CategoryPanel: Displays detailed information and examples related to the selected chunk method.

• ChunkMethodCard: The primary export component that renders a card containing the chunk method selector and the CategoryPanel.

This UI component leverages several internal UI components (form controls, select dropdowns, cards), hooks for translation and user settings, and external libraries such as Ant Design and DOMPurify for safe HTML rendering.

Components and Functions

1. CategoryPanel

const CategoryPanel = ({ chunkMethod }: { chunkMethod: string }) => { ... }

Description

CategoryPanel is a presentational component that displays information about the currently selected chunk method. It shows:

• The chunk method's title and description.

• Example images illustrating the chunk method.

• Dialogue examples related to the chunk method.

If no images or information exist for the selected chunk method, it displays an empty state with a placeholder icon.

Parameters

• chunkMethod (string): The identifier of the selected chunk method.

Internal Logic

• Retrieves a list of available parsers using the custom hook useSelectParserList().

• Finds the parser item matching the current chunkMethod value.

• Uses the useTranslate hook scoped to 'knowledgeConfiguration' to get localized strings.

• Uses DOMPurify.sanitize to safely render HTML content for the description, preventing XSS attacks.

• Looks up example images for the chunk method from a predefined ImageMap.

• Conditionally renders content based on whether images exist for the method.

Return Value

• Returns JSX representing the detailed panel UI with headings, descriptions, images, and an empty state if no data is available.

Usage Example

<CategoryPanel chunkMethod="someChunkMethod" />

2. ChunkMethodCard

export default function ChunkMethodCard() { ... }

Description

ChunkMethodCard is the main exported component providing a card UI that allows users to select a chunk method from a dropdown list and view its details via the CategoryPanel.

Internal Logic

• Uses useFormContext (from react-hook-form) to access form state and control.

• Uses useTranslate for localized strings.

• Renders a Card component containing:

  • A form field with a label and a Select dropdown to choose the parser_id (chunk method).

  • The CategoryPanel component for displaying detailed information about the selected chunk method.

• The select dropdown has hardcoded example emails as items (likely placeholders).

Return Value

• Returns JSX representing a form card with a chunk method selector and corresponding info panel.

Usage Example

<ChunkMethodCard />

Implementation Details and Algorithms

• Memoization: useMemo is used in CategoryPanel to avoid recomputing the selected parser item and image list unless dependencies change, optimizing rendering performance.

• Safe HTML Rendering: DOMPurify.sanitize is employed to sanitize the description HTML before injecting it into the DOM with dangerouslySetInnerHTML to prevent XSS vulnerabilities.

• Localization: The useTranslate hook is used extensively to provide internationalized UI text based on a 'knowledgeConfiguration' namespace.

• Form Management: Integration with react-hook-form facilitates controlled form inputs and validation states.

• Styling: CSS modules (index.less) are used for scoped styling of the component parts.

• Iconography: SvgIcon component is used to render method-related icons and images dynamically.

Interaction with Other System Components

• UI Components: Relies on internal UI primitives such as Card, FormField, Select, and typography components, presumably part of a shared design system.

• Hooks:

  • useTranslate for localization.

  • useSelectParserList to fetch the list of available parsers (chunk methods).

• Data Source: Uses ImageMap (imported from ./utils) to map chunk method identifiers to example images.

• Form Context: Uses react-hook-form's context to handle form state and field control.

• Sanitization: Uses DOMPurify to sanitize HTML content before rendering.

• Third-party Libraries: Uses Ant Design components for layout (Row, Col, Divider, Typography) and utility functions like camelCase from Lodash.

This component would typically be used in a larger knowledge management or configuration UI where users need to select and understand chunking/parsing methods for documents or data.

Visual Diagram

componentDiagram
    direction LR
    ChunkMethodCard <--> CategoryPanel : passes chunkMethod prop
    ChunkMethodCard --> FormField : renders form field for selection
    FormField --> Select : dropdown for chunk method selection
    CategoryPanel --> useSelectParserList : fetch parser list
    CategoryPanel --> useTranslate : fetch localized strings
    CategoryPanel --> ImageMap : fetch images for chunkMethod
    CategoryPanel --> SvgIcon : render example images/icons
    CategoryPanel --> DOMPurify : sanitize HTML description
    ChunkMethodCard --> useFormContext : get form controls

Summary

This file provides a modular and localized UI for managing chunk method selection and display, integrating safely sanitized HTML content, dynamic images, and form handling within a styled card layout.

Notes

• The Select dropdown inside ChunkMethodCard currently uses hardcoded email values as options, which appear inconsistent with chunk methods and likely placeholders for future dynamic data.

• CategoryPanel expects the chunkMethod prop to be passed down; in ChunkMethodCard, it is currently passed as an empty string (chunkMethod=""), indicating incomplete integration or placeholder implementation. In a full implementation, chunkMethod should be sourced from form state or selection.

End of Documentation for chunk-method-card.tsx