Where Are the Layout Definitions for the Dify Chat React-App Located?

The layout definitions for the Dify Chat react-app are located in the packages/react-app/src/layout directory, which exports reusable React components such as MainLayout, ChatLayout, and WorkflowLayout that wrap page-specific content.

The lexmin0412/dify-chat repository organizes its user interface using a modular layout system. If you are customizing the Dify Chat react-app or adding new pages, you will need to locate and understand the layout definitions for the Dify Chat react-app stored in the dedicated layout directory.

Layout Directory Location and Structure

The primary layout components reside in packages/react-app/src/layout. This directory follows a barrel export pattern, allowing other modules to import layouts from a single entry point. Each file defines a specific layout wrapper used by the routing system and page components throughout the application.

Core Layout Components

MainLayout

The MainLayout component provides the foundational page structure, including the header, sidebar navigation, and footer. It serves as the primary wrapper for most authenticated pages.

Source file: packages/react-app/src/layout/main-layout.tsx

ChatLayout

Specifically designed for the chat interface, ChatLayout injects the conversation list, message input area, and related chat-specific UI elements. It wraps the core chat functionality displayed to users.

Source file: packages/react-app/src/layout/chat-layout.tsx

ChatLayoutWrapper

This component acts as a higher-order wrapper around ChatLayout, injecting additional context such as workflow data and state management required for complex chat interactions.

Source file: packages/react-app/src/layout/chat-layout-wrapper.tsx

WorkflowLayout

Used when displaying visual workflow diagrams, WorkflowLayout provides the canvas and controls necessary for rendering node chains and workflow graphs.

Source file: packages/react-app/src/layout/workflow-layout.tsx

CommonLayout

Contains shared layout fragments and utility components used across multiple pages, such as common sidebars or container wrappers.

Source file: packages/react-app/src/layout/common-layout.tsx

Importing and Using Layouts in Pages

The layouts are exported via a barrel file at packages/react-app/src/layout/index.tsx, enabling clean import statements throughout the application.

Basic Usage of MainLayout

import { MainLayout } from '@/layout';

export default function HomePage() {
  return (
    <MainLayout>
      <h1 className="text-2xl font-bold">Welcome to Dify Chat</h1>
      {/* page-specific content */}
    </MainLayout>
  );
}

Using ChatLayoutWrapper for Chat Pages

import { ChatLayoutWrapper } from '@/layout';

export default function ChatPage() {
  return (
    <ChatLayoutWrapper>
      {/* The actual chat UI components go here */}
    </ChatLayoutWrapper>
  );
}

Barrel Export Pattern

// src/layout/index.tsx
export { default as MainLayout } from './main-layout';
export { default as ChatLayout } from './chat-layout';
export { default as ChatLayoutWrapper } from './chat-layout-wrapper';
export { default as WorkflowLayout } from './workflow-layout';
export { default as CommonLayout } from './common-layout';

This pattern lets other modules import layouts concisely:

import { MainLayout, ChatLayout } from '@/layout';

Summary

• The layout definitions for the Dify Chat react-app are centralized in packages/react-app/src/layout.
• MainLayout provides the base structure (header, sidebar, footer) for most pages.
• ChatLayout and ChatLayoutWrapper handle chat-specific UI and workflow context.
• WorkflowLayout renders visual workflow diagrams and node chains.
• All layouts are exported through index.tsx using a barrel pattern for simplified imports.

Frequently Asked Questions

What is the main entry point for importing layouts in the Dify Chat react-app?

The main entry point is packages/react-app/src/layout/index.tsx, which re-exports all layout components using a barrel pattern. This allows developers to import any layout using a single import statement like import { MainLayout, ChatLayout } from '@/layout';.

Which layout component should I use for creating a new chat page?

For standard chat interfaces, use ChatLayout. If your page requires workflow context or additional state management, wrap it with ChatLayoutWrapper instead. Both components are defined in packages/react-app/src/layout/chat-layout.tsx and packages/react-app/src/layout/chat-layout-wrapper.tsx respectively.

How does MainLayout differ from CommonLayout?

MainLayout provides the complete page scaffolding including headers, sidebars, and footers, serving as the primary wrapper for most authenticated pages. CommonLayout contains smaller, reusable layout fragments and utility containers that are shared across multiple pages but do not constitute a full page structure on their own.

Where is the WorkflowLayout used in the Dify Chat application?

WorkflowLayout is utilized when rendering visual workflow diagrams and node chains within the application. It provides the specialized canvas and control elements necessary for displaying workflow graphs, as implemented in packages/react-app/src/layout/workflow-layout.tsx.

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