add agent api

app/project/[projectId]/page.tsx

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

components/project/Chat.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MediaDetails } from '@/lib/fetch/clef';
+import { MediaDetails } from '@/lib/fetch';
 import useChatWithMedia from '@/lib/hooks/useChatWithMedia';
 import React from 'react';
 import { ChatList } from '../chat/ChatList';

components/project/MediaGrid.tsx

@@ -1,4 +1,4 @@
-import { MediaDetails } from '@/lib/fetch/clef';
+import { MediaDetails } from '@/lib/fetch';
 import MediaTile from './MediaTile';
 
 export default function MediaGrid({

components/project/MediaTile.tsx

@@ -5,7 +5,7 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from '@/components/ui/Tooltip';
-import { MediaDetails } from '@/lib/fetch/clef';
+import { MediaDetails } from '@/lib/fetch';
 
 export interface MediaTileProps {
 	media: MediaDetails;

components/sidebar/ProjectCard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ProjectBaseInfo } from '@/lib/fetch/clef';
+import { ProjectBaseInfo } from '@/lib/fetch';
 import { format } from 'date-fns';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';

components/sidebar/ProjectListSideBar.tsx

@@ -1,4 +1,4 @@
-import { fetchRecentProjectList } from '@/lib/fetch/clef';
+import { fetchRecentProjectList } from '@/lib/fetch';
 import ProjectCard from './ProjectCard';
 
 export interface ProjectListSideBarProps {}

lib/fetch/{clef.ts → index.ts}

@@ -1,5 +1,4 @@
 import { auth } from '@/auth';
-import { redirect } from 'next/navigation';
 import { v5 as uuidV5 } from 'uuid';
 
 interface ApiResponse<T> {
@@ -8,11 +7,21 @@ interface ApiResponse<T> {
 	data: T;
 }
 
-const clefApiBuilder = <Params extends object | void, Resp>(path: string) => {
+const apiBuilder = <Params extends object | void, Resp>(
+	path: string,
+	options?: {
+		// default to GET
+		method: 'GET' | 'POST';
+		// default to 'app'
+		prefix: 'api' | 'app' | 'api.dev' | 'app.dev';
+	},
+) => {
 	return async (params: Params): Promise<Resp> => {
 		const session = await auth();
 		if (!session?.user?.email) {
-			redirect('/');
+			throw new Response('Unauthorized', {
+				status: 401,
+			});
 		}
 
 		const adminEmail = session.user.email;
@@ -25,24 +34,41 @@ const clefApiBuilder = <Params extends object | void, Resp>(path: string) => {
 			bucket: 'fake_bucket',
 		};
 
-		const baseURL = `https://app.landing.ai/${path}`;
+		const prefix = options?.prefix ?? 'app';
+		const baseURL = `https://${prefix}.landing.ai/${path}`;
 
+		const method = options?.method ?? 'GET';
 		// Create a URL object with query params
 		const url = new URL(baseURL);
-		Object.entries(params ?? {}).forEach(([key, value]) =>
-			url.searchParams.append(key, value),
-		);
+		if (method === 'GET') {
+			Object.entries(params ?? {}).forEach(([key, value]) =>
+				url.searchParams.append(key, value),
+			);
+		}
 
-		const res = await fetch(url.toString(), {
+		const fetchParams: RequestInit = {
+			method: options?.method ?? 'GET',
 			headers: {
-				'Content-Type': 'application/json',
-				sessionuser: JSON.stringify(sessionUser),
+				sessionuser: JSON.stringify(sessionUser), // faked production user
+				apikey: 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k', // dev key
 				'X-ROUTE': 'mingruizhang-landing',
 			},
-		});
+		};
+
+		if (method === 'POST' && params instanceof Object) {
+			const formData = new FormData();
+			for (const [key, value] of Object.entries(params)) {
+				formData.append(key, value);
+			}
+
+			fetchParams.body = formData;
+		}
+		console.log('[Ming] ~ return ~ fetchParams:', fetchParams, url.toString());
+
+		const res = await fetch(url.toString(), fetchParams);
 
 		if (!res.ok) {
-			console.error('ERROR: fetch data failure', res.status);
+			console.error('ERROR: fetch data failure', res.status, res.statusText);
 			// This will activate the closest `error.js` Error Boundary
 			throw new Error('Failed to fetch data');
 		}
@@ -68,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 = clefApiBuilder<void, ProjectBaseInfo[]>(
+export const fetchRecentProjectList = apiBuilder<void, ProjectBaseInfo[]>(
 	'api/admin/projects/recent',
 );
 
@@ -86,11 +112,24 @@ export type MediaDetails = {
 		orientation: number;
 	};
 };
+
 /**
  * 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 = clefApiBuilder<
+export const fetchProjectMedia = apiBuilder<
 	{ 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/hooks/useChatWithMedia.ts

@@ -1,7 +1,7 @@
 import { useChat, type Message } from 'ai/react';
 import { toast } from 'react-hot-toast';
 import { useEffect, useState } from 'react';
-import { MediaDetails } from '../fetch/clef';
+import { MediaDetails } from '../fetch';
 import { MessageWithSelectedDataset } from '../types';
 
 const useChatWithMedia = (mediaList: MediaDetails[]) => {

package.json

@@ -20,9 +20,6 @@
 		"@radix-ui/react-slot": "^1.0.2",
 		"@radix-ui/react-switch": "^1.0.3",
 		"@radix-ui/react-tooltip": "^1.0.7",
-		"@vercel/analytics": "^1.1.2",
-		"@vercel/kv": "^1.0.1",
-		"@vercel/og": "^0.6.2",
 		"ai": "^2.2.31",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",