clean up code

app/(chat)/chat/[id]/page.tsx

@@ -1,47 +0,0 @@
-import { type Metadata } from 'next';
-import { notFound, redirect } from 'next/navigation';
-
-import { auth } from '@/auth';
-import { getChat } from '@/app/actions';
-import { Chat } from '@/components/chat';
-
-export interface ChatPageProps {
-	params: {
-		id: string;
-	};
-}
-
-export async function generateMetadata({
-	params,
-}: ChatPageProps): Promise<Metadata> {
-	const session = await auth();
-
-	if (!session?.user) {
-		return {};
-	}
-
-	const chat = await getChat(params.id, session.user.id);
-	return {
-		title: chat?.title.toString().slice(0, 50) ?? 'Chat',
-	};
-}
-
-export default async function ChatPage({ params }: ChatPageProps) {
-	const session = await auth();
-
-	if (!session?.user) {
-		redirect(`/sign-in?next=/chat/${params.id}`);
-	}
-
-	const chat = await getChat(params.id, session.user.id);
-
-	if (!chat) {
-		notFound();
-	}
-
-	if (chat?.userId !== session?.user?.id) {
-		notFound();
-	}
-
-	return <Chat id={chat.id} />;
-}

app/(chat)/layout.tsx

@@ -1,16 +1,14 @@
-import { SidebarDesktop } from '@/components/sidebar-desktop'
-
 interface ChatLayoutProps {
-  children: React.ReactNode
+	children: React.ReactNode;
 }
 
 export default async function ChatLayout({ children }: ChatLayoutProps) {
-  return (
-    <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
-      <SidebarDesktop />
-      <div className="group w-full overflow-auto pl-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
-        {children}
-      </div>
-    </div>
-  )
+	return (
+		<div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
+			{/* <SidebarDesktop /> */}
+			<div className="group w-full overflow-auto pl-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
+				{children}
+			</div>
+		</div>
+	);
 }

app/(chat)/page.tsx

@@ -2,10 +2,10 @@
 
 import { nanoid } from '@/lib/utils';
 import { Chat } from '@/components/chat';
-import { ThemeToggle } from '../../components/theme-toggle';
+import { ThemeToggle } from '../../components/ThemeToggle';
 import { useAtomValue } from 'jotai';
 import { datasetAtom } from '../../state';
-import { EmptyScreen } from '../../components/empty-screen';
+import { EmptyScreen } from '../../components/chat/EmptyScreen';
 
 export default function IndexPage() {
 	const id = nanoid();

app/actions.ts

@@ -1,129 +0,0 @@
-'use server'
-
-import { revalidatePath } from 'next/cache'
-import { redirect } from 'next/navigation'
-import { kv } from '@vercel/kv'
-
-import { auth } from '@/auth'
-import { type Chat } from '@/lib/types'
-
-export async function getChats(userId?: string | null) {
-  if (!userId) {
-    return []
-  }
-
-  try {
-    const pipeline = kv.pipeline()
-    const chats: string[] = await kv.zrange(`user:chat:${userId}`, 0, -1, {
-      rev: true,
-    })
-
-    for (const chat of chats) {
-      pipeline.hgetall(chat)
-    }
-
-    const results = await pipeline.exec()
-
-    return results as Chat[]
-  } catch (error) {
-    return []
-  }
-}
-
-export async function getChat(id: string, userId: string) {
-  const chat = await kv.hgetall<Chat>(`chat:${id}`)
-
-  if (!chat || (userId && chat.userId !== userId)) {
-    return null
-  }
-
-  return chat
-}
-
-export async function removeChat({ id, path }: { id: string; path: string }) {
-  const session = await auth()
-
-  if (!session) {
-    return {
-      error: 'Unauthorized',
-    }
-  }
-
-  //Convert uid to string for consistent comparison with session.user.id
-  const uid = String(await kv.hget(`chat:${id}`, 'userId'))
-
-  if (uid !== session?.user?.id) {
-    return {
-      error: 'Unauthorized',
-    }
-  }
-
-  await kv.del(`chat:${id}`)
-  await kv.zrem(`user:chat:${session.user.id}`, `chat:${id}`)
-
-  revalidatePath('/')
-  return revalidatePath(path)
-}
-
-export async function clearChats() {
-  const session = await auth()
-
-  if (!session?.user?.id) {
-    return {
-      error: 'Unauthorized',
-    }
-  }
-
-  const chats: string[] = await kv.zrange(`user:chat:${session.user.id}`, 0, -1)
-  if (!chats.length) {
-    return redirect('/')
-  }
-  const pipeline = kv.pipeline()
-
-  for (const chat of chats) {
-    pipeline.del(chat)
-    pipeline.zrem(`user:chat:${session.user.id}`, chat)
-  }
-
-  await pipeline.exec()
-
-  revalidatePath('/')
-  return redirect('/')
-}
-
-export async function getSharedChat(id: string) {
-  const chat = await kv.hgetall<Chat>(`chat:${id}`)
-
-  if (!chat || !chat.sharePath) {
-    return null
-  }
-
-  return chat
-}
-
-export async function shareChat(id: string) {
-  const session = await auth()
-
-  if (!session?.user?.id) {
-    return {
-      error: 'Unauthorized',
-    }
-  }
-
-  const chat = await kv.hgetall<Chat>(`chat:${id}`)
-
-  if (!chat || chat.userId !== session.user.id) {
-    return {
-      error: 'Something went wrong',
-    }
-  }
-
-  const payload = {
-    ...chat,
-    sharePath: `/share/${chat.id}`,
-  }
-
-  await kv.hmset(`chat:${chat.id}`, payload)
-
-  return payload
-}

app/layout.tsx

@@ -4,9 +4,9 @@ import { GeistMono } from 'geist/font/mono';
 
 import '@/app/globals.css';
 import { cn } from '@/lib/utils';
-import { TailwindIndicator } from '@/components/tailwind-indicator';
-import { Providers } from '@/components/providers';
-import { Header } from '@/components/header';
+import { TailwindIndicator } from '@/components/TailwindIndicator';
+import { Providers } from '@/components/Providers';
+import { Header } from '@/components/Header';
 
 export const metadata = {
 	metadataBase: new URL(`https://${process.env.VERCEL_URL}`),

app/sign-in/page.tsx

@@ -1,7 +1,7 @@
 import { auth } from '@/auth';
-import { LoginButton } from '@/components/login-button';
+import { LoginButton } from '@/components/LoginButton';
 import { redirect } from 'next/navigation';
-import { ThemeToggle } from '../../components/theme-toggle';
+import { ThemeToggle } from '../../components/ThemeToggle';
 
 export default async function SignInPage() {
 	const session = await auth();

components/{login-button.tsx → LoginButton.tsx}

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { signIn } from 'next-auth/react';
 
 import { cn } from '@/lib/utils';
-import { Button, type ButtonProps } from '@/components/ui/button';
-import { IconGitHub, IconSpinner, IconGoogle } from '@/components/ui/icons';
+import { Button, type ButtonProps } from '@/components/ui/Button';
+import { IconGitHub, IconSpinner, IconGoogle } from '@/components/ui/Icons';
 
 interface LoginButtonProps extends ButtonProps {
 	oauth: 'github' | 'google';

components/TailwindIndicator.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 size-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>
+	);
+}

components/{theme-toggle.tsx → ThemeToggle.tsx}

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { useTheme } from 'next-themes';
 
-import { Button } from '@/components/ui/button';
-import { IconMoon, IconSun } from '@/components/ui/icons';
+import { Button } from '@/components/ui/Button';
+import { IconMoon, IconSun } from '@/components/ui/Icons';
 
 export function ThemeToggle() {
 	const { setTheme, theme } = useTheme();

components/{user-menu.tsx → UserMenu.tsx}

@@ -4,15 +4,15 @@ import Image from 'next/image';
 import { type Session } from 'next-auth';
 import { signOut } from 'next-auth/react';
 
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/Button';
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { IconExternalLink } from '@/components/ui/icons';
+} from '@/components/ui/DropdownMenu';
+import { IconExternalLink } from '@/components/ui/Icons';
 
 export interface UserMenuProps {
 	user: Session['user'];

components/button-scroll-to-bottom.tsx

@@ -1,34 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-import { useAtBottom } from '@/lib/hooks/use-at-bottom'
-import { Button, type ButtonProps } from '@/components/ui/button'
-import { IconArrowDown } from '@/components/ui/icons'
-
-export function ButtonScrollToBottom({ className, ...props }: ButtonProps) {
-  const isAtBottom = useAtBottom()
-
-  return (
-    <Button
-      variant="outline"
-      size="icon"
-      className={cn(
-        'absolute right-4 top-1 z-10 bg-background transition-opacity duration-300 sm:right-8 md:top-2',
-        isAtBottom ? 'opacity-0' : 'opacity-100',
-        className
-      )}
-      onClick={() =>
-        window.scrollTo({
-          top: document.body.offsetHeight,
-          behavior: 'smooth'
-        })
-      }
-      {...props}
-    >
-      <IconArrowDown />
-      <span className="sr-only">Scroll to bottom</span>
-    </Button>
-  )
-}

components/chat-history.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react'
-
-import Link from 'next/link'
-
-import { cn } from '@/lib/utils'
-import { SidebarList } from '@/components/sidebar-list'
-import { buttonVariants } from '@/components/ui/button'
-import { IconPlus } from '@/components/ui/icons'
-
-interface ChatHistoryProps {
-  userId?: string
-}
-
-export async function ChatHistory({ userId }: ChatHistoryProps) {
-  return (
-    <div className="flex flex-col h-full">
-      <div className="px-2 my-4">
-        <Link
-          href="/"
-          className={cn(
-            buttonVariants({ variant: 'outline' }),
-            'h-10 w-full justify-start bg-zinc-50 px-4 shadow-none transition-colors hover:bg-zinc-200/40 dark:bg-zinc-900 dark:hover:bg-zinc-300/10'
-          )}
-        >
-          <IconPlus className="-translate-x-2 stroke-2" />
-          New Chat
-        </Link>
-      </div>
-      <React.Suspense
-        fallback={
-          <div className="flex flex-col flex-1 px-4 space-y-4 overflow-auto">
-            {Array.from({ length: 10 }).map((_, i) => (
-              <div
-                key={i}
-                className="w-full h-6 rounded-md shrink-0 animate-pulse bg-zinc-200 dark:bg-zinc-800"
-              />
-            ))}
-          </div>
-        }
-      >
-        {/* @ts-ignore */}
-        <SidebarList userId={userId} />
-      </React.Suspense>
-    </div>
-  )
-}

components/chat-scroll-anchor.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useInView } from 'react-intersection-observer'
-
-import { useAtBottom } from '@/lib/hooks/use-at-bottom'
-
-interface ChatScrollAnchorProps {
-  trackVisibility?: boolean
-}
-
-export function ChatScrollAnchor({ trackVisibility }: ChatScrollAnchorProps) {
-  const isAtBottom = useAtBottom()
-  const { ref, entry, inView } = useInView({
-    trackVisibility,
-    delay: 100,
-    rootMargin: '0px 0px -150px 0px'
-  })
-
-  React.useEffect(() => {
-    if (isAtBottom && trackVisibility && !inView) {
-      entry?.target.scrollIntoView({
-        block: 'start'
-      })
-    }
-  }, [inView, entry, isAtBottom, trackVisibility])
-
-  return <div ref={ref} className="h-px w-full" />
-}

components/chat-share-dialog.tsx

@@ -1,106 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { type DialogProps } from '@radix-ui/react-dialog';
-import { toast } from 'react-hot-toast';
-
-import { ServerActionResult, type Chat } from '@/lib/types';
-import { Button } from '@/components/ui/button';
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from '@/components/ui/dialog';
-import { IconSpinner } from '@/components/ui/icons';
-import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard';
-
-interface ChatShareDialogProps extends DialogProps {
-	chat: Pick<Chat, 'id' | 'title' | 'messages'>;
-	shareChat: (id: string) => ServerActionResult<Chat>;
-	onCopy: () => void;
-}
-
-export function ChatShareDialog({
-	chat,
-	shareChat,
-	onCopy,
-	...props
-}: ChatShareDialogProps) {
-	const { copyToClipboard } = useCopyToClipboard({ timeout: 1000 });
-	const [isSharePending, startShareTransition] = React.useTransition();
-
-	const copyShareLink = React.useCallback(
-		async (chat: Chat) => {
-			if (!chat.sharePath) {
-				return toast.error('Could not copy share link to clipboard');
-			}
-
-			const url = new URL(window.location.href);
-			url.pathname = chat.sharePath;
-			copyToClipboard(url.toString());
-			onCopy();
-			toast.success('Share link copied to clipboard', {
-				style: {
-					borderRadius: '10px',
-					background: '#333',
-					color: '#fff',
-					fontSize: '14px',
-				},
-				iconTheme: {
-					primary: 'white',
-					secondary: 'black',
-				},
-			});
-		},
-		[copyToClipboard, onCopy],
-	);
-
-	return (
-		<Dialog {...props}>
-			<DialogContent>
-				<DialogHeader>
-					<DialogTitle>Share link to chat</DialogTitle>
-					<DialogDescription>
-						Anyone with the URL will be able to view the shared chat.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="p-4 space-y-1 text-sm border rounded-md">
-					<div className="font-medium">{chat.title}</div>
-					<div className="text-muted-foreground">
-						{chat.messages.length} messages
-					</div>
-				</div>
-				<DialogFooter className="items-center">
-					<Button
-						disabled={isSharePending}
-						onClick={() => {
-							// @ts-ignore
-							startShareTransition(async () => {
-								const result = await shareChat(chat.id);
-
-								if (result && 'error' in result) {
-									toast.error(result.error);
-									return;
-								}
-
-								copyShareLink(result);
-							});
-						}}
-					>
-						{isSharePending ? (
-							<>
-								<IconSpinner className="mr-2 animate-spin" />
-								Copying...
-							</>
-						) : (
-							<>Copy link</>
-						)}
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-}

components/chat/ButtonScrollToBottom.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import { useAtBottom } from '@/lib/hooks/useAtBottom';
+import { Button, type ButtonProps } from '@/components/ui/Button';
+import { IconArrowDown } from '@/components/ui/Icons';
+
+export function ButtonScrollToBottom({ className, ...props }: ButtonProps) {
+	const isAtBottom = useAtBottom();
+
+	return (
+		<Button
+			variant="outline"
+			size="icon"
+			className={cn(
+				'absolute right-4 top-1 z-10 bg-background transition-opacity duration-300 sm:right-8 md:top-2',
+				isAtBottom ? 'opacity-0' : 'opacity-100',
+				className,
+			)}
+			onClick={() =>
+				window.scrollTo({
+					top: document.body.offsetHeight,
+					behavior: 'smooth',
+				})
+			}
+			{...props}
+		>
+			<IconArrowDown />
+			<span className="sr-only">Scroll to bottom</span>
+		</Button>
+	);
+}

components/chat/ChatList.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Separator } from '@/components/ui/separator';
-import { ChatMessage } from '@/components/chat-message';
+import { Separator } from '@/components/ui/Separator';
+import { ChatMessage } from '@/components/chat/ChatMessage';
 import { MessageWithSelectedDataset } from '../../lib/types';
 
 export interface ChatList {

components/{chat-message.tsx → chat/ChatMessage.tsx}

@@ -5,11 +5,11 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
 import { cn } from '@/lib/utils';
-import { CodeBlock } from '@/components/ui/codeblock';
-import { MemoizedReactMarkdown } from '@/components/markdown';
-import { IconOpenAI, IconUser } from '@/components/ui/icons';
-import { ChatMessageActions } from '@/components/chat-message-actions';
-import { MessageWithSelectedDataset } from '../lib/types';
+import { CodeBlock } from '@/components/ui/CodeBlock';
+import { MemoizedReactMarkdown } from '@/components/chat/MemoizedReactMarkdown';
+import { IconOpenAI, IconUser } from '@/components/ui/Icons';
+import { ChatMessageActions } from '@/components/chat/ChatMessageActions';
+import { MessageWithSelectedDataset } from '../../lib/types';
 
 export interface ChatMessageProps {
 	message: MessageWithSelectedDataset;

components/{chat-message-actions.tsx → chat/ChatMessageActions.tsx}

@@ -2,11 +2,11 @@
 
 import { type Message } from 'ai';
 
-import { Button } from '@/components/ui/button';
-import { IconCheck, IconCopy } from '@/components/ui/icons';
-import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard';
+import { Button } from '@/components/ui/Button';
+import { IconCheck, IconCopy } from '@/components/ui/Icons';
+import { useCopyToClipboard } from '@/lib/hooks/useCopyToClipboard';
 import { cn } from '@/lib/utils';
-import { MessageWithSelectedDataset } from '../lib/types';
+import { MessageWithSelectedDataset } from '../../lib/types';
 
 interface ChatMessageActionsProps extends React.ComponentProps<'div'> {
 	message: MessageWithSelectedDataset;

components/{chat-panel.tsx → chat/ChatPanel.tsx}

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { type UseChatHelpers } from 'ai/react';
 
-import { shareChat } from '@/app/actions';
-import { Button } from '@/components/ui/button';
-import { PromptForm } from '@/components/prompt-form';
-import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom';
-import { IconRefresh, IconShare, IconStop } from '@/components/ui/icons';
-import { ChatShareDialog } from '@/components/chat-share-dialog';
-import { MessageWithSelectedDataset } from '../lib/types';
+import { Button } from '@/components/ui/Button';
+import { PromptForm } from '@/components/chat/PromptForm';
+import { ButtonScrollToBottom } from '@/components/chat/ButtonScrollToBottom';
+import { IconRefresh, IconShare, IconStop } from '@/components/ui/Icons';
+import { MessageWithSelectedDataset } from '../../lib/types';
 
 export interface ChatPanelProps
 	extends Pick<
@@ -53,28 +51,6 @@ export function ChatPanel({
 									<IconRefresh className="mr-2" />
 									Regenerate response
 								</Button>
-								{/* {id && title ? (
-									<>
-										<Button
-											variant="outline"
-											onClick={() => setShareDialogOpen(true)}
-										>
-											<IconShare className="mr-2" />
-											Share
-										</Button>
-										<ChatShareDialog
-											open={shareDialogOpen}
-											onOpenChange={setShareDialogOpen}
-											onCopy={() => setShareDialogOpen(false)}
-											shareChat={shareChat}
-											chat={{
-												id,
-												title,
-												messages,
-											}}
-										/>
-									</>
-								) : null} */}
 							</div>
 						)
 					)}

components/chat/ChatScrollAnchor.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import { useAtBottom } from '@/lib/hooks/useAtBottom';
+
+interface ChatScrollAnchorProps {
+	trackVisibility?: boolean;
+}
+
+export function ChatScrollAnchor({ trackVisibility }: ChatScrollAnchorProps) {
+	const isAtBottom = useAtBottom();
+	const { ref, entry, inView } = useInView({
+		trackVisibility,
+		delay: 100,
+		rootMargin: '0px 0px -150px 0px',
+	});
+
+	React.useEffect(() => {
+		if (isAtBottom && trackVisibility && !inView) {
+			entry?.target.scrollIntoView({
+				block: 'start',
+			});
+		}
+	}, [inView, entry, isAtBottom, trackVisibility]);
+
+	return <div ref={ref} className="h-px w-full" />;
+}

components/{empty-screen.tsx → chat/EmptyScreen.tsx}

@@ -1,8 +1,8 @@
 import { useAtom } from 'jotai';
 import { useDropzone } from 'react-dropzone';
-import { datasetAtom } from '../state';
+import { datasetAtom } from '../../state';
 import Image from 'next/image';
-import useImageUpload from '../lib/hooks/useImageUpload';
+import useImageUpload from '../../lib/hooks/useImageUpload';
 
 const examples = [
 	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',

components/chat/MemoizedReactMarkdown.tsx

@@ -0,0 +1,9 @@
+import { FC, memo } from 'react';
+import ReactMarkdown, { Options } from 'react-markdown';
+
+export const MemoizedReactMarkdown: FC<Options> = memo(
+	ReactMarkdown,
+	(prevProps, nextProps) =>
+		prevProps.children === nextProps.children &&
+		prevProps.className === nextProps.className,
+);

components/{prompt-form.tsx → chat/PromptForm.tsx}

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import Textarea from 'react-textarea-autosize';
 import { UseChatHelpers } from 'ai/react';
-import { useEnterSubmit } from '@/lib/hooks/use-enter-submit';
+import { useEnterSubmit } from '@/lib/hooks/useEnterSubmit';
 import { cn } from '@/lib/utils';
-import { Button, buttonVariants } from '@/components/ui/button';
+import { Button, buttonVariants } from '@/components/ui/Button';
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { IconArrowElbow, IconPlus } from '@/components/ui/icons';
+} from '@/components/ui/Tooltip';
+import { IconArrowElbow, IconPlus } from '@/components/ui/Icons';
 import { useRouter } from 'next/navigation';
 
 export interface PromptProps

components/chat/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 import { cn } from '@/lib/utils';
 import { ChatList } from '@/components/chat/ChatList';
-import { ChatPanel } from '@/components/chat-panel';
-import { ChatScrollAnchor } from '@/components/chat-scroll-anchor';
+import { ChatPanel } from '@/components/chat/ChatPanel';
+import { ChatScrollAnchor } from '@/components/chat/ChatScrollAnchor';
 import ImageList from './ImageList';
 import useChatWithDataset from '../../lib/hooks/useChatWithDataset';
 

components/clear-history.tsx

@@ -1,77 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useRouter } from 'next/navigation'
-import { toast } from 'react-hot-toast'
-
-import { ServerActionResult } from '@/lib/types'
-import { Button } from '@/components/ui/button'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger
-} from '@/components/ui/alert-dialog'
-import { IconSpinner } from '@/components/ui/icons'
-
-interface ClearHistoryProps {
-  isEnabled: boolean
-  clearChats: () => ServerActionResult<void>
-}
-
-export function ClearHistory({
-  isEnabled = false,
-  clearChats
-}: ClearHistoryProps) {
-  const [open, setOpen] = React.useState(false)
-  const [isPending, startTransition] = React.useTransition()
-  const router = useRouter()
-
-  return (
-    <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogTrigger asChild>
-        <Button variant="ghost" disabled={!isEnabled || isPending}>
-          {isPending && <IconSpinner className="mr-2" />}
-          Clear history
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This will permanently delete your chat history and remove your data
-            from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            disabled={isPending}
-            onClick={event => {
-              event.preventDefault()
-              startTransition(() => {
-                clearChats().then(result => {
-                  if (result && 'error' in result) {
-                    toast.error(result.error)
-                    return
-                  }
-
-                  setOpen(false)
-                  router.push('/')
-                })
-              })
-            }}
-          >
-            {isPending && <IconSpinner className="mr-2 animate-spin" />}
-            Delete
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}

components/external-link.tsx

@@ -1,29 +0,0 @@
-export function ExternalLink({
-  href,
-  children
-}: {
-  href: string
-  children: React.ReactNode
-}) {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      className="inline-flex flex-1 justify-center gap-1 leading-4 hover:underline"
-    >
-      <span>{children}</span>
-      <svg
-        aria-hidden="true"
-        height="7"
-        viewBox="0 0 6 6"
-        width="7"
-        className="opacity-70"
-      >
-        <path
-          d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z"
-          fill="currentColor"
-        ></path>
-      </svg>
-    </a>
-  )
-}

components/header.tsx

@@ -1,73 +1,34 @@
-import * as React from 'react'
-import Link from 'next/link'
+import * as React from 'react';
+import Link from 'next/link';
 
-import { cn } from '@/lib/utils'
-import { auth } from '@/auth'
-import { Button, buttonVariants } from '@/components/ui/button'
-import {
-  IconGitHub,
-  IconNextChat,
-  IconSeparator,
-  IconVercel
-} from '@/components/ui/icons'
-import { UserMenu } from '@/components/user-menu'
-import { SidebarMobile } from './sidebar-mobile'
-import { SidebarToggle } from './sidebar-toggle'
-// import { ChatHistory } from './chat-history'
+import { auth } from '@/auth';
+import { Button } from '@/components/ui/Button';
+import { UserMenu } from '@/components/UserMenu';
 
 async function UserOrLogin() {
-  const session = await auth()
-  return (
-    <>
-      {/* {session?.user ? (
-        <>
-          <SidebarMobile>
-            <ChatHistory userId={session.user.id} />
-          </SidebarMobile>
-          <SidebarToggle />
-        </>
-      ) : ( */}
-      {/* <Link href="/" target="_blank" rel="nofollow">
-        <IconNextChat className="size-6 mr-2 dark:hidden" inverted />
-        <IconNextChat className="hidden size-6 mr-2 dark:block" />
-      </Link> */}
-      {/* )} */}
-      <div className="flex items-center">
-        {/* <IconSeparator className="size-6 text-muted-foreground/50" /> */}
-        {session?.user ? (
-          <UserMenu user={session.user} />
-        ) : (
-          <Button variant="link" asChild className="-ml-2">
-            <Link href="/sign-in?callbackUrl=/">Login</Link>
-          </Button>
-        )}
-      </div>
-    </>
-  )
+	const session = await auth();
+	return (
+		<>
+			<div className="flex items-center">
+				{/* <IconSeparator className="size-6 text-muted-foreground/50" /> */}
+				{session?.user ? (
+					<UserMenu user={session.user} />
+				) : (
+					<Button variant="link" asChild className="-ml-2">
+						<Link href="/sign-in?callbackUrl=/">Login</Link>
+					</Button>
+				)}
+			</div>
+		</>
+	);
 }
 
 export function Header() {
-  return (
-    <header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
-      <div className="flex items-center">
-        {/* <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
-          <UserOrLogin />
-        </React.Suspense> */}
-      </div>
-      <div className="flex items-center justify-end space-x-2">
-        <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
-          <UserOrLogin />
-        </React.Suspense>
-        {/* <a
-          target="_blank"
-          href="https://github.com/vercel/nextjs-ai-chatbot/"
-          rel="noopener noreferrer"
-          className={cn(buttonVariants({ variant: 'outline' }))}
-        >
-          <IconGitHub />
-          <span className="hidden ml-2 md:flex">GitHub</span>
-        </a> */}
-      </div>
-    </header>
-  )
+	return (
+		<header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
+			<React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
+				<UserOrLogin />
+			</React.Suspense>
+		</header>
+	);
 }

components/markdown.tsx

@@ -1,9 +0,0 @@
-import { FC, memo } from 'react'
-import ReactMarkdown, { Options } from 'react-markdown'
-
-export const MemoizedReactMarkdown: FC<Options> = memo(
-  ReactMarkdown,
-  (prevProps, nextProps) =>
-    prevProps.children === nextProps.children &&
-    prevProps.className === nextProps.className
-)

components/providers.tsx

@@ -1,17 +1,14 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
-import { ThemeProviderProps } from 'next-themes/dist/types'
-import { SidebarProvider } from '@/lib/hooks/use-sidebar'
-import { TooltipProvider } from '@/components/ui/tooltip'
+import * as React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { ThemeProviderProps } from 'next-themes/dist/types';
+import { TooltipProvider } from '@/components/ui/Tooltip';
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
-  return (
-    <NextThemesProvider {...props}>
-      <SidebarProvider>
-        <TooltipProvider>{children}</TooltipProvider>
-      </SidebarProvider>
-    </NextThemesProvider>
-  )
+	return (
+		<NextThemesProvider {...props}>
+			<TooltipProvider>{children}</TooltipProvider>
+		</NextThemesProvider>
+	);
 }

components/sidebar-actions.tsx

@@ -1,125 +0,0 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-import * as React from 'react'
-import { toast } from 'react-hot-toast'
-
-import { ServerActionResult, type Chat } from '@/lib/types'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
-import { IconShare, IconSpinner, IconTrash } from '@/components/ui/icons'
-import { ChatShareDialog } from '@/components/chat-share-dialog'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from '@/components/ui/tooltip'
-
-interface SidebarActionsProps {
-  chat: Chat
-  removeChat: (args: { id: string; path: string }) => ServerActionResult<void>
-  shareChat: (id: string) => ServerActionResult<Chat>
-}
-
-export function SidebarActions({
-  chat,
-  removeChat,
-  shareChat
-}: SidebarActionsProps) {
-  const router = useRouter()
-  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false)
-  const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
-  const [isRemovePending, startRemoveTransition] = React.useTransition()
-
-  return (
-    <>
-      <div className="space-x-1">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              className="size-6 p-0 hover:bg-background"
-              onClick={() => setShareDialogOpen(true)}
-            >
-              <IconShare />
-              <span className="sr-only">Share</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Share chat</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              className="size-6 p-0 hover:bg-background"
-              disabled={isRemovePending}
-              onClick={() => setDeleteDialogOpen(true)}
-            >
-              <IconTrash />
-              <span className="sr-only">Delete</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Delete chat</TooltipContent>
-        </Tooltip>
-      </div>
-      <ChatShareDialog
-        chat={chat}
-        shareChat={shareChat}
-        open={shareDialogOpen}
-        onOpenChange={setShareDialogOpen}
-        onCopy={() => setShareDialogOpen(false)}
-      />
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete your chat message and remove your
-              data from our servers.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isRemovePending}>
-              Cancel
-            </AlertDialogCancel>
-            <AlertDialogAction
-              disabled={isRemovePending}
-              onClick={event => {
-                event.preventDefault()
-                // @ts-ignore
-                startRemoveTransition(async () => {
-                  const result = await removeChat({
-                    id: chat.id,
-                    path: chat.path
-                  })
-
-                  if (result && 'error' in result) {
-                    toast.error(result.error)
-                    return
-                  }
-
-                  setDeleteDialogOpen(false)
-                  router.refresh()
-                  router.push('/')
-                  toast.success('Chat deleted')
-                })
-              }}
-            >
-              {isRemovePending && <IconSpinner className="mr-2 animate-spin" />}
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  )
-}

components/sidebar-desktop.tsx

@@ -1,21 +0,0 @@
-import { Sidebar } from '@/components/sidebar'
-
-import { auth } from '@/auth'
-import { ChatHistory } from '@/components/chat-history'
-
-export async function SidebarDesktop() {
-  const session = await auth()
-
-  if (!session?.user?.id) {
-    return null
-  }
-
-  return null
-
-  // return (
-  //   <Sidebar className="peer absolute inset-y-0 z-30 hidden -translate-x-full border-r bg-muted duration-300 ease-in-out data-[state=open]:translate-x-0 lg:flex lg:w-[250px] xl:w-[300px]">
-  //     {/* @ts-ignore */}
-  //     <ChatHistory userId={session.user.id} />
-  //   </Sidebar>
-  // )
-}

components/sidebar-footer.tsx

@@ -1,16 +0,0 @@
-import { cn } from '@/lib/utils'
-
-export function SidebarFooter({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      className={cn('flex items-center justify-between p-4', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}

components/sidebar-item.tsx

@@ -1,124 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-
-import { motion } from 'framer-motion'
-
-import { buttonVariants } from '@/components/ui/button'
-import { IconMessage, IconUsers } from '@/components/ui/icons'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from '@/components/ui/tooltip'
-import { useLocalStorage } from '@/lib/hooks/use-local-storage'
-import { type Chat } from '@/lib/types'
-import { cn } from '@/lib/utils'
-
-interface SidebarItemProps {
-  index: number
-  chat: Chat
-  children: React.ReactNode
-}
-
-export function SidebarItem({ index, chat, children }: SidebarItemProps) {
-  const pathname = usePathname()
-
-  const isActive = pathname === chat.path
-  const [newChatId, setNewChatId] = useLocalStorage('newChatId', null)
-  const shouldAnimate = index === 0 && isActive && newChatId
-
-  if (!chat?.id) return null
-
-  return (
-    <motion.div
-      className="relative h-8"
-      variants={{
-        initial: {
-          height: 0,
-          opacity: 0
-        },
-        animate: {
-          height: 'auto',
-          opacity: 1
-        }
-      }}
-      initial={shouldAnimate ? 'initial' : undefined}
-      animate={shouldAnimate ? 'animate' : undefined}
-      transition={{
-        duration: 0.25,
-        ease: 'easeIn'
-      }}
-    >
-      <div className="absolute left-2 top-1 flex size-6 items-center justify-center">
-        {chat.sharePath ? (
-          <Tooltip delayDuration={1000}>
-            <TooltipTrigger
-              tabIndex={-1}
-              className="focus:bg-muted focus:ring-1 focus:ring-ring"
-            >
-              <IconUsers className="mr-2" />
-            </TooltipTrigger>
-            <TooltipContent>This is a shared chat.</TooltipContent>
-          </Tooltip>
-        ) : (
-          <IconMessage className="mr-2" />
-        )}
-      </div>
-      <Link
-        href={chat.path}
-        className={cn(
-          buttonVariants({ variant: 'ghost' }),
-          'group w-full px-8 transition-colors hover:bg-zinc-200/40 dark:hover:bg-zinc-300/10',
-          isActive && 'bg-zinc-200 pr-16 font-semibold dark:bg-zinc-800'
-        )}
-      >
-        <div
-          className="relative max-h-5 flex-1 select-none overflow-hidden text-ellipsis break-all"
-          title={chat.title}
-        >
-          <span className="whitespace-nowrap">
-            {shouldAnimate ? (
-              chat.title.split('').map((character, index) => (
-                <motion.span
-                  key={index}
-                  variants={{
-                    initial: {
-                      opacity: 0,
-                      x: -100
-                    },
-                    animate: {
-                      opacity: 1,
-                      x: 0
-                    }
-                  }}
-                  initial={shouldAnimate ? 'initial' : undefined}
-                  animate={shouldAnimate ? 'animate' : undefined}
-                  transition={{
-                    duration: 0.25,
-                    ease: 'easeIn',
-                    delay: index * 0.05,
-                    staggerChildren: 0.05
-                  }}
-                  onAnimationComplete={() => {
-                    if (index === chat.title.length - 1) {
-                      setNewChatId(null)
-                    }
-                  }}
-                >
-                  {character}
-                </motion.span>
-              ))
-            ) : (
-              <span>{chat.title}</span>
-            )}
-          </span>
-        </div>
-      </Link>
-      {isActive && <div className="absolute right-2 top-1">{children}</div>}
-    </motion.div>
-  )
-}

components/sidebar-items.tsx

@@ -1,42 +0,0 @@
-'use client'
-
-import { Chat } from '@/lib/types'
-import { AnimatePresence, motion } from 'framer-motion'
-
-import { removeChat, shareChat } from '@/app/actions'
-
-import { SidebarActions } from '@/components/sidebar-actions'
-import { SidebarItem } from '@/components/sidebar-item'
-
-interface SidebarItemsProps {
-  chats?: Chat[]
-}
-
-export function SidebarItems({ chats }: SidebarItemsProps) {
-  if (!chats?.length) return null
-
-  return (
-    <AnimatePresence>
-      {chats.map(
-        (chat, index) =>
-          chat && (
-            <motion.div
-              key={chat?.id}
-              exit={{
-                opacity: 0,
-                height: 0
-              }}
-            >
-              <SidebarItem index={index} chat={chat}>
-                <SidebarActions
-                  chat={chat}
-                  removeChat={removeChat}
-                  shareChat={shareChat}
-                />
-              </SidebarItem>
-            </motion.div>
-          )
-      )}
-    </AnimatePresence>
-  )
-}

components/sidebar-list.tsx

@@ -1,38 +0,0 @@
-import { clearChats, getChats } from '@/app/actions'
-import { ClearHistory } from '@/components/clear-history'
-import { SidebarItems } from '@/components/sidebar-items'
-import { ThemeToggle } from '@/components/theme-toggle'
-import { cache } from 'react'
-
-interface SidebarListProps {
-  userId?: string
-  children?: React.ReactNode
-}
-
-const loadChats = cache(async (userId?: string) => {
-  return await getChats(userId)
-})
-
-export async function SidebarList({ userId }: SidebarListProps) {
-  const chats = await loadChats(userId)
-
-  return (
-    <div className="flex flex-1 flex-col overflow-hidden">
-      <div className="flex-1 overflow-auto">
-        {chats?.length ? (
-          <div className="space-y-2 px-2">
-            <SidebarItems chats={chats} />
-          </div>
-        ) : (
-          <div className="p-8 text-center">
-            <p className="text-sm text-muted-foreground">No chat history</p>
-          </div>
-        )}
-      </div>
-      <div className="flex items-center justify-between p-4">
-        <ThemeToggle />
-        <ClearHistory clearChats={clearChats} isEnabled={chats?.length > 0} />
-      </div>
-    </div>
-  )
-}

components/sidebar-mobile.tsx

@@ -1,28 +0,0 @@
-'use client'
-
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
-
-import { Sidebar } from '@/components/sidebar'
-import { Button } from '@/components/ui/button'
-
-import { IconSidebar } from '@/components/ui/icons'
-
-interface SidebarMobileProps {
-  children: React.ReactNode
-}
-
-export function SidebarMobile({ children }: SidebarMobileProps) {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="ghost" className="-ml-2 flex size-9 p-0 lg:hidden">
-          <IconSidebar className="size-6" />
-          <span className="sr-only">Toggle Sidebar</span>
-        </Button>
-      </SheetTrigger>
-      <SheetContent className="inset-y-0 flex h-auto w-[300px] flex-col p-0">
-        <Sidebar className="flex">{children}</Sidebar>
-      </SheetContent>
-    </Sheet>
-  )
-}

components/sidebar-toggle.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { useSidebar } from '@/lib/hooks/use-sidebar'
-import { Button } from '@/components/ui/button'
-import { IconSidebar } from '@/components/ui/icons'
-
-export function SidebarToggle() {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      variant="ghost"
-      className="-ml-2 hidden size-9 p-0 lg:flex"
-      onClick={() => {
-        toggleSidebar()
-      }}
-    >
-      <IconSidebar className="size-6" />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-}

components/sidebar.tsx

@@ -1,21 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { useSidebar } from '@/lib/hooks/use-sidebar'
-import { cn } from '@/lib/utils'
-
-export interface SidebarProps extends React.ComponentProps<'div'> {}
-
-export function Sidebar({ className, children }: SidebarProps) {
-  const { isSidebarOpen, isLoading } = useSidebar()
-
-  return (
-    <div
-      data-state={isSidebarOpen && !isLoading ? 'open' : 'closed'}
-      className={cn(className, 'h-full flex-col dark:bg-zinc-950')}
-    >
-      {children}
-    </div>
-  )
-}

components/tailwind-indicator.tsx

@@ -1,14 +0,0 @@
-export function TailwindIndicator() {
-  if (process.env.NODE_ENV === 'production') return null
-
-  return (
-    <div className="fixed bottom-1 left-1 z-50 flex size-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>
-  )
-}

components/ui/DropdownMenu.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubContent = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in 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}
+	/>
+));
+DropdownMenuSubContent.displayName =
+	DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				className,
+			)}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			inset && 'pl-8',
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			'px-2 py-1.5 text-sm font-semibold',
+			inset && 'pl-8',
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn('-mx-1 my-1 h-px bg-muted', className)}
+		{...props}
+	/>
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+			{...props}
+		/>
+	);
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuRadioGroup,
+};

components/ui/alert-dialog.tsx

@@ -1,141 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
-
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = 'AlertDialogHeader'
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = 'AlertDialogFooter'
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold', className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel
-}

components/ui/badge.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground'
-      }
-    },
-    defaultVariants: {
-      variant: 'default'
-    }
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
-}
-
-export { Badge, badgeVariants }

components/ui/button.tsx

@@ -1,57 +1,57 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-md hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'shadow-none hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 shadow-none hover:underline'
-      },
-      size: {
-        default: 'h-8 px-4 py-2',
-        sm: 'h-8 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'size-8 p-0'
-      }
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default'
-    }
-  }
-)
+	'inline-flex items-center justify-center rounded-md text-sm font-medium shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	{
+		variants: {
+			variant: {
+				default:
+					'bg-primary text-primary-foreground shadow-md hover:bg-primary/90',
+				destructive:
+					'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+				outline:
+					'border border-input hover:bg-accent hover:text-accent-foreground',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'shadow-none hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 shadow-none hover:underline',
+			},
+			size: {
+				default: 'h-8 px-4 py-2',
+				sm: 'h-8 rounded-md px-3',
+				lg: 'h-11 rounded-md px-8',
+				icon: 'size-8 p-0',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = 'Button'
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : 'button';
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Button.displayName = 'Button';
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

components/ui/codeblock.tsx

@@ -1,148 +1,148 @@
 // Inspired by Chatbot-UI and modified to fit the needs of this project
 // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Markdown/CodeBlock.tsx
 
-'use client'
+'use client';
 
-import { FC, memo } from 'react'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+import { FC, memo } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
-import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
-import { IconCheck, IconCopy, IconDownload } from '@/components/ui/icons'
-import { Button } from '@/components/ui/button'
+import { useCopyToClipboard } from '@/lib/hooks/useCopyToClipboard';
+import { IconCheck, IconCopy, IconDownload } from '@/components/ui/Icons';
+import { Button } from '@/components/ui/Button';
 
 interface Props {
-  language: string
-  value: string
+	language: string;
+	value: string;
 }
 
 interface languageMap {
-  [key: string]: string | undefined
+	[key: string]: string | undefined;
 }
 
 export const programmingLanguages: languageMap = {
-  javascript: '.js',
-  python: '.py',
-  java: '.java',
-  c: '.c',
-  cpp: '.cpp',
-  'c++': '.cpp',
-  'c#': '.cs',
-  ruby: '.rb',
-  php: '.php',
-  swift: '.swift',
-  'objective-c': '.m',
-  kotlin: '.kt',
-  typescript: '.ts',
-  go: '.go',
-  perl: '.pl',
-  rust: '.rs',
-  scala: '.scala',
-  haskell: '.hs',
-  lua: '.lua',
-  shell: '.sh',
-  sql: '.sql',
-  html: '.html',
-  css: '.css'
-  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
-}
+	javascript: '.js',
+	python: '.py',
+	java: '.java',
+	c: '.c',
+	cpp: '.cpp',
+	'c++': '.cpp',
+	'c#': '.cs',
+	ruby: '.rb',
+	php: '.php',
+	swift: '.swift',
+	'objective-c': '.m',
+	kotlin: '.kt',
+	typescript: '.ts',
+	go: '.go',
+	perl: '.pl',
+	rust: '.rs',
+	scala: '.scala',
+	haskell: '.hs',
+	lua: '.lua',
+	shell: '.sh',
+	sql: '.sql',
+	html: '.html',
+	css: '.css',
+	// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+};
 
 export const generateRandomString = (length: number, lowercase = false) => {
-  const chars = 'ABCDEFGHJKLMNPQRSTUVWXY3456789' // excluding similar looking characters like Z, 2, I, 1, O, 0
-  let result = ''
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length))
-  }
-  return lowercase ? result.toLowerCase() : result
-}
+	const chars = 'ABCDEFGHJKLMNPQRSTUVWXY3456789'; // excluding similar looking characters like Z, 2, I, 1, O, 0
+	let result = '';
+	for (let i = 0; i < length; i++) {
+		result += chars.charAt(Math.floor(Math.random() * chars.length));
+	}
+	return lowercase ? result.toLowerCase() : result;
+};
 
 const CodeBlock: FC<Props> = memo(({ language, value }) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
+	const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
 
-  const downloadAsFile = () => {
-    if (typeof window === 'undefined') {
-      return
-    }
-    const fileExtension = programmingLanguages[language] || '.file'
-    const suggestedFileName = `file-${generateRandomString(
-      3,
-      true
-    )}${fileExtension}`
-    const fileName = window.prompt('Enter file name' || '', suggestedFileName)
+	const downloadAsFile = () => {
+		if (typeof window === 'undefined') {
+			return;
+		}
+		const fileExtension = programmingLanguages[language] || '.file';
+		const suggestedFileName = `file-${generateRandomString(
+			3,
+			true,
+		)}${fileExtension}`;
+		const fileName = window.prompt('Enter file name' || '', suggestedFileName);
 
-    if (!fileName) {
-      // User pressed cancel on prompt.
-      return
-    }
+		if (!fileName) {
+			// User pressed cancel on prompt.
+			return;
+		}
 
-    const blob = new Blob([value], { type: 'text/plain' })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.download = fileName
-    link.href = url
-    link.style.display = 'none'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-  }
+		const blob = new Blob([value], { type: 'text/plain' });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		link.download = fileName;
+		link.href = url;
+		link.style.display = 'none';
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+	};
 
-  const onCopy = () => {
-    if (isCopied) return
-    copyToClipboard(value)
-  }
+	const onCopy = () => {
+		if (isCopied) return;
+		copyToClipboard(value);
+	};
 
-  return (
-    <div className="relative w-full font-sans codeblock bg-zinc-950">
-      <div className="flex items-center justify-between w-full px-6 py-2 pr-4 bg-zinc-800 text-zinc-100">
-        <span className="text-xs lowercase">{language}</span>
-        <div className="flex items-center space-x-1">
-          <Button
-            variant="ghost"
-            className="hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
-            onClick={downloadAsFile}
-            size="icon"
-          >
-            <IconDownload />
-            <span className="sr-only">Download</span>
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
-            onClick={onCopy}
-          >
-            {isCopied ? <IconCheck /> : <IconCopy />}
-            <span className="sr-only">Copy code</span>
-          </Button>
-        </div>
-      </div>
-      <SyntaxHighlighter
-        language={language}
-        style={coldarkDark}
-        PreTag="div"
-        showLineNumbers
-        customStyle={{
-          margin: 0,
-          width: '100%',
-          background: 'transparent',
-          padding: '1.5rem 1rem'
-        }}
-        lineNumberStyle={{
-          userSelect: "none",
-        }}
-        codeTagProps={{
-          style: {
-            fontSize: '0.9rem',
-            fontFamily: 'var(--font-mono)'
-          }
-        }}
-      >
-        {value}
-      </SyntaxHighlighter>
-    </div>
-  )
-})
-CodeBlock.displayName = 'CodeBlock'
+	return (
+		<div className="relative w-full font-sans codeblock bg-zinc-950">
+			<div className="flex items-center justify-between w-full px-6 py-2 pr-4 bg-zinc-800 text-zinc-100">
+				<span className="text-xs lowercase">{language}</span>
+				<div className="flex items-center space-x-1">
+					<Button
+						variant="ghost"
+						className="hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+						onClick={downloadAsFile}
+						size="icon"
+					>
+						<IconDownload />
+						<span className="sr-only">Download</span>
+					</Button>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+						onClick={onCopy}
+					>
+						{isCopied ? <IconCheck /> : <IconCopy />}
+						<span className="sr-only">Copy code</span>
+					</Button>
+				</div>
+			</div>
+			<SyntaxHighlighter
+				language={language}
+				style={coldarkDark}
+				PreTag="div"
+				showLineNumbers
+				customStyle={{
+					margin: 0,
+					width: '100%',
+					background: 'transparent',
+					padding: '1.5rem 1rem',
+				}}
+				lineNumberStyle={{
+					userSelect: 'none',
+				}}
+				codeTagProps={{
+					style: {
+						fontSize: '0.9rem',
+						fontFamily: 'var(--font-mono)',
+					},
+				}}
+			>
+				{value}
+			</SyntaxHighlighter>
+		</div>
+	);
+});
+CodeBlock.displayName = 'CodeBlock';
 
-export { CodeBlock }
+export { CodeBlock };

components/ui/dialog.tsx

@@ -1,122 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-
-import { cn } from '@/lib/utils'
-import { IconClose } from '@/components/ui/icons'
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
-        <IconClose className="size-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = 'DialogHeader'
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = 'DialogFooter'
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription
-}

components/ui/dropdown-menu.tsx

@@ -1,128 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-
-import { cn } from '@/lib/utils'
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in 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}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-sm font-semibold',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuRadioGroup
-}

components/ui/input.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react'
+import * as React from 'react';
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+	extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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}
-      />
-    )
-  }
-)
-Input.displayName = 'Input'
+	({ className, type, ...props }, ref) => {
+		return (
+			<input
+				type={type}
+				className={cn(
+					'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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}
+			/>
+		);
+	},
+);
+Input.displayName = 'Input';
 
-export { Input }
+export { Input };

components/ui/label.tsx

@@ -1,26 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }