Implementation:Langgenius Dify Debug Configuration Context

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Context, App Configuration, Debug
Last Updated	2026-02-08 00:00 GMT

Overview

A React context that holds the complete debug and configuration state for the Dify application builder, including prompt settings, model configuration, dataset selection, feature toggles, and all associated setter functions.

Description

DebugConfigurationContext is a large context built with use-context-selector that centralizes all the mutable state needed when configuring or debugging a Dify application in the console's app builder interface. It covers:

• App identity and mode: appId, mode (chat, completion, agent, etc.), modelModeType (chat vs. completion), and boolean flags isAgent, isFunctionCall, isOpenAI.
• Prompt configuration: promptMode (simple or advanced), chatPromptConfig, completionPromptConfig, currentAdvancedPrompt, prevPromptConfig, with setters for each. Tracks canReturnToSimpleMode and hasSetBlockStatus (context/history/query block insertion).
• Feature toggles: Each has an enabled boolean and a setter -- moreLikeThisConfig, suggestedQuestionsAfterAnswerConfig, speechToTextConfig, textToSpeechConfig, citationConfig, annotationConfig, moderationConfig.
• Model and completion parameters: modelConfig containing the full model configuration (provider, model_id, mode, system_parameters, agent config), completionParams (temperature, top_p, max_tokens, penalties).
• Dataset and retrieval: dataSets array, datasetConfigs (retrieval model, reranking, top_k, score threshold), datasetConfigsRef for imperative access.
• Media configuration: visionConfig (enabled, number_limits, detail resolution, transfer methods), plus boolean flags isShowVisionConfig, isAllowVideoUpload, isShowDocumentConfig, isShowAudioConfig.
• Conversation state: conversationId, introduction, suggestedQuestions, query, inputs, controlClearChatMessage.
• External tools: externalDataToolsConfig, collectionList.

All default values use noop from es-toolkit for setter functions and sensible initial states from app-level config constants.

Usage

This context is provided by a parent component in the app builder/debug page. Consumer components use useDebugConfigurationContext() to access any part of the debug configuration state. It is designed for the studio/orchestration interface where users design their LLM application prompts, model parameters, and feature settings.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/context/debug-configuration.ts
• Lines: 1-278

Signature

type IDebugConfiguration = {
  readonly?: boolean
  appId: string
  isAPIKeySet: boolean
  isTrailFinished: boolean
  mode: AppModeEnum
  modelModeType: ModelModeType
  promptMode: PromptMode
  setPromptMode: (promptMode: PromptMode) => void
  isAdvancedMode: boolean
  isAgent: boolean
  isFunctionCall: boolean
  isOpenAI: boolean
  collectionList: Collection[]
  // ... 50+ additional fields and setters
  modelConfig: ModelConfig
  setModelConfig: (modelConfig: ModelConfig) => void
  dataSets: DataSet[]
  setDataSets: (dataSet: DataSet[]) => void
  datasetConfigs: DatasetConfigs
  setDatasetConfigs: (config: DatasetConfigs) => void
  visionConfig: VisionSettings
  setVisionConfig: (visionConfig: VisionSettings, noNotice?: boolean) => void
}

export const useDebugConfigurationContext: () => IDebugConfiguration

export default DebugConfigurationContext

Import

import { useDebugConfigurationContext } from '@/context/debug-configuration'
// or to provide the context:
import DebugConfigurationContext from '@/context/debug-configuration'

I/O Contract

Inputs

Name	Type	Required	Description
appId	string	Yes	The ID of the application being debugged
mode	AppModeEnum	Yes	Application mode (CHAT, COMPLETION, AGENT, WORKFLOW, etc.)
modelModeType	ModelModeType	Yes	Whether model runs in chat or completion mode
promptMode	PromptMode	Yes	simple or advanced prompt editing mode
modelConfig	ModelConfig	Yes	Full model configuration including provider, model_id, prompts, system parameters
completionParams	FormValue	Yes	Model inference parameters (temperature, top_p, max_tokens, penalties)
dataSets	DataSet[]	Yes	Selected knowledge base datasets for RAG retrieval
datasetConfigs	DatasetConfigs	Yes	Dataset retrieval and reranking settings
visionConfig	VisionSettings	Yes	Vision/image upload configuration

Outputs

Name	Type	Description
All input fields	Various	All configuration state is readable from the context
Setter functions	(value) => void	Every mutable field has a corresponding setter (e.g., setModelConfig, setPromptMode)
isAdvancedMode	boolean	Derived flag indicating advanced prompt mode is active
isCurrentWorkspaceManager	boolean	Role-derived boolean flags
hasSetBlockStatus	BlockStatus	Tracks which template blocks (context, history, query) have been inserted

Usage Examples

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

function ModelSelector() {
  const {
    modelConfig,
    setModelConfig,
    completionParams,
    setCompletionParams,
    isAgent,
  } = useDebugConfigurationContext()

  const handleModelChange = (newModel: ModelConfig) => {
    setModelConfig(newModel)
  }

  const handleTemperatureChange = (temp: number) => {
    setCompletionParams({ ...completionParams, temperature: temp })
  }

  return (
    <div>
      <span>Current Model: {modelConfig.model_id}</span>
      <span>Provider: {modelConfig.provider}</span>
      {isAgent && <span>Agent Mode</span>}
      <input
        type="range"
        min={0}
        max={2}
        step={0.1}
        value={completionParams.temperature as number}
        onChange={e => handleTemperatureChange(Number(e.target.value))}
      />
    </div>
  )
}

// Using as a provider
function AppBuilder({ config }: { config: IDebugConfiguration }) {
  return (
    <DebugConfigurationContext.Provider value={config}>
      <ModelSelector />
      <PromptEditor />
      <DatasetPanel />
    </DebugConfigurationContext.Provider>
  )
}

Related Pages

• Langgenius_Dify_App_Context - Parent application context providing user and workspace info
• Langgenius_Dify_Provider_Context - Model provider context for available models and API key status
• Langgenius_Dify_Feature_Types - Defines DatasetAttr and related feature type definitions