hooks.ts

Overview

The hooks.ts file provides a collection of React custom hooks primarily designed to manage knowledge base configuration in a web application. These hooks facilitate the fetching, updating, and manipulation of knowledge base data, including configuration forms, file uploads (avatars), embedding model selections, chunking (parsing) methods, and UI modal states related to knowledge tags.

The hooks encapsulate side effects, state management, and utility integrations to streamline component code and promote reusability around knowledge base features. This file acts as an intermediate layer connecting UI components (e.g., forms) with API services, user settings, and routing logic.

Detailed Explanation of Exports

1. useSubmitKnowledgeConfiguration(form: FormInstance)

Handles form submission for updating knowledge base configuration.

• Parameters:

  • form: FormInstance — Ant Design form instance used to validate and access form data.

• Returns:

  • submitKnowledgeConfiguration: () => Promise — Async function to validate form, convert avatar file to base64, save configuration, then navigate to the dataset page.

  • submitLoading: boolean — Loading state indicating if the save operation is in progress.

  • navigateToDataset: () => void — Function to navigate to the dataset screen.

• Usage example:

  const { submitKnowledgeConfiguration, submitLoading } = useSubmitKnowledgeConfiguration(form);
  
  return (
    <Button onClick={submitKnowledgeConfiguration} loading={submitLoading}>
      Save Configuration
    </Button>
  );
  

• Implementation details:

  • Validates all form fields using Ant Design's validateFields().

  • Converts avatar file upload list to a base64 string using getBase64FromUploadFileList.

  • Calls saveKnowledgeConfiguration from useUpdateKnowledge hook to persist data.

  • Navigates to the dataset overview page via useNavigateToDataset.

2. useSelectChunkMethodList(): Array<{label: string, value: string}>

Provides a filtered list of chunking (parsing) methods for selection, excluding certain hidden fields.

• Returns:

  • Filtered list of parser options excluding email, picture, and audio.

• Details:

  • Uses useSelectParserList hook to get all available parsers.

  • Filters out parsers whose values are listed in the constant HiddenFields.

• Usage:
  Used to populate dropdown menus or selectors when choosing a method to chunk or parse documents.

3. useSelectEmbeddingModelOptions(): Array<{label: string, value: string}>

Returns a list of LLM embedding models available for selection.

• Returns:

  • Array of LLM options filtered by the Embedding model type.

• Details:

  • Utilizes useSelectLlmOptionsByModelType and filters by LlmModelType.Embedding.

• Usage:
  Typically used to populate UI controls for selecting an embedding model to process knowledge data.

4. useHasParsedDocument(): boolean

Determines if the current knowledge base has parsed documents (chunks).

• Returns:

  • true if chunk_num (number of document chunks) is greater than zero, else false.

• Details:

  • Uses useFetchKnowledgeBaseConfiguration to fetch knowledge details.

• Usage:
  Can be used to conditionally render UI elements or trigger workflows depending on whether documents have been processed.

5. useFetchKnowledgeConfigurationOnMount(form: FormInstance)

Fetches knowledge base configuration on component mount and populates the form fields accordingly.

• Parameters:

  • form: FormInstance — The Ant Design form instance to populate.

• Returns:

  • knowledgeDetails — Raw knowledge base configuration data fetched.

• Implementation details:

  • Converts avatar base64 string into an Ant Design-compatible upload file list using getUploadFileListFromBase64.

  • Uses lodash.pick to extract relevant fields from the fetched data for the form.

  • Sets form fields with the fetched configuration on initial mount or when data changes.

• Usage example:

  const knowledgeDetails = useFetchKnowledgeConfigurationOnMount(form);
  

6. useSelectKnowledgeDetailsLoading(): boolean

Provides loading state indicating if knowledge details are currently being fetched.

• Returns:

  • true if any query with key fetchKnowledgeDetail is fetching, otherwise false.

• Details:

  • Uses TanStack React Query's useIsFetching hook.

• Usage:
  Useful to display loading spinners or disable UI interactions during data fetch.

7. useHandleChunkMethodChange()

Manages the state and side effects related to changes in the chunking method form field (parser_id).

• Returns:

  • form: FormInstance — Ant Design form instance created internally.

  • chunkMethod: string | undefined — Current value of the parser_id field.

• Implementation details:

  • Watches the parser_id field for changes.

  • Logs the current chunk method to the console each time it changes.

• Usage:
  Can be used for side effects or UI updates when chunk method selection changes.

8. useRenameKnowledgeTag()

Manages the state and UI modal visibility for renaming a knowledge tag.

• Returns:

  • initialName: string — Current tag name being edited.

  • tagRenameVisible: boolean — Visibility state of the rename modal.

  • hideTagRenameModal: () => void — Function to hide the rename modal.

  • showTagRenameModal: (record: string) => void — Function to show the modal and set the current tag.

• Implementation details:

  • Uses useState to hold the tag name.

  • Uses useSetModalState custom hook for modal visibility management.

  • Uses useCallback to memoize the function for showing the modal.

• Usage example:

  const { initialName, tagRenameVisible, showTagRenameModal, hideTagRenameModal } = useRenameKnowledgeTag();
  
  // When user clicks rename button
  showTagRenameModal('Old Tag Name');
  

Important Implementation Details & Algorithms

• File Upload Handling:
  The hooks utilize utility functions getBase64FromUploadFileList and getUploadFileListFromBase64 to convert between Ant Design's file upload list format and base64 strings, enabling storage and retrieval of images (avatars) in a format suitable for API transmission and form display.

• Form Integration:
  Ant Design's FormInstance is central to many hooks, ensuring that form validation, state-setting, and field watching are tightly coupled with the knowledge base data lifecycle.

• Data Fetching & Mutation:
  React Query hooks (useFetchKnowledgeBaseConfiguration, useUpdateKnowledge) are used for asynchronous data fetching and updating, providing loading states and caching.

• Filtering Logic:
  The chunk method selection excludes specific hidden fields by filtering the parser list, maintaining UI clarity and preventing unsupported chunking methods from being presented.

• Modal State Management:
  The useSetModalState hook abstracts modal visibility controls, promoting reuse across different UI modals like tag renaming.

Interaction with Other System Parts

• Constants:
  Imports LlmModelType from @/constants/knowledge to filter LLM options.

• Hooks:
  Relies on other custom hooks such as:

  • useUpdateKnowledge, useFetchKnowledgeBaseConfiguration (knowledge-related API hooks)

  • useSelectLlmOptionsByModelType (LLM model options)

  • useSelectParserList (parser/chunk method options)

  • useNavigateToDataset (routing/navigation)

  • useSetModalState (modal UI state)

• Utilities:
  Uses file utilities for base64 conversion (getBase64FromUploadFileList, getUploadFileListFromBase64).

• UI Components:
  Designed to work with Ant Design components, primarily Form and UploadFile types.

• React Query:
  Uses useIsFetching from @tanstack/react-query for data loading state.

Visual Diagram: Hook Structure and Relationships

flowchart TD
    A[useSubmitKnowledgeConfiguration] --> B[useUpdateKnowledge]
    A --> C[useNavigateToDataset]
    D[useSelectChunkMethodList] --> E[useSelectParserList]
    F[useSelectEmbeddingModelOptions] --> G[useSelectLlmOptionsByModelType]
    H[useHasParsedDocument] --> I[useFetchKnowledgeBaseConfiguration]
    J[useFetchKnowledgeConfigurationOnMount] --> I
    J --> K[getUploadFileListFromBase64]
    L[useSelectKnowledgeDetailsLoading] --> M[useIsFetching]
    N[useHandleChunkMethodChange] --> O[Form.useForm & Form.useWatch]
    P[useRenameKnowledgeTag] --> Q[useSetModalState]

Summary

The hooks.ts file is a utility-centric module that consolidates knowledge base configuration management hooks. It bridges UI components, backend API hooks, file utilities, and navigation to provide a clean, declarative API for forms, modals, and selection controls related to knowledge base entities. The modular design fosters maintainability and reusability within the knowledge base feature domain.