fix: some file with empty space not get encoded correctly (#110)

Use the previous not worked image to load the chat and see success
result:
<img width="1061" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/646e8bcc-c3de-412e-aa79-24dbee5bc02f">
Also, the 400 error logged completely:
<img width="1390" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/19fe3eb5-51ad-40d7-b64a-a2ceae3afb69">

app/api/vision-agent/route.ts

@@ -119,7 +119,11 @@ export const POST = withLogging(
 
     const formData = new FormData();
     formData.append('input', apiMessages);
-    formData.append('image', encodeURI(mediaUrl));
+    const [prefix, fileName] = mediaUrl.split(`${chatId}/`);
+    formData.append(
+      'image',
+      prefix + `${chatId}/` + encodeURIComponent(decodeURIComponent(fileName)),
+    );
 
     const fetchResponse = await fetch(
       `${process.env.AGENT_HOST}/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
@@ -138,16 +142,30 @@ export const POST = withLogging(
 
     if (!fetchResponse.ok && fetchResponse.body) {
       const reader = fetchResponse.body.getReader();
+      let errorText = '';
       return new StreamingTextResponse(
         new ReadableStream({
           async start(controller) {
             try {
-              const { done, value } = await reader?.read();
-              if (!done) {
-                const errorText = new TextDecoder().decode(value);
-                logger.error(session, { message: errorText }, request);
-                controller.error(new Error(`Response error: ${errorText}`));
+              while (true) {
+                const { done, value } = await reader?.read();
+                if (done) {
+                  break;
+                }
+                errorText += new TextDecoder().decode(value);
               }
+              logger.error(
+                session,
+                {
+                  message: errorText,
+                  messageId,
+                  chatId,
+                  statusText: fetchResponse.statusText,
+                  status: fetchResponse.status,
+                },
+                request,
+              );
+              controller.error(new Error(`Response error: ${errorText}`));
             } catch (e) {
               logger.error(session, (e as Error).message, request);
             }

components/chat/ChatMessage.tsx

@@ -23,7 +23,7 @@ import { Button } from '../ui/Button';
 import { Dialog, DialogContent, DialogTrigger } from '../ui/Dialog';
 import Img from '../ui/Img';
 import CodeResultDisplay from '../CodeResultDisplay';
-import { useAtom, useSetAtom } from 'jotai';
+import { useAtom } from 'jotai';
 import { selectedMessageId } from '@/state/chat';
 import { Message } from '@prisma/client';
 import { Separator } from '../ui/Separator';

components/ui/Img.tsx

@@ -26,11 +26,7 @@ const Img = React.forwardRef<
     : (src as string);
   return (
     <Image
-      src={
-        srcString.includes('vision-agent-dev.s3')
-          ? encodeURI(srcString)
-          : srcString
-      }
+      src={srcString}
       placeholder={placeholder}
       width={dimensions.width}
       height={dimensions.height}

lib/aws.ts

@@ -32,7 +32,7 @@ export const getPresignedUrl = async (
   return {
     id,
     signedUrl: res.url,
-    publicUrl: `https://${process.env.AWS_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${signedFileName}`,
+    publicUrl: `https://${process.env.AWS_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${user}/${id}/${encodeURIComponent(fileName)}`,
     fields: res.fields,
   };
 };