Implementation:Langgenius Dify UseKnowledge
| 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"