117 lines
4.2 KiB
TypeScript
117 lines
4.2 KiB
TypeScript
import { Login } from '@/components/ui/login'
|
|
import { NextChatLogo } from '@/components/ui/nextchat-logo'
|
|
import { UserMenu } from '@/components/ui/user-menu'
|
|
import { kv } from '@vercel/kv'
|
|
import { Chat } from '@/lib/types'
|
|
import { cn } from '@/lib/utils'
|
|
import { type Session } from '@auth/nextjs/types'
|
|
import { Plus } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { ExternalLink } from './external-link'
|
|
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-2 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>
|
|
|
|
<div>
|
|
<div className="flex gap-4 items-center justify-center text-sm font-medium leading-4 whitespace-nowrap">
|
|
<a
|
|
href="https://github.com/vercel/nextjs-ai-chatbot/"
|
|
target="_blank"
|
|
className="inline-flex gap-2 px-3 py-2 items-center border border-zinc-300 rounded-md hover:border-zinc-600 transition-colors"
|
|
>
|
|
<svg
|
|
aria-label="Vercel logomark"
|
|
height="13"
|
|
role="img"
|
|
className="w-auto overflow-hidden"
|
|
viewBox="0 0 74 64"
|
|
>
|
|
<path
|
|
d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
|
|
fill="var(--geist-foreground)"
|
|
></path>
|
|
</svg>
|
|
<span>Deploy</span>
|
|
</a>
|
|
<ExternalLink href="https://github.com/vercel/nextjs-ai-chatbot/">
|
|
View on GitHub
|
|
</ExternalLink>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
Sidebar.displayName = 'Sidebar'
|
|
|
|
async function SidebarList({ session }: { session?: Session }) {
|
|
const results: Chat[] = await getChats(session?.user?.email ?? '')
|
|
|
|
return results.map(c => (
|
|
<SidebarItem
|
|
key={c.id}
|
|
title={c.title}
|
|
userId={session?.user?.email ?? ''}
|
|
href={`/chat/${c.id}`}
|
|
id={c.id}
|
|
/>
|
|
))
|
|
}
|
|
|
|
async function getChats(userId: string) {
|
|
try {
|
|
const pipeline = kv.pipeline()
|
|
const chats: string[] = await kv.zrange(`user:chat:${userId}`, 0, -1)
|
|
|
|
for (const chat of chats) {
|
|
pipeline.hgetall(chat)
|
|
}
|
|
|
|
const results = await pipeline.exec()
|
|
|
|
return results as Chat[]
|
|
} catch (error) {
|
|
return []
|
|
}
|
|
}
|