Components structure in deerflow codebase - Part 1.1

Source: Dev.to

Components structure in Deerflow codebase — Part 1.1

The approach is simple:

1. Pick a route.
2. Locate this route in the DeerFlow codebase.
3. Review how the components are imported and organized.

Repeating this process for a few pages helps establish a common pattern and spot any exceptions.

Demo workspace feature

When you visit https://deerflow.tech/ and open any case study, you are taken to a route like:

https://deerflow.tech/workspace/chats/4f3e55ee-f853-43db-bfb3-7d1a411f03cb

Below is the component structure for the two main pages involved.

ChatsPage

ChatsPage shows a list of chats. The components used on this page are:

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

• The ui folder contains standard shadcn/ui‑related components.
• The workspace folder holds workspace‑specific components.

WorkspacePage

WorkspacePage handles redirection based on a configuration flag:

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 dedicated page that lists workspaces; instead, the logic redirects the user to either the first thread (when NEXT_PUBLIC_STATIC_WEBSITE_ONLY is "true") or to the /new route.

References

• Demo workspace route: https://deerflow.tech/workspace/chats/4f3e55ee-f853-43db-bfb3-7d1a411f03cb
• Source files:
  • bytedance/deer-flow/.../workspace/chats/page.tsx
  • bytedance/deer-flow/.../workspace/page.tsx