feat: encode uri for s3 url when loading (#104)

file name has special characters (%, & etc):
<img width="737" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/33706c60-f7f5-4f3e-8ace-3d1e6afb77be">
<img width="1524" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/80edeb03-b10d-4463-bd85-68d1d1d157a8">

normal file name without special characters:
<img width="883" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/2029ac6b-8605-4849-8661-93b3008acc02">

app/api/vision-agent/route.ts

@@ -119,16 +119,16 @@ export const POST = withLogging(
 
     const formData = new FormData();
     formData.append('input', apiMessages);
-    formData.append('image', mediaUrl);
+    formData.append('image', encodeURI(mediaUrl));
 
     const agentHost = process.env.LND_TIER
       ? 'http://publicrestapi-app-lndsvc.publicrestapi.svc.cluster.local:5000'
       : 'https://api.dev.landing.ai';
 
     const fetchResponse = await fetch(
-      `${agentHost}/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
+      // `${agentHost}/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
       // `https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
-      // `http://localhost:5001/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
+      `http://localhost:5001/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
       {
         method: 'POST',
         headers: {
@@ -349,6 +349,20 @@ export const POST = withLogging(
         };
 
         let timeout = null;
+        controller.enqueue(
+          encoder.encode(
+            '2:' +
+              JSON.stringify([
+                {
+                  type: 'init',
+                  payload: {
+                    messageId,
+                  },
+                },
+              ]) +
+              '\n',
+          ),
+        );
         for await (const chunk of fetchResponse.body as any) {
           const data = decoder.decode(chunk);
           buffer += data;

components/ChatInterface.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ChatWithMessages } from '@/lib/types';
-import React from 'react';
+import React, { useEffect } from 'react';
 import ChatList from './chat/ChatList';
 import { Card } from './ui/Card';
 import { useAtom, useAtomValue } from 'jotai';
@@ -14,10 +14,18 @@ export interface ChatInterfaceProps {
 }
 
 const ChatInterface: React.FC<ChatInterfaceProps> = ({ chat, userId }) => {
-  const messageId = useAtomValue(selectedMessageId);
+  const [messageId, setMessageId] = useAtom(selectedMessageId);
   const messageCodeResult = chat.messages.find(
     message => message.id === messageId,
   )?.result;
+
+  useEffect(() => {
+    if (messageId) return;
+    const lastMessageWithResult =
+      chat.messages.findLast(message => !!message.result) ??
+      chat.messages[chat.messages.length - 1];
+    setMessageId(lastMessageWithResult?.id);
+  }, [messageId]);
   return (
     <div className="relative flex overflow-hidden space-x-4 size-full">
       <div

components/chat/ChatList.tsx

@@ -12,8 +12,6 @@ import { cn } from '@/lib/utils';
 import { IconArrowDown } from '../ui/Icons';
 import { dbPostCreateMessage } from '@/lib/db/functions';
 import { Card } from '../ui/Card';
-import { useSetAtom } from 'jotai';
-import { selectedMessageId } from '@/state/chat';
 
 export interface ChatListProps {
   chat: ChatWithMessages;
@@ -24,25 +22,18 @@ export const SCROLL_BOTTOM = 120;
 
 const ChatList: React.FC<ChatListProps> = ({ chat, userId }) => {
   const { id, messages: dbMessages, userId: chatUserId } = chat;
-  const { append, isLoading, data } = useVisionAgent(chat);
+  const { isLoading, data } = useVisionAgent(chat);
 
   // Only login and chat owner can compose
   const canCompose = !chatUserId || userId === chatUserId;
 
-  const lastDbMessage = dbMessages[dbMessages.length - 1];
-  const setMessageId = useSetAtom(selectedMessageId);
-
   const { messagesRef, scrollRef, visibilityRef, isVisible, scrollToBottom } =
     useScrollAnchor(SCROLL_BOTTOM);
 
-  // Scroll to bottom on init and highlight last message
+  // Scroll to bottom on init
   useEffect(() => {
     scrollToBottom();
-    if (lastDbMessage.result) {
-      setMessageId(lastDbMessage.id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [scrollToBottom]);
 
   return (
     <Card
@@ -57,7 +48,9 @@ const ChatList: React.FC<ChatListProps> = ({ chat, userId }) => {
               key={message.id}
               message={message}
               loading={isLastMessage && isLoading}
-              wipAssistantMessage={data}
+              wipAssistantMessage={
+                isLastMessage && data.length > 0 ? data : undefined
+              }
             />
           );
         })}
@@ -78,8 +71,7 @@ const ChatList: React.FC<ChatListProps> = ({ chat, userId }) => {
                 prompt: input,
                 mediaUrl: newMediaUrl,
               };
-              const resp = await dbPostCreateMessage(id, messageInput);
-              append(resp);
+              await dbPostCreateMessage(id, messageInput);
             }}
           />
         </div>

components/ui/Img.tsx

@@ -21,12 +21,15 @@ const Img = React.forwardRef<
   const isVideo =
     typeof src === 'string' ? src.toLowerCase().endsWith('.mp4') : false;
 
+  const srcString = isVideo
+    ? (src as string).replace('.mp4', '.png').replace('.MP4', '.png')
+    : (src as string);
   return (
     <Image
       src={
-        isVideo
-          ? (src as string).replace('.mp4', '.png').replace('.MP4', '.png')
-          : src
+        srcString.includes('vision-agent-dev.s3')
+          ? encodeURI(srcString)
+          : srcString
       }
       placeholder={placeholder}
       width={dimensions.width}

lib/hooks/useVisionAgent.ts

@@ -3,22 +3,26 @@ import { toast } from 'react-hot-toast';
 import { useEffect, useRef } from 'react';
 import { ChatWithMessages } from '../types';
 import { convertDBMessageToAPIMessage } from '../utils/message';
+import { useRouter } from 'next/navigation';
+import { Message } from '@prisma/client';
 import { useSetAtom } from 'jotai';
 import { selectedMessageId } from '@/state/chat';
-import { Message } from '@prisma/client';
-import { useRouter } from 'next/navigation';
 
 const useVisionAgent = (chat: ChatWithMessages) => {
   const { messages: dbMessages, id, mediaUrl } = chat;
   const latestDbMessage = dbMessages[dbMessages.length - 1];
-  const setMessageId = useSetAtom(selectedMessageId);
 
   // Temporary solution for now while single we have to pass mediaUrl separately outside of the messages
-  const currMediaUrl = useRef<string>(mediaUrl);
-  const currMessageId = useRef<string>(latestDbMessage?.id);
   const router = useRouter();
+  const setMessageId = useSetAtom(selectedMessageId);
 
-  const { append, isLoading, data, reload } = useChat({
+  const {
+    data = [],
+    reload,
+    append,
+    messages,
+    isLoading,
+  } = useChat({
     api: '/api/vision-agent',
     onResponse(response) {
       if (response.status !== 200) {
@@ -26,48 +30,62 @@ const useVisionAgent = (chat: ChatWithMessages) => {
       }
     },
     onFinish: () => {
+      setMessageId(latestDbMessage.id);
       router.refresh();
-      setMessageId(currMessageId.current);
     },
     body: {
-      mediaUrl: currMediaUrl.current,
+      mediaUrl: latestDbMessage.mediaUrl,
       chatId: id,
-      messageId: currMessageId.current,
+      messageId: latestDbMessage.id,
       // for some reason, the messages has to be stringified to be sent to the API
       apiMessages: JSON.stringify(convertDBMessageToAPIMessage(dbMessages)),
     },
     onError: err => {
       err && toast.error(err.message);
     },
-    initialMessages: convertDBMessageToAPIMessage(dbMessages),
   });
 
   /**
    * If case this is first time user navigated with init message, we need to reload the chat for the first response
    */
   const once = useRef(true);
+
   useEffect(() => {
+    const appendDbMessage = async (latestDbMessage: Message) => {
+      await append({
+        id: latestDbMessage.id + '-user',
+        content: latestDbMessage.prompt,
+        role: 'user',
+      });
+    };
+    if (isLoading || latestDbMessage.response || latestDbMessage.responseBody) {
+      return;
+    }
+    if (messages.length === 0) {
+      if (once.current) {
+        once.current = false;
+        appendDbMessage(latestDbMessage);
+      }
+      return;
+    }
     if (
-      !isLoading &&
-      !(latestDbMessage.response || latestDbMessage.responseBody) &&
-      once.current
+      messages.findIndex(message => message.id.includes(latestDbMessage.id)) ===
+      -1
     ) {
-      once.current = false;
-      reload();
+      appendDbMessage(latestDbMessage);
     }
-  }, [isLoading, latestDbMessage.result, reload]);
+  }, [latestDbMessage, messages, isLoading]);
+
+  const initDataIndex = data.findIndex(
+    (m: any) =>
+      m.type === 'init' && m.payload?.messageId === latestDbMessage.id,
+  );
 
   return {
-    append: (message: Message) => {
-      currMediaUrl.current = message.mediaUrl;
-      currMessageId.current = message.id;
-      append({
-        id,
-        role: 'user',
-        content: message.prompt,
-      });
-    },
-    data: data as unknown as PrismaJson.MessageBody[],
+    data:
+      initDataIndex >= 0
+        ? (data.slice(initDataIndex + 1) as unknown as PrismaJson.MessageBody[])
+        : [],
     reload,
     isLoading,
   };