auto-keywords-item.tsx

Overview

The auto-keywords-item.tsx file defines two React functional components, AutoKeywordsItem and AutoQuestionsItem, which are used to render form items for configuring automatic extraction settings in a user interface. Both components leverage Ant Design (antd) UI components and a custom translation hook for internationalization. These components allow users to specify numeric values via synchronized Slider and InputNumber controls within a form, specifically targeting configuration parameters related to "auto keywords" and "auto questions" respectively.

Components

1. AutoKeywordsItem

Purpose

Renders a form item that allows users to set the number of automatic keywords generated by some parser configuration. It combines a slider and a numeric input for flexible user input.

Function Signature

const AutoKeywordsItem: React.FC = () => JSX.Element;

Internals and Behavior

• Uses the useTranslate hook scoped to 'knowledgeDetails' to fetch localized labels and tooltips.

• Wraps the input controls inside an Ant Design Form.Item with:

  • label set to the translated string for "autoKeywords".

  • tooltip set to the translated string for "autoKeywordsTip".

• Uses a Flex container (from Ant Design's Flex component) to align and space the slider and input number horizontally.

• The slider and input number are bound to the same form field path: ['parser_config', 'auto_keywords'].

• The slider has a maximum value of 30 and initial value defaults to 0.

• The input number restricts values between 0 and 30.

• Both controls are synchronized via the Ant Design Form's data binding (name prop).

Usage Example

import { AutoKeywordsItem } from './auto-keywords-item';

<Form>
  <AutoKeywordsItem />
</Form>

2. AutoQuestionsItem

Purpose

Renders a form item for configuring the number of automatic questions generated by the parser configuration. Functionally similar to AutoKeywordsItem but with different value boundaries and form keys.

Function Signature

const AutoQuestionsItem: React.FC = () => JSX.Element;

Internals and Behavior

• Similar structure and behavior to AutoKeywordsItem.

• Uses translation keys "autoQuestions" for label and "autoQuestionsTip" for tooltip.

• Controls bind to the form field ['parser_config', 'auto_questions'].

• Slider maximum is 10, initial value defaults to 0.

• Input number is constrained between 0 and 10.

Usage Example

import { AutoQuestionsItem } from './auto-keywords-item';

<Form>
  <AutoQuestionsItem />
</Form>

Implementation Details and Algorithms

• Form Control Synchronization: Both components rely on Ant Design's Form.Item with the same name prop for both Slider and InputNumber components, which ensures that changes in either control update the form state consistently.

• Internationalization: The useTranslate hook is used to fetch localized text strings, enabling multi-language support for labels and tooltips.

• Layout: The Flex component from Ant Design is used to create a responsive and aligned horizontal layout, with a gap of 20 pixels between slider and input number for clear UI separation.

Interaction with Other System Components

• Translation Hook (useTranslate): This hook connects with the application's i18n system to provide localized strings. The 'knowledgeDetails' namespace suggests these components are part of a knowledge or documentation detail view.

• Ant Design Form: These components are intended to be used inside an Ant Design Form component. They rely on the form's context to manage state and validation.

• Parser Configuration: The form fields bound (parser_config.auto_keywords and parser_config.auto_questions) indicate these components directly manipulate parser-related settings, possibly affecting how content is parsed or auto-generated in the application.

Mermaid Diagram

componentDiagram
    component AutoKeywordsItem {
        +useTranslate('knowledgeDetails')
        +Form.Item(label, tooltip)
        +Flex(gap=20, align=center)
        +Form.Item(name=['parser_config','auto_keywords'], noStyle, initialValue=0)
        +Slider(max=30)
        +Form.Item(name=['parser_config','auto_keywords'], noStyle)
        +InputNumber(min=0, max=30)
    }
    component AutoQuestionsItem {
        +useTranslate('knowledgeDetails')
        +Form.Item(label, tooltip)
        +Flex(gap=20, align=center)
        +Form.Item(name=['parser_config','auto_questions'], noStyle, initialValue=0)
        +Slider(max=10)
        +Form.Item(name=['parser_config','auto_questions'], noStyle)
        +InputNumber(min=0, max=10)
    }
    AutoKeywordsItem <--> AutoQuestionsItem : share similar structure and form binding pattern

Summary

The auto-keywords-item.tsx file provides two reusable React components for setting numeric configuration values related to automatic keyword and question generation within a form. They use Ant Design's UI components for a polished and consistent UI experience and support internationalization. Their design promotes synchronized input controls and clear user guidance through labels and tooltips, fitting into a larger system that involves parser configuration management and localized user interfaces.