Key Features of the Dify Chat React App: Architecture and Capabilities

The Dify Chat React app is a modular, theme-aware, multi-app chat platform built on the Dify API, featuring scoped API instances, advanced markdown rendering with Mermaid and ECharts support, and responsive dark/light theming.

The Dify Chat React application is a production-ready chat interface developed by lexmin0412 that abstracts a single Dify back-end into multiple manageable apps. Written in TypeScript and React, it provides a comprehensive solution for deploying AI chat interfaces with support for complex markdown content, internationalization, and responsive design across mobile and desktop devices.

Multi-App Architecture and Routing

The application employs a layered architecture that separates routing, layout, and state management into distinct modules.

Client-Side Routing and Layout

In packages/react-app/src/App.tsx, the root component establishes the browser router with routes for /chat, /apps, and /auth. It wraps the entire application with Ant Design's ConfigProvider, injecting locale settings (either zhCN or enUS) and the dark-mode algorithm (antdTheme.darkAlgorithm) based on the current theme context.

The ChatLayoutWrapper component (located in packages/react-app/src/layout/chat-layout-wrapper.tsx) serves as the primary layout container for chat routes. It fetches the available app list via appService.getApps() and initializes the selected application context.

App Context and State Management

Global state management combines React Context with a custom store pattern. The AppContextProvider (imported from packages/core/src/context/app-context.tsx) manages the selected app's configuration, parameters, and loading states. Meanwhile, useGlobalStore maintains the Dify API instance, current user, and theme preferences.

When a user selects an app, the wrapper initializes a scoped API instance using createDifyApiInstance and stores it in the global state for consumption by child components.

Theme-Aware Responsive Design

The Dify Chat React app implements a comprehensive theming system that adapts to user preferences and device capabilities.

Dark and Light Mode Support

Theme management is handled by @dify-chat/theme through the useThemeContext hook defined in packages/theme/src/hooks/index.tsx. The App.tsx component detects the current theme and applies the appropriate Ant Design algorithm (antdTheme.darkAlgorithm or antdTheme.defaultAlgorithm), ensuring consistent styling across all UI components.

Mobile Responsiveness

Mobile detection occurs via the useIsMobile hook, which toggles UI behavior such as auto-redirecting to the app list on small screens. The initResponsiveConfig function from packages/helpers/src/responsive.ts sets CSS variables for mobile breakpoints during app initialization, enabling responsive layout calculations throughout the component tree.

Scoped API Integration

Each application instance receives its own dedicated API client, ensuring proper isolation of credentials and user sessions.

Creating Dify API Instances

The createDifyApiInstance function in packages/react-app/src/utils/dify-api.ts constructs a scoped Dify API client per app. It accepts configuration options including the user ID, API key, endpoint, and an optional apiBase parameter:

import { createDifyApiInstance, DifyApi } from '@/utils/dify-api'

async function initApp(appId: string, userId: string) {
  const app = await appService.getAppByID(appId)
  const options = {
    user: userId,
    ...app.requestConfig,
    apiBase: `/${appId}`,
  }
  const difyApi: DifyApi = createDifyApiInstance(options) as DifyApi
  setGlobalStore(prev => ({ ...prev, difyApi }))
}

The resulting instance is stored in the global store and consumed by useRequest hooks throughout the application, ensuring all API calls include the correct authentication headers and user context.

Advanced Markdown Rendering Engine

The MarkdownRenderer component in packages/react-app/src/components/markdown-renderer/index.tsx provides sophisticated content parsing beyond standard markdown.

Supported Content Types

The renderer processes multiple specialized formats:

• GitHub Flavored Markdown (GFM) for tables and task lists
• Mathematical expressions via KaTeX preprocessing (preprocessLaTeX)
• Diagrams through Mermaid and ECharts integration
• Interactive elements including custom "think" blocks (preprocessThinkTag), forms, buttons, and video embeddings
• Syntax highlighting with copy-to-clipboard functionality for code blocks

Custom Component Mapping

The component replaces standard HTML tags with specialized React components:

• code → CodeBlock (with SVG/mermaid/ECharts toggles)
• img → ImageBlock (optimized inline image handling)
• details → ThinkBlock (collapsible reasoning sections)
• form → MarkdownForm (interactive inputs)
• button → ButtonBlock (actionable elements)

import { MarkdownRenderer } from '@/components/markdown-renderer'

function ChatMessage({ content }: { content: string }) {
  return (
    <div className="chat-message">
      <MarkdownRenderer
        markdownText={content}
        onSubmit={value => console.log('Form submitted:', value)}
      />
    </div>
  )
}

Developer Experience and Debugging

The application includes built-in tools for development and authentication management.

Debug Mode

When the URL contains ?debug=1, the DebugMode component (located in packages/react-app/src/components/debug-mode/index.tsx) becomes visible. This overlay exposes raw API payloads and request logs, enabling developers to inspect the communication between the React frontend and the Dify backend without external tools.

Authentication Guard

The useAuth hook in packages/react-app/src/hooks/use-auth.ts manages user identification and session validation. Unauthenticated users are automatically redirected to /auth, while the hook provides the current user ID to ChatLayoutWrapper for API initialization.

Application Switching

The MainLayout component renders an app selector dropdown that allows users to switch between configured Dify applications:

<Dropdown
  menu={{
    selectedKeys: [currentAppId],
    items: appList.map(item => ({
      key: item.id,
      label: <span>{item.info.name}</span>,
      icon: <LucideIcon name="bot" size={18} />,
      onClick: () => {
        history.push(`/app/${item.id}`)
        setCurrentAppId(item.id)
      },
    })),
  }}
>
  <div className="flex cursor-pointer items-center">
    <span className="truncate">{currentApp?.config?.info?.name}</span>
    <DownCircleTwoTone className="ml-1" />
  </div>
</Dropdown>

Internationalization Support

All UI strings are managed through react-i18next, with locale initialization occurring in packages/react-app/src/libs/i18n.ts. The application loads translation files dynamically and applies the detected language to both the Ant Design components and custom interface elements, supporting seamless switching between Chinese and English interfaces.

Summary

The Dify Chat React app provides a comprehensive framework for deploying AI chat interfaces with the following capabilities:

• Multi-app management through scoped API instances and context providers
• Responsive theming with automatic dark/light mode detection and mobile breakpoint handling
• Rich content rendering supporting mathematical notation, diagrams, and interactive forms
• Developer tooling including debug overlays and structured logging
• Robust authentication with route guards and user-specific API scoping
• Full internationalization ready for global deployment

Frequently Asked Questions

How does the Dify Chat React app handle multiple applications?

The application manages multiple Dify apps through the AppContextProvider and ChatLayoutWrapper components. When initialized, ChatLayoutWrapper fetches all available apps via appService.getApps(), and createDifyApiInstance generates a scoped API client for the selected app using its specific requestConfig and user ID. This allows a single React deployment to serve unlimited Dify back-end applications.

What markdown features are supported by the MarkdownRenderer?

The MarkdownRenderer component supports GitHub Flavored Markdown, KaTeX mathematical expressions, Mermaid diagrams, ECharts visualizations, SVG rendering, and custom interactive blocks including collapsible "think" sections, forms, and buttons. It preprocesses content through preprocessLaTeX and preprocessThinkTag functions before passing it to react-markdown with custom component mappings.

How is dark mode implemented in the Dify Chat React app?

Dark mode is implemented via the useThemeContext hook from @dify-chat/theme and applied through Ant Design's ConfigProvider. The App.tsx component detects the current theme and conditionally applies antdTheme.darkAlgorithm to the theme configuration, ensuring all Ant Design components and custom CSS variables update simultaneously when the user toggles between light and dark modes.

How do developers debug API requests in the Dify Chat React app?

Developers can activate debug mode by appending ?debug=1 to the application URL. This renders the DebugMode component, which displays raw API payloads and request logs in an overlay interface. This feature is defined in packages/react-app/src/components/debug-mode/index.tsx and provides visibility into the data exchanged between the React frontend and the Dify API without requiring browser network inspection tools.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}