feat: save raw message to db (#63)

<img width="1268" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/83c315e2-2fe5-401f-a046-3292882bb05b">

components/chat/ChatMessage.tsx

@@ -11,11 +11,6 @@ import { CodeBlock } from '@/components/ui/CodeBlock';
 import { MemoizedReactMarkdown } from '@/components/chat/MemoizedReactMarkdown';
 import { IconLandingAI, IconUser } from '@/components/ui/Icons';
 import { MessageBase } from '../../lib/types';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/Tooltip';
 import Img from '../ui/Img';
 import { getCleanedUpMessages } from '@/lib/messageUtils';
 import Loading from '../ui/Loading';
@@ -143,14 +138,16 @@ const Markdown: React.FC<{
   );
 };
 
-export function ChatMessage({ message, isLoading }: ChatMessageProps) {
-  const { logs, content } = useMemo(() => {
+export function ChatMessage({
+  message,
+  isLoading,
+}: ChatMessageProps) {
+  const { content } = useMemo(() => {
     return getCleanedUpMessages({
       content: message.content,
       role: message.role,
     });
   }, [message.content, message.role]);
-  console.log('[Ming] logs:', logs);
   console.log('[Ming] content:', content);
   console.log('[Ming] raw:', message.content);
   const [details, setDetails] = useState<string>('');
@@ -172,7 +169,7 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
         {message.role === 'user' ? <IconUser /> : <IconLandingAI />}
       </div>
       <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
-        {logs && <Markdown content={logs} setDetails={setDetails} />}
+        {content && <Markdown content={content} setDetails={setDetails} />}
         {isLoading && <Loading />}
       </div>
       <Dialog open={!!details} onOpenChange={open => !open && setDetails('')}>

lib/hooks/useVisionAgent.ts

@@ -74,52 +74,10 @@ const useVisionAgent = (chat: ChatWithMessages) => {
       }
     },
     onFinish: async message => {
-      const { logs = '', content, images } = getCleanedUpMessages(message);
-      if (images?.length) {
-        const publicUrls = await Promise.all(
-          images.map((image, index) =>
-            uploadBase64(image, message.id, id ?? 'no-id', index),
-          ),
-        );
-        const newContent = publicUrls.reduce((accum, url, index) => {
-          return accum.replace(
-            generateAnswersImageMarkdown(index, '/loading.gif'),
-            generateAnswersImageMarkdown(index, url),
-          );
-        }, content);
-        const newMessage = {
-          ...message,
-          content: logs + CLEANED_SEPARATOR + newContent,
-        };
-        setMessages([
-          ...messages,
-          /**
-           * A workaround to fix the issue of the messages been stale state when appending a new message
-           * https://github.com/vercel/ai/issues/550#issuecomment-1712693371
-           */
-          ...(input
-            ? [
-                {
-                  id: nanoid(),
-                  role: 'user',
-                  content:
-                    input + '\n\n' + generateInputImageMarkdown(mediaUrl),
-                  createdAt: new Date(),
-                } satisfies Message,
-              ]
-            : []),
-          newMessage,
-        ]);
-        await dbPostCreateMessage(id, {
-          role: newMessage.role as 'user' | 'assistant',
-          content: newMessage.content,
-        });
-      } else {
-        await dbPostCreateMessage(id, {
-          role: message.role as 'user' | 'assistant',
-          content: logs + CLEANED_SEPARATOR + content,
-        });
-      }
+      await dbPostCreateMessage(id, {
+        role: message.role as 'user' | 'assistant',
+        content: message.content,
+      });
     },
     initialMessages: initialMessages,
     body: {

lib/messageUtils.ts

@@ -67,21 +67,6 @@ const generateJSONArrayMarkdown = (
   return message;
 };
 
-const generateStringArrayMarkdown = (
-  message: string,
-  header: string,
-  payload: Array<string>,
-) => {
-  message += '\n';
-  message += '| ' + header + ' |' + '\n';
-  message += '| ' + ':-' + ' |' + '\n';
-  payload.forEach((tool: string) => {
-    message += '| ' + tool + ' |' + '\n';
-  });
-  message += '\n';
-  return message;
-};
-
 const generateCodeExecutionMarkdown = (
   message: string,
   payload: {
@@ -105,11 +90,7 @@ const generateCodeExecutionMarkdown = (
 
 const generateFinalCodeMarkdown = (
   message: string,
-  payload: {
-    code: string;
-    test: string;
-    result: string;
-  },
+  payload: FinalCodeBody['payload'],
 ) => {
   message += 'Final Code: \n';
   message += `\`\`\`python\n${payload.code}\n\`\`\`\n`;
@@ -187,7 +168,17 @@ type FinalCodeBody = {
   payload: {
     code: string;
     test: string;
-    result: string;
+    result: {
+      logs: {
+        stderr: string[];
+        stdout: string[];
+      };
+      results: Array<{
+        png: string;
+        text: string;
+        is_main_result: boolean;
+      }>;
+    };
   };
 };
 
@@ -246,7 +237,7 @@ const getMessageTitle = (json: MessageBody) => {
       if (json.status === 'completed') {
         return '✅ The vision agent has concluded the chat, the last execution is successful. \n';
       } else {
-        return '❌ he vision agent has concluded the chat, the last execution is failed. \n';
+        return '❌ The vision agent has concluded the chat, the last execution is failed. \n';
       }
     default:
       throw 'Not supported type';
@@ -279,17 +270,10 @@ export const getCleanedUpMessages = ({
 }: Pick<MessageBase, 'role' | 'content'>) => {
   if (role === 'user') {
     return {
-      logs: content,
-    };
-  }
-  if (content.split(CLEANED_SEPARATOR).length === 2) {
-    return {
-      logs: content.split(CLEANED_SEPARATOR)[0],
-      content: content.split(CLEANED_SEPARATOR)[1],
+      content,
     };
   }
-  const [logs = '', answer = ''] = content.split('<ANSWER>');
-  const lines = logs.split('\n');
+  const lines = content.split('\n');
   let formattedLogs = '';
   const jsons: MessageBody[] = [];
   for (let line of lines) {
@@ -313,21 +297,7 @@ export const getCleanedUpMessages = ({
     }
   }
   jsons.forEach(json => (formattedLogs += parseLine(json)));
-  const [answerText, imagesStr = ''] = answer.split('<VIZ>');
-  const [imagesArrayStr, ...rest] = imagesStr.split('</VIZ>');
-  const images = imagesArrayStr
-    .split('</IMG>')
-    .map(str => str.replace('<IMG>', ''))
-    .slice(0, -1);
   return {
-    logs: formattedLogs,
-    content:
-      answerText.replace('</</ANSWER>', '').replace('</ANSWER>', '') +
-      '\n\n' +
-      images
-        .map((_, index) => generateAnswersImageMarkdown(index, '/loading.gif'))
-        .join('') +
-      rest.join(''),
-    images: images,
+    content: formattedLogs,
   };
 };

next.config.js

@@ -10,6 +10,11 @@ module.exports = {
       },
     ],
   },
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '10mb',
+    },
+  },
   experimental: {
     serverComponentsExternalPackages: ['pino', 'pino-loki'],
   },