Implementation:Langgenius Dify IDebugConfiguration Features

Knowledge Sources	Dify
Domains	Feature Toggle Patterns React Context
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for managing feature toggle state in the application debug and configuration interface provided by the Dify platform.

Description

The IDebugConfiguration type interface and its associated DebugConfigurationContext define the complete set of feature toggles available in the Dify application configuration panel. Each feature toggle follows a consistent pattern: a typed configuration object with an enabled boolean and feature-specific parameters, paired with a setter function for state updates.

The context is created using use-context-selector for optimized re-rendering, ensuring that components only re-render when the specific feature configuration they consume changes.

Feature toggle properties in the context:

• moreLikeThisConfig -- { enabled: boolean }
• suggestedQuestionsAfterAnswerConfig -- { enabled: boolean }
• speechToTextConfig -- { enabled: boolean }
• textToSpeechConfig -- { enabled: boolean, voice: string, language: string }
• citationConfig -- { enabled: boolean }
• moderationConfig -- { enabled: boolean, type?: string, config?: Record<string, any> }
• annotationConfig -- { id: string, enabled: boolean, score_threshold: number, embedding_model: { embedding_model_name: string, embedding_provider_name: string } }

All features default to enabled: false in the context's initial value.

Usage

Use useDebugConfigurationContext when:

• Building or modifying feature toggle UI components in the configuration panel
• Reading current feature state to conditionally render feature-specific UI elements
• Updating feature state in response to user interactions (toggle switches, configuration forms)

Code Reference

Source Location

• Repository: Dify
• File: web/context/debug-configuration.ts (Lines 65-108 for feature properties, Lines 111-277 for context defaults)

Signature

type IDebugConfiguration = {
  // ... other properties ...

  moreLikeThisConfig: MoreLikeThisConfig
  setMoreLikeThisConfig: (moreLikeThisConfig: MoreLikeThisConfig) => void

  suggestedQuestionsAfterAnswerConfig: SuggestedQuestionsAfterAnswerConfig
  setSuggestedQuestionsAfterAnswerConfig: (config: SuggestedQuestionsAfterAnswerConfig) => void

  speechToTextConfig: SpeechToTextConfig
  setSpeechToTextConfig: (speechToTextConfig: SpeechToTextConfig) => void

  textToSpeechConfig: TextToSpeechConfig
  setTextToSpeechConfig: (textToSpeechConfig: TextToSpeechConfig) => void

  citationConfig: CitationConfig
  setCitationConfig: (citationConfig: CitationConfig) => void

  annotationConfig: AnnotationReplyConfig
  setAnnotationConfig: (annotationConfig: AnnotationReplyConfig) => void

  moderationConfig: ModerationConfig
  setModerationConfig: (moderationConfig: ModerationConfig) => void
}

const DebugConfigurationContext = createContext<IDebugConfiguration>({
  // ... defaults with all features disabled ...
})

export const useDebugConfigurationContext = () => useContext(DebugConfigurationContext)

Import

import { useDebugConfigurationContext } from '@/context/debug-configuration'

I/O Contract

Inputs

Name	Type	Required	Description
moreLikeThisConfig	MoreLikeThisConfig	No	{ enabled: boolean } -- Toggle for alternative response generation
suggestedQuestionsAfterAnswerConfig	SuggestedQuestionsAfterAnswerConfig	No	{ enabled: boolean } -- Toggle for follow-up question suggestions
speechToTextConfig	SpeechToTextConfig	No	{ enabled: boolean } -- Toggle for voice input
textToSpeechConfig	TextToSpeechConfig	No	{ enabled: boolean, voice: string, language: string } -- Voice output configuration
citationConfig	CitationConfig	No	{ enabled: boolean } -- Toggle for source citations
moderationConfig	ModerationConfig	No	{ enabled: boolean, type?: string, config?: object } -- Content moderation settings
annotationConfig	AnnotationReplyConfig	No	{ id: string, enabled: boolean, score_threshold: number, embedding_model: object } -- Annotation-based reply settings

Outputs

Name	Type	Description
Context value	IDebugConfiguration	The full debug configuration state including all feature toggles and their setter functions

Usage Examples

import { useDebugConfigurationContext } from '@/context/debug-configuration'

function FeaturePanel() {
  const {
    speechToTextConfig,
    setSpeechToTextConfig,
    textToSpeechConfig,
    setTextToSpeechConfig,
    citationConfig,
    setCitationConfig,
  } = useDebugConfigurationContext()

  // Toggle speech-to-text
  const handleToggleSTT = () => {
    setSpeechToTextConfig({
      enabled: !speechToTextConfig.enabled,
    })
  }

  // Configure text-to-speech with voice selection
  const handleConfigureTTS = (voice: string, language: string) => {
    setTextToSpeechConfig({
      enabled: true,
      voice,
      language,
    })
  }

  // Enable citations
  const handleEnableCitations = () => {
    setCitationConfig({ enabled: true })
  }

  return (
    // ... feature toggle UI ...
  )
}

Related Pages

Implements Principle

• Principle:Langgenius_Dify_Feature_Configuration