84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
import { NextChatLogo } from "@/components/ui/nextchat-logo";
|
|
import { Login } from "@/components/ui/login";
|
|
import { UserMenu } from "@/components/ui/user-menu";
|
|
import { prisma } from "@/lib/prisma";
|
|
import { type Session } from "@auth/nextjs/types";
|
|
import { cn } from "@/lib/utils";
|
|
import { Plus } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { unstable_cache } from "next/cache";
|
|
import { SidebarItem } from "./sidebar-item";
|
|
|
|
export interface SidebarProps {
|
|
session?: Session;
|
|
newChat?: boolean;
|
|
}
|
|
|
|
export function Sidebar({ session, newChat }: SidebarProps) {
|
|
return (
|
|
<div className="hidden shrink-0 bg-zinc-200/80 dark:bg-black md:flex md:w-[260px] md:flex-col">
|
|
<div className="flex h-full min-h-0 flex-col ">
|
|
<div className="scrollbar-trigger relative h-full w-full flex-1 items-start">
|
|
<aside className="flex h-full w-full flex-col p-2 shadow-lg ring-1 ring-zinc-900/10 dark:ring-zinc-200/10 relative z-10">
|
|
<div className="flex flex-row gap-1 items-center justify-between text-base font-semibold tracking-tight antialiased bg-black text-white px-4 py-4 -m-2 mb-2">
|
|
<div className="flex flex-row gap-1 whitespace-nowrap items-center">
|
|
<NextChatLogo className="h-6 w-6" />
|
|
<span className="select-none">Next.js Chatbot</span>
|
|
</div>
|
|
<div>
|
|
{session?.user ? <UserMenu session={session} /> : <Login />}
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/"
|
|
className={cn(
|
|
"flex shrink-0 cursor-pointer items-center gap-2 rounded p-2 text-sm text-zinc-800 dark:text-zinc-200 font-medium transition-colors duration-300 dark:hover:bg-zinc-300/20 select-none",
|
|
newChat
|
|
? "bg-zinc-500/20 text-zinc-900 font-semibold hover:bg-zinc-500/30 dark:text-white"
|
|
: "hover:bg-zinc-500/10"
|
|
)}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
New Chat
|
|
</Link>
|
|
|
|
<div className="mt-2 pt-2 border-t border-zinc-300 dark:border-zinc-700 flex-1 flex-col overflow-y-auto overflow-x-hidden transition-opacity duration-500">
|
|
<div className="flex flex-col pb-2 text-sm text-zinc-100">
|
|
{/* @ts-ignore */}
|
|
<SidebarList session={session} />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Sidebar.displayName = "Sidebar";
|
|
|
|
async function SidebarList({ session }: { session?: Session }) {
|
|
const chats = await (
|
|
await unstable_cache(
|
|
() =>
|
|
prisma.chat.findMany({
|
|
where: {
|
|
// This is for debugging, need to add scope to the query later
|
|
// userId: session?.user.id,
|
|
},
|
|
orderBy: {
|
|
updatedAt: "desc",
|
|
},
|
|
}),
|
|
// @ts-ignore
|
|
[session?.user?.id || ""],
|
|
{
|
|
revalidate: 3600,
|
|
}
|
|
)
|
|
)();
|
|
|
|
return chats.map((c) => (
|
|
<SidebarItem key={c.id} title={c.title} href={`/chat/${c.id}`} id={c.id} />
|
|
));
|
|
}
|