feat: change the upload flow (#17)

Local works, deploy to vercel to see if larger than 4mb can be uploaded

app/api/chat/route.ts

@@ -5,7 +5,6 @@ import { auth } from '@/auth';
 import {
   ChatCompletionMessageParam,
   ChatCompletionContentPart,
-  ChatCompletionContentPartImage,
 } from 'openai/resources';
 import { MessageBase } from '../../../lib/types';
 

app/api/sign/route.ts

@@ -0,0 +1,39 @@
+import { auth } from '@/auth';
+import { getPresignedUrl } from '@/lib/aws';
+import { nanoid } from '@/lib/utils';
+
+/**
+ * @param req
+ * @returns
+ */
+export async function POST(req: Request): Promise<Response> {
+    const session = await auth();
+    const user = session?.user?.email ?? 'anonymous';
+    // if (!email) {
+    //   return new Response('Unauthorized', {
+    //     status: 401,
+    //   });
+    // }
+
+    try {
+        const { fileName, fileType } = (await req.json()) as {
+            fileName: string;
+            fileType: string;
+        };
+
+        const id = nanoid();
+
+        const signedFileName = `${user}/${id}/${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,
+        });
+    } catch (error) {
+        return new Response((error as Error).message, {
+            status: 400,
+        });
+    }
+}

app/api/upload/route.ts

@@ -1,12 +1,10 @@
 import { auth } from '@/auth';
-import { upload } from '@/lib/aws';
 import { createKVChat } from '@/lib/kv/chat';
 import { ChatEntity, MessageBase } from '@/lib/types';
 import { nanoid } from '@/lib/utils';
 import { revalidatePath } from 'next/cache';
 
 /**
- * TODO: this should be replaced with actual upload to S3
  * @param req
  * @returns
  */
@@ -20,37 +18,15 @@ export async function POST(req: Request): Promise<Response> {
   // }
 
   try {
-    const { url, base64, initMessages, fileType } = (await req.json()) as {
-      url?: string;
-      file?: File;
-      base64?: string;
-      fileType?: string;
+    const { id, url, initMessages } = (await req.json()) as {
+      id?: string;
+      url: string;
       initMessages?: MessageBase[];
     };
 
-    if (!url && !base64) {
-      return new Response('Missing both url and base64 in payload', {
-        status: 400,
-      });
-    }
-
-    const id = nanoid();
-
-    let urlToSave = url;
-    if (base64) {
-      const fileName = `${user}/${id}/${Date.now()}-image.jpg`;
-      const res = await upload(base64, fileName, fileType ?? 'image/png');
-      if (res.ok) {
-        console.log('Image uploaded successfully');
-        urlToSave = `https://${process.env.AWS_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${fileName}`;
-      } else {
-        return res;
-      }
-    }
-
     const payload: ChatEntity = {
-      url: urlToSave!, // TODO can be uploaded as well
-      id,
+      url,
+      id: id ?? nanoid(),
       user,
       messages: initMessages ?? [],
     };

components/chat/ChatMessage.tsx

@@ -10,72 +10,14 @@ import { MemoizedReactMarkdown } from '@/components/chat/MemoizedReactMarkdown';
 import { IconOpenAI, IconUser } from '@/components/ui/Icons';
 import { ChatMessageActions } from '@/components/chat/ChatMessageActions';
 import { MessageBase } from '../../lib/types';
+import { useCleanedUpMessages } from '@/lib/hooks/useCleanedUpMessages';
 
 export interface ChatMessageProps {
   message: MessageBase;
 }
 
-const PAIRS: Record<string, string> = {
-  '┍': '┑',
-  '┝': '┥',
-  '├': '┤',
-  '┕': '┙',
-};
-
-const MIDDLE_STARTER = '┝';
-const MIDDLE_SEPARATOR = '┿';
-
 export function ChatMessage({ message, ...props }: ChatMessageProps) {
-  const cleanupMessage = ({ content, role }: MessageBase) => {
-    if (role === 'user') {
-      return {
-        content,
-      };
-    }
-    const [logs = '', answer = ''] = content.split('<ANSWER>');
-    const cleanedLogs = [];
-    let left = 0;
-    let right = 0;
-    while (right < logs.length) {
-      if (Object.keys(PAIRS).includes(content[right])) {
-        cleanedLogs.push(content.substring(left, right));
-        left = right++;
-        while (
-          right < content.length &&
-          PAIRS[content[left]] !== content[right]
-        ) {
-          right++;
-        }
-        if (content[left] === MIDDLE_STARTER) {
-          // add the text alignment so it can be shown as a table
-          const separators = logs
-            .substring(left, right)
-            .split(MIDDLE_SEPARATOR).length;
-          if (separators > 0) {
-            cleanedLogs.push(
-              Array(separators + 1)
-                .fill('|')
-                .join(' :- '),
-            );
-          }
-        }
-        left = ++right;
-      } else {
-        right++;
-      }
-    }
-    cleanedLogs.push(content.substring(left, right));
-    return {
-      logs: cleanedLogs
-        .join('')
-        .replace(/│/g, '|')
-        .split('|\n\n|')
-        .join('|\n|'),
-      content: answer.replace('</</ANSWER>', '').replace('</ANSWER>', ''),
-    };
-  };
-
-  const { logs, content } = cleanupMessage(message);
+  const { logs, content } = useCleanedUpMessages(message);
   return (
     <div className={cn('group relative mb-4 flex items-start')} {...props}>
       <div

components/chat/ImageSelector.tsx

@@ -3,11 +3,12 @@
 import React, { useState } from 'react';
 import useImageUpload from '../../lib/hooks/useImageUpload';
 import { cn, fetcher } from '@/lib/utils';
-import { ChatEntity, MessageBase } from '@/lib/types';
+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 {}
+export interface ImageSelectorProps { }
 
 type Example = {
   url: string;
@@ -28,20 +29,43 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
       const reader = new FileReader();
       reader.readAsDataURL(files[0]);
       reader.onload = async () => {
-        const resp = await fetcher<ChatEntity>('/api/upload', {
+        const { id, signedUrl, publicUrl, fields } = await fetcher<SignedPayload>('/api/sign', {
           method: 'POST',
           body: JSON.stringify({
-            base64: reader.result as string,
             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()}

lib/aws.ts

@@ -9,8 +9,8 @@ const s3Client = new S3Client({
   credentials: fromEnv(),
 });
 
-export const upload = async (base64: string, fileName: string, fileType: string) => {
-  const { url, fields } = await createPresignedPost(s3Client, {
+export const getPresignedUrl = async (fileName: string, fileType: string) => {
+  return createPresignedPost(s3Client, {
     Bucket: process.env.AWS_BUCKET_NAME ?? 'vision-agent-dev',
     Key: fileName,
     Conditions: [
@@ -23,6 +23,14 @@ export const upload = async (base64: string, fileName: string, fileType: string)
     },
     Expires: 600,
   });
+};
+
+export const upload = async (
+  base64: string,
+  fileName: string,
+  fileType: string,
+) => {
+  const { url, fields } = await getPresignedUrl(fileName, fileType);
   const formData = new FormData();
   Object.entries(fields).forEach(([key, value]) => {
     formData.append(key, value as string);

lib/hooks/useCleanedUpMessages.ts

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { MessageBase } from '../types';
+
+const PAIRS: Record<string, string> = {
+  '┍': '┑',
+  '┝': '┥',
+  '├': '┤',
+  '┕': '┙',
+};
+
+const MIDDLE_STARTER = '┝';
+const MIDDLE_SEPARATOR = '┿';
+
+export const useCleanedUpMessages = ({ content, role }: MessageBase) => {
+  return useMemo(() => {
+    if (role === 'user') {
+      return {
+        content,
+      };
+    }
+    const [logs = '', answer = ''] = content.split('<ANSWER>');
+    const cleanedLogs = [];
+    let left = 0;
+    let right = 0;
+    while (right < logs.length) {
+      if (Object.keys(PAIRS).includes(content[right])) {
+        cleanedLogs.push(content.substring(left, right));
+        left = right++;
+        while (
+          right < content.length &&
+          PAIRS[content[left]] !== content[right]
+        ) {
+          right++;
+        }
+        if (content[left] === MIDDLE_STARTER) {
+          // add the text alignment so it can be shown as a table
+          const separators = logs
+            .substring(left, right)
+            .split(MIDDLE_SEPARATOR).length;
+          if (separators > 0) {
+            cleanedLogs.push(
+              Array(separators + 1)
+                .fill('|')
+                .join(' :- '),
+            );
+          }
+        }
+        left = ++right;
+      } else {
+        right++;
+      }
+    }
+    cleanedLogs.push(content.substring(left, right));
+    return {
+      logs: cleanedLogs
+        .join('')
+        .replace(/│/g, '|')
+        .split('|\n\n|')
+        .join('|\n|'),
+      content: answer.replace('</</ANSWER>', '').replace('</ANSWER>', ''),
+    };
+  }, [content, role]);
+};

lib/types.ts

@@ -3,8 +3,8 @@ import { type Message } from 'ai';
 export type ServerActionResult<Result> = Promise<
   | Result
   | {
-      error: string;
-    }
+    error: string;
+  }
 >;
 
 /**
@@ -35,3 +35,10 @@ export type ChatEntity = {
   user: string; // email
   messages: MessageBase[];
 };
+
+export interface SignedPayload {
+  id: string;
+  publicUrl: string;
+  signedUrl: string;
+  fields: Record<string, string>;
+}