hooks.ts

Overview

The hooks.ts file is a utility module containing a set of custom React hooks designed to facilitate interaction with knowledge base configurations and related UI states within the application. It primarily focuses on:

• Selecting and filtering options related to document parsing and embedding models.

• Fetching and managing knowledge base configuration data.

• Managing UI states, such as modals for renaming tags.

• Integrating with form state management (using react-hook-form) and data fetching libraries (react-query).

These hooks abstract away complex state, data fetching, and UI logic, providing reusable, composable functionality to components that consume knowledge base information.

Detailed Explanation of Exports

1. useSelectChunkMethodList()

Purpose

Returns a filtered list of parser options, excluding certain "hidden" fields that should not be displayed in the chunk method selection UI.

Implementation Details

• Retrieves the full list of parser options via the useSelectParserList hook.

• Filters out any parser whose value matches one of the entries in the HiddenFields array (['email', 'picture', 'audio']).

Parameters

• None.

Returns

• Array of parser option objects (filtered).

Usage Example

const chunkMethods = useSelectChunkMethodList();
chunkMethods.forEach(method => console.log(method.label));

2. useSelectEmbeddingModelOptions()

Purpose

Provides a list of embedding model options filtered by the embedding model type.

Implementation Details

• Calls useSelectLlmOptionsByModelType to get all LLM model options.

• Returns only those options categorized under LlmModelType.Embedding.

Parameters

• None.

Returns

• Array of embedding model options.

Usage Example

const embeddingModels = useSelectEmbeddingModelOptions();

3. useHasParsedDocument()

Purpose

Determines whether the knowledge base has any parsed document chunks.

Implementation Details

• Uses useFetchKnowledgeBaseConfiguration to fetch knowledge base details.

• Returns true if chunk_num (number of document chunks) is greater than 0.

Parameters

• None.

Returns

• Boolean indicating presence of parsed documents.

Usage Example

const hasParsedDocs = useHasParsedDocument();
if (hasParsedDocs) {
  // Show parsed docs related UI
}

4. useFetchKnowledgeConfigurationOnMount(form: UseFormReturn)

Purpose

Fetches the knowledge base configuration data on component mount and resets the provided form's values with this data.

Implementation Details

• Calls useFetchKnowledgeBaseConfiguration to get knowledge base details.

• On mount or when knowledgeDetails change, merges default parser configuration from form state with fetched parser configuration.

• Uses Lodash pick to select relevant properties for the form: description, name, permission, embd_id, parser_id, language, parser_config, pagerank, avatar.

• Calls the reset method on the react-hook-form form instance to update the form fields.

Parameters

• form: The UseFormReturn object from react-hook-form corresponding to the form schema.

Returns

• The fetched knowledgeDetails data.

Usage Example

const form = useForm({ ... });
const knowledgeDetails = useFetchKnowledgeConfigurationOnMount(form);

5. useSelectKnowledgeDetailsLoading()

Purpose

Indicates whether the knowledge details are currently being fetched.

Implementation Details

• Uses useIsFetching from react-query with the query key 'fetchKnowledgeDetail'.

• Returns true if there is at least one active fetch request for knowledge details.

Parameters

• None.

Returns

• Boolean loading state.

Usage Example

const isLoading = useSelectKnowledgeDetailsLoading();
if (isLoading) {
  // Show loading spinner
}

6. useRenameKnowledgeTag()

Purpose

Manages the state and UI controls needed for renaming a knowledge tag, including modal visibility and the current tag being renamed.

Implementation Details

• Maintains internal state tag for the tag name being edited.

• Uses useSetModalState to control modal visibility (visible, hideModal, showModal).

• Provides a callback function handleShowTagRenameModal which sets the current tag and shows the rename modal.

Returns

• initialName: The current tag string selected for renaming.

• tagRenameVisible: Boolean indicating if the rename modal is visible.

• hideTagRenameModal: Function to hide the modal.

• showTagRenameModal: Function to show the modal, expects a tag string.

Usage Example

const {
  initialName,
  tagRenameVisible,
  hideTagRenameModal,
  showTagRenameModal,
} = useRenameKnowledgeTag();

// To open rename modal for a tag:
showTagRenameModal("OldTagName");

Important Implementation Details

• HiddenFields: This constant array defines parser types that should not be presented to users in chunk method selectors, likely because these fields are not relevant for chunking or analysis.

• Data Fetching: The file extensively uses hooks that wrap react-query for asynchronous data fetching (useFetchKnowledgeBaseConfiguration) and query state (useIsFetching).

• Form Integration: The useFetchKnowledgeConfigurationOnMount hook tightly integrates with react-hook-form to initialize or reset form state with fetched data, merging default and fetched parser configurations safely.

• Modal State Management: Modal visibility and control states are managed through a custom hook useSetModalState, supporting show/hide functionality for rename dialogs.

• Filtering and Mapping: Filtering operations are done using array methods and utility functions like Lodash's pick for selective property extraction.

Interaction with Other Parts of the System

• Constants: Imports LlmModelType from constants to filter model options by type.

• Hooks:

  • useSetModalState: Controls modal visibility state, likely a generalized hook for modals.

  • useSelectLlmOptionsByModelType: Provides options of LLM models grouped by type.

  • useFetchKnowledgeBaseConfiguration: Fetches detailed knowledge base configuration data.

  • useSelectParserList: Retrieves a list of parser options available to the user.

• Third-party Libraries:

  • react-hook-form: For form state management and integration.

  • react-query: For asynchronous data fetching and caching.

  • lodash: Used for utility functions like pick.

  • zod: For schema inference related to form data validation.

• UI Components: The hooks are intended to be consumed by React components that render knowledge base configuration UIs, forms, and modals.

Mermaid Diagram - Hook Relationships Flowchart

flowchart TD
    A[useSelectParserList] --> B[useSelectChunkMethodList]
    C[useSelectLlmOptionsByModelType] --> D[useSelectEmbeddingModelOptions]
    E[useFetchKnowledgeBaseConfiguration] --> F[useHasParsedDocument]
    E --> G[useFetchKnowledgeConfigurationOnMount]
    H[useIsFetching] --> I[useSelectKnowledgeDetailsLoading]
    J[useSetModalState] --> K[useRenameKnowledgeTag]
    K --> L[tag state & modal control]

    subgraph Data Fetching
        E
        F
        G
        I
    end

    subgraph Model & Parser Options
        A
        B
        C
        D
    end

    subgraph UI State Management
        J
        K
        L
    end

Summary

The hooks.ts file encapsulates critical logic for managing knowledge base configurations and associated UI state in a modular and reusable manner. It bridges data fetching, form initialization, UI control (modals), and option filtering, enabling smoother component implementation and maintenance.

This file is a core utility layer in the knowledge base management feature of the application, tightly integrated with React Query for data, React Hook Form for form management, and custom hooks for UI state.