Implementation:Langgenius Dify App Context

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Application State, User Management
Last Updated	2026-02-12 07:00 GMT

Overview

The primary React context that provides user profile, workspace information, version data, and role-based access flags to the entire Dify console application.

Description

The AppContext is the foundational context provider for the Dify frontend console. It aggregates data from multiple API queries -- user profile, current workspace, and LangGenius version information -- and exposes them along with derived boolean flags for role-based access control. The context uses the use-context-selector library for efficient selective re-rendering.

The AppContextProvider fetches data through TanStack Query hooks (useUserProfile, useCurrentWorkspace, useLangGeniusVersion) and derives role booleans such as isCurrentWorkspaceManager, isCurrentWorkspaceOwner, isCurrentWorkspaceEditor, and isCurrentWorkspaceDatasetOperator using useMemo. It also provides mutation functions (mutateUserProfile, mutateCurrentWorkspace) that invalidate the corresponding TanStack Query caches, triggering refetches.

The provider integrates with external analytics services: it reports user properties to Amplitude for product analytics and sets Zendesk conversation fields (environment, version, email, workspace ID) for customer support context. It also conditionally renders a MaintenanceNotice banner based on the NEXT_PUBLIC_MAINTENANCE_NOTICE environment variable.

Usage

Use useAppContext() to access the full context value from any component within the provider tree. Alternatively, use the exported useSelector function for optimized selective subscriptions that avoid unnecessary re-renders. This context should wrap the authenticated portion of the console application and is typically consumed by components that need user identity, workspace role checks, or version information.

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/context/app-context.tsx
Lines: 1-219

Signature

export type AppContextValue = {
  userProfile: UserProfileResponse
  mutateUserProfile: VoidFunction
  currentWorkspace: ICurrentWorkspace
  isCurrentWorkspaceManager: boolean
  isCurrentWorkspaceOwner: boolean
  isCurrentWorkspaceEditor: boolean
  isCurrentWorkspaceDatasetOperator: boolean
  mutateCurrentWorkspace: VoidFunction
  langGeniusVersionInfo: LangGeniusVersionResponse
  useSelector: typeof useSelector
  isLoadingCurrentWorkspace: boolean
  isValidatingCurrentWorkspace: boolean
}

export function useSelector<T>(selector: (value: AppContextValue) => T): T

export const AppContextProvider: FC<AppContextProviderProps>

export const useAppContext: () => AppContextValue

Import

import { useAppContext, AppContextProvider, useSelector } from '@/context/app-context'

I/O Contract

Inputs

Name	Type	Required	Description
children	`ReactNode`	Yes	Child components that will have access to the app context

Outputs

Name	Type	Description
userProfile	`UserProfileResponse`	Current user profile with id, name, email, avatar, and password status
mutateUserProfile	`VoidFunction`	Invalidates the user profile query cache to trigger a refetch
currentWorkspace	`ICurrentWorkspace`	Current workspace data including id, name, plan, status, role, and trial credits
isCurrentWorkspaceManager	`boolean`	True if the user role is owner or admin
isCurrentWorkspaceOwner	`boolean`	True if the user role is owner
isCurrentWorkspaceEditor	`boolean`	True if the user role is owner, admin, or editor
isCurrentWorkspaceDatasetOperator	`boolean`	True if the user role is dataset_operator
mutateCurrentWorkspace	`VoidFunction`	Invalidates the current workspace query cache to trigger a refetch
langGeniusVersionInfo	`LangGeniusVersionResponse`	Version information including current_env, current_version, latest_version, and release notes
useSelector	`(selector) => T`	Selective context subscription function for optimized re-rendering
isLoadingCurrentWorkspace	`boolean`	True while the workspace data is being initially loaded
isValidatingCurrentWorkspace	`boolean`	True while the workspace data is being revalidated

Usage Examples

Accessing User Profile and Workspace Role

import { useAppContext } from '@/context/app-context'

function WorkspaceHeader() {
  const {
    userProfile,
    currentWorkspace,
    isCurrentWorkspaceManager,
  } = useAppContext()

  return (
    <div>
      <span>Welcome, {userProfile.name}</span>
      <span>Workspace: {currentWorkspace.name}</span>
      {isCurrentWorkspaceManager && <button>Manage Workspace</button>}
    </div>
  )
}

Using Selective Subscription to Avoid Re-renders

import { useSelector } from '@/context/app-context'

function VersionBadge() {
  const version = useSelector(s => s.langGeniusVersionInfo.current_version)

  return <span>v{version}</span>
}

Invalidating Workspace Data After an Update

import { useAppContext } from '@/context/app-context'

function WorkspaceSettings() {
  const { mutateCurrentWorkspace } = useAppContext()

  const handleSave = async () => {
    await saveWorkspaceSettings()
    mutateCurrentWorkspace() // triggers a refetch of workspace data
  }

  return <button onClick={handleSave}>Save Settings</button>
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment