deer-flow/web/src/app/chat/main.tsx

// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT

"use client";

import { GithubOutlined } from "@ant-design/icons";
import Link from "next/link";
import { useMemo } from "react";

import { Button } from "~/components/ui/button";
import { useReplay } from "~/core/replay";
import { useStore } from "~/core/store";
import { cn } from "~/lib/utils";

import { Logo } from "../_components/logo";
import { MessagesBlock } from "../_components/messages-block";
import { ResearchBlock } from "../_components/research-block";
import { ThemeToggle } from "../_components/theme-toggle";
import { Tooltip } from "../_components/tooltip";
import { SettingsDialog } from "../_settings/dialogs/settings-dialog";

export default function Main() {
  const { isReplay } = useReplay();
  const openResearchId = useStore((state) => state.openResearchId);
  const doubleColumnMode = useMemo(
    () => openResearchId !== null,
    [openResearchId],
  );
  return (
    <div
      className={cn(
        "flex h-full w-full justify-center px-4 pt-12 pb-4",
        doubleColumnMode && "gap-8",
      )}
    >
      <MessagesBlock
        className={cn(
          "shrink-0 transition-all duration-300 ease-out",
          !doubleColumnMode &&
            `w-[768px] translate-x-[min(calc((100vw-538px)*0.75/2),960px/2)]`,
          doubleColumnMode && `w-[538px]`,
        )}
      />
      <ResearchBlock
        className={cn(
          "w-[min(calc((100vw-538px)*0.75),960px)] pb-4 transition-all duration-300 ease-out",
          !doubleColumnMode && "scale-0",
          doubleColumnMode && "",
        )}
        researchId={openResearchId}
      />
    </div>
  );
}