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

> Find Dify Chat React-app layout definitions in the packages/react-app/src/layout directory. Discover reusable components like MainLayout, ChatLayout, and WorkflowLayout.

- Repository: [lexmin0412/dify-chat](https://github.com/lexmin0412/dify-chat)
- Tags: how-to-guide
- Published: 2026-03-06

---

**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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/layout/index.tsx), enabling clean import statements throughout the application.

### Basic Usage of MainLayout

```tsx
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

```tsx
import { ChatLayoutWrapper } from '@/layout';

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

```

### Barrel Export Pattern

```tsx
// 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:

```tsx
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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/layout/chat-layout.tsx) and [`packages/react-app/src/layout/chat-layout-wrapper.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/layout/workflow-layout.tsx).