feat: only send answer when resending messages (#25)

https://app.asana.com/0/1204554785675703/1207171219059373/f

<img width="1242" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/1dd8f47c-fcac-4c35-ae30-1fed61e0edef">

app/api/vision-agent/route.ts

@@ -2,6 +2,7 @@ import { StreamingTextResponse } from 'ai';
 
 // import { auth } from '@/auth';
 import { MessageBase } from '../../../lib/types';
+import { CLEANED_SEPARATOR } from '@/lib/constants';
 
 // export const runtime = 'edge';
 export const dynamic = 'force-dynamic';
@@ -23,9 +24,26 @@ export async function POST(req: Request) {
   // }
 
   const formData = new FormData();
-  formData.append('input', JSON.stringify(messages));
+  formData.append(
+    'input',
+    JSON.stringify(
+      messages.map(message => {
+        if (message.role !== 'assistant') {
+          return message;
+        } else {
+          const splitedContent = message.content.split(CLEANED_SEPARATOR);
+          return {
+            ...message,
+            content:
+              splitedContent.length > 1
+                ? splitedContent[1].replace(/!\[answers.*?\.png\)/g, '')
+                : message.content,
+          };
+        }
+      }),
+    ),
+  );
   formData.append('image', url);
-
   const fetchResponse = await fetch(
     'https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&visualize_output=true',
     // 'http://localhost:5050/v1/agent/chat?agent_class=vision_agent',

lib/constants.ts

@@ -0,0 +1 @@
+export const CLEANED_SEPARATOR = '|CLEANED|';

lib/hooks/useCleanedUpMessages.ts

@@ -1,6 +1,6 @@
-import { useMemo, useEffect } from 'react';
-import { MessageBase, SignedPayload } from '../types';
-import { fetcher } from '../utils';
+import { useMemo } from 'react';
+import { MessageBase } from '../types';
+import { CLEANED_SEPARATOR } from '../constants';
 
 const PAIRS: Record<string, string> = {
   '┍': '┑',
@@ -11,7 +11,6 @@ const PAIRS: Record<string, string> = {
 
 const MIDDLE_STARTER = '┝';
 const MIDDLE_SEPARATOR = '┿';
-export const CLEANED_SEPARATOR = '|CLEANED|';
 
 export const getCleanedUpMessages = ({
   content,

lib/hooks/useVisionAgent.tsx

@@ -4,10 +4,8 @@ import { useEffect, useState } from 'react';
 import { ChatEntity, MessageBase, SignedPayload } from '../types';
 import { saveKVChatMessage } from '../kv/chat';
 import { fetcher } from '../utils';
-import {
-  getCleanedUpMessages,
-  CLEANED_SEPARATOR,
-} from './useCleanedUpMessages';
+import { getCleanedUpMessages } from './useCleanedUpMessages';
+import { CLEANED_SEPARATOR } from '../constants';
 
 const uploadBase64 = async (
   base64: string,
@@ -15,7 +13,9 @@ const uploadBase64 = async (
   chatId: string,
   index: number,
 ) => {
-  const res = await fetch('data:image/png;base64,' + base64);
+  const res = await fetch(
+    'data:image/png;base64,' + base64.replace('base:64', ''),
+  );
   const blob = await res.blob();
   const { signedUrl, publicUrl, fields } = await fetcher<SignedPayload>(
     '/api/sign',