50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { useTheme } from "next-themes";
|
|
import { useMemo } from "react";
|
|
|
|
import { FlickeringGrid } from "@/components/ui/flickering-grid";
|
|
import { ArtifactsProvider } from "@/components/workspace/artifacts";
|
|
|
|
export default function ChatLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const isNewThread = useMemo(() => {
|
|
return pathname === "/workspace/chats/new";
|
|
}, [pathname]);
|
|
const { resolvedTheme } = useTheme();
|
|
return (
|
|
<ArtifactsProvider>
|
|
{isNewThread && (
|
|
<>
|
|
<FlickeringGrid
|
|
className="absolute inset-0 z-0 translate-y-[2vh] mask-center mask-no-repeat"
|
|
squareSize={4}
|
|
gridGap={4}
|
|
color={
|
|
resolvedTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
|
|
}
|
|
maxOpacity={resolvedTheme === "dark" ? 0.04 : 0.025}
|
|
flickerChance={0.1}
|
|
/>
|
|
<FlickeringGrid
|
|
className="absolute inset-0 z-0 translate-y-[2vh] mask-[url(/images/deer.svg)] mask-size-[100vw] mask-center mask-no-repeat md:mask-size-[72vh]"
|
|
squareSize={4}
|
|
gridGap={4}
|
|
color={
|
|
resolvedTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
|
|
}
|
|
maxOpacity={resolvedTheme === "dark" ? 0.15 : 0.11}
|
|
flickerChance={0.12}
|
|
/>
|
|
</>
|
|
)}
|
|
{children}
|
|
</ArtifactsProvider>
|
|
);
|
|
}
|