feat: change the default path to /chat

This commit is contained in:
Li Xin
2025-04-26 20:28:30 +08:00
parent f218f29ec8
commit 6e760a277c
4 changed files with 103 additions and 82 deletions

View File

@@ -1,73 +0,0 @@
// 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 App() {
const { isReplay } = useReplay();
const openResearchId = useStore((state) => state.openResearchId);
const doubleColumnMode = useMemo(
() => openResearchId !== null,
[openResearchId],
);
return (
<div className="flex h-full w-full justify-center">
<header className="fixed top-0 left-0 flex h-12 w-full w-screen items-center justify-between px-4">
<Logo />
<div className="flex items-center">
<Tooltip title="Visit DeerFlow on GitHub">
<Button variant="ghost" size="icon" asChild>
<Link
href="https://github.com/bytedance/deer-flow"
target="_blank"
>
<GithubOutlined />
</Link>
</Button>
</Tooltip>
<ThemeToggle />
{!isReplay && <SettingsDialog />}
</div>
</header>
<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>
</div>
);
}

54
web/src/app/chat/main.tsx Normal file
View File

@@ -0,0 +1,54 @@
// 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>
);
}

47
web/src/app/chat/page.tsx Normal file
View File

@@ -0,0 +1,47 @@
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT
"use client";
import { GithubOutlined } from "@ant-design/icons";
import dynamic from "next/dynamic";
import Link from "next/link";
import { Suspense } from "react";
import { Button } from "~/components/ui/button";
import { useReplay } from "~/core/replay";
import { Logo } from "../_components/logo";
import { ThemeToggle } from "../_components/theme-toggle";
import { Tooltip } from "../_components/tooltip";
import { SettingsDialog } from "../_settings/dialogs/settings-dialog";
const Main = dynamic(() => import("./main"), { ssr: false });
export default function HomePage() {
const { isReplay } = useReplay();
return (
<div className="flex h-full w-full justify-center">
<header className="fixed top-0 left-0 flex h-12 w-full w-screen items-center justify-between px-4">
<Logo />
<div className="flex items-center">
<ThemeToggle />
{!isReplay && <SettingsDialog />}
<Tooltip title="Visit DeerFlow on GitHub">
<Button variant="ghost" size="icon" asChild>
<Link
href="https://github.com/bytedance/deer-flow"
target="_blank"
>
<GithubOutlined />
</Link>
</Button>
</Tooltip>
</div>
</header>
<Suspense fallback={<div>Loading DeerFlow...</div>}>
<Main />
</Suspense>
</div>
);
}

View File

@@ -3,15 +3,8 @@
"use client";
import dynamic from "next/dynamic";
import { Suspense } from "react";
const App = dynamic(() => import("./app"), { ssr: false });
import { redirect } from "next/navigation";
export default function HomePage() {
return (
<Suspense fallback={<div>Loading DeerFlow...</div>}>
<App />
</Suspense>
);
redirect("/chat");
}