Components structure in deerflow codebase - Part 1.1

Inspired by BulletProof React, I applied its codebase architecture concepts to the bytedance/deerflow.

This article focuses only on the components structure in bytedance/deerflow codebase.

Prerequisite

1. Components structure in Deerflow codebase — Part 1.1

Approach

The approach we take is simple:

1. Pick a route.

2. Locate this route in DeerFlow codebase.

3. Review how the components are imported and organized.

4. We repeat this process for 3–4 pages to establish a common pattern, see if there’s any exceptions.

In this part 1.1, we review the components structure in the DeerFlow’s demo workspace feature. When you visit https://deerflow.tech/ and open any case study, you will be taken to this route —  https://deerflow.tech/workspace/chats/4f3e55ee-f853-43db-bfb3-7d1a411f03cb

I got curious about how the components behind this feature are organized and I looked at it’s source code.

We will look at components structure in:

1. ChatsPage

2. WorkspacePage

ChatsPage

ChatsPage shows a list of chats.

In ChatsPage, I noticed the following components that make up this page.

import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  WorkspaceBody,
  WorkspaceContainer,
  WorkspaceHeader,
} from "@/components/workspace/workspace-container";

That’s it. Nothing complicated hereui folder contains the standards Shadcn/ui related components. workspace folder has workspace related components.

WorkspacePage

WorkspacePage is defined as shown below:

import fs from "fs";
import path from "path";

import { redirect } from "next/navigation";

import { env } from "@/env";

export default function WorkspacePage() {
  if (env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true") {
    const firstThread = fs
      .readdirSync(path.resolve(process.cwd(), "public/demo/threads"), {
        withFileTypes: true,
      })
      .find((thread) => thread.isDirectory() && !thread.name.startsWith("."));
    if (firstThread) {
      return redirect(`/workspace/chats/${firstThread.name}`);
    }
  }
  return redirect("/workspace/chats/new");
}

There is no specific page to list workspaces but the logic above tells me you are redirected to the first thread or /new route depending on the flag, NEXT_PUBLIC_STATIC_WEBSITE_ONLY 

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands? 

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced. 

Get started for free — thinkthroo.com

References:

1. deerflow.tech/…/4f3e55ee-f853-43db-bfb3-7d1a411f03cb

2. deerflow.tech/

3. bytedance/deer-flow/…/workspace/chats/page.tsx

4. bytedance/deer-flow/…/workspace/page.tsx