done (#4)

app/(logout)/sign-in/page.tsx

@@ -3,16 +3,16 @@ import { LoginButton } from '@/components/LoginButton';
 import { redirect } from 'next/navigation';
 
 export default async function SignInPage() {
-	const session = await auth();
-	// redirect to home if user is already logged in
-	if (session?.user) {
-		redirect('/');
-	}
+  const session = await auth();
+  // redirect to home if user is already logged in
+  if (session?.user) {
+    redirect('/');
+  }
 
-	return (
-		<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2">
-			<LoginButton oauth="google" />
-			<LoginButton oauth="github" />
-		</div>
-	);
+  return (
+    <div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2">
+      <LoginButton oauth="google" />
+      <LoginButton oauth="github" />
+    </div>
+  );
 }

app/(logout)/unauthorized/page.tsx

@@ -4,21 +4,21 @@ import { Button } from '@/components/ui/Button';
 import Link from 'next/link';
 
 export default async function Unauthorized() {
-	const session = await auth();
-	// redirect to home if user is already logged in
-	if (session?.user) {
-		redirect('/');
-	}
+  const session = await auth();
+  // redirect to home if user is already logged in
+  if (session?.user) {
+    redirect('/');
+  }
 
-	return (
-		<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2">
-			<div>
-				You are not authorized to view this page. Please sign in with Landing
-				account to continue.
-			</div>
-			<Button asChild className="mt-16">
-				<Link href="/sign-in">Sign in</Link>
-			</Button>
-		</div>
-	);
+  return (
+    <div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2">
+      <div>
+        You are not authorized to view this page. Please sign in with Landing
+        account to continue.
+      </div>
+      <Button asChild className="mt-16">
+        <Link href="/sign-in">Sign in</Link>
+      </Button>
+    </div>
+  );
 }

app/api/auth/[...nextauth]/route.ts

@@ -1,2 +1,2 @@
-export { GET, POST } from '@/auth'
-export const runtime = 'edge'
+export { GET, POST } from '@/auth';
+export const runtime = 'edge';

app/api/chat/route.ts

@@ -3,9 +3,9 @@ import OpenAI from 'openai';
 
 import { auth } from '@/auth';
 import {
-	ChatCompletionMessageParam,
-	ChatCompletionContentPart,
-	ChatCompletionContentPartImage,
+  ChatCompletionMessageParam,
+  ChatCompletionContentPart,
+  ChatCompletionContentPartImage,
 } from 'openai/resources';
 import { MessageWithSelectedDataset } from '../../../lib/types';
 // import { postAgentChat } from '@/lib/fetch';
@@ -13,56 +13,56 @@ import { MessageWithSelectedDataset } from '../../../lib/types';
 export const runtime = 'edge';
 
 const openai = new OpenAI({
-	apiKey: process.env.OPENAI_API_KEY,
+  apiKey: process.env.OPENAI_API_KEY,
 });
 
 export async function POST(req: Request) {
-	const json = await req.json();
-	const { messages } = json as {
-		messages: MessageWithSelectedDataset[];
-	};
-	console.log('[Ming] ~ POST ~ messages:', messages);
+  const json = await req.json();
+  const { messages } = json as {
+    messages: MessageWithSelectedDataset[];
+  };
+  console.log('[Ming] ~ POST ~ messages:', messages);
 
-	const session = await auth();
-	if (!session?.user?.email) {
-		return new Response('Unauthorized', {
-			status: 401,
-		});
-	}
+  const session = await auth();
+  if (!session?.user?.email) {
+    return new Response('Unauthorized', {
+      status: 401,
+    });
+  }
 
-	const formattedMessage: ChatCompletionMessageParam[] = messages.map(
-		message => {
-			const { dataset, ...rest } = message;
+  const formattedMessage: ChatCompletionMessageParam[] = messages.map(
+    message => {
+      const { dataset, ...rest } = message;
 
-			const contentWithImage: ChatCompletionContentPart[] = [
-				{
-					type: 'text',
-					text: message.content as string,
-				},
-				...(dataset ?? []).map(
-					entity =>
-						({
-							type: 'image_url',
-							image_url: { url: entity.url },
-						}) satisfies ChatCompletionContentPartImage,
-				),
-			];
-			return {
-				role: 'user',
-				content: contentWithImage,
-			};
-		},
-	);
+      const contentWithImage: ChatCompletionContentPart[] = [
+        {
+          type: 'text',
+          text: message.content as string,
+        },
+        ...(dataset ?? []).map(
+          entity =>
+            ({
+              type: 'image_url',
+              image_url: { url: entity.url },
+            }) satisfies ChatCompletionContentPartImage,
+        ),
+      ];
+      return {
+        role: 'user',
+        content: contentWithImage,
+      };
+    },
+  );
 
-	const res = await openai.chat.completions.create({
-		model: 'gpt-4-vision-preview',
-		messages: formattedMessage,
-		temperature: 0.3,
-		stream: true,
-		max_tokens: 300,
-	});
+  const res = await openai.chat.completions.create({
+    model: 'gpt-4-vision-preview',
+    messages: formattedMessage,
+    temperature: 0.3,
+    stream: true,
+    max_tokens: 300,
+  });
 
-	const stream = OpenAIStream(res);
+  const stream = OpenAIStream(res);
 
-	return new StreamingTextResponse(stream);
+  return new StreamingTextResponse(stream);
 }

app/api/upload/route.ts

@@ -4,29 +4,29 @@ import { kv } from '@vercel/kv';
 import { format } from 'date-fns';
 
 export async function POST(req: Request) {
-	const session = await auth();
-	console.log('[Ming] ~ POST ~ session:', session);
-	const email = session?.user?.email;
-	if (!email) {
-		return new Response('Unauthorized', {
-			status: 401,
-		});
-	}
+  const session = await auth();
+  console.log('[Ming] ~ POST ~ session:', session);
+  const email = session?.user?.email;
+  if (!email) {
+    return new Response('Unauthorized', {
+      status: 401,
+    });
+  }
 
-	const json = await req.json();
-	console.log('[Ming] ~ POST ~ json:', json);
+  const json = await req.json();
+  console.log('[Ming] ~ POST ~ json:', json);
 
-	const id = nanoid();
+  const id = nanoid();
 
-	await kv.hmset(`chat:${id}`, json);
-	await kv.zadd(`user:chat:${email}`, {
-		score: Date.now(),
-		member: `chat:${id}`,
-	});
-	await kv.zadd('user:chat:all', {
-		score: Date.now(),
-		member: `chat:${id}`,
-	});
+  await kv.hmset(`chat:${id}`, json);
+  await kv.zadd(`user:chat:${email}`, {
+    score: Date.now(),
+    member: `chat:${id}`,
+  });
+  await kv.zadd('user:chat:all', {
+    score: Date.now(),
+    member: `chat:${id}`,
+  });
 
-	return 'success';
+  return 'success';
 }

app/chat/layout.tsx

@@ -3,25 +3,25 @@ import Loading from '@/components/ui/Loading';
 import { Suspense } from 'react';
 
 interface ChatLayoutProps {
-	children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 export default async function Layout({ children }: ChatLayoutProps) {
-	return (
-		<div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
-			<div
-				data-state="open"
-				className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out translate-x-0 lg:flex lg:w-[250px] xl:w-[300px] h-full flex-col dark:bg-zinc-950 overflow-auto py-2"
-			>
-				<Suspense fallback={<Loading />}>
-					<ChatSidebarList />
-				</Suspense>
-			</div>
-			<Suspense fallback={<Loading />}>
-				<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>
-			</Suspense>
-		</div>
-	);
+  return (
+    <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
+      <div
+        data-state="open"
+        className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out translate-x-0 lg:flex lg:w-[250px] xl:w-[300px] h-full flex-col dark:bg-zinc-950 overflow-auto py-2"
+      >
+        <Suspense fallback={<Loading />}>
+          <ChatSidebarList />
+        </Suspense>
+      </div>
+      <Suspense fallback={<Loading />}>
+        <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>
+      </Suspense>
+    </div>
+  );
 }

app/chat/page.tsx

@@ -2,6 +2,6 @@ import { nanoid } from '@/lib/utils';
 import { Chat } from '@/components/chat';
 
 export default function Page() {
-	const id = nanoid();
-	return <Chat id={id} />;
+  const id = nanoid();
+  return <Chat id={id} />;
 }

app/globals.css

@@ -3,110 +3,110 @@
 @tailwind utilities;
 
 @layer base {
-	:root {
-		--background: 0 0% 100%;
-		--foreground: 240 10% 3.9%;
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
 
-		--muted: 240 4.8% 95.9%;
-		--muted-foreground: 240 3.8% 46.1%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
 
-		--popover: 0 0% 100%;
-		--popover-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
 
-		--card: 0 0% 100%;
-		--card-foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
 
-		--border: 240 5.9% 90%;
-		--input: 240 5.9% 90%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
 
-		--primary: 240 5.9% 10%;
-		--primary-foreground: 0 0% 98%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
 
-		--secondary: 240 4.8% 95.9%;
-		--secondary-foreground: 240 5.9% 10%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
 
-		--accent: 240 4.8% 95.9%;
-		--accent-foreground: ;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: ;
 
-		--destructive: 0 84.2% 60.2%;
-		--destructive-foreground: 0 0% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
 
-		--ring: 240 5% 64.9%;
+    --ring: 240 5% 64.9%;
 
-		--radius: 0.5rem;
-	}
+    --radius: 0.5rem;
+  }
 
-	.dark {
-		--background: 240 10% 3.9%;
-		--foreground: 0 0% 98%;
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
 
-		--muted: 240 3.7% 15.9%;
-		--muted-foreground: 240 5% 64.9%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
 
-		--popover: 240 10% 3.9%;
-		--popover-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
 
-		--card: 240 10% 3.9%;
-		--card-foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
 
-		--border: 240 3.7% 15.9%;
-		--input: 240 3.7% 15.9%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
 
-		--primary: 0 0% 98%;
-		--primary-foreground: 240 5.9% 10%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
 
-		--secondary: 240 3.7% 15.9%;
-		--secondary-foreground: 0 0% 98%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
 
-		--accent: 240 3.7% 15.9%;
-		--accent-foreground: ;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: ;
 
-		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 0 85.7% 97.3%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
 
-		--ring: 240 3.7% 15.9%;
-	}
+    --ring: 240 3.7% 15.9%;
+  }
 }
 
 @layer base {
-	* {
-		@apply border-border;
-	}
-	body {
-		@apply bg-background text-foreground;
-	}
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
 @layer components {
-	.scroll-fade::after {
-		content: '';
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		height: 50px;
-		background: linear-gradient(
-			to bottom,
-			rgba(255, 255, 255, 1),
-			rgba(255, 255, 255, 0)
-		);
-		pointer-events: none;
-	}
-	.scroll-fade:active::after,
-	.scroll-fade:hover::after {
-		background: none;
-	}
-	.image-shadow::after {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		border-radius: 0.5rem;
-		pointer-events: none;
-	}
+  .scroll-fade::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 50px;
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
+    pointer-events: none;
+  }
+  .scroll-fade:active::after,
+  .scroll-fade:hover::after {
+    background: none;
+  }
+  .image-shadow::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    box-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    border-radius: 0.5rem;
+    pointer-events: none;
+  }
 }

app/layout.tsx

@@ -10,54 +10,54 @@ import { Header } from '@/components/Header';
 import { ThemeToggle } from '@/components/ThemeToggle';
 
 export const metadata = {
-	metadataBase: new URL(`https://${process.env.VERCEL_URL}`),
-	title: {
-		default: 'Insight Playground',
-		template: `%s - Insight Playground`,
-	},
-	description: 'By Landing AI',
-	icons: {
-		icon: '/landing.png',
-		shortcut: '/landing.png',
-		apple: '/landing.png',
-	},
+  metadataBase: new URL(`https://${process.env.VERCEL_URL}`),
+  title: {
+    default: 'Insight Playground',
+    template: `%s - Insight Playground`,
+  },
+  description: 'By Landing AI',
+  icons: {
+    icon: '/landing.png',
+    shortcut: '/landing.png',
+    apple: '/landing.png',
+  },
 };
 
 export const viewport = {
-	themeColor: [
-		{ media: '(prefers-color-scheme: light)', color: 'white' },
-		{ media: '(prefers-color-scheme: dark)', color: 'black' },
-	],
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
 };
 
 interface RootLayoutProps {
-	children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {
-	return (
-		<html lang="en" suppressHydrationWarning>
-			<body
-				className={cn(
-					'font-sans antialiased',
-					GeistSans.variable,
-					GeistMono.variable,
-				)}
-			>
-				<Toaster />
-				<Providers
-					attribute="class"
-					defaultTheme="system"
-					enableSystem
-					disableTransitionOnChange
-				>
-					<div className="flex flex-col min-h-screen">
-						<Header />
-						<main className="flex flex-col flex-1 bg-muted/50">{children}</main>
-					</div>
-					<TailwindIndicator />
-				</Providers>
-			</body>
-		</html>
-	);
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={cn(
+          'font-sans antialiased',
+          GeistSans.variable,
+          GeistMono.variable,
+        )}
+      >
+        <Toaster />
+        <Providers
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div className="flex flex-col min-h-screen">
+            <Header />
+            <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
+          </div>
+          <TailwindIndicator />
+        </Providers>
+      </body>
+    </html>
+  );
 }

app/page.tsx

@@ -2,16 +2,16 @@ import { auth } from '@/auth';
 import { redirect } from 'next/navigation';
 
 export default async function Page() {
-	const session = await auth();
-	if (!session) {
-		return null;
-	}
+  const session = await auth();
+  if (!session) {
+    return null;
+  }
 
-	redirect('/chat');
+  redirect('/chat');
 
-	// return (
-	// 	<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2">
-	// 		Welcome to Insight Playground
-	// 	</div>
-	// );
+  // return (
+  // 	<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2">
+  // 		Welcome to Insight Playground
+  // 	</div>
+  // );
 }

app/project/[projectId]/page.tsx

@@ -5,26 +5,26 @@ import Loading from '../../../components/ui/Loading';
 import Chat from '@/components/project/Chat';
 
 interface PageProps {
-	params: {
-		projectId: string;
-	};
+  params: {
+    projectId: string;
+  };
 }
 
 export default async function Page({ params }: PageProps) {
-	const { projectId } = params;
+  const { projectId } = params;
 
-	const mediaList = await fetchProjectMedia({ projectId: Number(projectId) });
+  const mediaList = await fetchProjectMedia({ projectId: Number(projectId) });
 
-	return (
-		<div className="pb-[150px] pt-4 md:pt-10 h-full">
-			<div className="flex h-full">
-				<div className="w-1/2 relative border-r border-gray-300 overflow-auto">
-					<MediaGrid mediaList={mediaList} />
-				</div>
-				<div className="w-1/2 relative overflow-auto">
-					<Chat mediaList={mediaList} />
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="pb-[150px] pt-4 md:pt-10 h-full">
+      <div className="flex h-full">
+        <div className="w-1/2 relative border-r border-gray-300 overflow-auto">
+          <MediaGrid mediaList={mediaList} />
+        </div>
+        <div className="w-1/2 relative overflow-auto">
+          <Chat mediaList={mediaList} />
+        </div>
+      </div>
+    </div>
+  );
 }

app/project/layout.tsx

@@ -3,25 +3,25 @@ import { Suspense } from 'react';
 import Loading from '@/components/ui/Loading';
 
 interface ChatLayoutProps {
-	children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 export default async function Layout({ children }: ChatLayoutProps) {
-	return (
-		<div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
-			<div
-				data-state="open"
-				className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out translate-x-0 lg:flex lg:w-[250px] xl:w-[300px] h-full flex-col dark:bg-zinc-950 overflow-auto py-2"
-			>
-				<Suspense fallback={<Loading />}>
-					<ProjectListSideBar />
-				</Suspense>
-			</div>
-			<Suspense fallback={<Loading />}>
-				<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>
-			</Suspense>
-		</div>
-	);
+  return (
+    <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
+      <div
+        data-state="open"
+        className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out translate-x-0 lg:flex lg:w-[250px] xl:w-[300px] h-full flex-col dark:bg-zinc-950 overflow-auto py-2"
+      >
+        <Suspense fallback={<Loading />}>
+          <ProjectListSideBar />
+        </Suspense>
+      </div>
+      <Suspense fallback={<Loading />}>
+        <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>
+      </Suspense>
+    </div>
+  );
 }

app/project/page.tsx

@@ -1,8 +1,8 @@
 export default function Page() {
-	const content = '<- Select a project from sidebar';
-	return (
-		<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2 font-medium">
-			{content}
-		</div>
-	);
+  const content = '<- Select a project from sidebar';
+  return (
+    <div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2 font-medium">
+      {content}
+    </div>
+  );
 }

auth.ts

@@ -3,51 +3,51 @@ import GitHub from 'next-auth/providers/github';
 import Google from 'next-auth/providers/google';
 
 declare module 'next-auth' {
-	interface Session {
-		user: {
-			/** The user's id. */
-			id: string;
-		} & DefaultSession['user'];
-	}
+  interface Session {
+    user: {
+      /** The user's id. */
+      id: string;
+    } & DefaultSession['user'];
+  }
 }
 
 export const {
-	handlers: { GET, POST },
-	auth,
+  handlers: { GET, POST },
+  auth,
 } = NextAuth({
-	providers: [
-		GitHub,
-		Google({
-			clientId: process.env.GOOGLE_CLIENT_ID!,
-			clientSecret: process.env.GOOGLE_SECRET!,
-		}),
-	],
-	callbacks: {
-		signIn({ profile }) {
-			if (profile?.email?.endsWith('@landing.ai')) {
-				return !!profile;
-			} else {
-				return '/unauthorized';
-			}
-		},
-		jwt({ token, profile }) {
-			if (profile) {
-				token.id = profile.id || profile.sub;
-				token.image = profile.avatar_url || profile.picture;
-			}
-			return token;
-		},
-		session: ({ session, token }) => {
-			if (session?.user && token?.id) {
-				session.user.id = String(token.id);
-			}
-			return session;
-		},
-		authorized({ request, auth }) {
-			return !!auth?.user || request.nextUrl.pathname === '/unauthorized'; // this ensures there is a logged in user for -every- request
-		},
-	},
-	pages: {
-		signIn: '/sign-in', // overrides the next-auth default signin page https://authjs.dev/guides/basics/pages
-	},
+  providers: [
+    GitHub,
+    Google({
+      clientId: process.env.GOOGLE_CLIENT_ID!,
+      clientSecret: process.env.GOOGLE_SECRET!,
+    }),
+  ],
+  callbacks: {
+    signIn({ profile }) {
+      if (profile?.email?.endsWith('@landing.ai')) {
+        return !!profile;
+      } else {
+        return '/unauthorized';
+      }
+    },
+    jwt({ token, profile }) {
+      if (profile) {
+        token.id = profile.id || profile.sub;
+        token.image = profile.avatar_url || profile.picture;
+      }
+      return token;
+    },
+    session: ({ session, token }) => {
+      if (session?.user && token?.id) {
+        session.user.id = String(token.id);
+      }
+      return session;
+    },
+    authorized({ request, auth }) {
+      return !!auth?.user || request.nextUrl.pathname === '/unauthorized'; // this ensures there is a logged in user for -every- request
+    },
+  },
+  pages: {
+    signIn: '/sign-in', // overrides the next-auth default signin page https://authjs.dev/guides/basics/pages
+  },
 });

components/Header.tsx

@@ -7,24 +7,24 @@ import { UserMenu } from '@/components/UserMenu';
 import { IconSeparator } from './ui/Icons';
 
 export async function Header() {
-	const session = await auth();
+  const session = await auth();
 
-	if (!session?.user) {
-		return null;
-	}
+  if (!session?.user) {
+    return null;
+  }
 
-	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">
-			{/* <Button variant="link" asChild className="mr-2">
+  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">
+      {/* <Button variant="link" asChild className="mr-2">
 				<Link href="/project">Projects</Link>
 			</Button> */}
-			<Button variant="link" asChild className="mr-2">
-				<Link href="/chat">Chat</Link>
-			</Button>
-			<IconSeparator className="size-6 text-muted-foreground/50" />
-			<div className="flex items-center">
-				<UserMenu user={session!.user} />
-			</div>
-		</header>
-	);
+      <Button variant="link" asChild className="mr-2">
+        <Link href="/chat">Chat</Link>
+      </Button>
+      <IconSeparator className="size-6 text-muted-foreground/50" />
+      <div className="flex items-center">
+        <UserMenu user={session!.user} />
+      </div>
+    </header>
+  );
 }

components/LoginButton.tsx

@@ -8,31 +8,31 @@ import { Button, type ButtonProps } from '@/components/ui/Button';
 import { IconGitHub, IconSpinner, IconGoogle } from '@/components/ui/Icons';
 
 interface LoginButtonProps extends ButtonProps {
-	oauth: 'github' | 'google';
+  oauth: 'github' | 'google';
 }
 
 export function LoginButton({ oauth, ...props }: LoginButtonProps) {
-	const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
 
-	const icon =
-		oauth === 'github' ? (
-			<IconGitHub className="mr-2" />
-		) : (
-			<IconGoogle className="mr-2" />
-		);
-	return (
-		<Button
-			variant="outline"
-			onClick={() => {
-				setIsLoading(true);
-				// next-auth signIn() function doesn't work yet at Edge Runtime due to usage of BroadcastChannel
-				signIn(oauth, { callbackUrl: `/` });
-			}}
-			disabled={isLoading}
-			{...props}
-		>
-			{isLoading ? <IconSpinner className="mr-2 animate-spin" /> : icon}
-			Sign in with {oauth.charAt(0).toUpperCase() + oauth.slice(1)}
-		</Button>
-	);
+  const icon =
+    oauth === 'github' ? (
+      <IconGitHub className="mr-2" />
+    ) : (
+      <IconGoogle className="mr-2" />
+    );
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        setIsLoading(true);
+        // next-auth signIn() function doesn't work yet at Edge Runtime due to usage of BroadcastChannel
+        signIn(oauth, { callbackUrl: `/` });
+      }}
+      disabled={isLoading}
+      {...props}
+    >
+      {isLoading ? <IconSpinner className="mr-2 animate-spin" /> : icon}
+      Sign in with {oauth.charAt(0).toUpperCase() + oauth.slice(1)}
+    </Button>
+  );
 }

components/Providers.tsx

@@ -6,9 +6,9 @@ import { ThemeProviderProps } from 'next-themes/dist/types';
 import { TooltipProvider } from '@/components/ui/Tooltip';
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
-	return (
-		<NextThemesProvider {...props}>
-			<TooltipProvider>{children}</TooltipProvider>
-		</NextThemesProvider>
-	);
+  return (
+    <NextThemesProvider {...props}>
+      <TooltipProvider>{children}</TooltipProvider>
+    </NextThemesProvider>
+  );
 }

components/TailwindIndicator.tsx

@@ -1,14 +1,14 @@
 export function TailwindIndicator() {
-	if (process.env.NODE_ENV === 'production') return null;
+  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>
-	);
+  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/ThemeToggle.tsx

@@ -7,26 +7,26 @@ import { Button } from '@/components/ui/Button';
 import { IconMoon, IconSun } from '@/components/ui/Icons';
 
 export function ThemeToggle() {
-	const { setTheme, theme } = useTheme();
-	const [_, startTransition] = React.useTransition();
+  const { setTheme, theme } = useTheme();
+  const [_, startTransition] = React.useTransition();
 
-	return (
-		<Button
-			variant="ghost"
-			size="icon"
-			className="fixed bottom-4 right-4 z-50 dark:bg-zinc-950 dark:text-white transition-all p-2 rounded-full shadow-md"
-			onClick={() => {
-				startTransition(() => {
-					setTheme(theme === 'light' ? 'dark' : 'light');
-				});
-			}}
-		>
-			{!theme ? null : theme === 'dark' ? (
-				<IconMoon className="transition-all" />
-			) : (
-				<IconSun className="transition-all" />
-			)}
-			<span className="sr-only">Toggle theme</span>
-		</Button>
-	);
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="fixed bottom-4 right-4 z-50 dark:bg-zinc-950 dark:text-white transition-all p-2 rounded-full shadow-md"
+      onClick={() => {
+        startTransition(() => {
+          setTheme(theme === 'light' ? 'dark' : 'light');
+        });
+      }}
+    >
+      {!theme ? null : theme === 'dark' ? (
+        <IconMoon className="transition-all" />
+      ) : (
+        <IconSun className="transition-all" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
 }

components/UserMenu.tsx

@@ -6,63 +6,63 @@ import { signOut } from 'next-auth/react';
 
 import { Button } from '@/components/ui/Button';
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from '@/components/ui/DropdownMenu';
 import { IconExternalLink } from '@/components/ui/Icons';
 
 export interface UserMenuProps {
-	user: Session['user'];
+  user: Session['user'];
 }
 
 function getUserInitials(name: string) {
-	const [firstName, lastName] = name.split(' ');
-	return lastName ? `${firstName[0]}${lastName[0]}` : firstName.slice(0, 2);
+  const [firstName, lastName] = name.split(' ');
+  return lastName ? `${firstName[0]}${lastName[0]}` : firstName.slice(0, 2);
 }
 
 export function UserMenu({ user }: UserMenuProps) {
-	return (
-		<div className="flex items-center justify-between">
-			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<Button variant="ghost">
-						{user?.image ? (
-							<Image
-								className="size-6 transition-opacity duration-300 rounded-full select-none ring-1 ring-zinc-100/10 hover:opacity-80"
-								src={user?.image ?? ''}
-								alt={user.name ?? 'Avatar'}
-								height={48}
-								width={48}
-							/>
-						) : (
-							<div className="flex items-center justify-center text-xs font-medium uppercase rounded-full select-none size-7 shrink-0 bg-muted/50 text-muted-foreground">
-								{user?.name ? getUserInitials(user?.name) : null}
-							</div>
-						)}
-						<span className="ml-2">{user?.name}</span>
-					</Button>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent sideOffset={8} align="start" className="w-[180px]">
-					<DropdownMenuItem className="flex-col items-start">
-						<div className="text-xs font-medium">{user?.name}</div>
-						<div className="text-xs text-zinc-500">{user?.email}</div>
-					</DropdownMenuItem>
-					<DropdownMenuSeparator />
-					<DropdownMenuItem
-						onClick={() =>
-							signOut({
-								callbackUrl: '/',
-							})
-						}
-						className="text-xs"
-					>
-						Log Out
-					</DropdownMenuItem>
-				</DropdownMenuContent>
-			</DropdownMenu>
-		</div>
-	);
+  return (
+    <div className="flex items-center justify-between">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost">
+            {user?.image ? (
+              <Image
+                className="size-6 transition-opacity duration-300 rounded-full select-none ring-1 ring-zinc-100/10 hover:opacity-80"
+                src={user?.image ?? ''}
+                alt={user.name ?? 'Avatar'}
+                height={48}
+                width={48}
+              />
+            ) : (
+              <div className="flex items-center justify-center text-xs font-medium uppercase rounded-full select-none size-7 shrink-0 bg-muted/50 text-muted-foreground">
+                {user?.name ? getUserInitials(user?.name) : null}
+              </div>
+            )}
+            <span className="ml-2">{user?.name}</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent sideOffset={8} align="start" className="w-[180px]">
+          <DropdownMenuItem className="flex-col items-start">
+            <div className="text-xs font-medium">{user?.name}</div>
+            <div className="text-xs text-zinc-500">{user?.email}</div>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={() =>
+              signOut({
+                callbackUrl: '/',
+              })
+            }
+            className="text-xs"
+          >
+            Log Out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
 }

components/chat-sidebar/ChatCard.tsx

@@ -5,25 +5,25 @@ import { useParams } from 'next/navigation';
 import { cn } from '@/lib/utils';
 
 export interface ChatCardProps {
-	id: string;
-	title: string;
+  id: string;
+  title: string;
 }
 
 const ChatCard: React.FC<ChatCardProps> = ({ id, title }) => {
-	const { chatId: chatIdFromParam } = useParams();
-	return (
-		<Link
-			className={cn(
-				'p-4 m-2 bg-white l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
-				chatIdFromParam === id && 'border-gray-500',
-			)}
-			href={`/chat/${id}`}
-		>
-			<div className="overflow-hidden">
-				<p className="text-sm font-medium text-black mb-1">{title}</p>
-			</div>
-		</Link>
-	);
+  const { chatId: chatIdFromParam } = useParams();
+  return (
+    <Link
+      className={cn(
+        'p-4 m-2 bg-white l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
+        chatIdFromParam === id && 'border-gray-500',
+      )}
+      href={`/chat/${id}`}
+    >
+      <div className="overflow-hidden">
+        <p className="text-sm font-medium text-black mb-1">{title}</p>
+      </div>
+    </Link>
+  );
 };
 
 export default ChatCard;

components/chat-sidebar/ChatListSidebar.tsx

@@ -4,13 +4,13 @@ import ChatCard from './ChatCard';
 export interface ChatSidebarListProps {}
 
 export default async function ChatSidebarList({}: ChatSidebarListProps) {
-	const chats = await getKVChats();
-	console.log('[Ming] ~ ChatSidebarList ~ chats:', chats);
-	return (
-		<>
-			{chats.map(chat => (
-				<ChatCard key={chat.id} id={chat.id} title={chat.title} />
-			))}
-		</>
-	);
+  const chats = await getKVChats();
+  console.log('[Ming] ~ ChatSidebarList ~ chats:', chats);
+  return (
+    <>
+      {chats.map(chat => (
+        <ChatCard key={chat.id} id={chat.id} title={chat.title} />
+      ))}
+    </>
+  );
 }

components/chat/ButtonScrollToBottom.tsx

@@ -8,27 +8,27 @@ import { Button, type ButtonProps } from '@/components/ui/Button';
 import { IconArrowDown } from '@/components/ui/Icons';
 
 export function ButtonScrollToBottom({ className, ...props }: ButtonProps) {
-	const isAtBottom = useAtBottom();
+  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>
-	);
+  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

@@ -5,22 +5,22 @@ import { ChatMessage } from '@/components/chat/ChatMessage';
 import { MessageWithSelectedDataset } from '../../lib/types';
 
 export interface ChatList {
-	messages: MessageWithSelectedDataset[];
+  messages: MessageWithSelectedDataset[];
 }
 
 export function ChatList({ messages }: ChatList) {
-	return (
-		<div className="relative mx-auto max-w-3xl px-8 pr-12">
-			{messages
-				.filter(message => message.role !== 'system')
-				.map((message, index) => (
-					<div key={index}>
-						<ChatMessage message={message} />
-						{index < messages.length - 1 && (
-							<Separator className="my-4 md:my-8" />
-						)}
-					</div>
-				))}
-		</div>
-	);
+  return (
+    <div className="relative mx-auto max-w-3xl px-8 pr-12">
+      {messages
+        .filter(message => message.role !== 'system')
+        .map((message, index) => (
+          <div key={index}>
+            <ChatMessage message={message} />
+            {index < messages.length - 1 && (
+              <Separator className="my-4 md:my-8" />
+            )}
+          </div>
+        ))}
+    </div>
+  );
 }

components/chat/ChatMessage.tsx

@@ -12,66 +12,66 @@ import { ChatMessageActions } from '@/components/chat/ChatMessageActions';
 import { MessageWithSelectedDataset } from '../../lib/types';
 
 export interface ChatMessageProps {
-	message: MessageWithSelectedDataset;
+  message: MessageWithSelectedDataset;
 }
 
 export function ChatMessage({ message, ...props }: ChatMessageProps) {
-	return (
-		<div className={cn('group relative mb-4 flex items-start')} {...props}>
-			<div
-				className={cn(
-					'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
-					message.role === 'user'
-						? 'bg-background'
-						: 'bg-primary text-primary-foreground',
-				)}
-			>
-				{message.role === 'user' ? <IconUser /> : <IconOpenAI />}
-			</div>
-			<div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
-				<MemoizedReactMarkdown
-					className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
-					remarkPlugins={[remarkGfm, remarkMath]}
-					components={{
-						p({ children }) {
-							return <p className="mb-2 last:mb-0">{children}</p>;
-						},
-						code({ node, inline, className, children, ...props }) {
-							if (children.length) {
-								if (children[0] == '▍') {
-									return (
-										<span className="mt-1 cursor-default animate-pulse">▍</span>
-									);
-								}
+  return (
+    <div className={cn('group relative mb-4 flex items-start')} {...props}>
+      <div
+        className={cn(
+          'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
+          message.role === 'user'
+            ? 'bg-background'
+            : 'bg-primary text-primary-foreground',
+        )}
+      >
+        {message.role === 'user' ? <IconUser /> : <IconOpenAI />}
+      </div>
+      <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
+        <MemoizedReactMarkdown
+          className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
+          remarkPlugins={[remarkGfm, remarkMath]}
+          components={{
+            p({ children }) {
+              return <p className="mb-2 last:mb-0">{children}</p>;
+            },
+            code({ node, inline, className, children, ...props }) {
+              if (children.length) {
+                if (children[0] == '▍') {
+                  return (
+                    <span className="mt-1 cursor-default animate-pulse">▍</span>
+                  );
+                }
 
-								children[0] = (children[0] as string).replace('`▍`', '▍');
-							}
+                children[0] = (children[0] as string).replace('`▍`', '▍');
+              }
 
-							const match = /language-(\w+)/.exec(className || '');
+              const match = /language-(\w+)/.exec(className || '');
 
-							if (inline) {
-								return (
-									<code className={className} {...props}>
-										{children}
-									</code>
-								);
-							}
+              if (inline) {
+                return (
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                );
+              }
 
-							return (
-								<CodeBlock
-									key={Math.random()}
-									language={(match && match[1]) || ''}
-									value={String(children).replace(/\n$/, '')}
-									{...props}
-								/>
-							);
-						},
-					}}
-				>
-					{message.content}
-				</MemoizedReactMarkdown>
-				<ChatMessageActions message={message} />
-			</div>
-		</div>
-	);
+              return (
+                <CodeBlock
+                  key={Math.random()}
+                  language={(match && match[1]) || ''}
+                  value={String(children).replace(/\n$/, '')}
+                  {...props}
+                />
+              );
+            },
+          }}
+        >
+          {message.content}
+        </MemoizedReactMarkdown>
+        <ChatMessageActions message={message} />
+      </div>
+    </div>
+  );
 }

components/chat/ChatMessageActions.tsx

@@ -9,33 +9,33 @@ import { cn } from '@/lib/utils';
 import { MessageWithSelectedDataset } from '../../lib/types';
 
 interface ChatMessageActionsProps extends React.ComponentProps<'div'> {
-	message: MessageWithSelectedDataset;
+  message: MessageWithSelectedDataset;
 }
 
 export function ChatMessageActions({
-	message,
-	className,
-	...props
+  message,
+  className,
+  ...props
 }: ChatMessageActionsProps) {
-	const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
 
-	const onCopy = () => {
-		if (isCopied) return;
-		copyToClipboard(message.content);
-	};
+  const onCopy = () => {
+    if (isCopied) return;
+    copyToClipboard(message.content);
+  };
 
-	return (
-		<div
-			className={cn(
-				'flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
-				className,
-			)}
-			{...props}
-		>
-			<Button variant="ghost" size="icon" onClick={onCopy}>
-				{isCopied ? <IconCheck /> : <IconCopy />}
-				<span className="sr-only">Copy message</span>
-			</Button>
-		</div>
-	);
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
+        className,
+      )}
+      {...props}
+    >
+      <Button variant="ghost" size="icon" onClick={onCopy}>
+        {isCopied ? <IconCheck /> : <IconCopy />}
+        <span className="sr-only">Copy message</span>
+      </Button>
+    </div>
+  );
 }

components/chat/ChatPanel.tsx

@@ -8,68 +8,68 @@ import { IconRefresh, IconShare, IconStop } from '@/components/ui/Icons';
 import { MessageWithSelectedDataset } from '../../lib/types';
 
 export interface ChatPanelProps
-	extends Pick<
-		UseChatHelpers,
-		'append' | 'isLoading' | 'reload' | 'stop' | 'input' | 'setInput'
-	> {
-	id?: string;
-	title?: string;
-	messages: MessageWithSelectedDataset[];
+  extends Pick<
+    UseChatHelpers,
+    'append' | 'isLoading' | 'reload' | 'stop' | 'input' | 'setInput'
+  > {
+  id?: string;
+  title?: string;
+  messages: MessageWithSelectedDataset[];
 }
 
 export function ChatPanel({
-	id,
-	title,
-	isLoading,
-	stop,
-	append,
-	reload,
-	input,
-	setInput,
-	messages,
+  id,
+  title,
+  isLoading,
+  stop,
+  append,
+  reload,
+  input,
+  setInput,
+  messages,
 }: ChatPanelProps) {
-	const [shareDialogOpen, setShareDialogOpen] = React.useState(false);
+  const [shareDialogOpen, setShareDialogOpen] = React.useState(false);
 
-	return (
-		<div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
-			<ButtonScrollToBottom />
-			<div className="mx-auto sm:max-w-3xl sm:px-4">
-				<div className="flex items-center justify-center h-12">
-					{isLoading ? (
-						<Button
-							variant="outline"
-							onClick={() => stop()}
-							className="bg-background"
-						>
-							<IconStop className="mr-2" />
-							Stop generating
-						</Button>
-					) : (
-						messages?.length >= 2 && (
-							<div className="flex space-x-2">
-								<Button variant="outline" onClick={() => reload()}>
-									<IconRefresh className="mr-2" />
-									Regenerate response
-								</Button>
-							</div>
-						)
-					)}
-				</div>
-				<div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4">
-					<PromptForm
-						onSubmit={async value => {
-							await append({
-								id,
-								content: value,
-								role: 'user',
-							});
-						}}
-						input={input}
-						setInput={setInput}
-						isLoading={isLoading}
-					/>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
+      <ButtonScrollToBottom />
+      <div className="mx-auto sm:max-w-3xl sm:px-4">
+        <div className="flex items-center justify-center h-12">
+          {isLoading ? (
+            <Button
+              variant="outline"
+              onClick={() => stop()}
+              className="bg-background"
+            >
+              <IconStop className="mr-2" />
+              Stop generating
+            </Button>
+          ) : (
+            messages?.length >= 2 && (
+              <div className="flex space-x-2">
+                <Button variant="outline" onClick={() => reload()}>
+                  <IconRefresh className="mr-2" />
+                  Regenerate response
+                </Button>
+              </div>
+            )
+          )}
+        </div>
+        <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4">
+          <PromptForm
+            onSubmit={async value => {
+              await append({
+                id,
+                content: value,
+                role: 'user',
+              });
+            }}
+            input={input}
+            setInput={setInput}
+            isLoading={isLoading}
+          />
+        </div>
+      </div>
+    </div>
+  );
 }

components/chat/ChatScrollAnchor.tsx

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

components/chat/EmptyScreen.tsx

@@ -5,48 +5,48 @@ import Image from 'next/image';
 import useImageUpload from '../../lib/hooks/useImageUpload';
 
 const examples = [
-	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
-	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
-	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
-	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
+  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
+  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
+  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
+  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
 ];
 
 export function EmptyScreen() {
-	const [, setTarget] = useAtom(datasetAtom);
-	const { getRootProps, getInputProps } = useImageUpload();
-	return (
-		<div className="mx-auto max-w-2xl px-4">
-			<div className="rounded-lg border bg-background p-8">
-				<h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
-				<p>Lets start by choosing an image</p>
-				<div
-					{...getRootProps()}
-					className="dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
-				>
-					<input {...getInputProps()} />
-					<p className="text-gray-400 text-lg">
-						Drag or drop image here, or click to select images
-					</p>
-				</div>
-				<p className="mt-4 mb-2">
-					You can also choose from below examples we provided
-				</p>
-				<div className="flex">
-					{examples.map((example, index) => (
-						<Image
-							src={example}
-							key={index}
-							width={120}
-							height={120}
-							alt="example images"
-							className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
-							onClick={() =>
-								setTarget([{ url: example, name: 'i-1', selected: false }])
-							}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	);
+  const [, setTarget] = useAtom(datasetAtom);
+  const { getRootProps, getInputProps } = useImageUpload();
+  return (
+    <div className="mx-auto max-w-2xl px-4">
+      <div className="rounded-lg border bg-background p-8">
+        <h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
+        <p>Lets start by choosing an image</p>
+        <div
+          {...getRootProps()}
+          className="dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
+        >
+          <input {...getInputProps()} />
+          <p className="text-gray-400 text-lg">
+            Drag or drop image here, or click to select images
+          </p>
+        </div>
+        <p className="mt-4 mb-2">
+          You can also choose from below examples we provided
+        </p>
+        <div className="flex">
+          {examples.map((example, index) => (
+            <Image
+              src={example}
+              key={index}
+              width={120}
+              height={120}
+              alt="example images"
+              className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
+              onClick={() =>
+                setTarget([{ url: example, name: 'i-1', selected: false }])
+              }
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 }

components/chat/ImageList.tsx

@@ -8,14 +8,14 @@ import { produce } from 'immer';
 export interface ImageListProps {}
 
 const ImageList: React.FC<ImageListProps> = () => {
-	const { getRootProps, getInputProps, isDragActive } = useImageUpload({
-		noClick: true,
-	});
+  const { getRootProps, getInputProps, isDragActive } = useImageUpload({
+    noClick: true,
+  });
 
-	const [dataset, setDataset] = useAtom(datasetAtom);
-	return (
-		<div className="relative size-full px-12 max-w-3xl mx-auto">
-			{/* {dataset.length < 10 ? (
+  const [dataset, setDataset] = useAtom(datasetAtom);
+  return (
+    <div className="relative size-full px-12 max-w-3xl mx-auto">
+      {/* {dataset.length < 10 ? (
 				<div className="col-span-full px-8 py-4 rounded-xl bg-blue-100 text-blue-400 mb-8">
 					You can upload up to 10 images max by dragging image.
 				</div>
@@ -24,53 +24,53 @@ const ImageList: React.FC<ImageListProps> = () => {
 					You have reached the maximum limit of 10 images.
 				</div>
 			)} */}
-			<div
-				{...getRootProps()}
-				className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4"
-			>
-				{dataset.map(entity => {
-					const { url: imageSrc, name, selected } = entity;
-					return (
-						<div
-							key={name}
-							onClick={() =>
-								setDataset(prev =>
-									produce(prev, draft => {
-										const index = draft.findIndex(d => d.name === name);
-										draft[index].selected = !selected;
-									}),
-								)
-							}
-							className={`relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content ${selected ? 'border-4 border-blue-500' : ''}`}
-						>
-							<Image
-								src={imageSrc}
-								draggable={false}
-								alt="dataset images"
-								width={500}
-								height={500}
-								objectFit="cover"
-								className="rounded-xl"
-							/>
-							<div className="absolute bottom-0 left-0 bg-gray-800/50 text-white px-3 py-1 rounded-tr-lg">
-								<p className="text-xs font-bold">{name}</p>
-							</div>
-						</div>
-					);
-				})}
-			</div>
+      <div
+        {...getRootProps()}
+        className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4"
+      >
+        {dataset.map(entity => {
+          const { url: imageSrc, name, selected } = entity;
+          return (
+            <div
+              key={name}
+              onClick={() =>
+                setDataset(prev =>
+                  produce(prev, draft => {
+                    const index = draft.findIndex(d => d.name === name);
+                    draft[index].selected = !selected;
+                  }),
+                )
+              }
+              className={`relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content ${selected ? 'border-4 border-blue-500' : ''}`}
+            >
+              <Image
+                src={imageSrc}
+                draggable={false}
+                alt="dataset images"
+                width={500}
+                height={500}
+                objectFit="cover"
+                className="rounded-xl"
+              />
+              <div className="absolute bottom-0 left-0 bg-gray-800/50 text-white px-3 py-1 rounded-tr-lg">
+                <p className="text-xs font-bold">{name}</p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
 
-			{isDragActive && (
-				<div
-					{...getRootProps()}
-					className="dropzone border-2 border-dashed border-gray-400 size-full absolute top-0 left-0 flex items-center justify-center rounded-lg cursor-pointer bg-gray-500/50"
-				>
-					<input {...getInputProps()} />
-					<p className="text-white">Drop the files here ...</p>
-				</div>
-			)}
-		</div>
-	);
+      {isDragActive && (
+        <div
+          {...getRootProps()}
+          className="dropzone border-2 border-dashed border-gray-400 size-full absolute top-0 left-0 flex items-center justify-center rounded-lg cursor-pointer bg-gray-500/50"
+        >
+          <input {...getInputProps()} />
+          <p className="text-white">Drop the files here ...</p>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default ImageList;

components/chat/ImageSelector.tsx

@@ -6,52 +6,52 @@ import { fetcher } from '@/lib/utils';
 export interface ImageSelectorProps {}
 
 const examples = [
-	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
-	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
-	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
-	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
+  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
+  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
+  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
+  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
 ];
 
 const ImageSelector: React.FC<ImageSelectorProps> = () => {
-	const { getRootProps, getInputProps } = useImageUpload();
-	return (
-		<div className="mx-auto max-w-2xl px-4">
-			<div className="rounded-lg border bg-background p-8">
-				<h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
-				<p>Lets start by choosing an image</p>
-				<div
-					{...getRootProps()}
-					className="dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
-				>
-					<input {...getInputProps()} />
-					<p className="text-gray-400 text-lg">
-						Drag or drop image here, or click to select images
-					</p>
-				</div>
-				<p className="mt-4 mb-2">
-					You can also choose from below examples we provided
-				</p>
-				<div className="flex">
-					{examples.map((example, index) => (
-						<Image
-							src={example}
-							key={index}
-							width={120}
-							height={120}
-							alt="example images"
-							className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
-							onClick={() =>
-								fetcher('/api/upload', {
-									method: 'POST',
-									body: JSON.stringify({ url: example }),
-								})
-							}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	);
+  const { getRootProps, getInputProps } = useImageUpload();
+  return (
+    <div className="mx-auto max-w-2xl px-4">
+      <div className="rounded-lg border bg-background p-8">
+        <h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
+        <p>Lets start by choosing an image</p>
+        <div
+          {...getRootProps()}
+          className="dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
+        >
+          <input {...getInputProps()} />
+          <p className="text-gray-400 text-lg">
+            Drag or drop image here, or click to select images
+          </p>
+        </div>
+        <p className="mt-4 mb-2">
+          You can also choose from below examples we provided
+        </p>
+        <div className="flex">
+          {examples.map((example, index) => (
+            <Image
+              src={example}
+              key={index}
+              width={120}
+              height={120}
+              alt="example images"
+              className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
+              onClick={() =>
+                fetcher('/api/upload', {
+                  method: 'POST',
+                  body: JSON.stringify({ url: example }),
+                })
+              }
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default ImageSelector;

components/chat/MemoizedReactMarkdown.tsx

@@ -2,8 +2,8 @@ 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,
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    prevProps.className === nextProps.className,
 );

components/chat/PromptForm.tsx

@@ -5,48 +5,48 @@ import { useEnterSubmit } from '@/lib/hooks/useEnterSubmit';
 import { cn } from '@/lib/utils';
 import { Button, buttonVariants } from '@/components/ui/Button';
 import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from '@/components/ui/Tooltip';
 import { IconArrowElbow, IconPlus } from '@/components/ui/Icons';
 import { useRouter } from 'next/navigation';
 
 export interface PromptProps
-	extends Pick<UseChatHelpers, 'input' | 'setInput'> {
-	onSubmit: (value: string) => void;
-	isLoading: boolean;
+  extends Pick<UseChatHelpers, 'input' | 'setInput'> {
+  onSubmit: (value: string) => void;
+  isLoading: boolean;
 }
 
 export function PromptForm({
-	onSubmit,
-	input,
-	setInput,
-	isLoading,
+  onSubmit,
+  input,
+  setInput,
+  isLoading,
 }: PromptProps) {
-	const { formRef, onKeyDown } = useEnterSubmit();
-	const inputRef = React.useRef<HTMLTextAreaElement>(null);
-	const router = useRouter();
-	React.useEffect(() => {
-		if (inputRef.current) {
-			inputRef.current.focus();
-		}
-	}, []);
+  const { formRef, onKeyDown } = useEnterSubmit();
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
+  const router = useRouter();
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
 
-	return (
-		<form
-			onSubmit={async e => {
-				e.preventDefault();
-				if (!input?.trim()) {
-					return;
-				}
-				setInput('');
-				await onSubmit(input);
-			}}
-			ref={formRef}
-		>
-			<div className="relative flex flex-col w-full px-8 pl-2 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2">
-				{/* <Tooltip>
+  return (
+    <form
+      onSubmit={async e => {
+        e.preventDefault();
+        if (!input?.trim()) {
+          return;
+        }
+        setInput('');
+        await onSubmit(input);
+      }}
+      ref={formRef}
+    >
+      <div className="relative flex flex-col w-full px-8 pl-2 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2">
+        {/* <Tooltip>
           <TooltipTrigger asChild>
             <button
               onClick={e => {
@@ -65,33 +65,33 @@ export function PromptForm({
           </TooltipTrigger>
           <TooltipContent>New Chat</TooltipContent>
         </Tooltip> */}
-				<Textarea
-					ref={inputRef}
-					tabIndex={0}
-					onKeyDown={onKeyDown}
-					rows={1}
-					value={input}
-					onChange={e => setInput(e.target.value)}
-					placeholder="Ask questions about the images."
-					spellCheck={false}
-					className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
-				/>
-				<div className="absolute right-0 top-4 sm:right-4">
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								type="submit"
-								size="icon"
-								disabled={isLoading || input === ''}
-							>
-								<IconArrowElbow />
-								<span className="sr-only">Send message</span>
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Send message</TooltipContent>
-					</Tooltip>
-				</div>
-			</div>
-		</form>
-	);
+        <Textarea
+          ref={inputRef}
+          tabIndex={0}
+          onKeyDown={onKeyDown}
+          rows={1}
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          placeholder="Ask questions about the images."
+          spellCheck={false}
+          className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
+        />
+        <div className="absolute right-0 top-4 sm:right-4">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="submit"
+                size="icon"
+                disabled={isLoading || input === ''}
+              >
+                <IconArrowElbow />
+                <span className="sr-only">Send message</span>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Send message</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+    </form>
+  );
 }

components/chat/index.tsx

@@ -10,37 +10,37 @@ import { Button } from '../ui/Button';
 import ImageSelector from './ImageSelector';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
-	id: string;
+  id: string;
 }
 
 export function Chat({ id, className }: ChatProps) {
-	const { messages, append, reload, stop, isLoading, input, setInput } =
-		useChat();
+  const { messages, append, reload, stop, isLoading, input, setInput } =
+    useChat();
 
-	return (
-		<>
-			<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
-				<div className="flex h-full">
-					<div className="w-1/2 relative border-r border-gray-400 overflow-auto">
-						{/* <ImageList /> */}
-						<ImageSelector />
-					</div>
-					<div className="w-1/2 relative overflow-auto">
-						<ChatList messages={messages} />
-						<ChatScrollAnchor trackVisibility={isLoading} />
-					</div>
-				</div>
-			</div>
-			<ChatPanel
-				id={id}
-				isLoading={isLoading}
-				stop={stop}
-				append={append}
-				reload={reload}
-				messages={messages}
-				input={input}
-				setInput={setInput}
-			/>
-		</>
-	);
+  return (
+    <>
+      <div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
+        <div className="flex h-full">
+          <div className="w-1/2 relative border-r border-gray-400 overflow-auto">
+            {/* <ImageList /> */}
+            <ImageSelector />
+          </div>
+          <div className="w-1/2 relative overflow-auto">
+            <ChatList messages={messages} />
+            <ChatScrollAnchor trackVisibility={isLoading} />
+          </div>
+        </div>
+      </div>
+      <ChatPanel
+        id={id}
+        isLoading={isLoading}
+        stop={stop}
+        append={append}
+        reload={reload}
+        messages={messages}
+        input={input}
+        setInput={setInput}
+      />
+    </>
+  );
 }

components/project-sidebar/ProjectCard.tsx

@@ -8,36 +8,36 @@ import { cn } from '@/lib/utils';
 import Chip from '../ui/Chip';
 
 export interface ProjectCardProps {
-	projectInfo: ProjectBaseInfo;
+  projectInfo: ProjectBaseInfo;
 }
 
 const ProjectCard: React.FC<ProjectCardProps> = ({ projectInfo }) => {
-	const {
-		id,
-		name,
-		created_at,
-		label_type,
-		organization: { name: orgName },
-	} = projectInfo;
+  const {
+    id,
+    name,
+    created_at,
+    label_type,
+    organization: { name: orgName },
+  } = projectInfo;
 
-	const { projectId: projectIdFromParam } = useParams();
+  const { projectId: projectIdFromParam } = useParams();
 
-	const formattedDate = format(created_at, 'yyyy-MM-dd');
-	return (
-		<Link
-			className={cn(
-				'p-4 m-2 bg-white l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
-				Number(projectIdFromParam) === id && 'border-gray-500',
-			)}
-			href={`/project/${id}`}
-		>
-			<div className="overflow-hidden">
-				<p className="text-xs text-gray-500">{orgName}</p>
-				<p className="text-sm font-medium text-black mb-1">{name}</p>
-				<p className="text-xs text-gray-500">{formattedDate}</p>
-			</div>
-		</Link>
-	);
+  const formattedDate = format(created_at, 'yyyy-MM-dd');
+  return (
+    <Link
+      className={cn(
+        'p-4 m-2 bg-white l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
+        Number(projectIdFromParam) === id && 'border-gray-500',
+      )}
+      href={`/project/${id}`}
+    >
+      <div className="overflow-hidden">
+        <p className="text-xs text-gray-500">{orgName}</p>
+        <p className="text-sm font-medium text-black mb-1">{name}</p>
+        <p className="text-xs text-gray-500">{formattedDate}</p>
+      </div>
+    </Link>
+  );
 };
 
 export default ProjectCard;

components/project-sidebar/ProjectListSideBar.tsx

@@ -4,14 +4,14 @@ import ProjectCard from './ProjectCard';
 export interface ProjectListSideBarProps {}
 
 const ProjectListSideBar: React.FC<ProjectListSideBarProps> = async () => {
-	const recentProjects = await fetchRecentProjectList();
-	return (
-		<>
-			{recentProjects.map(project => (
-				<ProjectCard key={project.id} projectInfo={project} />
-			))}
-		</>
-	);
+  const recentProjects = await fetchRecentProjectList();
+  return (
+    <>
+      {recentProjects.map(project => (
+        <ProjectCard key={project.id} projectInfo={project} />
+      ))}
+    </>
+  );
 };
 
 export default ProjectListSideBar;

components/project/Chat.tsx

@@ -8,27 +8,27 @@ import { ChatScrollAnchor } from '../chat/ChatScrollAnchor';
 import { ChatPanel } from '../chat/ChatPanel';
 
 export interface ChatProps {
-	mediaList: MediaDetails[];
+  mediaList: MediaDetails[];
 }
 
 const Chat: React.FC<ChatProps> = ({ mediaList }) => {
-	const { messages, append, reload, stop, isLoading, input, setInput } =
-		useChatWithMedia(mediaList);
-	return (
-		<>
-			<ChatList messages={messages} />
-			<ChatScrollAnchor trackVisibility={isLoading} />
-			<ChatPanel
-				isLoading={isLoading}
-				stop={stop}
-				append={append}
-				reload={reload}
-				messages={messages}
-				input={input}
-				setInput={setInput}
-			/>
-		</>
-	);
+  const { messages, append, reload, stop, isLoading, input, setInput } =
+    useChatWithMedia(mediaList);
+  return (
+    <>
+      <ChatList messages={messages} />
+      <ChatScrollAnchor trackVisibility={isLoading} />
+      <ChatPanel
+        isLoading={isLoading}
+        stop={stop}
+        append={append}
+        reload={reload}
+        messages={messages}
+        input={input}
+        setInput={setInput}
+      />
+    </>
+  );
 };
 
 export default Chat;

components/project/MediaGrid.tsx

@@ -2,17 +2,17 @@ import { MediaDetails } from '@/lib/fetch';
 import MediaTile from './MediaTile';
 
 export default function MediaGrid({
-	mediaList,
+  mediaList,
 }: {
-	mediaList: MediaDetails[];
+  mediaList: MediaDetails[];
 }) {
-	return (
-		<div className="relative size-full p-6 max-w-3xl mx-auto">
-			<div className="columns-1 sm:columns-1 md:columns-2 lg:columns-2 xl:columns:3 gap-4 [&>img:not(:first-child)]:mt-4">
-				{mediaList.map(media => (
-					<MediaTile key={media.id} media={media} />
-				))}
-			</div>
-		</div>
-	);
+  return (
+    <div className="relative size-full p-6 max-w-3xl mx-auto">
+      <div className="columns-1 sm:columns-1 md:columns-2 lg:columns-2 xl:columns:3 gap-4 [&>img:not(:first-child)]:mt-4">
+        {mediaList.map(media => (
+          <MediaTile key={media.id} media={media} />
+        ))}
+      </div>
+    </div>
+  );
 }

components/project/MediaTile.tsx

@@ -1,42 +1,42 @@
 import React from 'react';
 import Image from 'next/image';
 import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from '@/components/ui/Tooltip';
 import { MediaDetails } from '@/lib/fetch';
 
 export interface MediaTileProps {
-	media: MediaDetails;
+  media: MediaDetails;
 }
 
 export default function MediaTile({ media }: MediaTileProps) {
-	const {
-		url,
-		thumbnails,
-		id,
-		name,
-		properties: { width, height },
-	} = media;
-	// const imageSrc = thumbnails.length ? thumbnails[thumbnails.length - 1] : url;
-	const imageSrc = url;
-	return (
-		<Tooltip>
-			<TooltipTrigger asChild>
-				<Image
-					src={imageSrc}
-					draggable={false}
-					alt="dataset images"
-					width={width}
-					height={height}
-					className="w-full h-auto relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content"
-				/>
-			</TooltipTrigger>
-			<TooltipContent>
-				<p>{name}</p>
-				<p className="font-light text-xs">{`${width} x ${height}`}</p>
-			</TooltipContent>
-		</Tooltip>
-	);
+  const {
+    url,
+    thumbnails,
+    id,
+    name,
+    properties: { width, height },
+  } = media;
+  // const imageSrc = thumbnails.length ? thumbnails[thumbnails.length - 1] : url;
+  const imageSrc = url;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Image
+          src={imageSrc}
+          draggable={false}
+          alt="dataset images"
+          width={width}
+          height={height}
+          className="w-full h-auto relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content"
+        />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{name}</p>
+        <p className="font-light text-xs">{`${width} x ${height}`}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
 }

components/ui/Button.tsx

@@ -5,52 +5,52 @@ import { cva, type VariantProps } from 'class-variance-authority';
 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}
-			/>
-		);
-	},
+  ({ 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';
 

components/ui/Chip.tsx

@@ -1,29 +1,29 @@
 import { cn } from '@/lib/utils';
 
 export interface ChipProps {
-	label?: string;
-	value: string;
-	color?: 'gray' | 'blue';
-	className?: string;
+  label?: string;
+  value: string;
+  color?: 'gray' | 'blue';
+  className?: string;
 }
 
 const Chip: React.FC<ChipProps> = ({
-	label,
-	value,
-	color = 'gray',
-	className,
+  label,
+  value,
+  color = 'gray',
+  className,
 }) => {
-	return (
-		<div
-			className={cn(
-				`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${color}-100 text-${color}-800 mr-1`,
-				className,
-			)}
-		>
-			{label && <span className="font-medium">{label} :</span>}
-			<span>{value}</span>
-		</div>
-	);
+  return (
+    <div
+      className={cn(
+        `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${color}-100 text-${color}-800 mr-1`,
+        className,
+      )}
+    >
+      {label && <span className="font-medium">{label} :</span>}
+      <span>{value}</span>
+    </div>
+  );
 };
 
 export default Chip;

components/ui/CodeBlock.tsx

@@ -12,136 +12,136 @@ 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>
-	);
+  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';
 

components/ui/DropdownMenu.tsx

@@ -18,111 +18,111 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+  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}
-	/>
+  <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;
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+  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>
+  <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;
-	}
+  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}
-	/>
+  <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;
-	}
+  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}
-	/>
+  <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>
+  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}
-	/>
+  <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
+  className,
+  ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-	return (
-		<span
-			className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-			{...props}
-		/>
-	);
+  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,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuRadioGroup,
 };

components/ui/Icons.tsx

@@ -5,557 +5,557 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 function IconNextChat({
-	className,
-	inverted,
-	...props
+  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('size-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>
-	);
+  const id = React.useId();
+
+  return (
+    <svg
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('size-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>
+  );
 }
 
 function IconOpenAI({ 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('size-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>
-	);
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('size-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>
+  );
 }
 
 function IconVercel({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			aria-label="Vercel logomark"
-			role="img"
-			viewBox="0 0 74 64"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path
-				d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
-				fill="currentColor"
-			></path>
-		</svg>
-	);
+  return (
+    <svg
+      aria-label="Vercel logomark"
+      role="img"
+      viewBox="0 0 74 64"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
 }
 
 function IconGitHub({ 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('size-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>
-	);
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn('size-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>
+  );
 }
 
 function IconGoogle({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="2443"
-			height="2500"
-			preserveAspectRatio="xMidYMid"
-			viewBox="0 0 256 262"
-			id="google"
-			className={cn('size-4', className)}
-		>
-			<path
-				fill="#4285F4"
-				d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
-			></path>
-			<path
-				fill="#34A853"
-				d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
-			></path>
-			<path
-				fill="#FBBC05"
-				d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
-			></path>
-			<path
-				fill="#EB4335"
-				d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
-			></path>
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="2443"
+      height="2500"
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 262"
+      id="google"
+      className={cn('size-4', className)}
+    >
+      <path
+        fill="#4285F4"
+        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+      ></path>
+      <path
+        fill="#34A853"
+        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+      ></path>
+      <path
+        fill="#FBBC05"
+        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
+      ></path>
+      <path
+        fill="#EB4335"
+        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+      ></path>
+    </svg>
+  );
 }
 
 function IconSeparator({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			fill="none"
-			shapeRendering="geometricPrecision"
-			stroke="currentColor"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			strokeWidth="1"
-			viewBox="0 0 24 24"
-			aria-hidden="true"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M16.88 3.549L7.12 20.451"></path>
-		</svg>
-	);
+  return (
+    <svg
+      fill="none"
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M16.88 3.549L7.12 20.451"></path>
+    </svg>
+  );
 }
 
 function IconArrowDown({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="m205.66 149.66-72 72a8 8 0 0 1-11.32 0l-72-72a8 8 0 0 1 11.32-11.32L120 196.69V40a8 8 0 0 1 16 0v156.69l58.34-58.35a8 8 0 0 1 11.32 11.32Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="m205.66 149.66-72 72a8 8 0 0 1-11.32 0l-72-72a8 8 0 0 1 11.32-11.32L120 196.69V40a8 8 0 0 1 16 0v156.69l58.34-58.35a8 8 0 0 1 11.32 11.32Z" />
+    </svg>
+  );
 }
 
 function IconArrowRight({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z" />
+    </svg>
+  );
 }
 
 function IconUser({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8ZM72 96a56 56 0 1 1 56 56 56.06 56.06 0 0 1-56-56Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8ZM72 96a56 56 0 1 1 56 56 56.06 56.06 0 0 1-56-56Z" />
+    </svg>
+  );
 }
 
 function IconPlus({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8Z" />
+    </svg>
+  );
 }
 
 function IconArrowElbow({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M200 32v144a8 8 0 0 1-8 8H67.31l34.35 34.34a8 8 0 0 1-11.32 11.32l-48-48a8 8 0 0 1 0-11.32l48-48a8 8 0 0 1 11.32 11.32L67.31 168H184V32a8 8 0 0 1 16 0Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M200 32v144a8 8 0 0 1-8 8H67.31l34.35 34.34a8 8 0 0 1-11.32 11.32l-48-48a8 8 0 0 1 0-11.32l48-48a8 8 0 0 1 11.32 11.32L67.31 168H184V32a8 8 0 0 1 16 0Z" />
+    </svg>
+  );
 }
 
 function IconSpinner({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4 animate-spin', className)}
-			{...props}
-		>
-			<path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    >
+      <path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" />
+    </svg>
+  );
 }
 
 function IconMessage({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M216 48H40a16 16 0 0 0-16 16v160a15.84 15.84 0 0 0 9.25 14.5A16.05 16.05 0 0 0 40 240a15.89 15.89 0 0 0 10.25-3.78.69.69 0 0 0 .13-.11L82.5 208H216a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16ZM40 224Zm176-32H82.5a16 16 0 0 0-10.3 3.75l-.12.11L40 224V64h176Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M216 48H40a16 16 0 0 0-16 16v160a15.84 15.84 0 0 0 9.25 14.5A16.05 16.05 0 0 0 40 240a15.89 15.89 0 0 0 10.25-3.78.69.69 0 0 0 .13-.11L82.5 208H216a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16ZM40 224Zm176-32H82.5a16 16 0 0 0-10.3 3.75l-.12.11L40 224V64h176Z" />
+    </svg>
+  );
 }
 
 function IconTrash({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16ZM96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16ZM96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Z" />
+    </svg>
+  );
 }
 
 function IconRefresh({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" />
+    </svg>
+  );
 }
 
 function IconStop({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" />
+    </svg>
+  );
 }
 
 function IconSidebar({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16ZM40 56h40v144H40Zm176 144H96V56h120v144Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16ZM40 56h40v144H40Zm176 144H96V56h120v144Z" />
+    </svg>
+  );
 }
 
 function IconMoon({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M233.54 142.23a8 8 0 0 0-8-2 88.08 88.08 0 0 1-109.8-109.8 8 8 0 0 0-10-10 104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.09 103.09 0 0 0 62.52-20.88 104.84 104.84 0 0 0 37-52.91 8 8 0 0 0-1.98-7.98Zm-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104 106 106 0 0 0 14.92-1.06 89 89 0 0 1-26.02 31.4Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M233.54 142.23a8 8 0 0 0-8-2 88.08 88.08 0 0 1-109.8-109.8 8 8 0 0 0-10-10 104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.09 103.09 0 0 0 62.52-20.88 104.84 104.84 0 0 0 37-52.91 8 8 0 0 0-1.98-7.98Zm-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104 106 106 0 0 0 14.92-1.06 89 89 0 0 1-26.02 31.4Z" />
+    </svg>
+  );
 }
 
 function IconSun({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64 64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48 48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64 64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48 48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z" />
+    </svg>
+  );
 }
 
 function IconCopy({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" />
+    </svg>
+  );
 }
 
 function IconCheck({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" />
+    </svg>
+  );
 }
 
 function IconDownload({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" />
+    </svg>
+  );
 }
 
 function IconClose({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 256 256"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z" />
+    </svg>
+  );
 }
 
 function IconEdit({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			strokeWidth={1.5}
-			stroke="currentColor"
-			className={cn('size-4', className)}
-			{...props}
-		>
-			<path
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-			/>
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+      />
+    </svg>
+  );
 }
 
 function IconShare({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			viewBox="0 0 256 256"
-			{...props}
-		>
-			<path d="m237.66 106.35-80-80A8 8 0 0 0 144 32v40.35c-25.94 2.22-54.59 14.92-78.16 34.91-28.38 24.08-46.05 55.11-49.76 87.37a12 12 0 0 0 20.68 9.58c11-11.71 50.14-48.74 107.24-52V192a8 8 0 0 0 13.66 5.65l80-80a8 8 0 0 0 0-11.3ZM160 172.69V144a8 8 0 0 0-8-8c-28.08 0-55.43 7.33-81.29 21.8a196.17 196.17 0 0 0-36.57 26.52c5.8-23.84 20.42-46.51 42.05-64.86C99.41 99.77 127.75 88 152 88a8 8 0 0 0 8-8V51.32L220.69 112Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path d="m237.66 106.35-80-80A8 8 0 0 0 144 32v40.35c-25.94 2.22-54.59 14.92-78.16 34.91-28.38 24.08-46.05 55.11-49.76 87.37a12 12 0 0 0 20.68 9.58c11-11.71 50.14-48.74 107.24-52V192a8 8 0 0 0 13.66 5.65l80-80a8 8 0 0 0 0-11.3ZM160 172.69V144a8 8 0 0 0-8-8c-28.08 0-55.43 7.33-81.29 21.8a196.17 196.17 0 0 0-36.57 26.52c5.8-23.84 20.42-46.51 42.05-64.86C99.41 99.77 127.75 88 152 88a8 8 0 0 0 8-8V51.32L220.69 112Z" />
+    </svg>
+  );
 }
 
 function IconUsers({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			viewBox="0 0 256 256"
-			{...props}
-		>
-			<path d="M117.25 157.92a60 60 0 1 0-66.5 0 95.83 95.83 0 0 0-47.22 37.71 8 8 0 1 0 13.4 8.74 80 80 0 0 1 134.14 0 8 8 0 0 0 13.4-8.74 95.83 95.83 0 0 0-47.22-37.71ZM40 108a44 44 0 1 1 44 44 44.05 44.05 0 0 1-44-44Zm210.14 98.7a8 8 0 0 1-11.07-2.33A79.83 79.83 0 0 0 172 168a8 8 0 0 1 0-16 44 44 0 1 0-16.34-84.87 8 8 0 1 1-5.94-14.85 60 60 0 0 1 55.53 105.64 95.83 95.83 0 0 1 47.22 37.71 8 8 0 0 1-2.33 11.07Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path d="M117.25 157.92a60 60 0 1 0-66.5 0 95.83 95.83 0 0 0-47.22 37.71 8 8 0 1 0 13.4 8.74 80 80 0 0 1 134.14 0 8 8 0 0 0 13.4-8.74 95.83 95.83 0 0 0-47.22-37.71ZM40 108a44 44 0 1 1 44 44 44.05 44.05 0 0 1-44-44Zm210.14 98.7a8 8 0 0 1-11.07-2.33A79.83 79.83 0 0 0 172 168a8 8 0 0 1 0-16 44 44 0 1 0-16.34-84.87 8 8 0 1 1-5.94-14.85 60 60 0 0 1 55.53 105.64 95.83 95.83 0 0 1 47.22 37.71 8 8 0 0 1-2.33 11.07Z" />
+    </svg>
+  );
 }
 
 function IconExternalLink({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			viewBox="0 0 256 256"
-			{...props}
-		>
-			<path d="M224 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path d="M224 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8Z" />
+    </svg>
+  );
 }
 
 function IconChevronUpDown({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			fill="currentColor"
-			className={cn('size-4', className)}
-			viewBox="0 0 256 256"
-			{...props}
-		>
-			<path d="M181.66 170.34a8 8 0 0 1 0 11.32l-48 48a8 8 0 0 1-11.32 0l-48-48a8 8 0 0 1 11.32-11.32L128 212.69l42.34-42.35a8 8 0 0 1 11.32 0Zm-96-84.68L128 43.31l42.34 42.35a8 8 0 0 0 11.32-11.32l-48-48a8 8 0 0 0-11.32 0l-48 48a8 8 0 0 0 11.32 11.32Z" />
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path d="M181.66 170.34a8 8 0 0 1 0 11.32l-48 48a8 8 0 0 1-11.32 0l-48-48a8 8 0 0 1 11.32-11.32L128 212.69l42.34-42.35a8 8 0 0 1 11.32 0Zm-96-84.68L128 43.31l42.34 42.35a8 8 0 0 0 11.32-11.32l-48-48a8 8 0 0 0-11.32 0l-48 48a8 8 0 0 0 11.32 11.32Z" />
+    </svg>
+  );
 }
 
 function IconLoading({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<svg
-			aria-hidden="true"
-			className="size-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600"
-			viewBox="0 0 100 101"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-				fill="currentColor"
-			/>
-			<path
-				d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-				fill="currentFill"
-			/>
-		</svg>
-	);
+  return (
+    <svg
+      aria-hidden="true"
+      className="size-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+  );
 }
 
 export {
-	IconEdit,
-	IconNextChat,
-	IconOpenAI,
-	IconVercel,
-	IconGitHub,
-	IconSeparator,
-	IconArrowDown,
-	IconArrowRight,
-	IconUser,
-	IconPlus,
-	IconArrowElbow,
-	IconSpinner,
-	IconMessage,
-	IconTrash,
-	IconRefresh,
-	IconStop,
-	IconSidebar,
-	IconMoon,
-	IconSun,
-	IconCopy,
-	IconCheck,
-	IconDownload,
-	IconClose,
-	IconShare,
-	IconUsers,
-	IconExternalLink,
-	IconChevronUpDown,
-	IconGoogle,
-	IconLoading,
+  IconEdit,
+  IconNextChat,
+  IconOpenAI,
+  IconVercel,
+  IconGitHub,
+  IconSeparator,
+  IconArrowDown,
+  IconArrowRight,
+  IconUser,
+  IconPlus,
+  IconArrowElbow,
+  IconSpinner,
+  IconMessage,
+  IconTrash,
+  IconRefresh,
+  IconStop,
+  IconSidebar,
+  IconMoon,
+  IconSun,
+  IconCopy,
+  IconCheck,
+  IconDownload,
+  IconClose,
+  IconShare,
+  IconUsers,
+  IconExternalLink,
+  IconChevronUpDown,
+  IconGoogle,
+  IconLoading,
 };

components/ui/Input.tsx

@@ -3,22 +3,22 @@ import * as React from 'react';
 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}
-			/>
-		);
-	},
+  ({ 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';
 

components/ui/Loading.tsx

@@ -1,9 +1,9 @@
 import { IconLoading } from '@/components/ui/Icons';
 
 export default function Loading() {
-	return (
-		<div className="flex justify-center items-center size-full text-sm">
-			<IconLoading />
-		</div>
-	);
+  return (
+    <div className="flex justify-center items-center size-full text-sm">
+      <IconLoading />
+    </div>
+  );
 }

components/ui/Separator.tsx

@@ -6,25 +6,25 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { cn } from '@/lib/utils';
 
 const Separator = React.forwardRef<
-	React.ElementRef<typeof SeparatorPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
-	(
-		{ className, orientation = 'horizontal', decorative = true, ...props },
-		ref,
-	) => (
-		<SeparatorPrimitive.Root
-			ref={ref}
-			decorative={decorative}
-			orientation={orientation}
-			className={cn(
-				'shrink-0 bg-border',
-				orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-				className,
-			)}
-			{...props}
-		/>
-	),
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className,
+      )}
+      {...props}
+    />
+  ),
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 

components/ui/Textarea.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from 'react';
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -11,14 +11,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <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
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Textarea.displayName = 'Textarea'
+    );
+  },
+);
+Textarea.displayName = 'Textarea';
 
-export { Textarea }
+export { Textarea };

components/ui/Tooltip.tsx

@@ -12,18 +12,18 @@ const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
-	React.ElementRef<typeof TooltipPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+  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 px-3 py-1.5 text-xs font-medium 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}
-	/>
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs font-medium 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;
 

lib/fetch/index.ts

@@ -2,90 +2,90 @@ import { auth } from '@/auth';
 import { v5 as uuidV5 } from 'uuid';
 
 interface ApiResponse<T> {
-	code: number; // code from server 0
-	message: string;
-	data: T;
+  code: number; // code from server 0
+  message: string;
+  data: T;
 }
 
 const clefApiBuilder = <Params extends object | void, Resp>(
-	path: string,
-	options?: {
-		// default to GET
-		method: 'GET' | 'POST';
-		// default to 'app'
-		prefix: 'api' | 'app' | 'api.dev' | 'app.dev';
-	},
+  path: string,
+  options?: {
+    // default to GET
+    method: 'GET' | 'POST';
+    // default to 'app'
+    prefix: 'api' | 'app' | 'api.dev' | 'app.dev';
+  },
 ) => {
-	return async (params: Params): Promise<Resp> => {
-		const session = await auth();
-		const email = session?.user?.email;
+  return async (params: Params): Promise<Resp> => {
+    const session = await auth();
+    const email = session?.user?.email;
 
-		if (!email || !email.endsWith('@landing.ai')) {
-			throw new Response('Unauthorized', {
-				status: 401,
-			});
-		}
+    if (!email || !email.endsWith('@landing.ai')) {
+      throw new Response('Unauthorized', {
+        status: 401,
+      });
+    }
 
-		const sessionUser = {
-			id: uuidV5(email, uuidV5.URL),
-			orgId: '-1024',
-			email: email,
-			username: email.split('@')[0],
-			userRole: 'adminPortal',
-			bucket: 'fake_bucket',
-		};
+    const sessionUser = {
+      id: uuidV5(email, uuidV5.URL),
+      orgId: '-1024',
+      email: email,
+      username: email.split('@')[0],
+      userRole: 'adminPortal',
+      bucket: 'fake_bucket',
+    };
 
-		const prefix = options?.prefix ?? 'app';
-		const baseURL = `https://${prefix}.landing.ai/${path}`;
+    const prefix = options?.prefix ?? 'app';
+    const baseURL = `https://${prefix}.landing.ai/${path}`;
 
-		const method = options?.method ?? 'GET';
-		// Create a URL object with query params
-		const url = new URL(baseURL);
-		if (method === 'GET') {
-			Object.entries(params ?? {}).forEach(([key, value]) =>
-				url.searchParams.append(key, value),
-			);
-		}
+    const method = options?.method ?? 'GET';
+    // Create a URL object with query params
+    const url = new URL(baseURL);
+    if (method === 'GET') {
+      Object.entries(params ?? {}).forEach(([key, value]) =>
+        url.searchParams.append(key, value),
+      );
+    }
 
-		const fetchParams: RequestInit = {
-			method: options?.method ?? 'GET',
-			headers: {
-				sessionuser: JSON.stringify(sessionUser), // faked production user
-				apikey: 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k', // dev key
-				'X-ROUTE': 'mingruizhang-landing',
-			},
-		};
+    const fetchParams: RequestInit = {
+      method: options?.method ?? 'GET',
+      headers: {
+        sessionuser: JSON.stringify(sessionUser), // faked production user
+        apikey: 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k', // dev key
+        'X-ROUTE': 'mingruizhang-landing',
+      },
+    };
 
-		if (method === 'POST' && params instanceof Object) {
-			const formData = new FormData();
-			for (const [key, value] of Object.entries(params)) {
-				formData.append(key, value);
-			}
+    if (method === 'POST' && params instanceof Object) {
+      const formData = new FormData();
+      for (const [key, value] of Object.entries(params)) {
+        formData.append(key, value);
+      }
 
-			fetchParams.body = formData;
-		}
+      fetchParams.body = formData;
+    }
 
-		const res = await fetch(url.toString(), fetchParams);
+    const res = await fetch(url.toString(), fetchParams);
 
-		if (!res.ok) {
-			console.error('ERROR: fetch data failure', res.status, res.statusText);
-			// This will activate the closest `error.js` Error Boundary
-			throw new Error('Failed to fetch data');
-		}
-		const { data }: ApiResponse<Resp> = await res.json();
-		return data;
-	};
+    if (!res.ok) {
+      console.error('ERROR: fetch data failure', res.status, res.statusText);
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to fetch data');
+    }
+    const { data }: ApiResponse<Resp> = await res.json();
+    return data;
+  };
 };
 
 export type ProjectBaseInfo = {
-	id: number;
-	name: string;
-	created_at: Date;
-	label_type: string;
-	organization: {
-		id: number;
-		name: string;
-	};
+  id: number;
+  name: string;
+  created_at: Date;
+  label_type: string;
+  organization: {
+    id: number;
+    name: string;
+  };
 };
 /**
  * Fetch recent projects from all organizations from past 30 days, excluding
@@ -95,22 +95,22 @@ export type ProjectBaseInfo = {
  * @author https://github.com/landing-ai/landing-platform/blob/mingrui-04-08-meaningful-project/packages/server-clef/src/main_app/controllers/admin/get_admin_meaningful_project_controller.ts
  */
 export const fetchRecentProjectList = clefApiBuilder<void, ProjectBaseInfo[]>(
-	'api/admin/projects/recent',
+  'api/admin/projects/recent',
 );
 
 export type MediaDetails = {
-	id: number;
-	name: string;
-	path: string;
-	url: string;
-	projectId: number;
-	thumbnails: string[];
-	properties: {
-		width: number;
-		height: number;
-		format: string;
-		orientation: number;
-	};
+  id: number;
+  name: string;
+  path: string;
+  url: string;
+  projectId: number;
+  thumbnails: string[];
+  properties: {
+    width: number;
+    height: number;
+    format: string;
+    orientation: number;
+  };
 };
 
 /**
@@ -118,6 +118,6 @@ export type MediaDetails = {
  * @author https://github.com/landing-ai/landing-platform/blob/mingrui-04-08-meaningful-project/packages/server-clef/src/main_app/controllers/admin/get_admin_meaningful_project_controller.ts
  */
 export const fetchProjectMedia = clefApiBuilder<
-	{ projectId: number },
-	MediaDetails[]
+  { projectId: number },
+  MediaDetails[]
 >('api/admin/project/media');