Fix deployment + Chat id pages (#5)

* Fix deployment

* use Response

* done

* done

* pretty

.prettierrc

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

app/api/upload/route.ts

@@ -1,11 +1,15 @@
 import { auth } from '@/auth';
+import { ChatEntity, MessageBase } from '@/lib/types';
 import { nanoid } from '@/lib/utils';
 import { kv } from '@vercel/kv';
-import { format } from 'date-fns';
 
-export async function POST(req: Request) {
+/**
+ * TODO: this should be replaced with actual upload to S3
+ * @param req
+ * @returns
+ */
+export async function POST(req: Request): Promise<Response> {
   const session = await auth();
-  console.log('[Ming] ~ POST ~ session:', session);
   const email = session?.user?.email;
   if (!email) {
     return new Response('Unauthorized', {
@@ -13,12 +17,23 @@ export async function POST(req: Request) {
     });
   }
 
-  const json = await req.json();
-  console.log('[Ming] ~ POST ~ json:', json);
+  const { url, initMessages } = (await req.json()) as {
+    url?: string;
+    file?: File;
+    base64?: string;
+    initMessages?: MessageBase[];
+  };
 
   const id = nanoid();
 
-  await kv.hmset(`chat:${id}`, json);
+  const payload: ChatEntity = {
+    url: url!, // TODO can be uploaded as well
+    id,
+    user: email,
+    messages: initMessages ?? [],
+  };
+
+  await kv.hmset(`chat:${id}`, payload);
   await kv.zadd(`user:chat:${email}`, {
     score: Date.now(),
     member: `chat:${id}`,
@@ -28,5 +43,5 @@ export async function POST(req: Request) {
     member: `chat:${id}`,
   });
 
-  return 'success';
+  return Response.json(payload);
 }

app/chat/[id]/page.tsx

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

app/chat/layout.tsx

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

app/chat/page.tsx

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

components/chat-sidebar/ChatCard.tsx

@@ -3,24 +3,35 @@
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { cn } from '@/lib/utils';
+import { ChatEntity } from '@/lib/types';
+import Image from 'next/image';
 
 export interface ChatCardProps {
-  id: string;
-  title: string;
+  chat: ChatEntity;
 }
 
-const ChatCard: React.FC<ChatCardProps> = ({ id, title }) => {
+const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
   const { chatId: chatIdFromParam } = useParams();
+  const { id, url, messages, user } = chat;
   return (
     <Link
       className={cn(
-        'p-4 m-2 bg-white l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
+        'p-2 m-2 bg-white l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
         chatIdFromParam === id && 'border-gray-500',
       )}
       href={`/chat/${id}`}
     >
-      <div className="overflow-hidden">
-        <p className="text-sm font-medium text-black mb-1">{title}</p>
+      <div className="overflow-hidden flex items-center">
+        <Image
+          src={url}
+          alt={url}
+          width={50}
+          height={50}
+          className="rounded w-1/4 "
+        />
+        <p className="text-xs text-gray-500 w-3/4 ml-2">
+          {messages?.[0].content.slice(0, 50) + ' ...' ?? 'new chat'}
+        </p>
       </div>
     </Link>
   );

components/chat-sidebar/ChatListSidebar.tsx

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

components/chat/ImageSelector.tsx

@@ -1,21 +1,36 @@
+'use client';
+
 import React from 'react';
 import Image from 'next/image';
 import useImageUpload from '../../lib/hooks/useImageUpload';
 import { fetcher } from '@/lib/utils';
+import { ChatEntity, MessageBase } from '@/lib/types';
+import { useRouter } from 'next/navigation';
 
 export interface ImageSelectorProps {}
 
-const examples = [
-  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
-  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
-  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
-  'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
+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?' },
+    ],
+  },
+  // '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();
   return (
-    <div className="mx-auto max-w-2xl px-4">
+    <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>
@@ -32,20 +47,23 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
           You can also choose from below examples we provided
         </p>
         <div className="flex">
-          {examples.map((example, index) => (
+          {examples.map(({ url, initMessages }, index) => (
             <Image
-              src={example}
+              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={() =>
-                fetcher('/api/upload', {
+              onClick={async () => {
+                const resp = await fetcher<ChatEntity>('/api/upload', {
                   method: 'POST',
-                  body: JSON.stringify({ url: example }),
-                })
-              }
+                  body: JSON.stringify({ url, initMessages }),
+                });
+                if (resp) {
+                  router.push(`/chat/${resp.id}`);
+                }
+              }}
             />
           ))}
         </div>

components/chat/index.tsx

@@ -26,12 +26,12 @@ export function Chat({ id, className }: ChatProps) {
             <ImageSelector />
           </div>
           <div className="w-1/2 relative overflow-auto">
-            <ChatList messages={messages} />
+            {/* <ChatList messages={messages} /> */}
             <ChatScrollAnchor trackVisibility={isLoading} />
           </div>
         </div>
       </div>
-      <ChatPanel
+      {/* <ChatPanel
         id={id}
         isLoading={isLoading}
         stop={stop}
@@ -40,7 +40,7 @@ export function Chat({ id, className }: ChatProps) {
         messages={messages}
         input={input}
         setInput={setInput}
-      />
+      /> */}
     </>
   );
 }

lib/hooks/useImageUpload.ts

@@ -5,7 +5,6 @@ import { toast } from 'react-hot-toast';
 import { DatasetImageEntity } from '../types';
 
 const useImageUpload = (options?: Partial<DropzoneOptions>) => {
-  const [, setTarget] = useAtom(datasetAtom);
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: {
       'image/*': ['.jpeg', '.png'],
@@ -21,27 +20,27 @@ const useImageUpload = (options?: Partial<DropzoneOptions>) => {
         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,
-                ];
-              }
-            });
+            // 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.readAsDataURL(file);
         } catch (err) {

lib/kv/chat.ts

@@ -1,11 +1,10 @@
 'use server';
 
 import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
 import { kv } from '@vercel/kv';
 
 import { auth } from '@/auth';
-import { type Chat } from '@/lib/types';
+import { ChatEntity } from '@/lib/types';
 
 export async function getKVChats() {
   const session = await auth();
@@ -27,18 +26,14 @@ export async function getKVChats() {
 
     const results = await pipeline.exec();
 
-    return results as Chat[];
+    return results as ChatEntity[];
   } catch (error) {
     return [];
   }
 }
 
-export async function getKVChat(id: string, userId: string) {
-  const chat = await kv.hgetall<Chat>(`chat:${id}`);
-
-  if (!chat || (userId && chat.userId !== userId)) {
-    return null;
-  }
+export async function getKVChat(id: string) {
+  const chat = await kv.hgetall<ChatEntity>(`chat:${id}`);
 
   return chat;
 }

lib/types.ts

@@ -1,14 +1,5 @@
 import { type Message } from 'ai';
 
-export interface Chat extends Record<string, any> {
-  id: string;
-  title: string;
-  createdAt: Date;
-  userId: string;
-  path: string;
-  messages: Message[];
-}
-
 export type ServerActionResult<Result> = Promise<
   | Result
   | {
@@ -16,12 +7,30 @@ export type ServerActionResult<Result> = Promise<
     }
 >;
 
+/**
+ * @deprecated
+ */
 export type DatasetImageEntity = {
   url: string;
   selected?: boolean;
   name: string;
 };
 
+/**
+ * @deprecated
+ */
 export type MessageWithSelectedDataset = Message & {
   dataset: DatasetImageEntity[];
 };
+
+export type MessageBase = {
+  role: 'user' | 'system' | 'assistant';
+  content: string;
+};
+
+export type ChatEntity = {
+  url: string;
+  id: string;
+  user: string; // email
+  messages: MessageBase[];
+};

lib/utils.ts

@@ -16,7 +16,6 @@ export async function fetcher<JSON = any>(
   init?: RequestInit,
 ): Promise<JSON> {
   const res = await fetch(input, init);
-  console.log('[Ming] ~ res:', res);
 
   if (!res.ok) {
     const json = await res.json();

prettier.config.cjs

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