hooks.ts

Overview

The hooks.ts file provides a collection of custom React hooks designed to facilitate interaction with knowledge base configurations, language models, and user interface state related to document parsing and tagging within an application. These hooks abstract data fetching, state management, and selection logic, primarily centered around knowledge base documents, their parsing methods, embedding models, and tag renaming functionality.

This modular approach promotes reusability and separation of concerns, allowing UI components to easily integrate complex logic related to knowledge bases, language learning models (LLMs), and modal state management without directly handling API calls or global state.

Detailed Explanation of Exports

Constants

• HiddenFields

  const HiddenFields = ['email', 'picture', 'audio'];
  

  An array of parser field values that should be excluded from display in the analysis method selection UI.

Functions and Hooks

useSelectChunkMethodList() : Array<{ value: string; label: string }>

Returns a filtered list of parser options excluding those specified in HiddenFields.

• Purpose:
  Provides a list of available chunk (parsing) methods for knowledge base documents, filtering out hidden or unsupported types.

• Implementation details:
  Utilizes useSelectParserList() (imported from user-setting-hooks) to fetch all parser options, then filters out those whose value matches any in HiddenFields.

• Usage example:

  const chunkMethods = useSelectChunkMethodList();
  // chunkMethods can be passed as options to a Select component
  

useSelectEmbeddingModelOptions() : Array<LlmOption>

Returns a list of language model options filtered by the embedding model type.

• Purpose:
  To provide embedding model options for use in embedding-related functionality, such as vectorizing documents.

• Implementation details:
  Calls useSelectLlmOptionsByModelType() to get all LLM options grouped by model type, then extracts only those under the Embedding type (from LlmModelType enum).

• Usage example:

  const embeddingModels = useSelectEmbeddingModelOptions();
  

useHasParsedDocument() : boolean

Determines whether the knowledge base currently has any parsed documents.

• Purpose:
  To quickly check if knowledge base content has been chunked/parsed (indicated by chunk_num > 0).

• Implementation details:
  Fetches knowledge base configuration data using useFetchKnowledgeBaseConfiguration() and checks if chunk_num is greater than zero.

• Usage example:

  const hasParsed = useHasParsedDocument();
  if (hasParsed) {
    // Show UI indicating parsed data is available
  }
  

useFetchKnowledgeConfigurationOnMount(form: UseFormReturn<z.infer<typeof formSchema>>) : KnowledgeDetails | undefined

Fetches knowledge base configuration on component mount and resets the passed form with fetched values.

• Parameters:

  • form: A React Hook Form controller object (UseFormReturn), typed with a Zod schema (formSchema).

• Returns:

  • The fetched knowledge base configuration data or undefined if not yet loaded.

• Purpose:
  To synchronize a form's default values with the latest knowledge base configuration when a component mounts or when the data updates.

• Implementation details:
  Uses useFetchKnowledgeBaseConfiguration() to get knowledge details, then uses React's useEffect to merge existing form default values with the fetched parser config, and resets the form with the combined data. It uses Lodash's pick to select specific fields relevant to the form.

• Usage example:

  const form = useForm({ defaultValues: initialValues, resolver: zodResolver(formSchema) });
  useFetchKnowledgeConfigurationOnMount(form);
  

useSelectKnowledgeDetailsLoading() : boolean

Returns a loading state boolean indicating if the knowledge detail fetch query is currently in progress.

• Purpose:
  To easily display loading indicators in the UI while knowledge base details are being fetched.

• Implementation details:
  Utilizes React Query's useIsFetching hook, querying with the key 'fetchKnowledgeDetail' and returning true if one or more queries are fetching.

• Usage example:

  const isLoading = useSelectKnowledgeDetailsLoading();
  

useRenameKnowledgeTag() : { initialName: string; tagRenameVisible: boolean; hideTagRenameModal: () => void; showTagRenameModal: (record: string) => void; }

Manages state and modal visibility for renaming a knowledge tag.

• Returned object properties:

  • initialName: The current tag name being renamed.

  • tagRenameVisible: Boolean indicating modal visibility.

  • hideTagRenameModal: Function to hide the rename modal.

  • showTagRenameModal: Function to show the rename modal and set the tag to rename.

• Purpose:
  To encapsulate all logic related to renaming a knowledge tag, including modal state and the tag name.

• Implementation details:
  Uses React's useState to track the tag name and a custom modal state hook useSetModalState to control visibility. The showTagRenameModal function sets the tag and triggers the modal to be visible.

• Usage example:

  const {
    initialName,
    tagRenameVisible,
    hideTagRenameModal,
    showTagRenameModal,
  } = useRenameKnowledgeTag();
  
  // To open modal for a tag
  showTagRenameModal('existing-tag-name');
  

Important Implementation Details and Algorithms

• The filtering of chunk methods excludes certain fields (email, picture, audio) which are presumably unsupported or irrelevant for display in the chunk method selector.

• Form synchronization in useFetchKnowledgeConfigurationOnMount smartly merges parser config defaults from both the form's current state and fetched data before resetting, ensuring no loss of user-modified data.

• Modal state management in useRenameKnowledgeTag decouples UI modal visibility from the tag state, enabling clean control flow through callbacks.

• React Query is leveraged for asynchronous data fetching and loading state management, providing optimized and cached data access patterns.

Interaction with Other Parts of the System

• Imports constants such as LlmModelType to differentiate between types of language models.

• Depends on several shared hooks:

  • useSelectParserList (user settings)

  • useSelectLlmOptionsByModelType (language model options)

  • useFetchKnowledgeBaseConfiguration (knowledge base config fetch)

  • useSetModalState (common modal visibility management)

• Integrates with React Hook Form (UseFormReturn) and Zod schemas (formSchema) for typed form control and validation.

• Uses React Query for fetching and caching API data related to knowledge base details.

• Utilizes Lodash's pick function for selective object field extraction.

The file thus acts as a middle layer between API data, state management, and UI components that consume these hooks to render dynamic and interactive interfaces around knowledge base documents, parsing options, and tagging.

Diagram: Hook Functions Flowchart

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

    subgraph Data Fetching
        E
        H
    end

    subgraph Model Options
        A
        C
    end

    subgraph UI State Management
        J
        K
    end

    B --> UI[UI Components]
    D --> UI
    F --> UI
    G --> UI
    I --> UI
    L --> UI

Summary

The hooks.ts file is a utility-focused module containing React hooks that streamline interaction with knowledge base configurations, parser methods, embedding models, and UI modal states for tag renaming. It abstracts complex asynchronous data fetching, form synchronization, filtering logic, and modal state management, enabling UI components to remain clean and declarative. Its reliance on shared hooks and libraries such as React Query, React Hook Form, and Zod ensures consistent and efficient integration with the larger application ecosystem.