feat: adjust image to use next/image (#20)

Ignore the image size from the video, it was using the unoptimized
property which renders the origin image


https://github.com/landing-ai/vision-agent-ui/assets/132986242/e90977b6-4ced-4ee7-bf02-df599e506631

<img width="970" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/531e5d7e-dca1-4f74-ad2c-8e60cdf1b178">

<img width="903" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/49456cf1-efc2-4383-a12b-7cd156caa660">

components/chat-sidebar/ChatCard.tsx

@@ -44,7 +44,7 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
       classNames={chatIdFromParam === id && 'border-gray-500'}
     >
       <div className="overflow-hidden flex items-center size-full">
-        <Img src={url} className="w-1/4 " />
+        <Img src={url} alt={`chat-${id}-card-image`} className="w-1/4 " />
         <div className="flex items-start h-full">
           <p className="text-sm w-3/4 ml-3">{title}</p>
         </div>

components/chat/ChatList.tsx

@@ -10,7 +10,7 @@ export interface ChatList {
 
 export function ChatList({ messages }: ChatList) {
   return (
-    <div className="relative mx-auto max-w-5xl px-8 pr-12">
+    <div className="relative mx-auto max-w-5xl px-8 pr-12 pb-[100px]">
       {messages
         // .filter(message => message.role !== 'system')
         .map((message, index) => (

components/chat/ChatMessage.tsx

@@ -11,6 +11,7 @@ import { IconOpenAI, IconUser } from '@/components/ui/Icons';
 import { ChatMessageActions } from '@/components/chat/ChatMessageActions';
 import { MessageBase } from '../../lib/types';
 import { useCleanedUpMessages } from '@/lib/hooks/useCleanedUpMessages';
+import Img from '../ui/Img';
 
 export interface ChatMessageProps {
   message: MessageBase;
@@ -60,11 +61,32 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
           className="break-words"
           remarkPlugins={[remarkGfm, remarkMath]}
           components={{
-            p({ children }) {
+            p({ children, ...props }) {
+              if (
+                props.node.children.some(
+                  child => child.type === 'element' && child.tagName === 'img',
+                )
+              ) {
+                return (
+                  <p className="flex flex-wrap gap-2 items-start">{children}</p>
+                );
+              }
               return (
                 <p className="my-2 last:mb-0 whitespace-pre-line">{children}</p>
               );
             },
+            img(props) {
+              return (
+                <Img
+                  src={props.src ?? '/landing.png'}
+                  alt={props.alt ?? 'answer-image'}
+                  quality={100}
+                  sizes="(min-width: 66em) 40vw,
+                      (min-width: 44em) 66vw,
+                      100vw"
+                />
+              );
+            },
             code({ node, inline, className, children, ...props }) {
               if (children.length) {
                 if (children[0] == '▍') {

components/chat/PromptForm.tsx

@@ -60,10 +60,14 @@ export function PromptForm({
         {url && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <Img src={url} className="w-1/5 my-4 mx-2 cursor-zoom-in" />
+              <Img
+                alt="prompt-image"
+                src={url}
+                className="w-1/5 my-4 mx-2 cursor-zoom-in"
+              />
             </TooltipTrigger>
             <TooltipContent>
-              <Img src={url} className="m-2" />
+              <Img alt="prompt-hovered-image" src={url} className="m-2" />
             </TooltipContent>
           </Tooltip>
         )}

components/ui/Img.tsx

@@ -10,8 +10,8 @@ const placeholder =
 // const Props = Omit<React.ComponentPropsWithoutRef<typeof Image>, 'alt'>;
 const Img = React.forwardRef<
   React.ElementRef<typeof Image>,
-  Omit<React.ComponentPropsWithoutRef<typeof Image>, 'alt'>
->(({ src, onLoad, width, height, className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof Image>
+>(({ src, alt, onLoad, width, height, className, ...props }, ref) => {
   const [dimensions, setDimensions] = React.useState({
     width: width ?? 200,
     height: height ?? 200,
@@ -24,7 +24,7 @@ const Img = React.forwardRef<
       placeholder={placeholder}
       width={dimensions.width}
       height={dimensions.height}
-      alt="image"
+      alt={alt ?? 'image'}
       ref={ref}
       className={cn('rounded-md', className)}
       onLoad={e => {

lib/hooks/useCleanedUpMessages.ts

@@ -62,11 +62,18 @@ export const getCleanedUpMessages = ({
   }
   cleanedLogs.push(content.substring(left, right));
   const [answerText, imagesStr = ''] = answer.split('<VIZ>');
-  const images = imagesStr.split('</IMG>').map(str => str.replace('<IMG>', ''));
+  const [imagesArrayStr, ...rest] = imagesStr.split('</VIZ>');
+  const images = imagesArrayStr
+    .split('</IMG>')
+    .map(str => str.replace('<IMG>', ''))
+    .slice(0, -1);
   return {
     logs: cleanedLogs.join('').replace(/│/g, '|').split('|\n\n|').join('|\n|'),
-    content: answerText.replace('</</ANSWER>', '').replace('</ANSWER>', ''),
-    images: images.slice(0, -1),
+    content:
+      answerText.replace('</</ANSWER>', '').replace('</ANSWER>', '') +
+      images.map((_, index) => `![answers-${index}](/loading.gif)`).join('') +
+      rest.join(''),
+    images: images,
   };
 };
 

lib/hooks/useVisionAgent.tsx

@@ -72,17 +72,18 @@ const useVisionAgent = (chat: ChatEntity) => {
             uploadBase64(image, message.id, id, index),
           ),
         );
+        const newContent = publicUrls.reduce((accum, url, index) => {
+          return accum.replace(
+            `![answers-${index}](/loading.gif)`,
+            `![answers-${index}](${url})`,
+          );
+        }, content);
         const newMessage = {
           ...message,
-          content:
-            logs +
-            CLEANED_SEPARATOR +
-            content +
-            '\n' +
-            publicUrls
-              .map((url, index) => `![image-${index}](${url})`)
-              .join('\n'),
+          content: logs + CLEANED_SEPARATOR + newContent,
         };
+        console.log(messages);
+        setMessages([...messages, newMessage]);
         saveKVChatMessage(id, newMessage);
       } else {
         saveKVChatMessage(id, {