Jump to content

Connect SuperML | Leeroopedia MCP: Equip your AI agents with best practices, code verification, and debugging knowledge. Powered by Leeroo — building Organizational Superintelligence. Contact us at founders@leeroo.com.

Implementation:Langgenius Dify UseKnowledge

From Leeroopedia


Knowledge Sources
Domains RAG Indexing Information Retrieval React Hooks
Last Updated 2026-02-08 00:00 GMT

Overview

Concrete tool for formatting indexing technique and method labels for display provided by the Dify frontend hook layer.

Description

useKnowledge is a custom React hook that provides three memoized formatting functions for converting internal indexing technique and method enum values into localized, human-readable display labels. It bridges the gap between the backend's machine-readable identifiers (e.g., 'high_quality', 'semantic_search') and the user-facing strings shown in the knowledge base UI.

The hook relies on react-i18next for translation lookup, using the 'dataset' namespace to resolve locale-specific strings. It includes special-case logic for the economy indexing technique, which always displays its method as "Inverted Index" regardless of the stored method value.

This hook is used across the knowledge base UI wherever indexing configuration needs to be displayed -- dataset list views, detail headers, configuration panels, and settings dialogs.

Usage

Import and call useKnowledge when:

  • Rendering a dataset card or list item that shows the indexing technique and method.
  • Displaying the current indexing configuration in a dataset's settings panel.
  • Building a summary label like "High Quality . Semantic Search" for the dataset header.

Code Reference

Source Location

  • Repository: Dify
  • File: web/hooks/use-knowledge.ts (lines 1--36)

Signature

import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import type { IndexingMethod, IndexingTechnique } from '@/models/datasets'

export const useKnowledge = () => {
  const { t } = useTranslation()

  const formatIndexingTechnique = useCallback(
    (indexingTechnique: IndexingTechnique) => {
      return t(`indexingTechnique.${indexingTechnique}`, { ns: 'dataset' }) as string
    },
    [t],
  )

  const formatIndexingMethod = useCallback(
    (indexingMethod: IndexingMethod, isEco?: boolean) => {
      if (isEco)
        return t('indexingMethod.invertedIndex', { ns: 'dataset' })
      return t(`indexingMethod.${indexingMethod}`, { ns: 'dataset' }) as string
    },
    [t],
  )

  const formatIndexingTechniqueAndMethod = useCallback(
    (indexingTechnique: IndexingTechnique, indexingMethod: IndexingMethod) => {
      let result = formatIndexingTechnique(indexingTechnique)
      if (indexingMethod)
        result += ` · ${formatIndexingMethod(indexingMethod, indexingTechnique === 'economy')}`
      return result
    },
    [formatIndexingTechnique, formatIndexingMethod],
  )

  return {
    formatIndexingTechnique,
    formatIndexingMethod,
    formatIndexingTechniqueAndMethod,
  }
}

Import

import { useKnowledge } from '@/hooks/use-knowledge'

Dependencies

Dependency Purpose
react (useCallback) Memoizes the formatting functions so they maintain referential stability across re-renders
react-i18next (useTranslation) Provides the t function for looking up localized strings from the 'dataset' i18n namespace
@/models/datasets (IndexingTechnique, IndexingMethod) Type definitions for the enum values accepted by the formatting functions

I/O Contract

Inputs

Name Type Required Description
indexingTechnique 'economy' Yes (when calling formatIndexingTechnique or formatIndexingTechniqueAndMethod) The indexing technique enum value stored on the dataset
indexingMethod 'full_text_search' | 'hybrid_search' Yes (when calling formatIndexingMethod or formatIndexingTechniqueAndMethod) The search method enum value stored on the dataset
isEco boolean No (optional parameter of formatIndexingMethod) When true, forces the method label to "Inverted Index" regardless of the indexingMethod value

Outputs

Name Type Description
formatIndexingTechnique (indexingTechnique: IndexingTechnique) => string Returns the localized label for an indexing technique (e.g., "High Quality", "Economy")
formatIndexingMethod (indexingMethod: IndexingMethod, isEco?: boolean) => string Returns the localized label for a search method (e.g., "Semantic Search", "Inverted Index")
formatIndexingTechniqueAndMethod (indexingTechnique: IndexingTechnique, indexingMethod: IndexingMethod) => string Returns a combined label in the format "Technique . Method" (e.g., "High Quality . Semantic Search")

Usage Examples

Basic Formatting

import { useKnowledge } from '@/hooks/use-knowledge'

const DatasetHeader = ({ dataset }: { dataset: DataSet }) => {
  const { formatIndexingTechniqueAndMethod } = useKnowledge()

  const label = formatIndexingTechniqueAndMethod(
    dataset.indexing_technique,
    dataset.indexing_method,
  )
  // e.g., "High Quality · Semantic Search"

  return <span className="text-sm text-gray-500">{label}</span>
}

Individual Formatting Functions

import { useKnowledge } from '@/hooks/use-knowledge'

const IndexingBadge = ({ technique, method }: {
  technique: IndexingTechnique
  method: IndexingMethod
}) => {
  const { formatIndexingTechnique, formatIndexingMethod } = useKnowledge()

  return (
    <div className="flex gap-2">
      <Badge variant="primary">
        {formatIndexingTechnique(technique)}
      </Badge>
      <Badge variant="secondary">
        {formatIndexingMethod(method, technique === 'economy')}
      </Badge>
    </div>
  )
}

Economy Mode Handling

import { useKnowledge } from '@/hooks/use-knowledge'

const { formatIndexingMethod } = useKnowledge()

// For high-quality datasets, method is displayed as-is
formatIndexingMethod('semantic_search', false)
// => "Semantic Search"

// For economy datasets, method is always "Inverted Index"
formatIndexingMethod('semantic_search', true)
// => "Inverted Index"

// The combined formatter handles this automatically
const { formatIndexingTechniqueAndMethod } = useKnowledge()
formatIndexingTechniqueAndMethod('economy', 'semantic_search')
// => "Economy · Inverted Index"

Related Pages

Implements Principle

Page Connections

Double-click a node to navigate. Hold to expand connections.
Principle
Implementation
Heuristic
Environment