Implementation:Langgenius Dify UseMetadata
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Datasets, Metadata, Internationalization |
| Last Updated | 2026-02-08 00:00 GMT |
Overview
Provides React hooks that return internationalized metadata field definitions, language lists, and category options for dataset documents in the Dify frontend.
Description
web/hooks/use-metadata.ts defines a set of custom React hooks for the Dify dataset documents feature. The primary hook, useMetadataMap(), returns a comprehensive mapping from document types (book, web_page, paper, social_media_post, personal_document, business_document, im_chat_log, wikipedia_entry, synced_from_notion, synced_from_github, originInfo, technicalParameters) to their metadata field definitions. Each entry includes a display text, icon, editability flag, and a sub-fields map that specifies per-field labels, input types (input, select, textarea), and optional custom render functions.
Additional hooks include:
useLanguages()- Returns a map of 26 language codes to their localized display namesuseBookCategories()- Returns 20 book category options (fiction, biography, history, etc.)usePersonalDocCategories()- Returns 14 personal document type optionsuseBusinessDocCategories()- Returns 16 business document type options
All hooks use react-i18next for translations from the datasetDocuments namespace.
Usage
Use these hooks in components that display or edit dataset document metadata:
import { useMetadataMap, useLanguages, useBookCategories } from '@/hooks/use-metadata'
Code Reference
Source Location
- Repository: Langgenius_Dify
- File: web/hooks/use-metadata.ts
- Lines: 1-406
Signature
export type inputType = 'input' | 'select' | 'textarea'
export type metadataType = DocType | 'originInfo' | 'technicalParameters'
type MetadataMap = Record<metadataType, {
text: string
allowEdit?: boolean
icon?: React.ReactNode
iconName?: string
subFieldsMap: Record<string, {
label: string
inputType?: inputType
field?: string
render?: (value: any, total?: number) => React.ReactNode | string
}>
}>
export const useMetadataMap = (): MetadataMap
export const useLanguages = (): Record<string, string>
export const useBookCategories = (): Record<string, string>
export const usePersonalDocCategories = (): Record<string, string>
export const useBusinessDocCategories = (): Record<string, string>
Import
import { useMetadataMap, useLanguages, useBookCategories } from '@/hooks/use-metadata'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none) | - | - | These hooks take no parameters; they use the i18n context and timestamp formatting from surrounding providers |
Outputs
| Name | Type | Description |
|---|---|---|
| MetadataMap | Record<metadataType, {...}> | Maps each document type to its field definitions with labels, input types, icons, and render functions |
| Languages | Record<string, string> | Maps language codes (zh, en, es, fr, etc.) to localized display names |
| BookCategories | Record<string, string> | Maps book category keys to localized category names |
| PersonalDocCategories | Record<string, string> | Maps personal document type keys to localized names |
| BusinessDocCategories | Record<string, string> | Maps business document type keys to localized names |
Usage Examples
import { useMetadataMap, useLanguages } from '@/hooks/use-metadata'
function DocumentMetadataEditor({ docType, metadata }) {
const metadataMap = useMetadataMap()
const languages = useLanguages()
const docMeta = metadataMap[docType]
return (
<div>
<h3>{docMeta.text}</h3>
{Object.entries(docMeta.subFieldsMap).map(([key, field]) => (
<div key={key}>
<label>{field.label}</label>
{field.inputType === 'select' && key === 'language'
? <select>{Object.entries(languages).map(([code, name]) =>
<option key={code} value={code}>{name}</option>
)}</select>
: <input defaultValue={metadata[key]} />
}
</div>
))}
</div>
)
}