feat: implement new ui

2023-06-07 16:17:59 +04:00 · 2023-06-07 16:17:59 +04:00 · 6293470332
commit 6293470332
parent 4d5af8c62a
28 changed files with 1417 additions and 584 deletions
--- a/app/chat-list.tsx
+++ b/app/chat-list.tsx
@ -3,9 +3,7 @@
 import { type Message } from 'ai-connector'

 import { ChatMessage } from './chat-message'
-import { NextChatLogo } from '@/components/ui/nextchat-logo'
-import { Plus } from 'lucide-react'
-import { EmptyScreen } from './empty'
+import { EmptyScreen } from './empty-screen'

 export interface ChatList {
  messages: Message[]
@ -13,8 +11,8 @@ export interface ChatList {

 export function ChatList({ messages }: ChatList) {
  return (
-    <div className="relative h-full dark:bg-zinc-900">
-      <div className="sticky top-0 border-b w-full bg-black md:hidden text-white font-semibold">
+    <div className="relative max-w-2xl mx-auto">
+      {/* <div className="sticky top-0 border-b w-full bg-black md:hidden text-white font-semibold">
        <div className="px-4 py-2 flex items-center justify-between">
          <div className="flex flex-row gap-2 whitespace-nowrap items-center">
            <NextChatLogo className="h-6 w-6" />
@ -26,10 +24,9 @@ export function ChatList({ messages }: ChatList) {
            </button>
          </div>
        </div>
-      </div>
-      <div className="h-full w-full overflow-auto">
+      </div> */}
      {messages.length > 0 ? (
-          <div className="group w-full text-zinc-900 dark:text-white divide-y dark:divide-zinc-800">
+        <div className="group">
          {messages.map(message => (
            <ChatMessage
              key={message.id || message.content}
@ -38,9 +35,10 @@ export function ChatList({ messages }: ChatList) {
          ))}
        </div>
      ) : (
+        <div className="pt-10">
          <EmptyScreen />
-        )}
        </div>
+      )}
    </div>
  )
 }
--- a/app/chat-message.tsx
+++ b/app/chat-message.tsx
@ -5,48 +5,62 @@ import remarkMath from 'remark-math'
 import { cn } from '@/lib/utils'
 import { fontMessage } from '@/lib/fonts'
 import { Message } from 'ai-connector'
+import { User } from 'lucide-react'
+import { OpenAI } from '@/components/icons'
+
 export interface ChatMessageProps {
  message: Message
 }

-export function ChatMessage(props: ChatMessageProps) {
+export function ChatMessage({ message, ...props }: ChatMessageProps) {
  return (
    <div
      className={cn(
-        {
-          'bg-zinc-50': props.message.role === 'assistant'
-        },
-        'pr-0 lg:pr-[260px]',
-        fontMessage.className
+        'flex items-start space-x-4 mb-4',
+        fontMessage.className,
+        message.role === 'user' && 'mt-12 first:mt-0'
      )}
+      {...props}
    >
-      <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-xl xl:max-w-3xl">
-        <div className="flex w-full gap-4 items-start">
-          {props.message.role === 'user' ? (
-            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 p-2 select-none">
      <div
-                className="font-medium uppercase text-zinc-100"
-                style={{ fontSize: 6 }}
-              >
-                User
-              </div>
-            </div>
-          ) : (
-            <div className="flex h-8 w-8 shrink-0 items-center justify-center select-none bg-zinc-300 rounded-full">
-              <IconOpenAI className="h-5 w-5" />
-            </div>
+        className={cn(
+          'flex h-8 w-8 -ml-2 shrink-0 items-center justify-center rounded-full select-none border',
+          message.role === 'assistant' && 'bg-primary text-primary-foreground'
        )}
+      >
+        {message.role === 'user' ? (
+          <User className="w-4 h-4" />
+        ) : (
+          <OpenAI className="w-4 h-4" />
+        )}
+      </div>
+      <div
+        className={cn(
+          'border rounded-lg py-2 px-4',
+          message.role === 'assistant' && 'bg-muted/30'
+        )}
+      >
        <MemoizedReactMarkdown
-            className="prose prose-stone prose-base prose-pre:rounded-md w-full flex-1 leading-6 prose-p:leading-[1.8rem] prose-pre:bg-[#282c34] max-w-full"
+          className="prose dark:prose-invert prose-sm prose-pre:rounded-md w-full flex-1 leading-6 prose-p:leading-[1.8rem] prose-pre:bg-[#282c34] max-w-full"
          remarkPlugins={[remarkGfm, remarkMath]}
          components={{
+            p({ children }) {
+              return (
+                <p
+                  className={cn(
+                    'mb-2 last:mb-0',
+                    message.role === 'user' && 'font-medium'
+                  )}
+                >
+                  {children}
+                </p>
+              )
+            },
            code({ node, inline, className, children, ...props }) {
              if (children.length) {
                if (children[0] == '▍') {
                  return (
-                      <span className="mt-1 animate-pulse cursor-default">
-                        ▍
-                      </span>
+                    <span className="mt-1 animate-pulse cursor-default">▍</span>
                  )
                }

@ -91,29 +105,9 @@ export function ChatMessage(props: ChatMessageProps) {
            }
          }}
        >
-            {props.message.content}
+          {message.content}
        </MemoizedReactMarkdown>
      </div>
    </div>
-    </div>
-  )
-}
-
-ChatMessage.displayName = 'ChatMessage'
-
-export function IconOpenAI(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      fill="#000000"
-      width="800px"
-      height="800px"
-      viewBox="0 0 24 24"
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <title>OpenAI icon</title>
-      <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-    </svg>
  )
 }
--- a/app/chat.tsx
+++ b/app/chat.tsx
@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation'
 import { Prompt } from './prompt'
 import { useChat, type Message } from 'ai-connector'
 import { ChatList } from './chat-list'
+import { ExternalLink } from '@/app/external-link'

 export interface ChatProps {
  // create?: (input: string) => Chat | undefined;
@ -27,11 +28,10 @@ export function Chat({
  })

  return (
-    <main className="transition-width relative min-h-full w-full flex-1 overflow-y-auto flex flex-col">
-      <div className="flex-1">
+    <div className="h-full w-full overflow-auto pb-[200px]">
      <ChatList messages={messages} />
-      </div>
-      <div className="sticky light-gradient dark:bg-gradient-to-b dark:from-zinc-900 dark:to-zinc-950 bottom-0 left-0 w-full border-t bg-white dark:bg-black md:border-t-0 py-4 md:border-transparent md:!bg-transparent md:dark:border-transparent pr-0 lg:pr-[260px] flex dark:border-transparent items-center justify-center">
+      <div className="fixed bottom-0 left-1 right-3 p-6 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-lg">
+        <div className="max-w-2xl mx-auto pl-10">
          <Prompt
            onSubmit={value => {
              append({
@ -42,9 +42,16 @@ export function Chat({
            onRefresh={messages.length ? reload : undefined}
            isLoading={isLoading}
          />
+          <p className="text-muted-foreground text-xs leading-normal text-center pt-2">
+            This is an open source AI chatbot app built with{' '}
+            <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
+            <ExternalLink href="https://vercel.com/storage/kv">
+              Vercel KV
+            </ExternalLink>
+            .
+          </p>
+        </div>
+      </div>
    </div>
-    </main>
  )
 }
-
-Chat.displayName = 'Chat'
--- a/app/chat/[id]/page.tsx
+++ b/app/chat/[id]/page.tsx
@ -32,6 +32,7 @@ export default async function ChatPage({ params }: ChatPageProps) {

  return (
    <div className="relative flex h-full w-full overflow-hidden">
+      {/* @ts-ignore */}
      <Sidebar session={session} />
      <div className="flex h-full min-w-0 flex-1 flex-col">
        <Chat id={chat.id} initialMessages={chat.messages as Message[]} />
--- a/app/empty-screen.tsx
+++ b/app/empty-screen.tsx
@ -0,0 +1,69 @@
+import { cn } from '@/lib/utils'
+import { ExternalLink } from './external-link'
+import { ArrowRight } from 'lucide-react'
+import { useChatStore } from '@/hooks/use-chat-store'
+import { Button } from '@/components/ui/button'
+import { OpenAI } from '@/components/icons'
+
+const exampleMessages = [
+  {
+    heading: 'Explain technical concepts',
+    message: `What is a "serverless function"?`
+  },
+  {
+    heading: 'Summarize article',
+    message: 'Summarize the following article for a 2nd grader: \n'
+  },
+  {
+    heading: 'Draft an email',
+    message: `Draft an email to my boss about the following: \n`
+  }
+]
+
+export function EmptyScreen({ className }: React.ComponentProps<'div'>) {
+  const { setDefaultMessage } = useChatStore()
+
+  return (
+    <div className="flex items-start space-x-4 mb-4">
+      <div
+        className={cn(
+          'flex h-8 w-8 -ml-2 shrink-0 items-center justify-center rounded-full select-none border bg-primary text-primary-foreground'
+        )}
+      >
+        <OpenAI className="w-4 h-4" />
+      </div>
+      <div
+        className={cn(
+          'border rounded-lg flex-1 p-10 bg-gradient-to-b from-background via-muted/10 to-muted/50',
+          className
+        )}
+      >
+        <h1 className="font-semibold mb-2">Welcome to Next.js Chatbot!</h1>
+        <p className="text-muted-foreground text-sm leading-normal">
+          This is an open source AI chatbot app built with{' '}
+          <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
+          <ExternalLink href="https://vercel.com/storage/kv">
+            Vercel KV
+          </ExternalLink>
+          .
+        </p>
+        <p className="text-muted-foreground text-sm leading-normal">
+          You can start a conversation here or try the following examples:
+        </p>
+        <div className="text-sm mt-4 flex flex-col items-start space-y-2">
+          {exampleMessages.map((message, index) => (
+            <Button
+              key={index}
+              variant="link"
+              className="p-0 h-auto"
+              onClick={() => setDefaultMessage(message.message)}
+            >
+              <ArrowRight className="w-4 h-4 mr-2 text-muted-foreground" />
+              {message.heading}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/app/empty.tsx
+++ b/app/empty.tsx
@ -1,56 +0,0 @@
-import { cn } from '@/lib/utils'
-import { ExternalLink } from './external-link'
-import { fontMessage } from '@/lib/fonts'
-
-function ExampleBubble({ children }: { children?: React.ReactNode }) {
-  return (
-    <div
-      className={cn(
-        'flex-1 flex items-start justify-between p-4 rounded-lg relative bg-zinc-100 text-sm font-medium transition-all cursor-pointer select-none hover:drop-shadow-[0_1px_1px_rgba(0,0,0,0.08)] hover:shadow-[0rem_0rem_0rem_0.0625rem_rgba(0,0,0,.02),0rem_0.125rem_0.25rem_rgba(0,0,0,.08),0rem_0.45rem_1rem_rgba(0,0,0,.06)] hover:bg-white group duration-300',
-        fontMessage.className
-      )}
-      style={{}}
-    >
-      <div
-        className="bg-zinc-100 w-9 h-6 absolute left-0 top-full -mt-[1px] scale-75 origin-top-left group-hover:bg-white transition-all duration-300"
-        style={{
-          clipPath:
-            'path("M31.1838 0C24.9593 10.7604 13.3251 18 0 18C9.94113 18 18 9.94113 18 0H31.1838Z")'
-        }}
-      ></div>
-      <p>{children}</p>
-    </div>
-  )
-}
-
-export function EmptyScreen() {
-  return (
-    <div
-      className={cn(
-        'w-full h-full flex items-center justify-center pt-4 pb-8 pr-0 lg:pr-[260px]'
-      )}
-    >
-      <div className="p-8 rounded-lg flex flex-col items-center justify-center gap-8 max-w-2xl">
-        <div className="flex items-center justify-center gap-6">
-          <div className="text-zinc-500 font-medium">
-            <p>Welcome to Next.js Chatbot!</p>
-            <p className="mt-2">
-              This is an open source AI chatbot app built with{' '}
-              <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
-              <ExternalLink href="https://vercel.com/storage/kv">
-                Vercel KV
-              </ExternalLink>
-              . You can start a conversation here or try the following examples:
-            </p>
-          </div>
-        </div>
-        <div className="grid gap-x-4 gap-y-6 grid-cols-2 w-full">
-          <ExampleBubble>Explain technical concepts</ExampleBubble>
-          <ExampleBubble>Summarize article</ExampleBubble>
-          <ExampleBubble>Get assistance</ExampleBubble>
-          <ExampleBubble>Draft an email</ExampleBubble>
-        </div>
-      </div>
-    </div>
-  )
-}
--- a/app/globals.css
+++ b/app/globals.css
@ -3,14 +3,80 @@
@tailwind utilities;

@layer base {
-  #__next,
-  #root {
-    height: 100%;
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
  }

-  body,
-  html {
-    height: 100%;
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
  }
 }

--- a/app/header.tsx
+++ b/app/header.tsx
@ -0,0 +1,52 @@
+import { GitHub, Vercel } from '@/components/icons'
+import './globals.css'
+
+import { Sidebar } from '@/app/sidebar'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { Plus } from 'lucide-react'
+import Link from 'next/link'
+import { UserMenu } from '@/components/user-menu'
+import { auth } from '@/auth'
+
+export async function Header() {
+  const session = await auth()
+
+  return (
+    <header className="h-16 shrink-0 z-50 bg-gradient-to-b from-background/30 to-background/50 backdrop-blur-lg px-4 flex sticky top-0 w-full items-center justify-between">
+      <div className="flex items-center">
+        {/* @ts-ignore */}
+        <Sidebar />
+        <UserMenu session={session} />
+      </div>
+      <div className="flex space-x-2 items-center">
+        <Link href="/" className={cn(buttonVariants({ size: 'sm' }))}>
+          <Plus className="h-4 w-4 mr-2" />
+          New Chat
+        </Link>
+        <a
+          href="https://github.com/vercel/nextjs-ai-chatbot/"
+          target="_blank"
+          className={cn(
+            buttonVariants({ size: 'sm', variant: 'outline' }),
+            'space-x-2'
+          )}
+        >
+          <Vercel className="mr-2" />
+          Deploy
+        </a>
+        <a
+          target="_blank"
+          href="https://github.com/vercel/nextjs-ai-chatbot/"
+          className={cn(
+            buttonVariants({ size: 'sm', variant: 'ghost' }),
+            'h-9 w-9 p-0'
+          )}
+        >
+          <GitHub className="w-5 h-5" />
+          <span className="sr-only">View on GitHub</span>
+        </a>
+      </div>
+    </header>
+  )
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,9 +1,11 @@
-import './globals.css'
 import { Metadata } from 'next'
+import './globals.css'

+import { TailwindIndicator } from '@/components/tailwind-indicator'
 import { ThemeProvider } from '@/components/theme-provider'
 import { fontMono, fontSans } from '@/lib/fonts'
 import { cn } from '@/lib/utils'
+import { Header } from '@/app/header'

 export const metadata: Metadata = {
  title: {
@ -28,7 +30,6 @@ interface RootLayoutProps {

 export default function RootLayout({ children }: RootLayoutProps) {
  return (
-    <>
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
@ -39,11 +40,14 @@ export default function RootLayout({ children }: RootLayoutProps) {
        )}
      >
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            {children}
-            {/* <TailwindIndicator /> */}
+          <div className="h-screen flex flex-col">
+            {/* @ts-ignore */}
+            <Header />
+            <main className="flex-1 overflow-hidden">{children}</main>
+          </div>
+          <TailwindIndicator />
        </ThemeProvider>
      </body>
    </html>
-    </>
  )
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,18 +1,13 @@
+import { type Message } from 'ai-connector'
 import { Chat } from './chat'
-import { Sidebar } from './sidebar'
-import { auth } from '@/auth'

 export const runtime = 'edge'
 export const preferredRegion = 'home'

 export default async function IndexPage() {
-  const session = await auth()
  return (
-    <div className="relative flex h-full w-full overflow-hidden">
-      <Sidebar session={session} newChat />
-      <div className="flex h-full min-w-0 flex-1 flex-col">
+    <div className="h-full overflow-hidden">
      <Chat />
    </div>
-    </div>
  )
 }
--- a/app/prompt.tsx
+++ b/app/prompt.tsx
@ -1,5 +1,6 @@
 'use client'

+import * as React from 'react'
 import { CornerDownLeft, RefreshCcw, StopCircle } from 'lucide-react'
 import { useState } from 'react'
 import Textarea from 'react-textarea-autosize'
@ -8,6 +9,13 @@ import { Button } from '@/components/ui/button'
 import { fontMessage } from '@/lib/fonts'
 import { useCmdEnterSubmit } from '@/lib/hooks/use-command-enter-submit'
 import { cn } from '@/lib/utils'
+import { useChatStore } from '@/hooks/use-chat-store'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@/components/ui/tooltip'

 export interface PromptProps {
  onSubmit: (value: string) => void
@ -22,8 +30,21 @@ export function Prompt({
  onAbort,
  isLoading
 }: PromptProps) {
-  const [input, setInput] = useState('')
+  const { defaultMessage } = useChatStore()
+  const [input, setInput] = useState(defaultMessage)
  const { formRef, onKeyDown } = useCmdEnterSubmit()
+  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  React.useEffect(() => {
+    setInput(defaultMessage)
+  }, [defaultMessage])
+
  return (
    <form
      onSubmit={async e => {
@ -32,7 +53,6 @@ export function Prompt({
        await onSubmit(input)
      }}
      ref={formRef}
-      className="stretch flex w-full flex-row gap-3 md:max-w-2xl lg:max-w-xl xl:max-w-3xl mx-auto px-4"
    >
      <div className="relative flex h-full flex-1 flex-row-reverse items-stretch md:flex-col">
        <div>
@ -71,8 +91,9 @@ export function Prompt({
                    </button> */}
          </div>
        </div>
-        <div className="relative flex w-full grow flex-col rounded-md dark:focus:border-white border border-zinc/10 bg-white shadow-[0_10px_20px_-10px_rgba(0,0,0,0.20)] dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:shadow-[0_5px_15px_rgba(0,0,0,0.10)] focus-within:border-zinc-800 focus-within:shadow-[0_15px_10px_-12px_rgba(0,0,0,0.22)] transition-all duration-200 focus-within:duration-1000 ease-in-out">
+        <div className="relative flex w-full grow flex-col rounded-md border bg-background overflow-hidden pr-12">
          <Textarea
+            ref={inputRef}
            tabIndex={0}
            onKeyDown={onKeyDown}
            rows={1}
@ -81,34 +102,44 @@ export function Prompt({
            placeholder="Send a message."
            spellCheck={false}
            className={cn(
-              'm-0 max-h-[200px] w-full  resize-none border-0 bg-transparent p-0 py-[13px] pl-4 pr-7 outline-none ring-0 focus:ring-0 focus-visible:ring-0 dark:bg-transparent',
+              'min-h-[60px] text-sm p-4 bg-transparent focus-within:outline-none w-full resize-none',
              fontMessage.className
            )}
-            style={{
-              height: 46,
-              overflowY: 'hidden'
-            }}
          />
+          <div className="absolute top-4 right-4">
+            <TooltipProvider>
              {isLoading ? (
-            <button
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
                      type="button"
                      onClick={onAbort}
-              className="absolute top-0 bottom-0 m-auto h-8 w-8 flex items-center justify-center right-2 rounded p-2 text-zinc-500 hover:bg-zinc-100 disabled:opacity-40 disabled:hover:bg-transparent dark:hover:bg-zinc-900 enabled:dark:hover:text-zinc-400 dark:disabled:hover:bg-transparent"
+                      className="h-8 w-8 p-0"
                    >
                      <StopCircle className="h-4 w-4" />
-            </button>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Stop generating</TooltipContent>
+                </Tooltip>
              ) : (
-            <button
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
                      type="submit"
-              className="absolute top-0 bottom-0 m-auto h-8 w-8 flex items-center justify-center right-2 rounded p-2 text-zinc-500 hover:bg-zinc-100 disabled:opacity-40 disabled:hover:bg-transparent dark:hover:bg-zinc-900 enabled:dark:hover:text-zinc-400 dark:disabled:hover:bg-transparent"
+                      className="h-8 w-8 p-0"
                    >
                      <CornerDownLeft className="h-4 w-4" />
-            </button>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Send message</TooltipContent>
+                </Tooltip>
              )}
+            </TooltipProvider>
+          </div>
        </div>
      </div>
    </form>
  )
 }
-
-Prompt.displayName = 'Prompt'
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@ -1,90 +1,42 @@
-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 { kv } from '@vercel/kv'
+import { Sidebar as SidebarIcon } from 'lucide-react'
 import { SidebarItem } from './sidebar-item'

-export interface SidebarProps {
-  session?: Session
-  newChat?: boolean
-}
+import { auth } from '@/auth'
+import { NextChat } from '@/components/icons'
+import { Button } from '@/components/ui/button'
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+
+export interface SidebarProps {}
+
+export async function Sidebar({}: SidebarProps) {
+  const session = await auth()

-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'
-              )}
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" className="w-9 h-9 p-0">
+          <SidebarIcon className="w-6 h-6" />
+          <span className="sr-only">Toggle Sidebar</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent
+        position="left"
+        className="w-[300px] top-2 rounded-lg left-2 bottom-2 h-auto"
      >
-              <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">
+        <div className="flex items-center">
+          <NextChat className="mr-2 w-6 h-6 text-primary" inverted />
+          <span className="select-none font-bold">Chatbot</span>
+        </div>
        {/* @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>
+      </SheetContent>
+    </Sheet>
  )
 }

-Sidebar.displayName = 'Sidebar'
-
 async function SidebarList({ session }: { session?: Session }) {
  const results: Chat[] = await getChats(session?.user?.email ?? '')

--- a/components/icons.tsx
+++ b/components/icons.tsx
@ -0,0 +1,137 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export function NextChat({
+  className,
+  inverted,
+  ...props
+}: React.ComponentProps<'svg'> & { inverted?: boolean }) {
+  const id = React.useId()
+
+  return (
+    <svg
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('w-4 h-4', className)}
+      {...props}
+    >
+      <defs>
+        <linearGradient
+          id={`gradient-${id}-1`}
+          x1="10.6889"
+          y1="10.3556"
+          x2="13.8445"
+          y2="14.2667"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={inverted ? 'white' : 'black'} />
+          <stop
+            offset={1}
+            stopColor={inverted ? 'white' : 'black'}
+            stopOpacity={0}
+          />
+        </linearGradient>
+        <linearGradient
+          id={`gradient-${id}-2`}
+          x1="11.7555"
+          y1="4.8"
+          x2="11.7376"
+          y2="9.50002"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={inverted ? 'white' : 'black'} />
+          <stop
+            offset={1}
+            stopColor={inverted ? 'white' : 'black'}
+            stopOpacity={0}
+          />
+        </linearGradient>
+      </defs>
+      <path
+        d="M1 16L2.58314 11.2506C1.83084 9.74642 1.63835 8.02363 2.04013 6.39052C2.4419 4.75741 3.41171 3.32057 4.776 2.33712C6.1403 1.35367 7.81003 0.887808 9.4864 1.02289C11.1628 1.15798 12.7364 1.8852 13.9256 3.07442C15.1148 4.26363 15.842 5.83723 15.9771 7.5136C16.1122 9.18997 15.6463 10.8597 14.6629 12.224C13.6794 13.5883 12.2426 14.5581 10.6095 14.9599C8.97637 15.3616 7.25358 15.1692 5.74942 14.4169L1 16Z"
+        fill={inverted ? 'black' : 'white'}
+        stroke={inverted ? 'black' : 'white'}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <mask
+        id="mask0_91_2047"
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x={1}
+        y={0}
+        width={16}
+        height={16}
+      >
+        <circle cx={9} cy={8} r={8} fill={inverted ? 'black' : 'white'} />
+      </mask>
+      <g mask="url(#mask0_91_2047)">
+        <circle cx={9} cy={8} r={8} fill={inverted ? 'black' : 'white'} />
+        <path
+          d="M14.2896 14.0018L7.146 4.8H5.80005V11.1973H6.87681V6.16743L13.4444 14.6529C13.7407 14.4545 14.0231 14.2369 14.2896 14.0018Z"
+          fill={`url(#gradient-${id}-1)`}
+        />
+        <rect
+          x="11.2222"
+          y="4.8"
+          width="1.06667"
+          height="6.4"
+          fill={`url(#gradient-${id}-2)`}
+        />
+      </g>
+    </svg>
+  )
+}
+
+export function OpenAI({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('w-4 h-4', className)}
+      {...props}
+    >
+      <title>OpenAI icon</title>
+      <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+    </svg>
+  )
+}
+
+export function Vercel({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      aria-label="Vercel logomark"
+      role="img"
+      viewBox="0 0 74 64"
+      className={cn('w-4 h-4', className)}
+      {...props}
+    >
+      <path
+        d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  )
+}
+
+export function GitHub({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn('w-4 h-4', className)}
+      {...props}
+    >
+      <title>GitHub</title>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  )
+}
--- a/components/tailwind-indicator.tsx
+++ b/components/tailwind-indicator.tsx
@ -0,0 +1,14 @@
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === 'production') return null
+
+  return (
+    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  )
+}
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@ -12,7 +12,7 @@ export function ThemeToggle() {
  return (
    <Button
      variant="ghost"
-      size="xs"
+      size="sm"
      className="p-0 leading-4 h-4 font-normal w-full"
      onClick={() => {
        startTransition(() => {
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@ -1,5 +1,6 @@
 import * as React from 'react'
-import { VariantProps, cva } from 'class-variance-authority'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'

 import { cn } from '@/lib/utils'

@ -21,8 +22,7 @@ const buttonVariants = cva(
      size: {
        default: 'h-10 py-2 px-4',
        sm: 'h-9 px-3 rounded-md',
-        lg: 'h-11 px-8 rounded-md',
-        xs: 'h-6 px-3 rounded-md'
+        lg: 'h-11 px-8 rounded-md'
      }
    },
    defaultVariants: {
@ -34,12 +34,15 @@ const buttonVariants = cva(

 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}

 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
    return (
-      <button
+      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
--- a/components/ui/login.tsx
+++ b/components/ui/login.tsx
@ -1,14 +0,0 @@
-'use client'
-
-import { signIn } from '@auth/nextjs/client'
-
-export function Login() {
-  return (
-    <button
-      className="inline-flex w-full items-center justify-center rounded border border-zinc-800 bg-white h-8 px-4 -my-1.5 text-sm leading-6 tracking-tight text-zinc-900 transition-colors ease-in-out hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50"
-      onClick={() => signIn('github')}
-    >
-      <span className="font-medium">Login</span>
-    </button>
-  )
-}
--- a/components/ui/nextchat-logo.tsx
+++ b/components/ui/nextchat-logo.tsx
@ -1,85 +0,0 @@
-import { useId } from 'react'
-
-export function NextChatLogo(
-  props: JSX.IntrinsicElements['svg'] & { inverted?: boolean }
-) {
-  const id = useId()
-  return (
-    <svg
-      width={17}
-      height={17}
-      viewBox="0 0 17 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <defs>
-        <linearGradient
-          id={`gradient-${id}-1`}
-          x1="10.6889"
-          y1="10.3556"
-          x2="13.8445"
-          y2="14.2667"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor={props.inverted ? 'white' : 'black'} />
-          <stop
-            offset={1}
-            stopColor={props.inverted ? 'white' : 'black'}
-            stopOpacity={0}
-          />
-        </linearGradient>
-        <linearGradient
-          id={`gradient-${id}-2`}
-          x1="11.7555"
-          y1="4.8"
-          x2="11.7376"
-          y2="9.50002"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor={props.inverted ? 'white' : 'black'} />
-          <stop
-            offset={1}
-            stopColor={props.inverted ? 'white' : 'black'}
-            stopOpacity={0}
-          />
-        </linearGradient>
-      </defs>
-      <path
-        d="M1 16L2.58314 11.2506C1.83084 9.74642 1.63835 8.02363 2.04013 6.39052C2.4419 4.75741 3.41171 3.32057 4.776 2.33712C6.1403 1.35367 7.81003 0.887808 9.4864 1.02289C11.1628 1.15798 12.7364 1.8852 13.9256 3.07442C15.1148 4.26363 15.842 5.83723 15.9771 7.5136C16.1122 9.18997 15.6463 10.8597 14.6629 12.224C13.6794 13.5883 12.2426 14.5581 10.6095 14.9599C8.97637 15.3616 7.25358 15.1692 5.74942 14.4169L1 16Z"
-        fill={props.inverted ? 'black' : 'white'}
-        stroke={props.inverted ? 'black' : 'white'}
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <mask
-        id="mask0_91_2047"
-        style={{ maskType: 'alpha' }}
-        maskUnits="userSpaceOnUse"
-        x={1}
-        y={0}
-        width={16}
-        height={16}
-      >
-        <circle cx={9} cy={8} r={8} fill={props.inverted ? 'black' : 'white'} />
-      </mask>
-      <g mask="url(#mask0_91_2047)">
-        <circle cx={9} cy={8} r={8} fill={props.inverted ? 'black' : 'white'} />
-        <path
-          d="M14.2896 14.0018L7.146 4.8H5.80005V11.1973H6.87681V6.16743L13.4444 14.6529C13.7407 14.4545 14.0231 14.2369 14.2896 14.0018Z"
-          fill={`url(#gradient-${id}-1)`}
-        />
-        <rect
-          x="11.2222"
-          y="4.8"
-          width="1.06667"
-          height="6.4"
-          fill={`url(#gradient-${id}-2)`}
-        />
-      </g>
-    </svg>
-  )
-}
-
-NextChatLogo.displayName = 'DevGPT-logo'
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@ -0,0 +1,146 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = ({
+  className,
+  children,
+  ...props
+}: SheetPrimitive.DialogPortalProps) => (
+  <SheetPrimitive.Portal
+    className={cn('fixed inset-0 z-50 flex', className)}
+    {...props}
+  >
+    {children}
+  </SheetPrimitive.Portal>
+)
+SheetPortal.displayName = SheetPrimitive.Portal.displayName
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, children, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border h-full',
+  {
+    variants: {
+      position: {
+        left: 'data-[state=open]:animate-slide-from-left data-[state=closed]:animate-slide-to-left',
+        right: 'animate-in slide-in-from-right h-full duration-300'
+      }
+    },
+    defaultVariants: {
+      position: 'left'
+    }
+  }
+)
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  DialogContentProps
+>(({ position, className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ position }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription
+}
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md border bg-popover font-medium px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/components/ui/user-menu.tsx
+++ b/components/ui/user-menu.tsx
@ -1,96 +0,0 @@
-'use client'
-import { ThemeToggle } from '@/components/theme-toggle'
-import { signOut } from '@auth/nextjs/client'
-import { type Session } from '@auth/nextjs/types'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
-import Image from 'next/image'
-
-export interface UserMenuProps {
-  session: Session
-}
-
-export function UserMenu({ session }: UserMenuProps) {
-  return (
-    <div className="flex items-center justify-between">
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger asChild>
-          <button className="focus:outline-none">
-            {session.user?.image ? (
-              <Image
-                width={24}
-                height={24}
-                className="h-6 w-6 rounded-full select-none ring-zinc-100/10 ring-1 hover:opacity-80 transition-opacity duration-300"
-                src={session.user?.image ? `${session.user.image}&s=60` : ''}
-                alt={session.user.name ?? 'Avatar'}
-              />
-            ) : (
-              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 p-2 select-none">
-                <div
-                  className="font-medium uppercase text-zinc-100"
-                  style={{ fontSize: 12 }}
-                >
-                  {session.user?.name ? session.user?.name.slice(0, 2) : null}
-                </div>
-              </div>
-            )}
-          </button>
-        </DropdownMenu.Trigger>
-
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content
-            className="min-w-[200px] bg-white dark:bg-zinc-950 rounded-lg shadow-lg text-zinc-900 dark:text-zinc-400 overflow-hidden border border-transparent dark:border-zinc-700 focus:outline-none relative z-20 py-2"
-            sideOffset={8}
-            align="end"
-          >
-            <DropdownMenu.Item className="py-2 px-3 focus:outline-none">
-              <div className="text-xs font-medium">{session.user?.name}</div>
-              <div className="text-xs text-zinc-500">{session.user?.email}</div>
-            </DropdownMenu.Item>
-            <DropdownMenu.Separator className="my-1 h-[1px] bg-zinc-100 dark:bg-zinc-800" />
-            <DropdownMenu.Item className="py-2 px-3 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200 cursor-pointer text-xs focus:outline-none">
-              <ThemeToggle />
-            </DropdownMenu.Item>
-            <DropdownMenu.Separator className="my-1 h-[1px] bg-zinc-100 dark:bg-zinc-800" />
-            <DropdownMenu.Item className="py-2 px-3 hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200 cursor-pointer text-xs focus:outline-none ">
-              <a
-                href="https://vercel.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center justify-between w-full"
-              >
-                <span>Vercel Homepage</span>
-                <span>
-                  <svg
-                    fill="none"
-                    height={16}
-                    shapeRendering="geometricPrecision"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="1.5"
-                    viewBox="0 0 24 24"
-                    width={16}
-                    aria-hidden="true"
-                    className="mr-1"
-                  >
-                    <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
-                    <path d="M15 3h6v6" />
-                    <path d="M10 14L21 3" />
-                  </svg>
-                </span>
-              </a>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              className="py-2 px-3 hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200 cursor-pointer text-xs focus:outline-none"
-              onClick={() => signOut()}
-            >
-              Log Out
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Root>
-    </div>
-  )
-}
-
-UserMenu.displayName = 'UserMenu'
--- a/components/ui/vercel-logo.tsx
+++ b/components/ui/vercel-logo.tsx
@ -1,14 +0,0 @@
-import { cn } from '@/lib/utils'
-
-export const VercelLogo = ({ className }: { className?: string }) => (
-  <svg
-    height={22}
-    viewBox="0 0 235 203"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-label="Vercel Logo"
-    className={cn(className, 'dark:fill-white fill-black')}
-  >
-    <path d="M117.082 0L234.164 202.794H0L117.082 0Z" fill="currentColor" />
-  </svg>
-)
--- a/components/user-menu.tsx
+++ b/components/user-menu.tsx
@ -0,0 +1,29 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { signIn } from '@auth/nextjs/client'
+import { type Session } from '@auth/nextjs/types'
+
+export interface UserMenuProps {
+  session: Session
+}
+
+export function UserMenu({ session }: UserMenuProps) {
+  if (!session) {
+    return (
+      <Button variant="ghost" size="sm" onClick={() => signIn('github')}>
+        Login
+      </Button>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-between text-sm">
+      {session?.user && (
+        <Button variant="link" size="sm">
+          {session.user?.name}
+        </Button>
+      )}
+    </div>
+  )
+}
--- a/hooks/use-chat-store.ts
+++ b/hooks/use-chat-store.ts
@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+interface UseChatStore {
+  defaultMessage: string
+  setDefaultMessage: (message: string) => void
+}
+
+export const useChatStore = create<UseChatStore>()(set => ({
+  defaultMessage: '',
+  setDefaultMessage: message => set({ defaultMessage: message })
+}))
--- a/package.json
+++ b/package.json
@ -16,7 +16,10 @@
  "dependencies": {
    "@auth/core": "0.0.0-manual.527fff6c",
    "@auth/nextjs": "0.0.0-manual.030e8328",
+    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.4",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.6",
    "@vercel/analytics": "^1.0.0",
    "@vercel/kv": "^0.2.1",
    "ai-connector": "^0.0.5",
@ -36,7 +39,8 @@
    "react-syntax-highlighter": "^15.5.0",
    "react-textarea-autosize": "^8.4.1",
    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1"
+    "remark-math": "^5.1.1",
+    "zustand": "^4.3.8"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.9",
@ -52,10 +56,10 @@
    "eslint-config-prettier": "^8.3.0",
    "postcss": "^8.4.21",
    "prettier": "^2.7.1",
-    "tailwindcss": "^3.3.1",
    "tailwind-merge": "^1.12.0",
+    "tailwindcss": "^3.3.1",
    "tailwindcss-animate": "^1.0.5",
-    "typescript": "^4.9.3"
+    "typescript": "^5.1.3"
  },
  "pnpm": {
    "overrides": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -14,9 +14,18 @@ dependencies:
  '@auth/nextjs':
    specifier: 0.0.0-manual.030e8328
    version: 0.0.0-manual.030e8328(next@13.4.5-canary.3)(react@18.2.0)
+  '@radix-ui/react-dialog':
+    specifier: ^1.0.4
+    version: 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
  '@radix-ui/react-dropdown-menu':
    specifier: ^2.0.4
    version: 2.0.4(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-slot':
+    specifier: ^1.0.2
+    version: 1.0.2(@types/react@18.2.6)(react@18.2.0)
+  '@radix-ui/react-tooltip':
+    specifier: ^1.0.6
+    version: 1.0.6(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
  '@vercel/analytics':
    specifier: ^1.0.0
    version: 1.0.1
@ -31,7 +40,7 @@ dependencies:
    version: 4.0.0-beta.0
  class-variance-authority:
    specifier: ^0.4.0
-    version: 0.4.0(typescript@4.9.5)
+    version: 0.4.0(typescript@5.1.3)
  clsx:
    specifier: ^1.2.1
    version: 1.2.1
@ -77,6 +86,9 @@ dependencies:
  remark-math:
    specifier: ^5.1.1
    version: 5.1.1
+  zustand:
+    specifier: ^4.3.8
+    version: 4.3.8(react@18.2.0)

 devDependencies:
  '@tailwindcss/typography':
@ -108,7 +120,7 @@ devDependencies:
    version: 8.40.0
  eslint-config-next:
    specifier: 13.4.5-canary.3
-    version: 13.4.5-canary.3(eslint@8.40.0)(typescript@4.9.5)
+    version: 13.4.5-canary.3(eslint@8.40.0)(typescript@5.1.3)
  eslint-config-prettier:
    specifier: ^8.3.0
    version: 8.8.0(eslint@8.40.0)
@ -128,8 +140,8 @@ devDependencies:
    specifier: ^1.0.5
    version: 1.0.5(tailwindcss@3.3.2)
  typescript:
-    specifier: ^4.9.3
-    version: 4.9.5
+    specifier: ^5.1.3
+    version: 5.1.3

 packages:

@ -232,12 +244,22 @@ packages:
    resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==}
    dev: false

+  /@floating-ui/core@1.2.6:
+    resolution: {integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==}
+    dev: false
+
  /@floating-ui/dom@0.5.4:
    resolution: {integrity: sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==}
    dependencies:
      '@floating-ui/core': 0.7.3
    dev: false

+  /@floating-ui/dom@1.2.9:
+    resolution: {integrity: sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==}
+    dependencies:
+      '@floating-ui/core': 1.2.6
+    dev: false
+
  /@floating-ui/react-dom@0.7.2(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==}
    peerDependencies:
@ -252,6 +274,17 @@ packages:
      - '@types/react'
    dev: false

+  /@floating-ui/react-dom@2.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Ke0oU3SeuABC2C4OFu2mSAwHIP5WUiV98O9YWoHV4Q5aT6E9k06DV0Khi5uYspR8xmmBk08t8ZDcz3TR3ARkEg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 1.2.9
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@humanwhocodes/config-array@0.11.8:
    resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
    engines: {node: '>=10.10.0'}
@ -440,6 +473,12 @@ packages:
      '@babel/runtime': 7.21.5
    dev: false

+  /@radix-ui/primitive@1.0.1:
+    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+    dependencies:
+      '@babel/runtime': 7.21.5
+    dev: false
+
  /@radix-ui/react-arrow@1.0.2(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA==}
    peerDependencies:
@ -452,6 +491,27 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

+  /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-collection@1.0.2(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==}
    peerDependencies:
@ -476,6 +536,20 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
  /@radix-ui/react-context@1.0.0(react@18.2.0):
    resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==}
    peerDependencies:
@ -485,6 +559,54 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-context@1.0.1(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-dialog@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.6)(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-direction@1.0.0(react@18.2.0):
    resolution: {integrity: sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==}
    peerDependencies:
@ -510,6 +632,31 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

+  /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-dropdown-menu@2.0.4(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-y6AT9+MydyXcByivdK1+QpjWoKaC7MLjkS/cH1Q3keEyMvDkiY85m8o2Bi6+Z1PPUlCsMULopxagQOSfN0wahg==}
    peerDependencies:
@ -539,6 +686,20 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
  /@radix-ui/react-focus-scope@1.0.2(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-spwXlNTfeIprt+kaEWE/qYuYT3ZAqJiAGjN/JgdvgVDTu8yc+HuX+WOWXrKliKnLnwck0F6JDkqIERncnih+4A==}
    peerDependencies:
@ -553,6 +714,29 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

+  /@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-id@1.0.0(react@18.2.0):
    resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
    peerDependencies:
@ -563,6 +747,21 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-id@1.0.1(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
  /@radix-ui/react-menu@2.0.4(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-mzKR47tZ1t193trEqlQoJvzY4u9vYfVH16ryBrVrCAGZzkgyWnMQYEZdUkM7y8ak9mrkKtJiqB47TlEnubeOFQ==}
    peerDependencies:
@ -617,6 +816,36 @@ packages:
      - '@types/react'
    dev: false

+  /@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@floating-ui/react-dom': 2.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/rect': 1.0.1
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-portal@1.0.2(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-swu32idoCW7KA2VEiUZGBSu9nB6qwGdV6k6HYhUoOo3M1FFpD+VgLzUqtt3mwL1ssz7r2x8MggpLSQach2Xy/Q==}
    peerDependencies:
@ -629,6 +858,27 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

+  /@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-presence@1.0.0(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
    peerDependencies:
@ -642,6 +892,28 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

+  /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-primitive@1.0.2(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==}
    peerDependencies:
@ -654,6 +926,27 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

+  /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-roving-focus@1.0.3(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-stjCkIoMe6h+1fWtXlA6cRfikdBzCLp3SnVk7c48cv/uy3DTGoXhN76YaOYUJuy3aEDvDIKwKR5KSmvrtPvQPQ==}
    peerDependencies:
@ -684,6 +977,53 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-slot@1.0.2(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-use-callback-ref@1.0.0(react@18.2.0):
    resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
    peerDependencies:
@ -693,6 +1033,20 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
  /@radix-ui/react-use-controllable-state@1.0.0(react@18.2.0):
    resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
    peerDependencies:
@ -703,6 +1057,21 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
  /@radix-ui/react-use-escape-keydown@1.0.2(react@18.2.0):
    resolution: {integrity: sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==}
    peerDependencies:
@ -713,6 +1082,21 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
  /@radix-ui/react-use-layout-effect@1.0.0(react@18.2.0):
    resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
    peerDependencies:
@ -722,6 +1106,20 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
  /@radix-ui/react-use-rect@1.0.0(react@18.2.0):
    resolution: {integrity: sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==}
    peerDependencies:
@ -732,6 +1130,21 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-use-rect@1.0.1(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/rect': 1.0.1
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
  /@radix-ui/react-use-size@1.0.0(react@18.2.0):
    resolution: {integrity: sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==}
    peerDependencies:
@ -742,12 +1155,54 @@ packages:
      react: 18.2.0
    dev: false

+  /@radix-ui/react-use-size@1.0.1(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.6)(react@18.2.0)
+      '@types/react': 18.2.6
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/rect@1.0.0:
    resolution: {integrity: sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==}
    dependencies:
      '@babel/runtime': 7.21.5
    dev: false

+  /@radix-ui/rect@1.0.1:
+    resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
+    dependencies:
+      '@babel/runtime': 7.21.5
+    dev: false
+
  /@rushstack/eslint-patch@1.2.0:
    resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
    dev: true
@ -811,7 +1266,6 @@ packages:
    resolution: {integrity: sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==}
    dependencies:
      '@types/react': 18.2.6
-    dev: true

  /@types/react-syntax-highlighter@15.5.6:
    resolution: {integrity: sha512-i7wFuLbIAFlabTeD2I1cLjEOrG/xdMa/rpx2zwzAoGHuXJDhSqp9BSfDlMHSh9JSuNfxHk9eEmMX6D55GiyjGg==}
@ -833,7 +1287,7 @@ packages:
    resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
    dev: false

-  /@typescript-eslint/parser@5.59.5(eslint@8.40.0)(typescript@4.9.5):
+  /@typescript-eslint/parser@5.59.5(eslint@8.40.0)(typescript@5.1.3):
    resolution: {integrity: sha512-NJXQC4MRnF9N9yWqQE2/KLRSOLvrrlZb48NGVfBa+RuPMN6B7ZcK5jZOvhuygv4D64fRKnZI4L4p8+M+rfeQuw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -845,10 +1299,10 @@ packages:
    dependencies:
      '@typescript-eslint/scope-manager': 5.59.5
      '@typescript-eslint/types': 5.59.5
-      '@typescript-eslint/typescript-estree': 5.59.5(typescript@4.9.5)
+      '@typescript-eslint/typescript-estree': 5.59.5(typescript@5.1.3)
      debug: 4.3.4
      eslint: 8.40.0
-      typescript: 4.9.5
+      typescript: 5.1.3
    transitivePeerDependencies:
      - supports-color
    dev: true
@ -866,7 +1320,7 @@ packages:
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  /@typescript-eslint/typescript-estree@5.59.5(typescript@4.9.5):
+  /@typescript-eslint/typescript-estree@5.59.5(typescript@5.1.3):
    resolution: {integrity: sha512-+XXdLN2CZLZcD/mO7mQtJMvCkzRfmODbeSKuMY/yXbGkzvA9rJyDY5qDYNoiz2kP/dmyAxXquL2BvLQLJFPQIg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -881,8 +1335,8 @@ packages:
      globby: 11.1.0
      is-glob: 4.0.3
      semver: 7.5.0
-      tsutils: 3.21.0(typescript@4.9.5)
-      typescript: 4.9.5
+      tsutils: 3.21.0(typescript@5.1.3)
+      typescript: 5.1.3
    transitivePeerDependencies:
      - supports-color
    dev: true
@ -1232,7 +1686,7 @@ packages:
      fsevents: 2.3.2
    dev: true

-  /class-variance-authority@0.4.0(typescript@4.9.5):
+  /class-variance-authority@0.4.0(typescript@5.1.3):
    resolution: {integrity: sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==}
    peerDependencies:
      typescript: '>= 4.5.5 < 5'
@ -1240,7 +1694,7 @@ packages:
      typescript:
        optional: true
    dependencies:
-      typescript: 4.9.5
+      typescript: 5.1.3
    dev: false

  /cli-color@2.0.3:
@ -1864,7 +2318,7 @@ packages:
    engines: {node: '>=12'}
    dev: false

-  /eslint-config-next@13.4.5-canary.3(eslint@8.40.0)(typescript@4.9.5):
+  /eslint-config-next@13.4.5-canary.3(eslint@8.40.0)(typescript@5.1.3):
    resolution: {integrity: sha512-F1W76ozmRCPk8sxPXO4tSy3pstBerEfiZ1Aiagr+d2a+l/Mx5CgHWf75CwsQfpiC6BbAee8RrdIjb8kvGlPeww==}
    peerDependencies:
      eslint: ^7.23.0 || ^8.0.0
@ -1875,7 +2329,7 @@ packages:
    dependencies:
      '@next/eslint-plugin-next': 13.4.5-canary.3
      '@rushstack/eslint-patch': 1.2.0
-      '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@5.1.3)
      eslint: 8.40.0
      eslint-import-resolver-node: 0.3.7
      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.27.5)(eslint@8.40.0)
@ -1883,7 +2337,7 @@ packages:
      eslint-plugin-jsx-a11y: 6.7.1(eslint@8.40.0)
      eslint-plugin-react: 7.32.2(eslint@8.40.0)
      eslint-plugin-react-hooks: 4.6.0(eslint@8.40.0)
-      typescript: 4.9.5
+      typescript: 5.1.3
    transitivePeerDependencies:
      - eslint-import-resolver-webpack
      - supports-color
@ -1953,7 +2407,7 @@ packages:
      eslint-import-resolver-webpack:
        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@5.1.3)
      debug: 3.2.7
      eslint: 8.40.0
      eslint-import-resolver-node: 0.3.7
@ -1972,7 +2426,7 @@ packages:
      '@typescript-eslint/parser':
        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@5.1.3)
      array-includes: 3.1.6
      array.prototype.flat: 1.3.1
      array.prototype.flatmap: 1.3.1
@ -4569,14 +5023,14 @@ packages:
  /tslib@2.5.0:
    resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}

-  /tsutils@3.21.0(typescript@4.9.5):
+  /tsutils@3.21.0(typescript@5.1.3):
    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
    engines: {node: '>= 6'}
    peerDependencies:
      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
    dependencies:
      tslib: 1.14.1
-      typescript: 4.9.5
+      typescript: 5.1.3
    dev: true

  /type-check@0.4.0:
@ -4607,9 +5061,9 @@ packages:
      is-typed-array: 1.1.10
    dev: true

-  /typescript@4.9.5:
-    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
-    engines: {node: '>=4.2.0'}
+  /typescript@5.1.3:
+    resolution: {integrity: sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==}
+    engines: {node: '>=14.17'}
    hasBin: true

  /unbox-primitive@1.0.2:
@ -4886,6 +5340,22 @@ packages:
  /zod@3.21.4:
    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}

+  /zustand@4.3.8(react@18.2.0):
+    resolution: {integrity: sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      immer: '>=9.0'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
  /zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
    dev: false
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,36 +1,97 @@
-const { fontFamily } = require("tailwindcss/defaultTheme");
+const { fontFamily } = require('tailwindcss/defaultTheme')

 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
-  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+  darkMode: ['class'],
+  content: ['app/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
  theme: {
    container: {
      center: true,
-      padding: "2rem",
+      padding: '2rem',
      screens: {
-        "2xl": "1400px",
-      },
+        '2xl': '1400px'
+      }
    },
    extend: {
      fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
+        sans: ['var(--font-sans)', ...fontFamily.sans]
+      },
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        }
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: 'calc(var(--radius) - 4px)'
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)', ...fontFamily.sans]
      },
      keyframes: {
-        "accordion-down": {
+        'accordion-down': {
          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 'var(--radix-accordion-content-height)' }
        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 }
        },
+        'slide-from-left': {
+          '0%': {
+            transform: 'translateX(-100%)'
+          },
+          '100%': {
+            transform: 'translateX(0)'
+          }
+        },
+        'slide-to-left': {
+          '0%': {
+            transform: 'translateX(0)'
+          },
+          '100%': {
+            transform: 'translateX(-100%)'
+          }
+        }
      },
      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'slide-from-left': 'slide-from-left 0.2s ease-out',
+        'slide-to-left': 'slide-to-left 0.2s ease-out',
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out'
+      }
+    }
  },
-    },
-  },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
-};
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')]
+}