Larger layout / allow logout user to upload / move image to chat box (#13)


app/api/upload/route.ts

@@ -12,11 +12,11 @@ import { kv } from '@vercel/kv';
 export async function POST(req: Request): Promise<Response> {
   const session = await auth();
   const email = session?.user?.email;
-  if (!email) {
-    return new Response('Unauthorized', {
-      status: 401,
-    });
-  }
+  // if (!email) {
+  //   return new Response('Unauthorized', {
+  //     status: 401,
+  //   });
+  // }
 
   try {
     const { url, base64, initMessages, fileType } = (await req.json()) as {
@@ -50,15 +50,17 @@ export async function POST(req: Request): Promise<Response> {
     const payload: ChatEntity = {
       url: urlToSave!, // TODO can be uploaded as well
       id,
-      user: email,
+      user: email || 'anonymous',
       messages: initMessages ?? [],
     };
 
     await kv.hmset(`chat:${id}`, payload);
-    await kv.zadd(`user:chat:${email}`, {
-      score: Date.now(),
-      member: `chat:${id}`,
-    });
+    if (email) {
+      await kv.zadd(`user:chat:${email}`, {
+        score: Date.now(),
+        member: `chat:${id}`,
+      });
+    }
     await kv.zadd('user:chat:all', {
       score: Date.now(),
       member: `chat:${id}`,

app/api/vision-agent/route.ts

@@ -1,6 +1,6 @@
 import { StreamingTextResponse } from 'ai';
 
-import { auth } from '@/auth';
+// import { auth } from '@/auth';
 import { MessageBase } from '../../../lib/types';
 
 export const runtime = 'edge';
@@ -13,12 +13,12 @@ export async function POST(req: Request) {
     url: string;
   };
 
-  const session = await auth();
-  if (!session?.user?.email) {
-    return new Response('Unauthorized', {
-      status: 401,
-    });
-  }
+  // const session = await auth();
+  // if (!session?.user?.email) {
+  //   return new Response('Unauthorized', {
+  //     status: 401,
+  //   });
+  // }
 
   const formData = new FormData();
   formData.append('input', JSON.stringify(messages));

app/chat/layout.tsx

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

app/chat/page.tsx

@@ -1,5 +1,74 @@
+'use client';
+
 import ImageSelector from '@/components/chat/ImageSelector';
+import { ChatEntity, MessageBase } from '@/lib/types';
+import { fetcher } from '@/lib/utils';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+type Example = {
+  url: string;
+  initMessages: MessageBase[];
+};
+
+const examples: Example[] = [
+  {
+    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?',
+        id: 'fake-id-1',
+      },
+    ],
+  },
+  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
+  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
+  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
+];
 
 export default function Page() {
-  return <ImageSelector />;
+  const router = useRouter();
+  return (
+    <div className="mx-auto max-w-2xl px-4 mt-8">
+      <div className="rounded-lg border bg-background p-8">
+        <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. Check out our
+          discord for updates and roadmap!
+        </p>
+        <ImageSelector />
+        <p className="mt-4 mb-2">
+          You can also choose from below examples we provided
+        </p>
+        <div className="flex">
+          {examples.map(({ url, initMessages }, index) => (
+            <Image
+              src={url}
+              key={index}
+              width={120}
+              height={120}
+              alt="example images"
+              className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
+              onClick={async () => {
+                const resp = await fetcher<ChatEntity>('/api/upload', {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({ url, initMessages }),
+                });
+                if (resp) {
+                  router.push(`/chat/${resp.id}`);
+                }
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 }

app/page.tsx

@@ -2,11 +2,6 @@ import { auth } from '@/auth';
 import { redirect } from 'next/navigation';
 
 export default async function Page() {
-  const session = await auth();
-  if (!session) {
-    return null;
-  }
-
   redirect('/chat');
 
   // return (

auth.ts

@@ -11,6 +11,8 @@ declare module 'next-auth' {
   }
 }
 
+const restrictedPath = ['/project'];
+
 export const {
   handlers: { GET, POST },
   auth,
@@ -23,13 +25,13 @@ export const {
     }),
   ],
   callbacks: {
-    signIn({ profile }) {
-      if (profile?.email?.endsWith('@landing.ai')) {
-        return !!profile;
-      } else {
-        return '/unauthorized';
-      }
-    },
+    // signIn({ profile }) {
+    //   if (profile?.email?.endsWith('@landing.ai')) {
+    //     return !!profile;
+    //   } else {
+    //     return '/unauthorized';
+    //   }
+    // },
     jwt({ token, profile }) {
       if (profile) {
         token.id = profile.id || profile.sub;
@@ -44,7 +46,12 @@ export const {
       return session;
     },
     authorized({ request, auth }) {
-      return !!auth?.user || request.nextUrl.pathname === '/unauthorized'; // this ensures there is a logged in user for -every- request
+      const isAdmin = !!auth?.user?.email?.endsWith('landing.ai');
+      return restrictedPath.find(path =>
+        request.nextUrl.pathname.startsWith(path),
+      )
+        ? isAdmin
+        : true;
     },
   },
   pages: {

components/Header.tsx

@@ -5,25 +5,21 @@ import { auth } from '@/auth';
 import { Button } from '@/components/ui/Button';
 import { UserMenu } from '@/components/UserMenu';
 import { IconSeparator } from './ui/Icons';
+import { LoginMenu } from './LoginMenu';
 
 export async function Header() {
   const session = await auth();
-
-  if (!session?.user) {
-    return null;
-  }
-
   return (
     <header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
       {/* <Button variant="link" asChild className="mr-2">
 				<Link href="/project">Projects</Link>
 			</Button> */}
-      <Button variant="link" asChild className="mr-2">
+      {/* <Button variant="link" asChild className="mr-2">
         <Link href="/chat">Chat</Link>
-      </Button>
+      </Button> */}
       <IconSeparator className="size-6 text-muted-foreground/50" />
       <div className="flex items-center">
-        <UserMenu user={session!.user} />
+        {session?.user ? <UserMenu user={session!.user} /> : <LoginMenu />}
       </div>
     </header>
   );

components/LoginMenu.tsx

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

components/chat-sidebar/ChatListSidebar.tsx

@@ -1,10 +1,15 @@
 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 (
     <>

components/chat/ChatList.tsx

@@ -10,7 +10,7 @@ export interface ChatList {
 
 export function ChatList({ messages }: ChatList) {
   return (
-    <div className="relative mx-auto max-w-3xl px-8 pr-12">
+    <div className="relative mx-auto max-w-5xl px-8 pr-12 overflow-auto">
       {messages
         // .filter(message => message.role !== 'system')
         .map((message, index) => (

components/chat/ChatMessage.tsx

@@ -30,7 +30,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
       </div>
       <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
         <MemoizedReactMarkdown
-          className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
+          className="break-words"
           remarkPlugins={[remarkGfm, remarkMath]}
           components={{
             p({ children }) {

components/chat/ChatPanel.tsx

@@ -4,7 +4,7 @@ import { type UseChatHelpers } from 'ai/react';
 import { Button } from '@/components/ui/Button';
 import { PromptForm } from '@/components/chat/PromptForm';
 import { ButtonScrollToBottom } from '@/components/chat/ButtonScrollToBottom';
-import { IconRefresh, IconShare, IconStop } from '@/components/ui/Icons';
+import { IconRefresh, IconStop } from '@/components/ui/Icons';
 import { MessageBase } from '../../lib/types';
 
 export interface ChatPanelProps
@@ -15,6 +15,7 @@ export interface ChatPanelProps
   id?: string;
   title?: string;
   messages: MessageBase[];
+  url?: string;
 }
 
 export function ChatPanel({
@@ -27,9 +28,8 @@ export function ChatPanel({
   input,
   setInput,
   messages,
+  url,
 }: ChatPanelProps) {
-  const [shareDialogOpen, setShareDialogOpen] = React.useState(false);
-
   return (
     <div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
       <ButtonScrollToBottom />
@@ -57,6 +57,7 @@ export function ChatPanel({
         </div>
         <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4">
           <PromptForm
+            url={url}
             onSubmit={async value => {
               await append({
                 id,

components/chat/EmptyScreen.tsx

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

components/chat/ImageSelector.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import React from 'react';
-import Image from 'next/image';
+import React, { useState } from 'react';
 import useImageUpload from '../../lib/hooks/useImageUpload';
-import { fetcher } from '@/lib/utils';
+import { cn, fetcher } from '@/lib/utils';
 import { ChatEntity, MessageBase } from '@/lib/types';
 import { useRouter } from 'next/navigation';
+import Loading from '../ui/Loading';
 
 export interface ImageSelectorProps {}
 
@@ -14,32 +14,17 @@ type Example = {
   initMessages: MessageBase[];
 };
 
-const examples: Example[] = [
-  {
-    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?',
-        id: 'fake-id-1',
-      },
-    ],
-  },
-  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
-  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
-  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
-];
-
 const ImageSelector: React.FC<ImageSelectorProps> = () => {
   const router = useRouter();
-  const { getRootProps, getInputProps } = useImageUpload(
+  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');
       }
-      console.log();
+      setUploading(true);
       const reader = new FileReader();
       reader.readAsDataURL(files[0]);
       reader.onload = async () => {
@@ -50,6 +35,7 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
             fileType: files[0].type,
           }),
         });
+        setUploading(false);
         if (resp) {
           router.push(`/chat/${resp.id}`);
         }
@@ -57,47 +43,21 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
     },
   );
   return (
-    <div className="mx-auto max-w-2xl px-4 mt-8">
-      <div className="rounded-lg border bg-background p-8">
-        <h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
-        <p>Lets start by choosing an image</p>
-        <div
-          {...getRootProps()}
-          className="dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
-        >
-          <input {...getInputProps()} />
-          <p className="text-gray-400 text-lg">
-            Drag or drop image here, or click to select images
-          </p>
-        </div>
-        <p className="mt-4 mb-2">
-          You can also choose from below examples we provided
-        </p>
-        <div className="flex">
-          {examples.map(({ url, initMessages }, index) => (
-            <Image
-              src={url}
-              key={index}
-              width={120}
-              height={120}
-              alt="example images"
-              className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
-              onClick={async () => {
-                const resp = await fetcher<ChatEntity>('/api/upload', {
-                  method: 'POST',
-                  headers: {
-                    'Content-Type': 'application/json',
-                  },
-                  body: JSON.stringify({ url, initMessages }),
-                });
-                if (resp) {
-                  router.push(`/chat/${resp.id}`);
-                }
-              }}
-            />
-          ))}
-        </div>
-      </div>
+    <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()} />
+      <p className="text-gray-400 text-lg">
+        {isUploading ? (
+          <Loading />
+        ) : (
+          'Drag or drop image here, or click to select images'
+        )}
+      </p>
     </div>
   );
 };

components/chat/PromptForm.tsx

@@ -11,11 +11,13 @@ import {
 } from '@/components/ui/Tooltip';
 import { IconArrowElbow, IconPlus } from '@/components/ui/Icons';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 
 export interface PromptProps
   extends Pick<UseChatHelpers, 'input' | 'setInput'> {
   onSubmit: (value: string) => void;
   isLoading: boolean;
+  url?: string;
 }
 
 export function PromptForm({
@@ -23,6 +25,7 @@ export function PromptForm({
   input,
   setInput,
   isLoading,
+  url,
 }: PromptProps) {
   const { formRef, onKeyDown } = useEnterSubmit();
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
@@ -45,26 +48,21 @@ export function PromptForm({
       }}
       ref={formRef}
     >
-      <div className="relative flex flex-col w-full px-8 pl-2 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2">
-        {/* <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={e => {
-                e.preventDefault()
-                router.refresh()
-                router.push('/')
-              }}
-              className={cn(
-                buttonVariants({ size: 'sm', variant: 'outline' }),
-                'absolute left-0 top-4 size-8 rounded-full bg-background p-0 sm:left-4'
-              )}
-            >
-              <IconPlus />
-              <span className="sr-only">New Chat</span>
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>New Chat</TooltipContent>
-        </Tooltip> */}
+      <div className="relative flex w-full px-8 pl-2 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2">
+        {url && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Image
+                src={url}
+                width={60}
+                height={60}
+                alt="chosen image"
+                className="w-1/5 my-4 mx-2 rounded-md"
+              />
+            </TooltipTrigger>
+            <TooltipContent>New Chat</TooltipContent>
+          </Tooltip>
+        )}
         <Textarea
           ref={inputRef}
           tabIndex={0}
@@ -74,7 +72,7 @@ export function PromptForm({
           onChange={e => setInput(e.target.value)}
           placeholder="Ask questions about the images."
           spellCheck={false}
-          className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
+          className="min-h-[60px] w-4/5 resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
         />
         <div className="absolute right-0 top-4 sm:right-4">
           <Tooltip>

components/chat/index.tsx

@@ -36,6 +36,7 @@ export function Chat({ chat }: ChatProps) {
       </div>
       <ChatPanel
         id={id}
+        url={url}
         isLoading={isLoading}
         stop={stop}
         append={append}

lib/hooks/useImageUpload.ts

@@ -21,29 +21,7 @@ const useImageUpload = (
           acceptedFiles.forEach(file => {
             try {
               const reader = new FileReader();
-              reader.onloadend = () => {
-                // const newImage = reader.result as string;
-                // setTarget(prev => {
-                //   // Check if the image already exists in the state
-                //   if (
-                //     // prev.length >= 10 ||
-                //     prev.find(entity => entity.url === newImage)
-                //   ) {
-                //     // If it does, return the state unchanged
-                //     return prev;
-                //   } else {
-                //     // If it doesn't, add the new image to the state
-                //     return [
-                //       ...prev,
-                //       {
-                //         url: newImage,
-                //         selected: false,
-                //         name: `i-${prev.length + 1}`,
-                //       } satisfies DatasetImageEntity,
-                //     ];
-                //   }
-                // });
-              };
+              reader.onloadend = () => {};
               reader.readAsDataURL(file);
             } catch (err) {
               console.error(err);

lib/kv/chat.ts

@@ -38,10 +38,10 @@ export async function getKVChats() {
 }
 
 export async function getKVChat(id: string) {
-  const { email, isAdmin } = await authCheck();
+  // const { email, isAdmin } = await authCheck();
   const chat = await kv.hgetall<ChatEntity>(`chat:${id}`);
 
-  if (chat?.user !== email || !isAdmin) {
+  if (!chat) {
     redirect('/');
   }