KV template

app/api/chat/route.ts

@@ -8,7 +8,7 @@ import {
 	ChatCompletionContentPartImage,
 } from 'openai/resources';
 import { MessageWithSelectedDataset } from '../../../lib/types';
-import { postAgentChat } from '@/lib/fetch';
+// import { postAgentChat } from '@/lib/fetch';
 
 export const runtime = 'edge';
 
@@ -21,6 +21,7 @@ export async function POST(req: Request) {
 	const { messages } = json as {
 		messages: MessageWithSelectedDataset[];
 	};
+	console.log('[Ming] ~ POST ~ messages:', messages);
 
 	const session = await auth();
 	if (!session?.user?.email) {
@@ -29,14 +30,6 @@ export async function POST(req: Request) {
 		});
 	}
 
-	// const lastMessage = messages[messages.length - 1];
-	// const firstMessage = messages[0];
-
-	// const resp = await postAgentChat({
-	// 	input: lastMessage.content,
-	// 	image: firstMessage.dataset?.[0]?.url,
-	// });
-
 	const formattedMessage: ChatCompletionMessageParam[] = messages.map(
 		message => {
 			const { dataset, ...rest } = message;

app/api/upload/route.ts

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

app/chat/layout.tsx

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

app/chat/page.tsx

@@ -1,27 +1,7 @@
-'use client';
-
 import { nanoid } from '@/lib/utils';
 import { Chat } from '@/components/chat';
-import { ThemeToggle } from '../../components/ThemeToggle';
-import { useAtomValue } from 'jotai';
-import { datasetAtom } from '../../state';
-import { EmptyScreen } from '../../components/chat/EmptyScreen';
 
 export default function Page() {
 	const id = nanoid();
-	const dataset = useAtomValue(datasetAtom);
-
-	if (!dataset.length)
-		return (
-			<div className="pb-[150px] pt-4 md:pt-10 h-full">
-				<EmptyScreen />
-			</div>
-		);
-
-	return (
-		<>
-			<Chat id={id} />
-			<ThemeToggle />
-		</>
-	);
+	return <Chat id={id} />;
 }

app/layout.tsx

@@ -7,6 +7,7 @@ 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}`),

app/page.tsx

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

app/project/[projectId]/page.tsx

@@ -1,7 +1,7 @@
 import MediaGrid from '@/components/project/MediaGrid';
 import { fetchProjectMedia } from '@/lib/fetch';
 import { Suspense } from 'react';
-import Loading from '../loading';
+import Loading from '../../../components/ui/Loading';
 import Chat from '@/components/project/Chat';
 
 interface PageProps {

app/project/layout.tsx

@@ -1,6 +1,6 @@
-import ProjectListSideBar from '@/components/sidebar/ProjectListSideBar';
+import ProjectListSideBar from '@/components/project-sidebar/ProjectListSideBar';
 import { Suspense } from 'react';
-import Loading from './loading';
+import Loading from '@/components/ui/Loading';
 
 interface ChatLayoutProps {
 	children: React.ReactNode;

components/Header.tsx

@@ -15,9 +15,9 @@ export async function 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">
-			<Button variant="link" asChild className="mr-2">
+			{/* <Button variant="link" asChild className="mr-2">
 				<Link href="/project">Projects</Link>
-			</Button>
+			</Button> */}
 			<Button variant="link" asChild className="mr-2">
 				<Link href="/chat">Chat</Link>
 			</Button>

components/chat-sidebar/ChatCard.tsx

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

components/chat-sidebar/ChatListSidebar.tsx

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

components/chat/ImageSelector.tsx

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

components/chat/index.tsx

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

components/ui/Icons.tsx

@@ -511,7 +511,7 @@ function IconLoading({ className, ...props }: React.ComponentProps<'svg'>) {
 	return (
 		<svg
 			aria-hidden="true"
-			className="size-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+			className="size-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600"
 			viewBox="0 0 100 101"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"

app/project/loading.tsx → components/ui/Loading.tsx

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

lib/fetch/index.ts

@@ -7,7 +7,7 @@ interface ApiResponse<T> {
 	data: T;
 }
 
-const apiBuilder = <Params extends object | void, Resp>(
+const clefApiBuilder = <Params extends object | void, Resp>(
 	path: string,
 	options?: {
 		// default to GET
@@ -18,18 +18,19 @@ const apiBuilder = <Params extends object | void, Resp>(
 ) => {
 	return async (params: Params): Promise<Resp> => {
 		const session = await auth();
-		if (!session?.user?.email) {
+		const email = session?.user?.email;
+
+		if (!email || !email.endsWith('@landing.ai')) {
 			throw new Response('Unauthorized', {
 				status: 401,
 			});
 		}
 
-		const adminEmail = session.user.email;
 		const sessionUser = {
-			id: uuidV5(adminEmail, uuidV5.URL),
+			id: uuidV5(email, uuidV5.URL),
 			orgId: '-1024',
-			email: adminEmail,
-			username: adminEmail.split('@')[0],
+			email: email,
+			username: email.split('@')[0],
 			userRole: 'adminPortal',
 			bucket: 'fake_bucket',
 		};
@@ -63,7 +64,6 @@ const apiBuilder = <Params extends object | void, Resp>(
 
 			fetchParams.body = formData;
 		}
-		console.log('[Ming] ~ return ~ fetchParams:', fetchParams, url.toString());
 
 		const res = await fetch(url.toString(), fetchParams);
 
@@ -94,7 +94,7 @@ export type ProjectBaseInfo = {
  * 3. projects not containing media or only contain sample media
  * @author https://github.com/landing-ai/landing-platform/blob/mingrui-04-08-meaningful-project/packages/server-clef/src/main_app/controllers/admin/get_admin_meaningful_project_controller.ts
  */
-export const fetchRecentProjectList = apiBuilder<void, ProjectBaseInfo[]>(
+export const fetchRecentProjectList = clefApiBuilder<void, ProjectBaseInfo[]>(
 	'api/admin/projects/recent',
 );
 
@@ -117,19 +117,7 @@ export type MediaDetails = {
  * Randomly fetch 10 media from a given project
  * @author https://github.com/landing-ai/landing-platform/blob/mingrui-04-08-meaningful-project/packages/server-clef/src/main_app/controllers/admin/get_admin_meaningful_project_controller.ts
  */
-export const fetchProjectMedia = apiBuilder<
+export const fetchProjectMedia = clefApiBuilder<
 	{ projectId: number },
 	MediaDetails[]
 >('api/admin/project/media');
-
-/**
- * Call vision agent
- * @author https://github.com/landing-ai/public-rest-api/pull/36
- */
-export const postAgentChat = apiBuilder<
-	{ input: string; image: string },
-	MediaDetails[]
->('v1/agent/chat?agent_class=vision_agent', {
-	method: 'POST',
-	prefix: 'api.dev',
-});

lib/kv/chat.ts

@@ -0,0 +1,69 @@
+'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';
+
+export async function getKVChats() {
+	const session = await auth();
+	const email = session?.user?.email;
+
+	if (!email) {
+		return [];
+	}
+
+	try {
+		const pipeline = kv.pipeline();
+		const chats: string[] = await kv.zrange(`user:chat:${email}`, 0, -1, {
+			rev: true,
+		});
+
+		for (const chat of chats) {
+			pipeline.hgetall(chat);
+		}
+
+		const results = await pipeline.exec();
+
+		return results as Chat[];
+	} 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;
+	}
+
+	return chat;
+}
+
+export async function removeKVChat({ id, path }: { id: string; path: string }) {
+	const session = await auth();
+
+	if (!session) {
+		return {
+			error: 'Unauthorized',
+		};
+	}
+
+	//Convert uid to string for consistent comparison with session.user.id
+	const uid = String(await kv.hget(`chat:${id}`, 'userId'));
+
+	if (uid !== session?.user?.id) {
+		return {
+			error: 'Unauthorized',
+		};
+	}
+
+	await kv.del(`chat:${id}`);
+	await kv.zrem(`user:chat:${session.user.id}`, `chat:${id}`);
+
+	revalidatePath('/');
+	return revalidatePath(path);
+}

lib/types.ts

@@ -1,5 +1,4 @@
 import { type Message } from 'ai';
-import { CreateMessage } from 'ai/react/dist';
 
 export interface Chat extends Record<string, any> {
 	id: string;
@@ -8,7 +7,6 @@ export interface Chat extends Record<string, any> {
 	userId: string;
 	path: string;
 	messages: Message[];
-	sharePath?: string;
 }
 
 export type ServerActionResult<Result> = Promise<

lib/utils.ts

@@ -1,43 +1,44 @@
-import { clsx, type ClassValue } from 'clsx'
-import { customAlphabet } from 'nanoid'
-import { twMerge } from 'tailwind-merge'
+import { clsx, type ClassValue } from 'clsx';
+import { customAlphabet } from 'nanoid';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }
 
 export const nanoid = customAlphabet(
-  '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
-  7
-) // 7-character random string
+	'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
+	7,
+); // 7-character random string
 
 export async function fetcher<JSON = any>(
-  input: RequestInfo,
-  init?: RequestInit
+	input: RequestInfo,
+	init?: RequestInit,
 ): Promise<JSON> {
-  const res = await fetch(input, init)
+	const res = await fetch(input, init);
+	console.log('[Ming] ~ res:', res);
 
-  if (!res.ok) {
-    const json = await res.json()
-    if (json.error) {
-      const error = new Error(json.error) as Error & {
-        status: number
-      }
-      error.status = res.status
-      throw error
-    } else {
-      throw new Error('An unexpected error occurred')
-    }
-  }
+	if (!res.ok) {
+		const json = await res.json();
+		if (json.error) {
+			const error = new Error(json.error) as Error & {
+				status: number;
+			};
+			error.status = res.status;
+			throw error;
+		} else {
+			throw new Error('An unexpected error occurred');
+		}
+	}
 
-  return res.json()
+	return res.json();
 }
 
 export function formatDate(input: string | number | Date): string {
-  const date = new Date(input)
-  return date.toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric'
-  })
+	const date = new Date(input);
+	return date.toLocaleDateString('en-US', {
+		month: 'long',
+		day: 'numeric',
+		year: 'numeric',
+	});
 }

package.json

@@ -20,6 +20,7 @@
 		"@radix-ui/react-slot": "^1.0.2",
 		"@radix-ui/react-switch": "^1.0.3",
 		"@radix-ui/react-tooltip": "^1.0.7",
+		"@vercel/kv": "^1.0.1",
 		"ai": "^2.2.31",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
@@ -66,5 +67,5 @@
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.3.3"
 	},
-	"packageManager": "pnpm@8.6.3"
+	"packageManager": "pnpm@9.0.1"
 }