feat: clone vision agent ui

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "root": true,
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "plugins": ["tailwindcss"],
+  "rules": {
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "off"
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn", "cva"],
+      "config": "tailwind.config.js"
+    }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
+}

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+.env
+.vercel
+.vscode
+.env*.local
+
+# ts
+tsconfig.tsbuildinfo

.prettierrc

@@ -0,0 +1,34 @@
+{
+  "endOfLine": "lf",
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "importOrder": [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^types$",
+    "^@/types/(.*)$",
+    "^@/config/(.*)$",
+    "^@/lib/(.*)$",
+    "^@/hooks/(.*)$",
+    "^@/components/ui/(.*)$",
+    "^@/components/(.*)$",
+    "^@/registry/(.*)$",
+    "^@/styles/(.*)$",
+    "^@/app/(.*)$",
+    "",
+    "^[./]"
+  ],
+  "importOrderSeparation": false,
+  "importOrderSortSpecifiers": true,
+  "importOrderBuiltinModulesToTop": true,
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
+  "importOrderMergeDuplicateImports": true,
+  "importOrderCombineTypeAndValueImports": true
+}

.vscode.settings.json

@@ -0,0 +1,3 @@
+{
+  "prettier.prettierPath": "./node_modules/prettier/index.cjs"
+}

Dockerfile

@@ -0,0 +1,41 @@
+FROM node:20
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm i --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps --link /app/node_modules ./node_modules
+COPY --link  . .
+
+RUN pnpm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN \
+  addgroup --system --gid 1001 nodejs; \
+  adduser --system --uid 1001 nextjs
+
+COPY --from=builder --link /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --link --chown=1001:1001 /app/.next/standalone ./
+COPY --from=builder --link --chown=1001:1001 /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 7860
+
+ENV PORT 7860
+ENV HOSTNAME 0.0.0.0
+
+CMD ["node", "server.js"]

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

@@ -0,0 +1,18 @@
+import { auth } from '@/auth';
+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('/');
+  }
+
+  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

@@ -0,0 +1,24 @@
+import { auth } from '@/auth';
+import { redirect } from 'next/navigation';
+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('/');
+  }
+
+  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

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

app/api/chat/route.ts

@@ -0,0 +1,57 @@
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+import OpenAI from 'openai';
+
+import { auth } from '@/auth';
+import {
+  ChatCompletionMessageParam,
+  ChatCompletionContentPart,
+} from 'openai/resources';
+import { MessageBase } from '../../../lib/types';
+
+export const runtime = 'edge';
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+export const POST = async (req: Request) => {
+  const json = await req.json();
+  const { messages } = json as {
+    messages: MessageBase[];
+    id: string;
+    url: string;
+  };
+
+  const session = await auth();
+  if (!session?.user?.email) {
+    return new Response('Unauthorized', {
+      status: 401,
+    });
+  }
+
+  const formattedMessage: ChatCompletionMessageParam[] = messages.map(
+    message => {
+      const contentWithImage: ChatCompletionContentPart[] = [
+        {
+          type: 'text',
+          text: message.content as string,
+        },
+      ];
+      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 stream = OpenAIStream(res);
+
+  return new StreamingTextResponse(stream);
+};

app/api/sign/route.ts

@@ -0,0 +1,42 @@
+import { getPresignedUrl } from '@/lib/aws';
+import { withLogging } from '../../../lib/logger';
+import { nanoid } from '@/lib/utils';
+
+/**
+ * @param req
+ * @returns
+ */
+export const POST = withLogging(
+  async (
+    session,
+    json: {
+      id?: string;
+      fileName: string;
+      fileType: string;
+    },
+  ): Promise<Response> => {
+    const user = session?.user?.email ?? 'anonymous';
+    // if (!email) {
+    //   return new Response('Unauthorized', {
+    //     status: 401,
+    //   });
+    // }
+
+    try {
+      const { fileName, fileType, id } = json;
+
+      const signedFileName = `${user}/${id ?? nanoid()}/${fileName}`;
+      const res = await getPresignedUrl(signedFileName, fileType);
+      return Response.json({
+        id,
+        signedUrl: res.url,
+        publicUrl: `https://${process.env.AWS_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${signedFileName}`,
+        fields: res.fields,
+      });
+    } catch (error) {
+      return new Response((error as Error).message, {
+        status: 400,
+      });
+    }
+  },
+);

app/api/upload/route.ts

@@ -0,0 +1,51 @@
+import { auth } from '@/auth';
+import { createKVChat } from '@/lib/kv/chat';
+import { withLogging } from '@/lib/logger';
+import { ChatEntity, MessageBase } from '@/lib/types';
+import { nanoid } from '@/lib/utils';
+import { Session } from 'next-auth';
+import { revalidatePath } from 'next/cache';
+
+/**
+ * @param req
+ * @returns
+ */
+export const POST = withLogging(
+  async (
+    session,
+    json: {
+      id?: string;
+      url: string;
+      initMessages?: MessageBase[];
+    },
+  ): Promise<Response> => {
+    const user = session?.user?.email ?? 'anonymous';
+    // if (!email) {
+    //   return new Response('Unauthorized', {
+    //     status: 401,
+    //   });
+    // }
+
+    try {
+      const { id, url, initMessages } = json;
+
+      const payload: ChatEntity = {
+        url,
+        id: id ?? nanoid(),
+        user,
+        messages: initMessages ?? [],
+        updatedAt: Date.now(),
+      };
+
+      await createKVChat(payload);
+
+      revalidatePath('/chat', 'layout');
+
+      return Response.json(payload);
+    } catch (error) {
+      return new Response((error as Error).message, {
+        status: 400,
+      });
+    }
+  },
+);

app/api/vision-agent/route.ts

@@ -0,0 +1,74 @@
+import { StreamingTextResponse } from 'ai';
+
+// import { auth } from '@/auth';
+import { MessageBase } from '../../../lib/types';
+import { withLogging } from '@/lib/logger';
+import { CLEANED_SEPARATOR } from '@/lib/constants';
+import { cleanAnswerMessage, cleanInputMessage } from '@/lib/messageUtils';
+
+// export const runtime = 'edge';
+export const dynamic = 'force-dynamic';
+export const maxDuration = 300; // This function can run for a maximum of 5 minutes
+
+export const POST = withLogging(
+  async (
+    _session,
+    json: {
+      messages: MessageBase[];
+      id: string;
+      url: string;
+    },
+  ) => {
+    const { messages, url } = json;
+
+    // const session = await auth();
+    // if (!session?.user?.email) {
+    //   return new Response('Unauthorized', {
+    //     status: 401,
+    //   });
+    // }
+
+    const formData = new FormData();
+    formData.append(
+      'input',
+      JSON.stringify(
+        messages.map(message => {
+          if (message.role !== 'assistant') {
+            return {
+              ...message,
+              content: cleanInputMessage(message.content),
+            };
+          } else {
+            const splitedContent = message.content.split(CLEANED_SEPARATOR);
+            return {
+              ...message,
+              content:
+                splitedContent.length > 1
+                  ? cleanAnswerMessage(splitedContent[1])
+                  : message.content,
+            };
+          }
+        }),
+      ),
+    );
+    formData.append('image', url);
+
+    const fetchResponse = await fetch(
+      'https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&visualize_output=true',
+      // 'http://localhost:5050/v1/agent/chat?agent_class=vision_agent',
+      {
+        method: 'POST',
+        headers: {
+          apikey: 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k',
+        },
+        body: formData,
+      },
+    );
+
+    if (fetchResponse.body) {
+      return new StreamingTextResponse(fetchResponse.body);
+    } else {
+      return fetchResponse;
+    }
+  },
+);

app/chat/[id]/page.tsx

@@ -0,0 +1,14 @@
+import { getKVChat } from '@/lib/kv/chat';
+import { Chat } from '@/components/chat';
+
+interface PageProps {
+  params: {
+    id: string;
+  };
+}
+
+export default async function Page({ params }: PageProps) {
+  const { id: chatId } = params;
+  const chat = await getKVChat(chatId);
+  return <Chat chat={chat} />;
+}

app/chat/layout.tsx

@@ -0,0 +1,29 @@
+import { auth, authEmail } from '@/auth';
+import ChatSidebarList from '@/components/chat-sidebar/ChatListSidebar';
+import Loading from '@/components/ui/Loading';
+import { Suspense } from 'react';
+
+interface ChatLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function Layout({ children }: ChatLayoutProps) {
+  const { email, isAdmin } = await authEmail();
+  return (
+    <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
+      <div
+        data-state={email ? 'open' : 'closed'}
+        className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out -translate-x-full data-[state=open]:translate-x-0 lg:flex lg:w-[250px] h-full flex-col 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]">
+          {children}
+        </div>
+      </Suspense>
+    </div>
+  );
+}

app/chat/page.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import ImageSelector from '@/components/chat/ImageSelector';
+import { generateInputImageMarkdown } from '@/lib/messageUtils';
+import { ChatEntity, MessageBase } from '@/lib/types';
+import { fetcher } from '@/lib/utils';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import { IconDiscord, IconGitHub } from '@/components/ui/Icons';
+import Link from 'next/link';
+import { Button } from '@/components/ui/Button';
+import Img from '@/components/ui/Img';
+
+const exampleMessages = [
+  {
+    heading: 'Counting',
+    subheading: 'number of cereals in an image',
+    url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
+    initMessages: [
+      {
+        role: 'user',
+        content:
+          'how many cereals are there in the image?' +
+          '\n\n' +
+          generateInputImageMarkdown(
+            'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
+          ),
+        id: 'fake-id-1',
+      },
+    ],
+  },
+  // {
+  //   heading: 'Detecting',
+  //   url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
+  //   subheading: 'number of cereals in an image',
+  //   message: `How many cereals are there in the image?`,
+  // },
+];
+
+export default function Page() {
+  const router = useRouter();
+  return (
+    <div className="mx-auto max-w-2xl px-4 mt-8">
+      <div className="rounded-lg border bg-background p-8 mb-6">
+        <h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
+        <p>
+          Vision Agent is a library that helps you utilize agent frameworks for
+          your vision tasks. Vision Agent aims to provide an in-seconds
+          experience by allowing users to describe their problem in text and
+          utilizing agent frameworks to solve the task for them.
+        </p>
+        <div className="my-2">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="link" size="icon" asChild className="mr-2">
+                <Link
+                  href="https://github.com/landing-ai/vision-agent"
+                  target="_blank"
+                >
+                  <IconGitHub className="size-6" />
+                </Link>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Github</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="link" size="icon" asChild className="mr-2">
+                <Link href="https://discord.gg/wZ2A7J69" target="_blank">
+                  <IconDiscord className="size-6" />
+                </Link>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Discord</TooltipContent>
+          </Tooltip>
+        </div>
+        <ImageSelector />
+      </div>
+      <div className="mb-4 grid grid-cols-2 gap-2 px-4 sm:px-0">
+        {exampleMessages.map((example, index) => (
+          <div
+            key={index}
+            className={`cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 flex items-center size-full ${
+              index > 1 && 'hidden md:block'
+            }`}
+            onClick={async () => {
+              const resp = await fetcher<ChatEntity>('/api/upload', {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  url: example.url,
+                  initMessages: example.initMessages,
+                }),
+              });
+              if (resp) {
+                router.push(`/chat/${resp.id}`);
+              }
+            }}
+          >
+            <Img src={example.url} alt="example images" className="w-1/4" />
+            <div className="flex items-start flex-col h-full ml-3 w-3/4">
+              <div className="text-sm font-semibold">{example.heading}</div>
+              <div className="text-sm text-zinc-600">{example.subheading}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,159 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --popover: 0 0% 100%;
+    --popover-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%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: ;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 240 5% 64.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --popover: 240 10% 3.9%;
+    --popover-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%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: ;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+
+    --ring: 240 3.7% 15.9%;
+  }
+}
+
+@layer base {
+  * {
+    @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;
+  }
+}
+
+/* Light theme. */
+:root {
+  --color-canvas-default: #ffffff;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: hsla(210, 18%, 87%, 1);
+}
+
+/* Dark theme. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-canvas-default: #0d1117;
+    --color-canvas-subtle: #161b22;
+    --color-border-default: #30363d;
+    --color-border-muted: #21262d;
+  }
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  margin-top: 0;
+  margin-bottom: 16px;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+}
+
+tr {
+  border-top: 1px solid var(--color-border-muted);
+}
+
+td,
+th {
+  padding: 6px 13px;
+  border: 1px solid var(--color-border-default);
+}
+
+th {
+  font-weight: 600;
+}
+
+table img {
+  background-color: transparent;
+}

app/layout.tsx

@@ -0,0 +1,63 @@
+import { Toaster } from 'react-hot-toast';
+import { GeistSans } from 'geist/font/sans';
+import { GeistMono } from 'geist/font/mono';
+
+import '@/app/globals.css';
+import { cn } from '@/lib/utils';
+import { TailwindIndicator } from '@/components/TailwindIndicator';
+import { Providers } from '@/components/Providers';
+import { Header } from '@/components/Header';
+import { ThemeToggle } from '@/components/ThemeToggle';
+
+export const metadata = {
+  metadataBase: new URL(`https://${process.env.VERCEL_URL}`),
+  title: {
+    default: 'Vision Agent',
+    template: `%s - Vision Agent`,
+  },
+  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' },
+  ],
+};
+
+interface RootLayoutProps {
+  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>
+  );
+}

app/page.tsx

@@ -0,0 +1,12 @@
+import { auth } from '@/auth';
+import { redirect } from 'next/navigation';
+
+export default async function Page() {
+  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>
+  // );
+}

app/project/[projectId]/page.tsx

@@ -0,0 +1,33 @@
+import MediaGrid from '@/components/project/MediaGrid';
+import { fetchProjectClass, fetchProjectMedia } from '@/lib/fetch';
+import ProjectChat from '@/components/project/ProjectChat';
+import ClassBar from '@/components/project/ClassBar';
+
+interface PageProps {
+  params: {
+    projectId: string;
+  };
+}
+
+export default async function Page({ params }: PageProps) {
+  const { projectId } = params;
+
+  const [mediaList, classList] = await Promise.all([
+    fetchProjectMedia({ projectId: Number(projectId) }),
+    fetchProjectClass({ projectId: Number(projectId) }),
+  ]);
+
+  return (
+    <div className="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">
+          <ClassBar classList={classList} />
+          <MediaGrid mediaList={mediaList} />
+        </div>
+        <div className="w-1/2 relative overflow-auto">
+          <ProjectChat mediaList={mediaList} />
+        </div>
+      </div>
+    </div>
+  );
+}

app/project/layout.tsx

@@ -0,0 +1,35 @@
+import ProjectListSideBar from '@/components/project-sidebar/ProjectListSideBar';
+import { Suspense } from 'react';
+import Loading from '@/components/ui/Loading';
+import { authEmail } from '@/auth';
+import { redirect } from 'next/navigation';
+
+interface ChatLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function Layout({ children }: ChatLayoutProps) {
+  const { isAdmin } = await authEmail();
+
+  if (!isAdmin) {
+    redirect('/');
+  }
+
+  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

@@ -0,0 +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>
+  );
+}

auth.ts

@@ -0,0 +1,66 @@
+import NextAuth, { type DefaultSession } from 'next-auth';
+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'];
+  }
+}
+
+const restrictedPath = ['/project'];
+
+export const {
+  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 }) {
+      const isAdmin = !!auth?.user?.email?.endsWith('landing.ai');
+      return restrictedPath.find(path =>
+        request.nextUrl.pathname.startsWith(path),
+      )
+        ? isAdmin
+        : true;
+    },
+  },
+  pages: {
+    signIn: '/sign-in', // overrides the next-auth default signin page https://authjs.dev/guides/basics/pages
+  },
+});
+
+export async function authEmail() {
+  const session = await auth();
+  const email = session?.user?.email;
+  return { email, isAdmin: !!email?.endsWith('landing.ai') };
+}

components/Header.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Link from 'next/link';
+
+import { auth, authEmail } from '@/auth';
+import { Button } from '@/components/ui/Button';
+import { UserMenu } from '@/components/UserMenu';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import { IconPlus, IconSeparator } from '@/components/ui/Icons';
+import { LoginMenu } from './LoginMenu';
+import { redirect } from 'next/navigation';
+
+export async function Header() {
+  const session = await auth();
+  const { isAdmin } = await authEmail();
+  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">
+      {/* <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="link" asChild className="mr-2">
+            <Link href="/chat">
+              <IconPlus />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>New chat</TooltipContent>
+      </Tooltip> */}
+      {isAdmin && (
+        <Button variant="link" asChild className="mr-2">
+          <Link href="/project">Projects (Internal)</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">
+        {session?.user ? <UserMenu user={session!.user} /> : <LoginMenu />}
+      </div>
+    </header>
+  );
+}

components/LoginButton.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import { signIn } from 'next-auth/react';
+
+import { cn } from '@/lib/utils';
+import { Button, type ButtonProps } from '@/components/ui/Button';
+import { IconGitHub, IconSpinner, IconGoogle } from '@/components/ui/Icons';
+
+interface LoginButtonProps extends ButtonProps {
+  oauth: 'github' | 'google';
+}
+
+export function LoginButton({ oauth, ...props }: LoginButtonProps) {
+  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>
+  );
+}

components/LoginMenu.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/DropdownMenu';
+import { LoginButton } from './LoginButton';
+
+export interface UserMenuProps {}
+
+export function LoginMenu() {
+  return (
+    <div className="flex items-center justify-between">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost">Sign in</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent sideOffset={8} align="end" className="w-[220px]">
+          <DropdownMenuItem className="flex-col items-center">
+            <LoginButton oauth="google" />
+          </DropdownMenuItem>
+          <DropdownMenuItem className="flex-col items-center">
+            <LoginButton oauth="github" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

components/Providers.tsx

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

components/TailwindIndicator.tsx

@@ -0,0 +1,14 @@
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === 'production') return null;
+
+  return (
+    <div className="fixed bottom-1 left-1 z-50 flex size-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  );
+}

components/ThemeToggle.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import { useTheme } from 'next-themes';
+
+import { Button } from '@/components/ui/Button';
+import { IconMoon, IconSun } from '@/components/ui/Icons';
+
+export function ThemeToggle() {
+  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 === 'dark' ? (
+        <IconMoon className="transition-all" />
+      ) : (
+        <IconSun className="transition-all" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}

components/UserMenu.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import Image from 'next/image';
+import { type Session } from 'next-auth';
+import { signOut } from 'next-auth/react';
+
+import { Button } from '@/components/ui/Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/DropdownMenu';
+import { IconExternalLink } from '@/components/ui/Icons';
+
+export interface UserMenuProps {
+  user: Session['user'];
+}
+
+function getUserInitials(name: string) {
+  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>
+  );
+}

components/chat-sidebar/ChatAdminToggle.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { chatViewMode } from '@/state/chat';
+import { useAtom } from 'jotai';
+import React from 'react';
+
+export interface ChatAdminToggleProps {}
+
+const ChatAdminToggle: React.FC<ChatAdminToggleProps> = () => {
+  const modeAtom = useAtom(chatViewMode);
+  return null;
+};
+
+export default ChatAdminToggle;

components/chat-sidebar/ChatCard.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+import Link from 'next/link';
+import { useParams, usePathname, useRouter } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { ChatEntity } from '@/lib/types';
+import Image from 'next/image';
+import clsx from 'clsx';
+import Img from '../ui/Img';
+import { format } from 'date-fns';
+import { cleanInputMessage } from '@/lib/messageUtils';
+// import { format } from 'date-fns';
+
+type ChatCardProps = PropsWithChildren<{
+  chat: ChatEntity;
+}>;
+
+export const ChatCardLayout: React.FC<
+  PropsWithChildren<{ link: string; classNames?: clsx.ClassValue }>
+> = ({ link, children, classNames }) => {
+  return (
+    <Link
+      className={cn(
+        'p-2 m-2 bg-background max-h-[100px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
+        classNames,
+      )}
+      href={link}
+    >
+      {children}
+    </Link>
+  );
+};
+
+const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
+  const { id: chatIdFromParam } = useParams();
+  const pathname = usePathname();
+  const { id, url, messages, user, updatedAt } = chat;
+  const firstMessage = cleanInputMessage(messages?.[0]?.content ?? '');
+  const title = firstMessage
+    ? firstMessage.length > 50
+      ? firstMessage.slice(0, 50) + '...'
+      : firstMessage
+    : '(No messages yet)';
+  return (
+    <ChatCardLayout
+      link={`/chat/${id}`}
+      classNames={chatIdFromParam === id && 'border-gray-500'}
+    >
+      <div className="overflow-hidden flex items-center size-full">
+        <Img src={url} alt={`chat-${id}-card-image`} className="w-1/4" />
+        <div className="flex items-start flex-col h-full ml-3 w-3/4">
+          <p className="text-sm mb-1">{title}</p>
+          <p className="text-xs text-gray-500">
+            {updatedAt ? format(Number(updatedAt), 'yyyy-MM-dd') : '-'}
+          </p>
+        </div>
+      </div>
+    </ChatCardLayout>
+  );
+};
+
+export default ChatCard;

components/chat-sidebar/ChatListSidebar.tsx

@@ -0,0 +1,27 @@
+import { getKVChats } from '@/lib/kv/chat';
+import ChatCard, { ChatCardLayout } from './ChatCard';
+import { IconPlus } from '../ui/Icons';
+import { auth } from '@/auth';
+
+export interface ChatSidebarListProps {}
+
+export default async function ChatSidebarList({}: ChatSidebarListProps) {
+  const session = await auth();
+  if (!session || !session.user) {
+    return null;
+  }
+  const chats = await getKVChats();
+  return (
+    <>
+      <ChatCardLayout link="/chat">
+        <div className="overflow-hidden flex items-center size-full">
+          <IconPlus className="w-1/4 font-bold" />
+          <p className="text-sm w-3/4 ml-3 font-bold">New chat</p>
+        </div>
+      </ChatCardLayout>
+      {chats.map(chat => (
+        <ChatCard key={chat.id} chat={chat} />
+      ))}
+    </>
+  );
+}

components/chat/ChatList.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Separator } from '@/components/ui/Separator';
+import { ChatMessage } from '@/components/chat/ChatMessage';
+import { MessageBase } from '../../lib/types';
+
+export interface ChatList {
+  messages: MessageBase[];
+}
+
+export function ChatList({ messages }: ChatList) {
+  return (
+    <div className="relative mx-auto max-w-5xl 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

@@ -0,0 +1,151 @@
+// Inspired by Chatbot-UI and modified to fit the needs of this project
+// @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
+
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+import { useMemo } from 'react';
+import { cn } from '@/lib/utils';
+import { CodeBlock } from '@/components/ui/CodeBlock';
+import { MemoizedReactMarkdown } from '@/components/chat/MemoizedReactMarkdown';
+import { IconOpenAI, IconUser } from '@/components/ui/Icons';
+import { MessageBase } from '../../lib/types';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import Img from '../ui/Img';
+import { getCleanedUpMessages } from '@/lib/messageUtils';
+
+export interface ChatMessageProps {
+  message: MessageBase;
+}
+
+export function ChatMessage({ message, ...props }: ChatMessageProps) {
+  const { logs, content } = useMemo(() => {
+    return getCleanedUpMessages({
+      content: message.content,
+      role: message.role,
+    });
+  }, [message.content, message.role]);
+  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">
+        {logs && message.role !== 'user' && (
+          <div className="bg-slate-100 dark:bg-slate-900 mb-4 p-4 max-h-[400px] overflow-auto">
+            <div className="text-xl font-bold">Thinking Process</div>
+            <MemoizedReactMarkdown
+              className="break-words text-sm"
+              remarkPlugins={[remarkGfm, remarkMath]}
+              components={{
+                p({ children }) {
+                  return (
+                    <p className="my-2 last:mb-0 whitespace-pre-line">
+                      {children}
+                    </p>
+                  );
+                },
+                code({ children, ...props }) {
+                  return (
+                    <code className="whitespace-pre-line">{children}</code>
+                  );
+                },
+              }}
+            >
+              {logs}
+            </MemoizedReactMarkdown>
+          </div>
+        )}
+        <MemoizedReactMarkdown
+          className="break-words"
+          remarkPlugins={[remarkGfm, remarkMath]}
+          components={{
+            p({ children, ...props }) {
+              if (
+                props.node.children.some(
+                  child => child.type === 'element' && child.tagName === 'img',
+                )
+              ) {
+                return (
+                  <p className="flex flex-wrap gap-2 items-start">{children}</p>
+                );
+              }
+              return (
+                <p className="my-2 last:mb-0 whitespace-pre-line">{children}</p>
+              );
+            },
+            img(props) {
+              return (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Img
+                      src={props.src ?? '/landing.png'}
+                      alt={props.alt ?? 'answer-image'}
+                      quality={100}
+                      className="cursor-zoom-in"
+                      sizes="(min-width: 66em) 25vw,
+                      (min-width: 44em) 40vw,
+                      100vw"
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <Img
+                      className="m-2"
+                      src={props.src ?? '/landing.png'}
+                      alt={props.alt ?? 'answer-image'}
+                      quality={100}
+                      width={500}
+                    />
+                  </TooltipContent>
+                </Tooltip>
+              );
+            },
+            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('`▍`', '▍');
+              }
+
+              const match = /language-(\w+)/.exec(className || '');
+              if (inline) {
+                return (
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                );
+              }
+
+              return (
+                <CodeBlock
+                  key={Math.random()}
+                  language={(match && match[1]) || ''}
+                  value={String(children).replace(/\n$/, '')}
+                  {...props}
+                />
+              );
+            },
+          }}
+        >
+          {content}
+        </MemoizedReactMarkdown>
+        {/* <ChatMessageActions message={message} /> */}
+      </div>
+    </div>
+  );
+}

components/chat/ChatMessageActions.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { type Message } from 'ai';
+
+import { Button } from '@/components/ui/Button';
+import { IconCheck, IconCopy } from '@/components/ui/Icons';
+import { useCopyToClipboard } from '@/lib/hooks/useCopyToClipboard';
+import { cn } from '@/lib/utils';
+import { MessageBase } from '../../lib/types';
+
+interface ChatMessageActionsProps extends React.ComponentProps<'div'> {
+  message: MessageBase;
+}
+
+export function ChatMessageActions({
+  message,
+  className,
+  ...props
+}: ChatMessageActionsProps) {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
+
+  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>
+  );
+}

components/chat/Composer.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import * as React from 'react';
+import { type UseChatHelpers } from 'ai/react';
+import Textarea from 'react-textarea-autosize';
+
+import { Button } from '@/components/ui/Button';
+import { MessageBase } from '../../lib/types';
+import { useEnterSubmit } from '@/lib/hooks/useEnterSubmit';
+import Img from '../ui/Img';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import {
+  IconArrowDown,
+  IconArrowElbow,
+  IconRefresh,
+  IconStop,
+} from '@/components/ui/Icons';
+import { cn } from '@/lib/utils';
+import { generateInputImageMarkdown } from '@/lib/messageUtils';
+
+export interface ComposerProps
+  extends Pick<
+    UseChatHelpers,
+    'append' | 'isLoading' | 'reload' | 'stop' | 'input' | 'setInput'
+  > {
+  id?: string;
+  title?: string;
+  messages: MessageBase[];
+  url?: string;
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+}
+
+export function Composer({
+  id,
+  title,
+  isLoading,
+  stop,
+  append,
+  reload,
+  input,
+  setInput,
+  messages,
+  isAtBottom,
+  scrollToBottom,
+  url,
+}: ComposerProps) {
+  const { formRef, onKeyDown } = useEnterSubmit();
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  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] h-[178px]">
+    <div className="mx-auto sm:max-w-3xl sm:px-4 h-full">
+      <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4 h-full">
+        <form
+          onSubmit={async e => {
+            e.preventDefault();
+            if (!input?.trim()) {
+              return;
+            }
+            setInput('');
+            await append({
+              id,
+              content:
+                input + (url ? '\n\n' + generateInputImageMarkdown(url) : ''),
+              role: 'user',
+            });
+            scrollToBottom();
+          }}
+          ref={formRef}
+          className="h-full"
+        >
+          <div className="relative flex px-8 pl-2 overflow-hidden size-full bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2 items-start">
+            {url && (
+              <div className="w-1/5 p-2 h-full flex items-center justify-center relative">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Img
+                      src={url}
+                      className="cursor-zoom-in"
+                      alt="preview-image"
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <Img
+                      src={url}
+                      className="m-2"
+                      quality={100}
+                      width={500}
+                      alt="zoomed-in-image"
+                    />
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            )}
+            <Textarea
+              ref={inputRef}
+              tabIndex={0}
+              onKeyDown={onKeyDown}
+              rows={1}
+              value={input}
+              disabled={isLoading}
+              onChange={e => setInput(e.target.value)}
+              placeholder={
+                isLoading
+                  ? 'Vision Agent is thinking...'
+                  : 'Ask question about the image.'
+              }
+              spellCheck={false}
+              className="min-h-[60px] w-4/5 resize-none bg-transparent px-4 py-[1.3em] focus-within:outline-none sm:text-sm"
+            />
+            {/* Scroll to bottom Icon */}
+            <div
+              className={cn(
+                'absolute top-3 right-4 transition-opacity duration-300',
+                isAtBottom ? 'opacity-0' : 'opacity-100',
+              )}
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="bg-background"
+                    onClick={() => scrollToBottom()}
+                  >
+                    <IconArrowDown />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Scroll to bottom</TooltipContent>
+              </Tooltip>
+            </div>
+            {/* Stop / Regenerate Icon */}
+            <div className="absolute bottom-14 right-4">
+              {isLoading ? (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="bg-background"
+                      onClick={() => stop()}
+                    >
+                      <IconStop />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Stop generating</TooltipContent>
+                </Tooltip>
+              ) : (
+                messages?.length >= 2 && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="bg-background"
+                        onClick={() => reload()}
+                      >
+                        <IconRefresh />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Regenerate response</TooltipContent>
+                  </Tooltip>
+                )
+              )}
+            </div>
+            {/* Submit Icon */}
+            <div className="absolute bottom-3 right-4">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="submit"
+                    size="icon"
+                    disabled={isLoading || input === ''}
+                  >
+                    <IconArrowElbow />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Send message</TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+    // </div>
+  );
+}

components/chat/ImageSelector.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import React, { useState } from 'react';
+import useImageUpload from '../../lib/hooks/useImageUpload';
+import { cn, fetcher } from '@/lib/utils';
+import { SignedPayload, MessageBase, ChatEntity } from '@/lib/types';
+import { useRouter } from 'next/navigation';
+import Loading from '../ui/Loading';
+import toast from 'react-hot-toast';
+
+export interface ImageSelectorProps {}
+
+type Example = {
+  url: string;
+  initMessages: MessageBase[];
+};
+
+const ImageSelector: React.FC<ImageSelectorProps> = () => {
+  const router = useRouter();
+  const [isUploading, setUploading] = useState(false);
+  const { getRootProps, getInputProps, isDragActive } = useImageUpload(
+    undefined,
+    async files => {
+      const formData = new FormData();
+      if (files.length !== 1) {
+        throw new Error('Only one image can be uploaded at a time');
+      }
+      setUploading(true);
+      const reader = new FileReader();
+      reader.readAsDataURL(files[0]);
+      reader.onload = async () => {
+        const { id, signedUrl, publicUrl, fields } =
+          await fetcher<SignedPayload>('/api/sign', {
+            method: 'POST',
+            body: JSON.stringify({
+              fileType: files[0].type,
+              fileName: files[0].name,
+            }),
+          });
+        const formData = new FormData();
+        Object.entries(fields).forEach(([key, value]) => {
+          formData.append(key, value as string);
+        });
+        formData.append('file', files[0]);
+
+        const uploadResponse = await fetch(signedUrl, {
+          method: 'POST',
+          body: formData,
+        });
+        if (!uploadResponse.ok) {
+          toast.error(uploadResponse.statusText);
+          return;
+        }
+        const resp = await fetcher<ChatEntity>('/api/upload', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            id,
+            url: publicUrl,
+          }),
+        });
+        setUploading(false);
+        if (resp) {
+          router.push(`/chat/${resp.id}`);
+        }
+      };
+    },
+  );
+  return (
+    <div
+      {...getRootProps()}
+      className={cn(
+        'dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer',
+        isDragActive && 'bg-gray-500/50 border-solid',
+      )}
+    >
+      <input {...getInputProps()} />
+      <div className="text-gray-400 text-md">
+        {isUploading ? (
+          <Loading />
+        ) : (
+          'Start using Vision Agent by selecting an image'
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ImageSelector;

components/chat/MemoizedReactMarkdown.tsx

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

components/chat/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { ChatList } from '@/components/chat/ChatList';
+import { Composer } from '@/components/chat/Composer';
+import { ChatEntity } from '@/lib/types';
+import useVisionAgent from '@/lib/hooks/useVisionAgent';
+import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
+
+export interface ChatProps extends React.ComponentProps<'div'> {
+  chat: ChatEntity;
+}
+
+export function Chat({ chat }: ChatProps) {
+  const { url, id } = chat;
+  const { messages, append, reload, stop, isLoading, input, setInput } =
+    useVisionAgent(chat);
+
+  const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
+    useScrollAnchor();
+
+  return (
+    <>
+      <div className="h-full overflow-auto relative" ref={scrollRef}>
+        <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
+          <ChatList messages={messages} />
+          <div className="h-px w-full" ref={visibilityRef} />
+        </div>
+      </div>
+      <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] h-[178px]">
+        <Composer
+          id={id}
+          url={url}
+          isLoading={isLoading}
+          stop={stop}
+          append={append}
+          reload={reload}
+          messages={messages}
+          input={input}
+          setInput={setInput}
+          isAtBottom={isAtBottom}
+          scrollToBottom={scrollToBottom}
+        />
+      </div>
+    </>
+  );
+}

components/project-sidebar/ProjectCard.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { ProjectBaseInfo } from '@/lib/fetch';
+import { format } from 'date-fns';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import Chip from '../ui/Chip';
+
+export interface ProjectCardProps {
+  projectInfo: ProjectBaseInfo;
+}
+
+export enum LabelType {
+  BoundingBox = 'bounding_box',
+  Segmentation = 'segmentation',
+  Classification = 'classification',
+  AnomalyDetection = 'anomaly_detection',
+  SegmentationInstantLearning = 'segmentation_instant_learning',
+}
+
+const LabelTypeDisplayText: { [key: string]: string } = {
+  [LabelType.BoundingBox]: 'detection',
+  [LabelType.Segmentation]: 'segmentation',
+  [LabelType.Classification]: 'classification',
+  [LabelType.AnomalyDetection]: 'anomaly',
+  [LabelType.SegmentationInstantLearning]: 'vp',
+};
+
+const ProjectCard: React.FC<ProjectCardProps> = ({ projectInfo }) => {
+  const { id, name, created_at, label_type, orgName, subscription } =
+    projectInfo;
+
+  const { projectId: projectIdFromParam } = useParams();
+
+  const formattedDate = format(created_at, 'yyyy-MM-dd');
+  return (
+    <Link
+      className={cn(
+        'p-4 m-2 bg-background 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 w-full">
+        <div className="flex items-center justify-between w-full">
+          <p className="text-xs text-gray-500 truncate mr-2 truncate">
+            {orgName}
+          </p>
+          <p className="text-xs text-gray-500 italic">{subscription}</p>
+        </div>
+        <div className="flex mb-1 items-center">
+          <p className="text-sm font-medium text-gray mr-2 truncate">{name}</p>
+          <Chip value={LabelTypeDisplayText[label_type]} />
+        </div>
+        <div className="flex items-center truncate">
+          <p className="text-xs text-gray-500">{formattedDate}</p>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default ProjectCard;

components/project-sidebar/ProjectListSideBar.tsx

@@ -0,0 +1,17 @@
+import { fetchRecentProjectList } from '@/lib/fetch';
+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} />
+      ))}
+    </>
+  );
+};
+
+export default ProjectListSideBar;

components/project/ClassBar.tsx

@@ -0,0 +1,22 @@
+import { ClassDetails } from '@/lib/fetch';
+import Chip from '../ui/Chip';
+
+export interface ClassBarProps {
+  classList: ClassDetails[];
+}
+
+export default async function ClassBar({ classList }: ClassBarProps) {
+  return (
+    <div className="border-b border-gray-300 px-3 pb-3 max-w-3xl mx-auto">
+      {classList.map(classItem => {
+        return (
+          <Chip
+            key={classItem.id}
+            value={classItem.name}
+            className="px-3 py-1 my-1"
+          />
+        );
+      })}
+    </div>
+  );
+}

components/project/MediaGrid.tsx

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

components/project/MediaTile.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import { MediaDetails } from '@/lib/fetch';
+import { useAtom } from 'jotai';
+import { selectedMediaIdAtom } from '@/state/media';
+import { cn } from '@/lib/utils';
+
+export interface MediaTileProps {
+  media: MediaDetails;
+}
+
+export default function MediaTile({ media }: MediaTileProps) {
+  const {
+    url,
+    thumbnails,
+    id,
+    name,
+    properties: { width, height },
+  } = media;
+  const [selectedMediaId, setSelectedMediaId] = useAtom(selectedMediaIdAtom);
+  const selected = selectedMediaId === id;
+  // 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}
+          onClick={() => setSelectedMediaId(id)}
+          className={cn(
+            'w-full h-auto relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content',
+            selected && 'border-2 border-primary',
+          )}
+        />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{name}</p>
+        <p className="font-light text-xs">{`${width} x ${height}`}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

components/project/ProjectChat.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { MediaDetails } from '@/lib/fetch';
+import React from 'react';
+import { ChatList } from '../chat/ChatList';
+import useVisionAgent from '@/lib/hooks/useVisionAgent';
+import { nanoid } from '@/lib/utils';
+import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
+import { Composer } from '../chat/Composer';
+import { useAtomValue } from 'jotai';
+import { selectedMediaIdAtom } from '@/state/media';
+
+export interface ChatProps {
+  mediaList: MediaDetails[];
+}
+
+const ProjectChat: React.FC<ChatProps> = ({ mediaList }) => {
+  const selectedMediaId = useAtomValue(selectedMediaIdAtom);
+  // fallback to the first media
+  const selectedMedia =
+    mediaList.find(media => media.id === selectedMediaId) ?? mediaList[0];
+  const { messages, append, reload, stop, isLoading, input, setInput } =
+    useVisionAgent({
+      url: selectedMedia.url,
+      messages: [],
+      user: 'does-not-matter@landing.ai',
+      updatedAt: Date.now(),
+    });
+
+  const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
+    useScrollAnchor();
+
+  return (
+    <>
+      <div className="h-full overflow-auto" ref={scrollRef}>
+        <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
+          <ChatList messages={messages} />
+          <div className="h-px w-full" ref={visibilityRef} />
+        </div>
+      </div>
+      <div className="absolute inset-x-0 bottom-0 w-full h-[178px]">
+        <Composer
+          url={selectedMedia.url}
+          isLoading={isLoading}
+          stop={stop}
+          append={append}
+          reload={reload}
+          messages={messages}
+          input={input}
+          setInput={setInput}
+          isAtBottom={isAtBottom}
+          scrollToBottom={scrollToBottom}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ProjectChat;

components/ui/Button.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+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',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

components/ui/Chip.tsx

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

components/ui/CodeBlock.tsx

@@ -0,0 +1,148 @@
+// Inspired by Chatbot-UI and modified to fit the needs of this project
+// @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Markdown/CodeBlock.tsx
+
+'use client';
+
+import { FC, memo } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+import { useCopyToClipboard } from '@/lib/hooks/useCopyToClipboard';
+import { IconCheck, IconCopy, IconDownload } from '@/components/ui/Icons';
+import { Button } from '@/components/ui/Button';
+
+interface Props {
+  language: string;
+  value: string;
+}
+
+interface languageMap {
+  [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
+};
+
+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 CodeBlock: FC<Props> = memo(({ language, value }) => {
+  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);
+
+    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 onCopy = () => {
+    if (isCopied) return;
+    copyToClipboard(value);
+  };
+
+  return (
+    <div className="relative w-full font-sans codeblock bg-zinc-950">
+      <div className="flex items-center justify-between w-full px-6 py-2 pr-4 bg-zinc-800 text-zinc-100">
+        <span className="text-xs lowercase">{language}</span>
+        <div className="flex items-center space-x-1">
+          <Button
+            variant="ghost"
+            className="hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+            onClick={downloadAsFile}
+            size="icon"
+          >
+            <IconDownload />
+            <span className="sr-only">Download</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+            onClick={onCopy}
+          >
+            {isCopied ? <IconCheck /> : <IconCopy />}
+            <span className="sr-only">Copy code</span>
+          </Button>
+        </div>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={coldarkDark}
+        PreTag="div"
+        showLineNumbers
+        customStyle={{
+          margin: 0,
+          width: '100%',
+          background: 'transparent',
+          padding: '1.5rem 1rem',
+        }}
+        lineNumberStyle={{
+          userSelect: 'none',
+        }}
+        codeTagProps={{
+          style: {
+            fontSize: '0.9rem',
+            fontFamily: 'var(--font-mono)',
+          },
+        }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  );
+});
+CodeBlock.displayName = 'CodeBlock';
+
+export { CodeBlock };

components/ui/DropdownMenu.tsx

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

components/ui/Icons.tsx

@@ -0,0 +1,585 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function IconNextChat({
+  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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+function IconDiscord({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="800px"
+      height="800px"
+      viewBox="0 -28.5 256 256"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <g>
+        <path
+          d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+          fill="#5865F2"
+          fillRule="nonzero"
+        ></path>
+      </g>
+    </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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+function IconExternalLink({
+  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>
+  );
+}
+
+function IconChevronUpDown({
+  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>
+  );
+}
+
+function IconLoading({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      aria-hidden="true"
+      className="size-8 text-gray-200 animate-spin 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,
+  IconDiscord,
+};