category-panel.tsx

Overview

category-panel.tsx defines a React functional component named CategoryPanel, which renders a categorized display panel based on a selected chunking method. This component is part of a knowledge configuration interface, likely used in a user settings or content parsing context.

The component dynamically presents:

• A localized title and description of the selected chunk method,

• Illustrative SVG icons representing the method,

• Examples and dialogue samples related to the method,

• A specialized tab interface (TagTabs) when the chunk method is "tag",

• A fallback empty state when no images or data exist for the selected method.

The file integrates internationalization, secure HTML rendering, and responsive layout using Ant Design components.

Detailed Breakdown

Imports

• SvgIcon: Custom component to render SVG icons.

• useTranslate: Hook for internationalization (i18n) translations.

• useSelectParserList: Hook to get a list of available parsers (chunk methods).

• Ant Design components: Col, Divider, Empty, Row, Typography for layout and UI elements.

• DOMPurify: Library to sanitize HTML for safe rendering.

• lodash.camelCase: Utility to convert strings to camelCase format.

• React useMemo: Hook to memoize computation-heavy values.

• styles: CSS modules styling.

• TagTabs: Subcomponent rendered conditionally.

• ImageMap: Mapping of chunk methods to image icon names.

Component: CategoryPanel

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

Purpose

Renders a panel that describes a specific content chunking method and displays related images and examples.

Props

Internal Variables and Hooks

• parserList: Array of parser objects obtained via useSelectParserList(). Each parser has at least value and label.

• t: Translation function scoped to "knowledgeConfiguration".

• item: Memoized object containing:

  • title: Label of the parser matching chunkMethod.

  • description: Localized description string for the parser, translated using a camelCase key derived from the chunk method value.

• imageList: Memoized list of SVG icon names associated with chunkMethod, retrieved from ImageMap.

Render Logic

• If imageList is non-empty:

  • Renders section headers for method title and examples.

  • Sanitizes and renders the HTML description safely.

  • Displays images in a responsive grid (Row and Col) using SvgIcon.

  • Shows a divider and dialogue examples section.

• If imageList is empty:

  • Renders an empty state with a fallback SVG icon and a localized message.

• If chunkMethod equals "tag":

  • Renders the TagTabs component below the main content.

Return Value

JSX element representing the UI panel for the selected chunk method.

Usage Example

<CategoryPanel chunkMethod="splitByParagraph" />

This would render the category panel for the chunk method "splitByParagraph", showing localized text, images, and examples associated with that method.

Important Implementation Details

• Localization with camelCase keys: The translation keys for descriptions are dynamically generated by converting the parser's value to camelCase, ensuring a consistent i18n key format.

• Safe HTML rendering: The description content may contain HTML, which is sanitized using DOMPurify before being dangerously set as inner HTML. This prevents XSS attacks while allowing rich text.

• Memoization: Both the selected parser item and the image list are memoized with useMemo to avoid unnecessary recalculations on re-renders.

• Conditional rendering: The component adapts its UI depending on whether images exist for the chunk method and whether the method is "tag".

• Styling: CSS modules ensure scoped styles, and Ant Design's grid system is used for responsive image layouts.

Interactions with Other Parts of the System

• Hooks:

  • useSelectParserList() provides the list of available chunk methods/parsers, likely from a global or user setting store.

  • useTranslate() fetches localized strings from the "knowledgeConfiguration" namespace.

• Components:

  • SvgIcon renders SVG assets based on icon names from ImageMap.

  • TagTabs is a subcomponent that appears only for the "tag" chunk method.

• Constants:

  • ImageMap maps chunk method keys to arrays of icon names, enabling dynamic image loading.

• Styling:

  • The component uses local CSS module styles from index.less.

This component is likely embedded in a larger configuration or settings page where users select or view details about content chunking methods.

Visual Diagram

componentDiagram
    direction TB
    CategoryPanel --> SvgIcon : renders icons
    CategoryPanel --> TagTabs : conditional rendering (chunkMethod === 'tag')
    CategoryPanel --> useSelectParserList : fetches parser list
    CategoryPanel --> useTranslate : fetches i18n strings
    CategoryPanel --> ImageMap : fetches images by chunkMethod
    CategoryPanel --> AntDesign(UI Components) : uses for layout & display

Summary

category-panel.tsx is a React component that presents detailed, localized information about a selected content chunking method, including descriptions, example images, and dialogue examples. It is designed with strong emphasis on i18n, safe HTML rendering, and responsive layout, integrating several hooks and subcomponents to adapt dynamically to the selected method. This component plays a key role in the user interface for configuring or understanding parsing methods within the application.