update

Dockerfile

@@ -5,7 +5,7 @@ RUN corepack enable
 
 FROM base AS deps
 WORKDIR /app
-COPY package.json pnpm-lock.yaml ./
+COPY package.json pnpm-lock.yaml prisma/* ./
 RUN pnpm i --frozen-lockfile
 
 # Rebuild the source code only when needed
@@ -15,12 +15,11 @@ COPY --from=deps --link /app/node_modules ./node_modules
 COPY --link  . .
 
 RUN --mount=type=secret,id=AUTH_SECRET \
---mount=type=secret,id=OPENAI_API_KEY \
-AUTH_SECRET="$(cat /run/secrets/AUTH_SECRET)" \ 
-OPENAI_API_KEY="$(cat /run/secrets/OPENAI_API_KEY)" \
-NEXT_SHARP_PATH="/app/node_modules/sharp" \
-USE_STANDALONE_BUILD=True \
-pnpm run build
+  --mount=type=secret,id=OPENAI_API_KEY \
+  AUTH_SECRET="$(cat /run/secrets/AUTH_SECRET)" \ 
+  OPENAI_API_KEY="$(cat /run/secrets/OPENAI_API_KEY)" \
+  USE_STANDALONE_BUILD=True \
+  pnpm run build
 
 RUN mkdir -p /app/.next/cache/images
 
@@ -39,11 +38,9 @@ COPY --from=builder --link --chown=1000:1000 /app/.next/standalone ./
 COPY --from=builder --link --chown=1000:1000 /app/.next/static ./.next/static
 COPY --from=builder --link --chown=1000:1000 /app/.next/cache/images ./.next/cache/images
 
-USER nextjs
+EXPOSE 3000
 
-EXPOSE 7860
-
-ENV PORT 7860
+ENV PORT 3000
 ENV HOSTNAME 0.0.0.0
 
 CMD ["node", "server.js"]

README.md

@@ -1,5 +1,5 @@
 ---
-title: Vision Agent Landing
+title: Vision Agent
 emoji: 🏃
 colorFrom: yellow
 colorTo: indigo
@@ -7,4 +7,74 @@ sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<a href="https://chat.vercel.ai/">
+  <img alt="Next.js 14 and App Router-ready AI chatbot." src="https://chat.vercel.ai/opengraph-image.png">
+  <h1 align="center">Next.js AI Chatbot</h1>
+</a>
+
+<p align="center">
+  An open-source AI chatbot app template built with Next.js, the Vercel AI SDK, OpenAI, and Vercel KV.
+</p>
+
+<p align="center">
+  <a href="#features"><strong>Features</strong></a> ·
+  <a href="#model-providers"><strong>Model Providers</strong></a> ·
+  <a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
+  <a href="#running-locally"><strong>Running locally</strong></a> ·
+  <a href="#authors"><strong>Authors</strong></a>
+</p>
+<br/>
+
+## Features
+
+- [Next.js](https://nextjs.org) App Router
+- React Server Components (RSCs), Suspense, and Server Actions
+- [Vercel AI SDK](https://sdk.vercel.ai/docs) for streaming chat UI
+- Support for OpenAI (default), Anthropic, Cohere, Hugging Face, or custom AI chat models and/or LangChain
+- [shadcn/ui](https://ui.shadcn.com)
+  - Styling with [Tailwind CSS](https://tailwindcss.com)
+  - [Radix UI](https://radix-ui.com) for headless component primitives
+  - Icons from [Phosphor Icons](https://phosphoricons.com)
+- Chat History, rate limiting, and session storage with [Vercel KV](https://vercel.com/storage/kv)
+- [NextAuth.js](https://github.com/nextauthjs/next-auth) for authentication
+
+## Model Providers
+
+This template ships with OpenAI `gpt-3.5-turbo` as the default. However, thanks to the [Vercel AI SDK](https://sdk.vercel.ai/docs), you can switch LLM providers to [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), [Hugging Face](https://huggingface.co), or using [LangChain](https://js.langchain.com) with just a few lines of code.
+
+## Deploy Your Own
+
+You can deploy your own version of the Next.js AI Chatbot to Vercel with one click:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js+Chat&demo-description=A+full-featured%2C+hackable+Next.js+AI+chatbot+built+by+Vercel+Labs&demo-url=https%3A%2F%2Fchat.vercel.ai%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F4aVPvWuTmBvzM5cEdRdqeW%2F4234f9baf160f68ffb385a43c3527645%2FCleanShot_2023-06-16_at_17.09.21.png&project-name=Next.js+Chat&repository-name=nextjs-chat&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-chatbot&from=templates&skippable-integrations=1&env=OPENAI_API_KEY%2CAUTH_GITHUB_ID%2CAUTH_GITHUB_SECRET%2CAUTH_SECRET&envDescription=How+to+get+these+env+vars&envLink=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&teamCreateStatus=hidden&stores=[{"type":"kv"}])
+
+## Creating a KV Database Instance
+
+Follow the steps outlined in the [quick start guide](https://vercel.com/docs/storage/vercel-kv/quickstart#create-a-kv-database) provided by Vercel. This guide will assist you in creating and configuring your KV database instance on Vercel, enabling your application to interact with it.
+
+Remember to update your environment variables (`KV_URL`, `KV_REST_API_URL`, `KV_REST_API_TOKEN`, `KV_REST_API_READ_ONLY_TOKEN`) in the `.env` file with the appropriate credentials provided during the KV database setup.
+
+## Running locally
+
+You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js AI Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/environment-variables) for this, but a `.env` file is all that is necessary.
+
+> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.
+
+1. Install Vercel CLI: `npm i -g vercel`
+2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
+3. Download your environment variables: `vercel env pull`
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Your app template should now be running on [localhost:3000](http://localhost:3000/).
+
+## Authors
+
+This library is created by [Vercel](https://vercel.com) and [Next.js](https://nextjs.org) team members, with contributions from:
+
+- Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer)) - [Vercel](https://vercel.com)
+- Shu Ding ([@shuding\_](https://twitter.com/shuding_)) - [Vercel](https://vercel.com)
+- shadcn ([@shadcn](https://twitter.com/shadcn)) - [Vercel](https://vercel.com)

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

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

app/api/chat/route.ts

@@ -6,18 +6,14 @@ import {
   ChatCompletionMessageParam,
   ChatCompletionContentPart,
 } from 'openai/resources';
-import { MessageBase } from '../../../lib/types';
+import { MessageUI } 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[];
+    messages: MessageUI[];
     id: string;
     url: string;
   };
@@ -43,6 +39,9 @@ export const POST = async (req: Request) => {
       };
     },
   );
+  const openai = new OpenAI({
+    apiKey: process.env.OPENAI_API_KEY,
+  });
   const res = await openai.chat.completions.create({
     model: 'gpt-4-vision-preview',
     messages: formattedMessage,

app/api/sign/route.ts

@@ -23,16 +23,10 @@ export const POST = withLogging(
     // }
 
     try {
-      const { fileName, fileType, id } = json;
+      const { fileName, fileType, id = nanoid() } = 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,
-      });
+      const res = await getPresignedUrl(fileName, fileType, id, user);
+      return Response.json(res);
     } catch (error) {
       return new Response((error as Error).message, {
         status: 400,

app/api/upload/route.ts

@@ -1,51 +0,0 @@
-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

@@ -1,74 +1,337 @@
 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';
+import { MessageUI } from '@/lib/types';
+
+import { logger, withLogging } from '@/lib/logger';
+import { getPresignedUrl } from '@/lib/aws';
+import { dbPostUpdateMessageResponse } from '@/lib/db/functions';
 
 // export const runtime = 'edge';
 export const dynamic = 'force-dynamic';
 export const maxDuration = 300; // This function can run for a maximum of 5 minutes
+const TIMEOUT_MILI_SECONDS = 2 * 60 * 1000;
+const FINAL_TIMEOUT_ERROR: PrismaJson.FinalErrorBody = {
+  type: 'final_error',
+  status: 'failed',
+  payload: {
+    name: 'AgentTimeout',
+    value: `Haven't received any response in last ${TIMEOUT_MILI_SECONDS / 60000} minutes, agent timed out.`,
+    traceback_raw: [],
+  },
+};
+
+const uploadBase64 = async (
+  base64: string,
+  messageId: string,
+  chatId: string,
+  index: number,
+  user: string,
+) => {
+  const res = await fetch(base64);
+  const blob = await res.blob();
+  const { signedUrl, publicUrl, fields } = await getPresignedUrl(
+    `answer-${index}.${blob.type.split('/')[1]}`,
+    blob.type,
+    `${chatId}/${messageId}`,
+    user,
+  );
+  const formData = new FormData();
+  Object.entries(fields).forEach(([key, value]) => {
+    formData.append(key, value as string);
+  });
+  formData.append('file', blob);
+
+  const uploadResponse = await fetch(signedUrl, {
+    method: 'POST',
+    body: formData,
+  });
+  if (uploadResponse.ok) {
+    return publicUrl;
+  } else {
+    throw new Error('Upload failed');
+  }
+};
+
+const modifyCodePayload = async (
+  msg: PrismaJson.MessageBody,
+  messageId: string,
+  chatId: string,
+  user: string,
+): Promise<PrismaJson.MessageBody> => {
+  if (
+    (msg.type !== 'final_code' &&
+      (msg.type !== 'code' ||
+        msg.status === 'started' ||
+        msg.status === 'running')) ||
+    !msg.payload?.result
+  ) {
+    return msg;
+  }
+  const result = (
+    typeof msg.payload.result === 'string'
+      ? JSON.parse(msg.payload.result)
+      : msg.payload.result
+  ) as PrismaJson.StructuredResult;
+  if (msg.type === 'code') {
+    if (result && result.results) {
+      msg.payload.result = {
+        ...result,
+        results: result.results.map((_result: any) => {
+          return {
+            ..._result,
+            png: undefined,
+            mp4: undefined,
+          };
+        }),
+      };
+    }
+    return msg;
+  }
+  for (let index = 0; index < result.results.length; index++) {
+    const png = result.results[index].png ?? '';
+    const mp4 = result.results[index].mp4 ?? '';
+    if (!png && !mp4) continue;
+    const resp = await uploadBase64(
+      png ? 'data:image/png;base64,' + png : 'data:video/mp4;base64,' + mp4,
+      messageId,
+      chatId,
+      index,
+      user,
+    );
+    if (png) result.results[index].png = resp;
+    if (mp4) result.results[index].mp4 = resp;
+  }
+  msg.payload.result = result;
+  return msg;
+};
 
 export const POST = withLogging(
   async (
-    _session,
+    session,
     json: {
-      messages: MessageBase[];
+      apiMessages: string;
       id: string;
-      url: string;
+      mediaUrl: string;
     },
+    request,
   ) => {
-    const { messages, url } = json;
-
-    // const session = await auth();
-    // if (!session?.user?.email) {
-    //   return new Response('Unauthorized', {
-    //     status: 401,
-    //   });
-    // }
+    const { apiMessages, mediaUrl, id: chatId } = json;
+    const messages: MessageUI[] = JSON.parse(apiMessages);
+    const messageId = messages[messages.length - 1].id.split('-')[0];
+    const user = session?.user?.email ?? 'anonymous';
 
     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);
+    formData.append('input', apiMessages);
+    formData.append('image', mediaUrl);
+
+    const agentHost = process.env.LND_TIER
+      ? 'http://publicrestapi-app-lndsvc.publicrestapi.svc.cluster.local:5000'
+      : 'https://api.dev.landing.ai';
 
     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',
+      `${agentHost}/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
+      // `https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
+      // `http://localhost:5001/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
       {
         method: 'POST',
         headers: {
-          apikey: 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k',
+          // default to dev apikey
+          apikey:
+            process.env.LND_TIER === 'production'
+              ? 'land_sk_nMnUf8xiJJUjyw1l5QaIJJ4ZyrvPthzVmPAIG7TtJY7F9CW6lu' // prod key
+              : 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k', // dev key
         },
         body: formData,
       },
     );
 
-    if (fetchResponse.body) {
-      return new StreamingTextResponse(fetchResponse.body);
-    } else {
+    if (!fetchResponse.ok && fetchResponse.body) {
+      const reader = fetchResponse.body.getReader();
+      return new StreamingTextResponse(
+        new ReadableStream({
+          async start(controller) {
+            try {
+              const { done, value } = await reader?.read();
+              if (!done) {
+                const errorText = new TextDecoder().decode(value);
+                logger.error(session, { message: errorText }, request);
+                controller.error(new Error(`Response error: ${errorText}`));
+              }
+            } catch (e) {
+              logger.error(session, (e as Error).message, request);
+            }
+          },
+        }),
+        {
+          status: 400,
+        },
+      );
+    }
+    // const streamData = new experimental_StreamData();
+
+    if (!fetchResponse.body) {
       return fetchResponse;
     }
+    const encoder = new TextEncoder();
+    const decoder = new TextDecoder('utf-8');
+    let maxChunkSize = 0;
+    let buffer = '';
+    let time = Date.now();
+    const results: PrismaJson.MessageBody[] = [];
+    const stream = new ReadableStream({
+      async start(controller) {
+        const parseLine = async (
+          line: string,
+          ignoreParsingError = false,
+        ): Promise<{ data?: PrismaJson.MessageBody; error?: Error }> => {
+          let msg = null;
+          try {
+            msg = JSON.parse(line);
+          } catch (e) {
+            if (ignoreParsingError) return {};
+            else {
+              return { error: e as Error };
+            }
+          }
+          if (!msg) return {};
+          try {
+            const modifiedMsg = await modifyCodePayload(
+              {
+                ...msg,
+                timestamp: new Date(),
+              },
+              messageId,
+              chatId,
+              user,
+            );
+            return { data: modifiedMsg };
+          } catch (e) {
+            return { error: e as Error };
+          }
+        };
+
+        const processChunk = async (lines: string[]) => {
+          if (lines.length === 0) {
+            if (Date.now() - time > TIMEOUT_MILI_SECONDS) {
+              results.push(FINAL_TIMEOUT_ERROR);
+              // https://github.com/vercel/ai/blob/f7002ad2c5aa58ce6ed83e8d31fe22f71ebdb7d7/packages/ui-utils/src/stream-parts.ts#L62
+              controller.enqueue(
+                '2:' +
+                  encoder.encode(JSON.stringify(FINAL_TIMEOUT_ERROR) + '\n'),
+              );
+              return { done: true, reason: 'timeout' };
+            }
+          } else {
+            time = Date.now();
+          }
+          buffer = lines.pop() ?? ''; // Save the last incomplete line back to the buffer
+          for (let line of lines) {
+            const { data: parsedMsg, error } = await parseLine(line);
+            if (error) {
+              results.push({
+                type: 'final_error',
+                status: 'failed',
+                payload: {
+                  name: 'ParseError',
+                  value: line,
+                  traceback_raw: [],
+                },
+              });
+              return { done: true, reason: 'api_error', error };
+            } else if (parsedMsg) {
+              results.push(parsedMsg);
+              controller.enqueue(
+                encoder.encode('2:' + JSON.stringify([parsedMsg]) + '\n'),
+              );
+              if (parsedMsg.type === 'final_code') {
+                return { done: true, reason: 'agent_concluded' };
+              } else if (parsedMsg.type === 'final_error') {
+                return {
+                  done: true,
+                  reason: 'agent_error',
+                  error: parsedMsg.payload,
+                };
+              }
+            } else {
+              controller.enqueue(encoder.encode(''));
+            }
+          }
+          if (buffer) {
+            const { data: parsedBuffer, error } = await parseLine(buffer, true);
+            if (error) {
+              results.push({
+                type: 'final_error',
+                status: 'failed',
+                payload: {
+                  name: 'ParseError',
+                  value: buffer,
+                  traceback_raw: [],
+                },
+              });
+              return { done: true, reason: 'api_error', error };
+            } else if (parsedBuffer) {
+              buffer = '';
+              results.push(parsedBuffer);
+              controller.enqueue(
+                encoder.encode('2:' + JSON.stringify([parsedBuffer]) + '\n'),
+              );
+              if (parsedBuffer.type === 'final_code') {
+                return { done: true, reason: 'agent_concluded' };
+              } else if (parsedBuffer.type === 'final_error') {
+                return {
+                  done: true,
+                  reason: 'agent_error',
+                  error: parsedBuffer.payload,
+                };
+              }
+            } else {
+              controller.enqueue(encoder.encode(''));
+            }
+          }
+          return { done: false };
+        };
+
+        // const parser = createParser(streamParser);
+        for await (const chunk of fetchResponse.body as any) {
+          const data = decoder.decode(chunk);
+          buffer += data;
+          maxChunkSize = Math.max(data.length, maxChunkSize);
+          const lines = buffer
+            .split('\n')
+            .filter(line => line.trim().length > 0);
+          const { done, reason, error } = await processChunk(lines);
+          if (done) {
+            const processMsgs = results.filter(
+              res => res.type !== 'final_code',
+            ) as PrismaJson.AgentResponseBodies;
+            await dbPostUpdateMessageResponse(messageId, {
+              response: processMsgs.map(res => JSON.stringify(res)).join('\n'),
+              result: results.find(
+                res => res.type === 'final_code',
+              ) as PrismaJson.FinalCodeBody,
+              responseBody: processMsgs,
+            });
+            logger.info(
+              session,
+              {
+                message: 'Streaming ended',
+                maxChunkSize,
+                reason,
+                error,
+              },
+              request,
+              '__AGENT_DONE',
+            );
+            controller.close();
+          }
+        }
+      },
+    });
+    return new Response(stream, {
+      headers: {
+        'Content-Type': 'application/x-ndjson',
+      },
+    });
   },
 );

app/chat/[id]/page.tsx

@@ -1,5 +1,7 @@
-import { getKVChat } from '@/lib/kv/chat';
-import { Chat } from '@/components/chat';
+import { Suspense } from 'react';
+import ChatServer from './server';
+import Loading from '@/components/ui/Loading';
+import { auth } from '@/auth';
 
 interface PageProps {
   params: {
@@ -9,6 +11,15 @@ interface PageProps {
 
 export default async function Page({ params }: PageProps) {
   const { id: chatId } = params;
-  const chat = await getKVChat(chatId);
-  return <Chat chat={chat} />;
+  return (
+    <Suspense
+      fallback={
+        <div className="h-screen w-screen flex justify-center items-center">
+          <Loading />
+        </div>
+      }
+    >
+      <ChatServer chatId={chatId} />
+    </Suspense>
+  );
 }

app/chat/[id]/server.tsx

@@ -0,0 +1,26 @@
+import ChatInterface from '../../../components/ChatInterface';
+import { auth, sessionUser } from '@/auth';
+import { dbGetChat } from '@/lib/db/functions';
+import { redirect } from 'next/navigation';
+import { revalidatePath } from 'next/cache';
+import TopPrompt from '@/components/chat/TopPrompt';
+
+interface ChatServerProps {
+  chatId: string;
+}
+
+export default async function ChatServer({ chatId }: ChatServerProps) {
+  const chat = await dbGetChat(chatId);
+  const { id: userId } = await sessionUser();
+
+  if (!chat) {
+    revalidatePath('/');
+    redirect('/');
+  }
+  return (
+    <div className="w-[1600px] max-w-full mx-auto flex flex-col space-y-4 items-center">
+      <TopPrompt chat={chat} userId={userId} />
+      <ChatInterface chat={chat} userId={userId} />
+    </div>
+  );
+}

app/chat/layout.tsx

@@ -1,29 +1,8 @@
-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>
-  );
+  // return <Suspense fallback={<Loading />}>{children}</Suspense>;
+  return children;
 }

app/chat/page.tsx

@@ -1,118 +1,7 @@
-'use client';
+import { redirect } from 'next/navigation';
 
-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';
+export interface PageProps {}
 
-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>
-  );
+export default async function Page({}: PageProps) {
+  redirect('/');
 }

app/globals.css

@@ -7,17 +7,11 @@
     --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%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
 
     --primary: 240 5.9% 10%;
     --primary-foreground: 0 0% 98%;
@@ -25,13 +19,18 @@
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
 
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
     --accent: 240 4.8% 95.9%;
-    --accent-foreground: ;
+    --accent-foreground: 240 5.9% 10%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
 
-    --ring: 240 5% 64.9%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
 
     --radius: 0.5rem;
   }
@@ -40,17 +39,11 @@
     --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%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
 
     --primary: 0 0% 98%;
     --primary-foreground: 240 5.9% 10%;
@@ -58,13 +51,18 @@
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
 
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
     --accent: 240 3.7% 15.9%;
-    --accent-foreground: ;
+    --accent-foreground: 0 0% 98%;
 
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
+    --destructive-foreground: 0 0% 98%;
 
-    --ring: 240 3.7% 15.9%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
 
@@ -77,83 +75,36 @@
   }
 }
 
-@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;
-  }
+h1 {
+  font-size: 3.75rem; /* 48px */
+  font-family: var(--font-geist-sans);
+  font-weight: bold;
+  letter-spacing: -1px;
 }
 
-table {
-  border-spacing: 0;
-  border-collapse: collapse;
-  display: block;
-  margin-top: 0;
-  margin-bottom: 16px;
-  width: max-content;
-  max-width: 100%;
-  overflow: auto;
+.homepage {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='800' preserveAspectRatio='none' viewBox='0 0 1440 800'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='800' x='0' y='0' fill='rgba(39%2c 39%2c 42%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c586.338C117.188%2c602.632%2c249.981%2c607.097%2c343.984%2c535.25C436.988%2c464.167%2c428.51%2c324.327%2c480.215%2c219.307C534.041%2c109.979%2c656.285%2c27.833%2c653.789%2c-94.001C651.262%2c-217.335%2c542.961%2c-307.497%2c467.422%2c-405.024C387.438%2c-508.29%2c329.741%2c-667.611%2c199.733%2c-680.229C64.395%2c-693.364%2c-10.885%2c-516.553%2c-136.125%2c-463.601C-240.173%2c-419.609%2c-369.118%2c-464.571%2c-462.091%2c-400.404C-565.056%2c-329.341%2c-652.036%2c-220.136%2c-668.569%2c-96.126C-685.064%2c27.595%2c-620.538%2c148.465%2c-548.895%2c250.672C-485.01%2c341.811%2c-382.503%2c389.373%2c-287.551%2c447.439C-194.861%2c504.122%2c-107.613%2c571.375%2c0%2c586.338' fill='%23212124'%3e%3c/path%3e%3cpath d='M1440 1336.819C1541.131 1345.339 1640.5529999999999 1299.223 1721.426 1237.907 1798.82 1179.229 1854.8220000000001 1095.077 1881.876 1001.798 1906.8519999999999 915.683 1873.705 828.071 1866.208 738.721 1858.141 642.578 1889.666 537.0129999999999 1836.144 456.739 1781.231 374.378 1680.9279999999999 326.709 1582.8029999999999 313.659 1490.378 301.367 1407.661 359.059 1319.016 387.966 1233.469 415.863 1131.429 413.58 1071.248 480.474 1010.852 547.608 1027.055 649.928 1004.646 737.406 978.896 837.926 891.045 936.749 929.698 1033.047 968.1410000000001 1128.8229999999999 1098.805 1140.133 1187.4850000000001 1192.922 1272.452 1243.501 1341.467 1328.517 1440 1336.819' fill='%232d2d30'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1041'%3e%3crect width='1440' height='800' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
+  background-size: cover;
+  background: linear-gradient(to bottom, rgb(9, 9, 11), rgb(32, 32, 39));
 }
 
-tr {
-  border-top: 1px solid var(--color-border-muted);
+.text-webkit-center {
+  text-align: -webkit-center;
 }
 
-td,
-th {
-  padding: 6px 13px;
-  border: 1px solid var(--color-border-default);
+.svg-shadow {
+  border-radius: 100%;
+  animation: svg-shadow 1.5s ease-in-out infinite alternate;
 }
 
-th {
-  font-weight: 600;
-}
+@keyframes svg-shadow {
+  from {
+    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px transparent)
+      drop-shadow(0 0 10px transparent);
+  }
 
-table img {
-  background-color: transparent;
+  to {
+    filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 10px transparent)
+      drop-shadow(0 0 20px transparent);
+  }
 }

app/layout.tsx

@@ -7,7 +7,6 @@ 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}`),
@@ -17,9 +16,9 @@ export const metadata = {
   },
   description: 'By Landing AI',
   icons: {
-    icon: '/landing.png',
-    shortcut: '/landing.png',
-    apple: '/landing.png',
+    icon: '/landing4.png',
+    shortcut: '/landing4.png',
+    apple: '/landing4.png',
   },
 };
 
@@ -34,7 +33,8 @@ interface RootLayoutProps {
   children: React.ReactNode;
 }
 
-export default function RootLayout({ children }: RootLayoutProps) {
+export default function RootLayout(props: RootLayoutProps) {
+  const { children } = props;
   return (
     <html lang="en" suppressHydrationWarning>
       <body
@@ -52,8 +52,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
           disableTransitionOnChange
         >
           <div className="flex flex-col min-h-screen">
-            {!process.env.NEXT_PUBLIC_IS_HUGGING_FACE && <Header />}
-            <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
+            <Header />
+            <main className="flex p-4 h-[calc(100vh-64px)] bg-background overflow-hidden relative w-screen">
+              {children}
+            </main>
           </div>
           <TailwindIndicator />
         </Providers>

app/page.tsx

@@ -1,12 +1,82 @@
-import { auth } from '@/auth';
-import { redirect } from 'next/navigation';
+'use client';
 
-export default async function Page() {
-  redirect('/chat');
+import { useRouter } from 'next/navigation';
 
-  // 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>
-  // );
+import { useRef, useState } from 'react';
+import Composer, { ComposerRef } from '@/components/chat/Composer';
+import { dbPostCreateChat } from '@/lib/db/functions';
+import { nanoid } from '@/lib/utils';
+import Chip from '@/components/ui/Chip';
+import { IconArrowUpRight } from '@/components/ui/Icons';
+
+const EXAMPLES = [
+  {
+    title: 'Counting flowers in image',
+    mediaUrl:
+      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png',
+    prompt:
+      'Detect flowers in this image, draw boxes and output the image, also return total number of flowers',
+  },
+  {
+    title: 'Detecting sharks in video',
+    mediaUrl:
+      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/shark3_short.mp4',
+    prompt:
+      'Can you detect any surfboards or sharks in the video, draw a green line between the shark and the nearest surfboard and add the distance between them in meters assuming 30 pixels is 1 meter. Make the line red if the shark is within 10 meters of a surfboard. Sample the video at 1 frames per second and save the output video as output.mp4.',
+  },
+];
+
+export default function Page() {
+  const router = useRouter();
+  const composerRef = useRef<ComposerRef>(null);
+  return (
+    <div className="h-screen w-screen homepage">
+      <div className="mx-auto w-[42rem] max-w-full px-4 mt-[200px]">
+        <h1 className="mb-4 text-center relative">
+          Vision Agent
+          <Chip className="absolute bg-green-100 text-green-500">BETA</Chip>
+        </h1>
+        <h4 className="text-center">
+          Generate code to solve your vision problem with simple prompts.
+        </h4>
+        <div className="my-8">
+          <Composer
+            ref={composerRef}
+            onSubmit={async ({ input, mediaUrl }) => {
+              const newId = nanoid();
+              const resp = await dbPostCreateChat({
+                id: newId,
+                title: `conversation-${newId}`,
+                mediaUrl,
+                message: {
+                  prompt: input,
+                  mediaUrl,
+                },
+              });
+              if (resp) {
+                router.push(`/chat/${newId}`);
+              }
+            }}
+          />
+        </div>
+        {EXAMPLES.map((example, index) => {
+          return (
+            <Chip
+              key={index}
+              className="bg-transparent border border-zinc-500 cursor-pointer px-4"
+              onClick={() => {
+                composerRef.current?.setInput(example.prompt);
+                composerRef.current?.setMediaUrl(example.mediaUrl);
+              }}
+            >
+              <div className="flex flex-row items-center space-x-2">
+                <p className="text-primary text-sm">{example.title}</p>
+                <IconArrowUpRight className="text-primary" />
+              </div>
+            </Chip>
+          );
+        })}
+      </div>
+    </div>
+  );
 }

app/project/[projectId]/page.tsx

@@ -1,33 +0,0 @@
-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

@@ -1,7 +1,7 @@
 import ProjectListSideBar from '@/components/project-sidebar/ProjectListSideBar';
 import { Suspense } from 'react';
 import Loading from '@/components/ui/Loading';
-import { authEmail } from '@/auth';
+import { sessionUser } from '@/auth';
 import { redirect } from 'next/navigation';
 
 interface ChatLayoutProps {
@@ -9,7 +9,7 @@ interface ChatLayoutProps {
 }
 
 export default async function Layout({ children }: ChatLayoutProps) {
-  const { isAdmin } = await authEmail();
+  const { isAdmin } = await sessionUser();
 
   if (!isAdmin) {
     redirect('/');

auth.ts

@@ -1,6 +1,8 @@
 import NextAuth, { type DefaultSession } from 'next-auth';
 import GitHub from 'next-auth/providers/github';
 import Google from 'next-auth/providers/google';
+import { dbFindOrCreateUser } from './lib/db/functions';
+import { redirect } from 'next/navigation';
 
 declare module 'next-auth' {
   interface Session {
@@ -25,23 +27,41 @@ export const {
     }),
   ],
   callbacks: {
-    // signIn({ profile }) {
-    //   if (profile?.email?.endsWith('@landing.ai')) {
-    //     return !!profile;
-    //   } else {
-    //     return '/unauthorized';
-    //   }
-    // },
-    jwt({ token, profile }) {
+    async signIn({ profile, user }) {
+      if (!profile) {
+        return false;
+      }
+      const { email, name, picture } = profile;
+
+      if (!email || !name) {
+        return false;
+      }
+
+      const dbUser = await dbFindOrCreateUser(email, name, picture);
+
+      if (dbUser) {
+        user.id = dbUser.id;
+        return true;
+      }
+      return false;
+    },
+    async jwt({ token, profile, user }) {
       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);
+    async session({ session, token }) {
+      // TODO: this is temporary between we switch DB and make migration
+      // so also UI might still have session, DB might already have cleaned up
+      const email = session?.user?.email;
+      const name = session?.user?.name;
+      const avatar = session?.user?.image;
+      if (email && name) {
+        const dbUser = await dbFindOrCreateUser(email, name, avatar);
+        // put db user id into session
+        session.user.id = dbUser.id;
       }
       return session;
     },
@@ -59,8 +79,13 @@ export const {
   },
 });
 
-export async function authEmail() {
+export async function sessionUser() {
   const session = await auth();
-  const email = session?.user?.email;
-  return { email, isAdmin: !!email?.endsWith('landing.ai') };
+  const email = session?.user.email;
+  return {
+    email,
+    isAdmin: !!email?.endsWith('landing.ai'),
+    id: session?.user.id ?? null,
+    user: session?.user ?? null,
+  };
 }

chart/.helmignore

@@ -0,0 +1,23 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/

chart/Chart.yaml

@@ -0,0 +1,24 @@
+apiVersion: v2
+name: vision-agent
+description: A Helm chart for LandingAI Vision Agent
+
+# A chart can be either an 'application' or a 'library' chart.
+#
+# Application charts are a collection of templates that can be packaged into versioned archives
+# to be deployed.
+#
+# Library charts provide useful utilities or functions for the chart developer. They're included as
+# a dependency of application charts to inject those utilities and functions into the rendering
+# pipeline. Library charts do not define any templates and therefore cannot be deployed.
+type: application
+
+# This is the chart version. This version number should be incremented each time you make changes
+# to the chart and its templates, including the app version.
+# Versions are expected to follow Semantic Versioning (https://semver.org/)
+version: 0.1.0
+
+# This is the version number of the application being deployed. This version number should be
+# incremented each time you make changes to the application. Versions are not expected to
+# follow Semantic Versioning. They should reflect the version the application is using.
+# It is recommended to use it with quotes.
+appVersion: "1.16.0"

chart/dev.values.yaml

@@ -0,0 +1,5 @@
+ingressRoute:
+  matchRule: "Host(`va.dev.landing.ai`)"
+
+env:
+  LND_TIER: "dev"

chart/prod.values.yaml

@@ -0,0 +1,10 @@
+ingressRoute:
+  matchRule: "Host(`va.landing.ai`)"
+
+autoscaling:
+  enabled: true
+  minReplicas: 3
+  maxReplicas: 9
+
+env:
+  LND_TIER: "production"

chart/templates/NOTES.txt

@@ -0,0 +1,4 @@
+1. Get the application URL by running these commands:
+{{- if .Values.ingressRoute.enabled }}
+  {{ .Values.ingressRoute.matchRule }}
+{{- end }}

chart/templates/_helpers.tpl

@@ -0,0 +1,62 @@
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "chart.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "chart.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "chart.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "chart.labels" -}}
+helm.sh/chart: {{ include "chart.chart" . }}
+{{ include "chart.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "chart.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "chart.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "chart.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "chart.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}

chart/templates/configmap.yaml

@@ -0,0 +1,8 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: env-config-{{ include "chart.fullname" . }}
+  labels:
+    {{- include "chart.labels" . | nindent 4 }}
+data:
+{{- toYaml .Values.env | nindent 2 }}

chart/templates/deployment.yaml

@@ -0,0 +1,73 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "chart.fullname" . }}
+  labels:
+    {{- include "chart.labels" . | nindent 4 }}
+spec:
+  {{- if not .Values.autoscaling.enabled }}
+  replicas: {{ .Values.replicaCount }}
+  {{- end }}
+  selector:
+    matchLabels:
+      {{- include "chart.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      {{- with .Values.podAnnotations }}
+      annotations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "chart.labels" . | nindent 8 }}
+        {{- with .Values.podLabels }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "chart.serviceAccountName" . }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      containers:
+        - name: {{ .Chart.Name }}
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          ports:
+            - name: http
+              containerPort: {{ .Values.service.port }}
+              protocol: TCP
+          envFrom:
+            - configMapRef:
+                name: env-config-{{ include "chart.fullname" . }}
+            # - secretRef:
+            #     name: secrets-{{ include "chart.fullname" . }}
+          livenessProbe:
+            {{- toYaml .Values.livenessProbe | nindent 12 }}
+          readinessProbe:
+            {{- toYaml .Values.readinessProbe | nindent 12 }}
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+          {{- with .Values.volumeMounts }}
+          volumeMounts:
+            {{- toYaml . | nindent 12 }}
+          {{- end }}
+      {{- with .Values.volumes }}
+      volumes:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}

chart/templates/hpa.yaml

@@ -0,0 +1,32 @@
+{{- if .Values.autoscaling.enabled }}
+apiVersion: autoscaling/v2
+kind: HorizontalPodAutoscaler
+metadata:
+  name: {{ include "chart.fullname" . }}
+  labels:
+    {{- include "chart.labels" . | nindent 4 }}
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: {{ include "chart.fullname" . }}
+  minReplicas: {{ .Values.autoscaling.minReplicas }}
+  maxReplicas: {{ .Values.autoscaling.maxReplicas }}
+  metrics:
+    {{- if .Values.autoscaling.targetCPUUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: cpu
+        target:
+          type: Utilization
+          averageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
+    {{- end }}
+    {{- if .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: memory
+        target:
+          type: Utilization
+          averageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    {{- end }}
+{{- end }}

chart/templates/ingressroute.yaml

@@ -0,0 +1,35 @@
+{{- if .Values.ingressRoute.enabled -}}
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: {{ include "chart.fullname" . }}
+  annotations:
+    {{- with .Values.ingressRoute.annotations }}
+    {{- toYaml . | nindent 4 }}
+    {{- end }}
+  labels:
+    {{- include "chart.labels" . | nindent 4 }}
+    {{- with .Values.ingressRoute.labels }}
+    {{- toYaml . | nindent 4 }}
+    {{- end }}
+spec:
+  entryPoints:
+  {{- range .Values.ingressRoute.entryPoints }}
+  - {{ . }}
+  {{- end }}
+  routes:
+  - kind: Rule
+    match: {{ .Values.ingressRoute.matchRule }}
+    services:
+    - name: {{ include "chart.fullname" . }}
+      port: {{ .Values.service.port }}
+    {{- with .Values.ingressRoute.middlewares }}
+    middlewares:
+      {{- toYaml . | nindent 6 }}
+    {{- end -}}
+
+  {{- with .Values.ingressRoute.tls }}
+  tls:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+{{- end -}}

chart/templates/service.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "chart.fullname" . }}
+  labels:
+    {{- include "chart.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: http
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "chart.selectorLabels" . | nindent 4 }}

chart/templates/serviceaccount.yaml

@@ -0,0 +1,13 @@
+{{- if .Values.serviceAccount.create -}}
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: {{ include "chart.serviceAccountName" . }}
+  labels:
+    {{- include "chart.labels" . | nindent 4 }}
+  {{- with .Values.serviceAccount.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+automountServiceAccountToken: {{ .Values.serviceAccount.automount }}
+{{- end }}

chart/templates/tests/test-connection.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Pod
+metadata:
+  name: "{{ include "chart.fullname" . }}-test-connection"
+  labels:
+    {{- include "chart.labels" . | nindent 4 }}
+  annotations:
+    "helm.sh/hook": test
+spec:
+  containers:
+    - name: wget
+      image: busybox
+      command: ['wget']
+      args: ['{{ include "chart.fullname" . }}:{{ .Values.service.port }}']
+  restartPolicy: Never

chart/values.yaml

@@ -0,0 +1,119 @@
+# Default values for chart.
+# This is a YAML-formatted file.
+# Declare variables to be passed into your templates.
+
+replicaCount: 1
+
+image:
+  repository: 970073041993.dkr.ecr.us-east-2.amazonaws.com/vision-agent
+  pullPolicy: IfNotPresent
+  # Overrides the image tag whose default is the chart appVersion.
+  tag: "latest"
+
+imagePullSecrets: []
+nameOverride: "vision-agent"
+fullnameOverride: ""
+
+serviceAccount:
+  # Specifies whether a service account should be created
+  create: false
+  # Automatically mount a ServiceAccount's API credentials?
+  automount: true
+  # Annotations to add to the service account
+  annotations: {}
+  # The name of the service account to use.
+  # If not set and create is true, a name is generated using the fullname template
+  name: "clef-user"
+
+podAnnotations: {}
+podLabels: {}
+
+podSecurityContext:
+  {}
+  # fsGroup: 2000
+
+securityContext:
+  {}
+  # capabilities:
+  #   drop:
+  #   - ALL
+  # readOnlyRootFilesystem: true
+  # runAsNonRoot: true
+  # runAsUser: 1000
+
+service:
+  type: ClusterIP
+  port: 3000
+
+ingressRoute:
+  enabled: true
+  entryPoints:
+    - websecure
+  matchRule: ""
+
+resources:
+  # We usually recommend not to specify default resources and to leave this as a conscious
+  # choice for the user. This also increases chances charts run on environments with little
+  # resources, such as Minikube. If you do want to specify resources, uncomment the following
+  # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
+  # limits:
+  #   cpu: 100m
+  #   memory: 128Mi
+  # requests:
+  #   cpu: 100m
+  #   memory: 128Mi
+
+livenessProbe:
+  httpGet:
+    path: /
+    port: http
+readinessProbe:
+  httpGet:
+    path: /
+    port: http
+
+autoscaling:
+  enabled: false
+  minReplicas: 1
+  maxReplicas: 9
+  targetCPUUtilizationPercentage: 60
+  # targetMemoryUtilizationPercentage: 80
+
+env:
+  AUTH_GITHUB_ID: ""
+  AUTH_GITHUB_SECRET: ""
+  AUTH_SECRET: ""
+  AUTH_TRUST_HOST: ""
+  AWS_ACCESS_KEY_ID: ""
+  AWS_BUCKET_NAME: ""
+  AWS_REGION: ""
+  AWS_SECRET_ACCESS_KEY: ""
+  COREPACK_ENABLE_STRICT: "0"
+  ENABLE_EXPERIMENTAL_COREPACK: "1"
+  GOOGLE_CLIENT_ID: ""
+  GOOGLE_SECRET: ""
+  LOKI_AUTH_USER_ID: "173854"
+  LOKI_AUTH_USER_PASSWORD: ""
+  OPENAI_API_KEY: ""
+  POSTGRES_PRISMA_URL: ""
+  NEXTAUTH_URL: ""
+  LND_TIER: ""
+
+# Additional volumes on the output Deployment definition.
+volumes: []
+# - name: foo
+#   secret:
+#     secretName: mysecret
+#     optional: false
+
+# Additional volumeMounts on the output Deployment definition.
+volumeMounts: []
+# - name: foo
+#   mountPath: "/etc/foo"
+#   readOnly: true
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/Avatar.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import React from 'react';
+
+export interface AvatarProps {
+  name?: string | null;
+  avatar?: string | null;
+}
+
+function getUserInitials(name: string) {
+  const [firstName, lastName] = name.split(' ');
+  return lastName ? `${firstName[0]}${lastName[0]}` : firstName.slice(0, 2);
+}
+
+const Avatar: React.FC<AvatarProps> = ({ name, avatar }) => {
+  return (
+    <>
+      {avatar ? (
+        <Image
+          className="size-6 transition-opacity duration-300 rounded-full select-none ring-1 ring-zinc-100/10 hover:opacity-80"
+          src={avatar ?? ''}
+          alt={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">
+          {name ? getUserInitials(name) : 'VA'}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Avatar;

components/ChatInterface.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { ChatWithMessages } from '@/lib/types';
+import React from 'react';
+import ChatList from './chat/ChatList';
+import { Card } from './ui/Card';
+import { useAtom, useAtomValue } from 'jotai';
+import { selectedMessageId } from '@/state/chat';
+import CodeResultDisplay from './CodeResultDisplay';
+
+export interface ChatInterfaceProps {
+  chat: ChatWithMessages;
+  userId?: string | null;
+}
+
+const ChatInterface: React.FC<ChatInterfaceProps> = ({ chat, userId }) => {
+  const messageId = useAtomValue(selectedMessageId);
+  const messageCodeResult = chat.messages.find(
+    message => message.id === messageId,
+  )?.result;
+  return (
+    <div className="relative flex overflow-hidden space-x-4 size-full">
+      <div
+        data-state={messageCodeResult?.payload ? 'open' : 'closed'}
+        className="pl-4 peer absolute right-0 inset-y-0 hidden translate-x-full data-[state=open]:translate-x-0 z-30 duration-300 ease-in-out xl:flex flex-col items-start xl:w-1/2 h-full dark:bg-zinc-950 overflow-auto"
+      >
+        {messageCodeResult?.payload && (
+          <Card className="size-full overflow-auto">
+            <CodeResultDisplay codeResult={messageCodeResult.payload} />
+          </Card>
+        )}
+      </div>
+      <div className="w-full flex justify-center pr-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:xl:pr-[50%]">
+        <ChatList chat={chat} userId={userId} />
+      </div>
+    </div>
+  );
+};
+
+export default ChatInterface;

components/ChatSelect.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { Chat } from '@prisma/client';
+import React from 'react';
+import {
+  SelectItem,
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectIcon,
+  SelectGroup,
+  SelectSeparator,
+} from './ui/Select';
+import Img from './ui/Img';
+import { format } from 'date-fns';
+import { useParams, useRouter } from 'next/navigation';
+import { IconPlus } from './ui/Icons';
+
+export interface ChatSelectProps {
+  chat: Chat;
+}
+
+const ChatSelectItem: React.FC<ChatSelectProps> = ({ chat }) => {
+  const { id, title, mediaUrl, updatedAt } = chat;
+  return (
+    <SelectItem value={id} className="size-full cursor-pointer">
+      <div className="overflow-hidden flex items-center size-full group">
+        <div className="size-[36px] relative m-1">
+          <Img
+            src={mediaUrl}
+            alt={`chat-${id}-card-image`}
+            className="object-cover size-full"
+          />
+        </div>
+        <div className="flex items-start flex-col h-full ml-3">
+          <p className="text-sm mb-1">{title ?? '(no title)'}</p>
+          <p className="text-xs text-gray-500">
+            {updatedAt ? format(Number(updatedAt), 'yyyy-MM-dd') : '-'}
+          </p>
+        </div>
+      </div>
+    </SelectItem>
+  );
+};
+
+const ChatSelect: React.FC<{ myChats: Chat[] }> = ({ myChats }) => {
+  const { id: chatIdFromParam } = useParams();
+
+  const currentChat = myChats.find(chat => chat.id === chatIdFromParam);
+  const router = useRouter();
+  return (
+    <Select
+      defaultValue={currentChat?.id}
+      value={currentChat?.id}
+      onValueChange={id => router.push(id === 'new' ? '/' : `/chat/${id}`)}
+    >
+      <SelectTrigger className="w-[240px]">
+        {currentChat?.title ?? 'Select a conversation'}
+      </SelectTrigger>
+      <SelectContent className="w-[320px]">
+        <SelectGroup>
+          <SelectItem value="new">
+            <div className="flex items-center justify-start">
+              <SelectIcon asChild>
+                <IconPlus className="size-4 opacity-50" />
+              </SelectIcon>
+              <div className="ml-4">New conversion</div>
+            </div>
+          </SelectItem>
+          {!!myChats.length && <SelectSeparator />}
+          {myChats.map(chat => (
+            <ChatSelectItem key={chat.id} chat={chat} />
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+};
+
+export default ChatSelect;

components/ChatSelectServer.tsx

@@ -0,0 +1,8 @@
+import { dbGetMyChatList } from '@/lib/db/functions';
+import ChatSelect from './ChatSelect';
+
+export default async function ChatSelectServer() {
+  const [myChats] = await Promise.all([dbGetMyChatList()]);
+
+  return <ChatSelect myChats={myChats} />;
+}

components/CodeResultDisplay.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+
+import { CodeBlock } from './ui/CodeBlock';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from './ui/Dialog';
+import { Button } from './ui/Button';
+import { IconLog, IconTerminalWindow } from './ui/Icons';
+import { Separator } from './ui/Separator';
+import Img from './ui/Img';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './ui/carousel';
+
+export interface CodeResultDisplayProps {}
+
+const CodeResultDisplay: React.FC<{
+  codeResult: PrismaJson.FinalCodeBody['payload'];
+}> = ({ codeResult }) => {
+  const { code, test, result } = codeResult;
+  const getDetail = () => {
+    if (!result) return {};
+    try {
+      // IMPORTANT: This is for backwards compatibility with old chat that save result as JSON string
+      // updated in https://github.com/landing-ai/vision-agent-ui/pull/86
+      const detail =
+        typeof result === 'object'
+          ? result
+          : (JSON.parse(result) as PrismaJson.StructuredResult);
+      return {
+        results: detail.results,
+        stderr: detail.logs.stderr,
+        stdout: detail.logs.stdout,
+        error: detail.error,
+      };
+    } catch {
+      return {};
+    }
+  };
+
+  const { results = [], stderr, stdout, error } = getDetail();
+
+  const imageResults = results?.filter(_ => !!_.png).map(_ => _.png);
+  const videoResults = results?.filter(_ => !!_.mp4).map(_ => _.mp4);
+  const finalResult = results?.find(_ => _.is_main_result)?.text;
+
+  return (
+    <div className="rounded-lg overflow-hidden relative max-w-5xl">
+      <CodeBlock language="python" value={code} />
+      <div className="rounded-lg relative">
+        <div className="absolute left-1/2 -translate-x-1/2 -top-4 z-10">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8">
+                <IconTerminalWindow className="text-teal-500 size-4" />
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-5xl">
+              <DialogHeader>
+                <DialogTitle>Test code</DialogTitle>
+              </DialogHeader>
+              <CodeBlock language="python" value={test} />
+            </DialogContent>
+          </Dialog>
+          {Array.isArray(stderr) && !!stderr.join('').trim() && (
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-8">
+                  <IconLog className="text-gray-500 size-4" />
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="max-w-5xl">
+                <CodeBlock language="vim" value={stderr.join('').trim()} />
+              </DialogContent>
+            </Dialog>
+          )}
+        </div>
+      </div>
+      {Array.isArray(stdout) && !!stdout.join('').trim() && (
+        <>
+          <Separator />
+          <CodeBlock language="print" value={stdout.join('').trim()} />
+        </>
+      )}
+      {!!error && (
+        <>
+          <Separator />
+          <CodeBlock
+            language="error"
+            value={
+              error.name +
+              '\n' +
+              error.value +
+              '\n' +
+              error.traceback_raw.join('\n')
+            }
+          />
+        </>
+      )}
+      {!!imageResults.length && (
+        <div className="p-4 text-xs lowercase bg-zinc-900 space-y-4 border-t border-muted">
+          <div className="flex items-center justify-between">
+            <p>image output</p>
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="outline" size="sm">
+                  View all
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="max-w-5xl flex justify-center items-center">
+                <Carousel className="w-3/4">
+                  <CarouselContent>
+                    {imageResults.map((png, index) => (
+                      <CarouselItem key={'png' + index}>
+                        <Img src={png!} width={1200} alt="result-image" />
+                      </CarouselItem>
+                    ))}
+                  </CarouselContent>
+                  <CarouselPrevious />
+                  <CarouselNext />
+                </Carousel>
+              </DialogContent>
+            </Dialog>
+          </div>
+          <div className="flex flex-row space-x-4 overflow-auto">
+            {imageResults.map((png, index) => (
+              <Img
+                key={'png' + index}
+                src={png!}
+                width={200}
+                alt="result-image"
+              />
+            ))}
+          </div>
+        </div>
+      )}
+      {!!videoResults.length && (
+        <div className="p-4 text-xs lowercase bg-zinc-900 space-y-4 border-t border-muted">
+          <p>video output</p>
+          <div className="flex flex-row space-x-4 overflow-auto">
+            {videoResults.map((mp4, index) => (
+              <Dialog key={'png' + index}>
+                <DialogTrigger asChild>
+                  <video src={mp4} controls width={400} height={400} />
+                </DialogTrigger>
+                <DialogContent className="max-w-5xl">
+                  <video src={mp4} controls width={400} height={400} />
+                </DialogContent>
+              </Dialog>
+            ))}
+          </div>
+        </div>
+      )}
+      {!!finalResult && <CodeBlock language="output" value={finalResult} />}
+    </div>
+  );
+};
+
+export default CodeResultDisplay;

components/Header.tsx

@@ -1,23 +1,52 @@
-import * as React from 'react';
+import { Suspense } from 'react';
 import Link from 'next/link';
 
-import { auth, authEmail } from '@/auth';
+import { auth, sessionUser } from '@/auth';
 import { Button } from '@/components/ui/Button';
 import { UserMenu } from '@/components/UserMenu';
+import { IconPlus, IconSeparator } from '@/components/ui/Icons';
+import { LoginMenu } from './LoginMenu';
+import { redirect } from 'next/navigation';
+import Image from 'next/image';
+import LandingLogo from '@/assets/svg/LandingAI_white.svg';
+import ChatSelectServer from './ChatSelectServer';
+import Loading from './ui/Loading';
+import { Skeleton } from './ui/Skeleton';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/Tooltip';
-import { IconPlus, IconSeparator } from '@/components/ui/Icons';
-import { LoginMenu } from './LoginMenu';
-import { redirect } from 'next/navigation';
+import { IconDiscord, IconGitHub } from '@/components/ui/Icons';
 
 export async function Header() {
   const session = await auth();
-  const { isAdmin } = await authEmail();
+  // const { isAdmin } = await sessionUser();
+
+  if (process.env.NEXT_PUBLIC_IS_HUGGING_FACE) {
+    return (
+      <header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
+        <Button variant="link" asChild className="mr-2">
+          <Link href="/">New conversation</Link>
+        </Button>
+      </header>
+    );
+  }
+
   return (
-    <header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
+    <header className="sticky top-0 z-50 flex items-center justify-start w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
+      <Link
+        className="overflow-hidden w-[150px] h-[45px] shrink-0 grow-0 relative mr-4 cursor-pointer"
+        href="/"
+      >
+        <Image src={LandingLogo} alt="Landing AI" fill />
+      </Link>
+      {session?.user && (
+        <Suspense fallback={<Skeleton className="w-[240px] h-[24px]" />}>
+          <ChatSelectServer />
+        </Suspense>
+      )}
+      <div className="grow" />
       {/* <Tooltip>
         <TooltipTrigger asChild>
           <Button variant="link" asChild className="mr-2">
@@ -28,16 +57,44 @@ export async function Header() {
         </TooltipTrigger>
         <TooltipContent>New chat</TooltipContent>
       </Tooltip> */}
+      {/* {isAdmin && (
+        <Button variant="link" asChild className="mr-2">
+          <Link href="/all">All Chats (Internal)</Link>
+        </Button>
+      )}
       {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>
+        <Link href="/">New conversation</Link>
       </Button>
+      <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-5" />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Github</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="link" size="icon" asChild className="mr-2">
+            <Link href="https://discord.gg/gSC5p7ED" target="_blank">
+              <IconDiscord className="size-5" />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Discord</TooltipContent>
+      </Tooltip>
       <IconSeparator className="size-6 text-muted-foreground/50" />
-      <div className="flex items-center">
+      <div className="flex items-center grow-0">
         {session?.user ? <UserMenu user={session!.user} /> : <LoginMenu />}
       </div>
     </header>

components/Providers.tsx

@@ -4,14 +4,14 @@ 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';
+// import { ThemeToggle } from './ThemeToggle';
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
   return (
-    <NextThemesProvider {...props}>
+    <NextThemesProvider {...props} forcedTheme="dark">
       <TooltipProvider>
         {children}
-        <ThemeToggle />
+        {/* <ThemeToggle /> */}
       </TooltipProvider>
     </NextThemesProvider>
   );

components/UserMenu.tsx

@@ -13,6 +13,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/DropdownMenu';
 import { IconExternalLink } from '@/components/ui/Icons';
+import Avatar from './Avatar';
 
 export interface UserMenuProps {
   user: Session['user'];
@@ -29,23 +30,15 @@ export function UserMenu({ user }: UserMenuProps) {
       <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>
-            )}
+            <Avatar name={user?.name} avatar={user?.image} />
             <span className="ml-2">{user?.name}</span>
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent sideOffset={8} align="start" className="w-[180px]">
+        <DropdownMenuContent
+          sideOffset={8}
+          align="center"
+          className="w-[160px]"
+        >
           <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>

components/chat-sidebar/ChatAdminToggle.tsx

@@ -1,14 +0,0 @@
-'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

@@ -1,63 +0,0 @@
-'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

@@ -1,27 +0,0 @@
-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

@@ -1,26 +1,102 @@
 'use client';
 
-import { Separator } from '@/components/ui/Separator';
-import { ChatMessage } from '@/components/chat/ChatMessage';
-import { MessageBase } from '../../lib/types';
+// import { ChatList } from '@/components/chat/ChatList';
+import Composer from '@/components/chat/Composer';
+import useVisionAgent from '@/lib/hooks/useVisionAgent';
+import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
+import { useEffect } from 'react';
+import { ChatWithMessages } from '@/lib/types';
+import { ChatMessage } from './ChatMessage';
+import { Button } from '../ui/Button';
+import { cn } from '@/lib/utils';
+import { IconArrowDown } from '../ui/Icons';
+import { dbPostCreateMessage } from '@/lib/db/functions';
+import { Card } from '../ui/Card';
+import { useSetAtom } from 'jotai';
+import { selectedMessageId } from '@/state/chat';
 
-export interface ChatList {
-  messages: MessageBase[];
+export interface ChatListProps {
+  chat: ChatWithMessages;
+  userId?: string | null;
 }
 
-export function ChatList({ messages }: ChatList) {
+export const SCROLL_BOTTOM = 120;
+
+const ChatList: React.FC<ChatListProps> = ({ chat, userId }) => {
+  const { id, messages: dbMessages, userId: chatUserId } = chat;
+  const { messages, append, isLoading, data } = useVisionAgent(chat);
+
+  // Only login and chat owner can compose
+  const canCompose = !chatUserId || userId === chatUserId;
+
+  const lastDbMessage = dbMessages[dbMessages.length - 1];
+  const setMessageId = useSetAtom(selectedMessageId);
+
+  const { messagesRef, scrollRef, visibilityRef, isVisible, scrollToBottom } =
+    useScrollAnchor(SCROLL_BOTTOM);
+
+  // Scroll to bottom on init and highlight last message
+  useEffect(() => {
+    scrollToBottom();
+    if (lastDbMessage.result) {
+      setMessageId(lastDbMessage.id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   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>
+    <Card
+      className="size-full max-w-5xl overflow-auto relative"
+      ref={scrollRef}
+    >
+      <div className="overflow-auto h-full p-4 z-10" ref={messagesRef}>
+        {dbMessages.map((message, index) => {
+          const isLastMessage = index === dbMessages.length - 1;
+          return (
+            <ChatMessage
+              key={message.id}
+              message={message}
+              loading={isLastMessage && isLoading}
+              wipAssistantMessage={data}
+            />
+          );
+        })}
+        <div
+          className="w-full"
+          style={{ height: SCROLL_BOTTOM }}
+          ref={visibilityRef}
+        />
+      </div>
+      {canCompose && (
+        <div className="absolute bottom-4 w-full">
+          <Composer
+            // Use the last message mediaUrl as the initial mediaUrl
+            initMediaUrl={dbMessages[dbMessages.length - 1]?.mediaUrl}
+            disabled={isLoading}
+            onSubmit={async ({ input, mediaUrl: newMediaUrl }) => {
+              const messageInput = {
+                prompt: input,
+                mediaUrl: newMediaUrl,
+              };
+              const resp = await dbPostCreateMessage(id, messageInput);
+              append(resp);
+            }}
+          />
+        </div>
+      )}
+      {/* Scroll to bottom Icon */}
+      <Button
+        size="icon"
+        className={cn(
+          'absolute bottom-3 right-3 transition-opacity duration-300 size-6',
+          isVisible ? 'opacity-0' : 'opacity-100',
+        )}
+        onClick={() => scrollToBottom()}
+      >
+        <IconArrowDown className="size-3" />
+      </Button>
+    </Card>
   );
-}
+};
+
+export default ChatList;

components/chat/ChatMessage.tsx

@@ -1,151 +1,292 @@
-// 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 { useEffect, useMemo, useRef, useState } from 'react';
 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';
+  IconCheckCircle,
+  IconCodeWrap,
+  IconCrossCircle,
+  IconLandingAI,
+  IconListUnordered,
+  IconTerminalWindow,
+  IconUser,
+  IconGlowingDot,
+} from '@/components/ui/Icons';
+import { MessageUI } from '@/lib/types';
+import { WIPChunkBodyGroup, formatStreamLogs } from '@/lib/utils/content';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/Table';
+import { Button } from '../ui/Button';
+import { Dialog, DialogContent, DialogTrigger } from '../ui/Dialog';
 import Img from '../ui/Img';
-import { getCleanedUpMessages } from '@/lib/messageUtils';
+import CodeResultDisplay from '../CodeResultDisplay';
+import { useAtom, useSetAtom } from 'jotai';
+import { selectedMessageId } from '@/state/chat';
+import { Message } from '@prisma/client';
+import { Separator } from '../ui/Separator';
+import { cn } from '@/lib/utils';
 
 export interface ChatMessageProps {
-  message: MessageBase;
+  message: Message;
+  loading?: boolean;
+  wipAssistantMessage?: PrismaJson.MessageBody[];
 }
 
-export function ChatMessage({ message, ...props }: ChatMessageProps) {
-  const { logs, content } = useMemo(() => {
-    return getCleanedUpMessages({
-      content: message.content,
-      role: message.role,
-    });
-  }, [message.content, message.role]);
+export const ChatMessage: React.FC<ChatMessageProps> = ({
+  data,
+  message,
+  wipAssistantMessage,
+  loading,
+}) => {
+  const [messageId, setMessageId] = useAtom(selectedMessageId);
+  const { id, mediaUrl, prompt, response, result, responseBody } = message;
+  const [formattedSections, finalResult, finalError] = useMemo(
+    () =>
+      formatStreamLogs(
+        responseBody ?? wipAssistantMessage ?? JSON.parse(response ?? ''),
+      ),
+    [response, wipAssistantMessage, result, responseBody, data],
+  );
+  // prioritize the result from the message over the WIP message
+  const codeResult = result?.payload ?? finalResult;
   return (
-    <div className={cn('group relative mb-4 flex items-start')} {...props}>
+    <div
+      className={cn(
+        'rounded-md bg-muted border border-muted p-4 pb-5 mb-4 relative',
+        messageId === id && 'lg:border-primary/50',
+        result && 'lg:cursor-pointer',
+      )}
+      onClick={() => {
+        if (result) {
+          setMessageId(id);
+        }
+      }}
+    >
+      <div className="flex">
+        <div className="flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow bg-background">
+          <IconUser />
+        </div>
+        <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
+          <p>{prompt}</p>
+          {mediaUrl && (
+            <>
+              {mediaUrl?.endsWith('.mp4') ? (
+                <video src={mediaUrl} controls width={400} height={400} />
+              ) : (
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Img src={mediaUrl} alt={mediaUrl} width={300} />
+                  </DialogTrigger>
+                  <DialogContent className="max-w-5xl">
+                    <Img src={mediaUrl} alt={mediaUrl} quality={100} />
+                  </DialogContent>
+                </Dialog>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+      {!!formattedSections.length && (
+        <>
+          <Separator className="bg-primary/30 my-4" />
+          <div className="flex">
+            <div className="flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow bg-primary text-primary-foreground">
+              <IconLandingAI />
+            </div>
+            <div className="flex-1 px-1 space-y-4 ml-4 overflow-hidden">
+              <Table className="w-[400px]">
+                <TableBody>
+                  {formattedSections.map((section, index) => (
+                    <TableRow
+                      className="border-primary/50 h-[56px]"
+                      key={index}
+                    >
+                      <TableCell className="text-center text-webkit-center">
+                        {ChunkStatusToIconDict[section.status]}
+                      </TableCell>
+                      <TableCell className="font-medium">
+                        <ChunkTypeToText
+                          useTimer={!codeResult && !finalError}
+                          chunk={section}
+                        />
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <ChunkPayloadAction payload={section.payload} />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              {codeResult && (
+                <>
+                  <div className="xl:hidden">
+                    <CodeResultDisplay codeResult={codeResult} />
+                  </div>
+                  <p>✨ Coding complete</p>
+                </>
+              )}
+              {!codeResult && finalError && (
+                <>
+                  <p>❌ {finalError.name}</p>
+                  <div>
+                    <CodeBlock
+                      language="error"
+                      value={
+                        finalError.value +
+                        '\n' +
+                        finalError.traceback_raw.join('\n')
+                      }
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </>
+      )}
       <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',
+          'w-1/3 h-1 rounded-full overflow-hidden bg-zinc-700 absolute left-1/2 -translate-x-1/2 bottom-2',
+          loading ? 'opacity-100' : 'opacity-0',
         )}
       >
-        {message.role === 'user' ? <IconUser /> : <IconOpenAI />}
+        <div className="h-full bg-primary animate-progress origin-left-right" />
       </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>
-                  );
-                }
+    </div>
+  );
+};
+
+const ChunkStatusToIconDict: Record<
+  WIPChunkBodyGroup['status'],
+  React.ReactElement
+> = {
+  started: <IconGlowingDot className="bg-yellow-500/80" />,
+  completed: <IconCheckCircle className="text-green-500" />,
+  running: <IconGlowingDot className="bg-teal-500/80" />,
+  failed: <IconCrossCircle className="text-red-500" />,
+};
+const ChunkTypeToText: React.FC<{
+  chunk: WIPChunkBodyGroup;
+  useTimer: boolean;
+}> = ({ chunk, useTimer }) => {
+  const { status, type, timestamp, duration } = chunk;
+
+  const [mSeconds, setMSeconds] = useState(0);
+  const isExecuting = !['completed', 'failed'].includes(status);
+
+  useEffect(() => {
+    if (isExecuting && timestamp && useTimer) {
+      const timerId = setInterval(() => {
+        setMSeconds(Date.now() - Date.parse(timestamp));
+      }, 200);
+      return () => clearInterval(timerId);
+    }
+  }, [isExecuting, timestamp, useTimer]);
+
+  const displayMs = isExecuting && useTimer ? mSeconds : duration;
 
-                children[0] = (children[0] as string).replace('`▍`', '▍');
-              }
+  const durationDisplay = displayMs
+    ? `(${Math.round(displayMs / 100) / 10}s)`
+    : '';
 
-              const match = /language-(\w+)/.exec(className || '');
-              if (inline) {
-                return (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                );
-              }
+  if (type === 'plans') return <p>Creating instructions {durationDisplay}</p>;
+  if (type === 'tools') return <p>Retrieving tools {durationDisplay}</p>;
+  if (type === 'code' && status === 'started')
+    return <p>Generating code {durationDisplay}</p>;
+  if (type === 'code' && status === 'running')
+    return <p>Executing code {durationDisplay}</p>;
+  if (type === 'code' && status === 'completed')
+    return <p>Code execution success {durationDisplay}</p>;
+  if (type === 'code' && status === 'failed')
+    return <p>Code execution failure {durationDisplay}</p>;
 
-              return (
-                <CodeBlock
-                  key={Math.random()}
-                  language={(match && match[1]) || ''}
-                  value={String(children).replace(/\n$/, '')}
-                  {...props}
-                />
-              );
-            },
-          }}
+  return null;
+};
+const ChunkPayloadAction: React.FC<{
+  payload: WIPChunkBodyGroup['payload'];
+}> = ({ payload }) => {
+  if (!payload) return null;
+  if (Array.isArray(payload)) {
+    // [{title: 123, content, 345}, {title: ..., content: ...}] => ['title', 'content']
+    const keyArray = Array.from(
+      payload.reduce((acc, curr) => {
+        Object.keys(curr).forEach(key => acc.add(key));
+        return acc;
+      }, new Set<string>()),
+    );
+
+    return (
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <IconListUnordered />
+          </Button>
+        </DialogTrigger>
+        <DialogContent
+          className="max-w-5xl"
+          onOpenAutoFocus={e => e.preventDefault()}
         >
-          {content}
-        </MemoizedReactMarkdown>
-        {/* <ChatMessageActions message={message} /> */}
-      </div>
-    </div>
-  );
-}
+          <Table>
+            <TableHeader>
+              <TableRow className="border-primary/50">
+                {keyArray.map(header => (
+                  <TableHead key={header}>{header}</TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {payload.map((line, index) => (
+                <TableRow className="border-primary/50" key={index}>
+                  {keyArray.map(header =>
+                    header === 'documentation' ? (
+                      <TableCell key={header}>
+                        <Dialog>
+                          <DialogTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="size-8 ml-[40%]"
+                            >
+                              <IconTerminalWindow className="text-teal-500 size-4" />
+                            </Button>
+                          </DialogTrigger>
+                          <DialogContent className="max-w-5xl">
+                            <CodeBlock language="md" value={line[header]} />
+                          </DialogContent>
+                        </Dialog>
+                      </TableCell>
+                    ) : (
+                      <TableCell key={header}>{line[header]}</TableCell>
+                    ),
+                  )}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </DialogContent>
+      </Dialog>
+    );
+  } else if ((payload as PrismaJson.FinalCodeBody['payload']).code) {
+    return (
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <IconCodeWrap />
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-5xl">
+          <CodeResultDisplay
+            codeResult={payload as PrismaJson.FinalCodeBody['payload']}
+          />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+  return null;
+};
+
+export default ChatMessage;

components/chat/ChatMessageActions.tsx

@@ -6,10 +6,10 @@ 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';
+import { MessageUI } from '../../lib/types';
 
 interface ChatMessageActionsProps extends React.ComponentProps<'div'> {
-  message: MessageBase;
+  message: MessageUI;
 }
 
 export function ChatMessageActions({

components/chat/Composer.tsx

@@ -1,11 +1,14 @@
 'use client';
 
-import * as React from 'react';
-import { type UseChatHelpers } from 'ai/react';
-import Textarea from 'react-textarea-autosize';
+import {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 
 import { Button } from '@/components/ui/Button';
-import { MessageBase } from '../../lib/types';
 import { useEnterSubmit } from '@/lib/hooks/useEnterSubmit';
 import Img from '../ui/Img';
 import {
@@ -13,185 +16,175 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/Tooltip';
-import {
-  IconArrowDown,
-  IconArrowElbow,
-  IconRefresh,
-  IconStop,
-} from '@/components/ui/Icons';
+import { IconImage, IconArrowUp, IconClose } from '@/components/ui/Icons';
 import { cn } from '@/lib/utils';
-import { generateInputImageMarkdown } from '@/lib/messageUtils';
+import Chip from '../ui/Chip';
+import Textarea from 'react-textarea-autosize';
+import useMediaUpload from '@/lib/hooks/useMediaUpload';
 
-export interface ComposerProps
-  extends Pick<
-    UseChatHelpers,
-    'append' | 'isLoading' | 'reload' | 'stop' | 'input' | 'setInput'
-  > {
-  id?: string;
+export interface ComposerProps {
+  onSubmit: (params: { input: string; mediaUrl: string }) => Promise<void>;
+  disabled?: boolean;
   title?: string;
-  messages: MessageBase[];
-  url?: string;
-  isAtBottom: boolean;
-  scrollToBottom: () => void;
+  initMediaUrl?: string;
+  initInput?: string;
 }
 
-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();
-    }
-  }, []);
+export interface ComposerRef {
+  setMediaUrl: (url: string) => void;
+  setInput: (input: string) => void;
+}
+
+const Composer = forwardRef<ComposerRef, ComposerProps>(
+  ({ disabled, onSubmit, initMediaUrl, initInput }, ref) => {
+    const { formRef, onKeyDown } = useEnterSubmit();
+    const inputRef = useRef<HTMLTextAreaElement>(null);
+    const [localMediaUrl, setLocalMediaUrl] = useState<string | undefined>(
+      initMediaUrl,
+    );
+    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+    const [input, setLocalInput] = useState(initInput ?? '');
+    const noMediaValidation = !localMediaUrl && !!input;
+    const {
+      getRootProps,
+      getInputProps,
+      isDragActive,
+      isUploading,
+      openUpload,
+    } = useMediaUpload(uploadUrl => setLocalMediaUrl(uploadUrl));
+
+    const finalLoading = isUploading || isSubmitting;
+    const finalDisabled = finalLoading || disabled;
+
+    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">
+    useImperativeHandle(ref, () => ({
+      setMediaUrl(mediaUrl) {
+        setLocalMediaUrl(mediaUrl);
+      },
+      setInput(input) {
+        setLocalInput(input);
+      },
+    }));
+
+    const mediaName = localMediaUrl?.split('/').pop();
+    return (
+      <div
+        {...getRootProps()}
+        className={cn(
+          'mx-auto w-[42rem] max-w-full px-6 py-4 bg-zinc-600 rounded-xl relative shadow-lg shadow-zinc-600/40 z-50',
+          isDragActive && 'bg-indigo-700/50',
+        )}
+      >
+        <input {...getInputProps()} />
+        <div
+          className={cn(
+            'w-1/3 h-1 rounded-full overflow-hidden bg-zinc-700 absolute left-1/2 -translate-x-1/2 top-2',
+            finalLoading ? 'opacity-100' : 'opacity-0',
+          )}
+        >
+          <div className="h-full bg-primary animate-progress origin-left-right" />
+        </div>
+        {localMediaUrl ? (
+          <Chip className="mb-0.5">
+            <div className="flex flex-row items-center space-x-2">
+              <Tooltip>
+                <TooltipTrigger>
+                  <div className="flex flex-row items-center space-x-2">
+                    <IconImage className="size-3" />
+                    <p>{mediaName ?? 'unnamed_media'}</p>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent sideOffset={12} className="max-w-2xl">
+                  <Img
+                    src={localMediaUrl}
+                    className="m-1"
+                    quality={100}
+                    alt="zoomed-in-image"
+                  />
+                </TooltipContent>
+              </Tooltip>
+              <Button
+                size="icon"
+                variant="ghost"
+                disabled={finalDisabled}
+                className="size-4"
+                onClick={() => setLocalMediaUrl(undefined)}
+              >
+                <IconClose className="size-3" />
+              </Button>
+            </div>
+          </Chip>
+        ) : (
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              'ml-[-10px] border border-transparent',
+              noMediaValidation && 'border-red-500/50 text-red-500',
+            )}
+            onClick={openUpload}
+          >
+            <IconImage className="mr-2 size-4" />
+            {noMediaValidation ? 'Select media (required)' : 'Select media'}
+          </Button>
+        )}
         <form
           onSubmit={async e => {
             e.preventDefault();
-            if (!input?.trim()) {
+            if (!input?.trim() || !localMediaUrl) {
               return;
             }
-            setInput('');
-            await append({
-              id,
-              content:
-                input + (url ? '\n\n' + generateInputImageMarkdown(url) : ''),
-              role: 'user',
-            });
-            scrollToBottom();
+            setIsSubmitting(true);
+            try {
+              await onSubmit({ input, mediaUrl: localMediaUrl });
+            } finally {
+              setIsSubmitting(false);
+              setLocalInput('');
+            }
           }}
           ref={formRef}
-          className="h-full"
+          className="h-full mt-4"
         >
-          <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>
+          {/* <div className="border-gray-500 flex overflow-hidden size-full flex flex-row items-center"> */}
+          <Textarea
+            ref={inputRef}
+            tabIndex={0}
+            onKeyDown={onKeyDown}
+            rows={1}
+            value={input}
+            disabled={finalDisabled}
+            onChange={e => setLocalInput(e.target.value)}
+            placeholder={
+              finalDisabled ? '🤖 Agent working ✨' : 'Message Vision Agent'
+            }
+            spellCheck={false}
+            className="w-full grow resize-none bg-transparent focus-within:outline-none"
+          />
+          {/* Submit Icon */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="submit"
+                size="icon"
+                className={cn('size-6 absolute bottom-3 right-3')}
+                disabled={finalDisabled || input === '' || noMediaValidation}
+              >
+                <IconArrowUp className="size-3" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Message Vision Agent</TooltipContent>
+          </Tooltip>
         </form>
       </div>
-    </div>
-    // </div>
-  );
-}
+    );
+  },
+);
+
+Composer.displayName = 'Composer';
+
+export default Composer;

components/chat/ImageSelector.tsx

@@ -1,91 +0,0 @@
-'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

@@ -1,5 +1,11 @@
 import { FC, memo } from 'react';
 import ReactMarkdown, { Options } from 'react-markdown';
+import Img from '../ui/Img';
+
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeRaw from 'rehype-raw';
+import { CodeBlock } from '../ui/CodeBlock';
 
 export const MemoizedReactMarkdown: FC<Options> = memo(
   ReactMarkdown,
@@ -7,3 +13,62 @@ export const MemoizedReactMarkdown: FC<Options> = memo(
     prevProps.children === nextProps.children &&
     prevProps.className === nextProps.className,
 );
+
+export const Markdown: React.FC<{
+  content: string;
+}> = ({ content }) => {
+  return (
+    <>
+      <MemoizedReactMarkdown
+        className="break-words overflow-auto"
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeRaw] as any}
+        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="mb-2 whitespace-pre-line">{children}</p>;
+          },
+          img(props) {
+            if (props.src?.endsWith('.mp4')) {
+              return (
+                <video src={props.src} controls width={500} height={500} />
+              );
+            }
+            return (
+              <Img
+                src={props.src ?? '/landing.png'}
+                alt={props.alt ?? 'answer-image'}
+                quality={100}
+                sizes="(min-width: 66em) 15vw,
+                        (min-width: 44em) 20vw,
+                        100vw"
+              />
+            );
+          },
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || '');
+
+            return (
+              <CodeBlock
+                key={Math.random()}
+                language={(match && match[1]) || ''}
+                value={String(children).replace(/\n$/, '')}
+                {...props}
+              />
+            );
+          },
+        }}
+      >
+        {content}
+      </MemoizedReactMarkdown>
+    </>
+  );
+};