feat: parse new msg format (#57)

log the data from vision agent, and set the message in client side to
have more flexibilities.



https://github.com/landing-ai/vision-agent-ui/assets/132986242/bd899636-2b36-49dc-abd1-287125d54f43


https://github.com/landing-ai/vision-agent-ui/assets/132986242/89c7474b-ce49-44a7-b1fc-fb53e1599408

app/api/vision-agent/route.ts

@@ -10,46 +10,6 @@ import { cleanAnswerMessage, cleanInputMessage } from '@/lib/messageUtils';
 export const dynamic = 'force-dynamic';
 export const maxDuration = 300; // This function can run for a maximum of 5 minutes
 
-const parseLine = (line: string) => {
-  try {
-    const json = JSON.parse(line);
-    let message = (json.log ?? '') + '\n';
-    if (json.task || json.plan || json.reflection) {
-      const arr = json.plan
-        ? json.plan
-        : json.task
-          ? [json.task]
-          : [json.reflection];
-      const keys = Object.keys(arr[0]);
-      message += '\n';
-      message += '| ' + keys.join(' | ') + ' |' + '\n';
-      message += new Array(keys.length + 1).fill('|').join(' :- ') + '\n';
-      arr.forEach((obj: any) => {
-        message += '| ' + keys.map(key => obj[key]).join(' | ') + ' |' + '\n';
-      });
-      message += '\n';
-    }
-    if (json.tools) {
-      message += '\n';
-      message += '| ' + 'Descriptions' + ' |' + '\n';
-      message += '| ' + ':-' + ' |' + '\n';
-      json.tools.forEach((tool: string) => {
-        message += '| ' + tool + ' |' + '\n';
-      });
-      message += '\n';
-    }
-    if (json.code) {
-      message += `\`\`\`python\n${json.code}\n\`\`\`\n`;
-    }
-    if (json.result) {
-      message += `\`\`\`\n${json.result}\n\`\`\`\n`;
-    }
-    return { message };
-  } catch (e) {
-    return { error: e };
-  }
-};
-
 export const POST = withLogging(
   async (
     session,
@@ -117,7 +77,7 @@ export const POST = withLogging(
                 const { done, value } = await reader.read();
                 if (!done) {
                   const errorText = new TextDecoder().decode(value);
-                  logger.error(session, errorText, request);
+                  logger.error(session, { message: errorText }, request);
                   controller.error(new Error(`Response error: ${errorText}`));
                 }
               } catch (e) {
@@ -135,7 +95,7 @@ export const POST = withLogging(
             start(controller) {
               logger.error(
                 session,
-                'Response error: No response body',
+                { message: 'Response error: No response body' },
                 request,
               );
               controller.error(new Error('Response error: No response body'));
@@ -152,39 +112,24 @@ export const POST = withLogging(
       const encoder = new TextEncoder();
       const decoder = new TextDecoder('utf-8');
       let buffer = '';
+      let maxChunkSize = 0;
       const stream = fetchResponse.body.pipeThrough(
         new TransformStream({
+          flush: () => {
+            logger.info(
+              session,
+              {
+                message: 'Streaming finished',
+                maxChunkSize,
+              },
+              request,
+              '__AGENT_DONE',
+            );
+          },
           transform: async (chunk, controller) => {
             const data = decoder.decode(chunk, { stream: true });
-            buffer += data;
-            let lines = buffer.split('\n');
-            buffer = lines.pop() ?? ''; // Save the last incomplete line back to the buffer
-            for (let line of lines) {
-              if (!line.trim()) {
-                continue;
-              }
-              if (line.trim()) {
-                const { message, error } = parseLine(line.trim());
-                if (message) {
-                  controller.enqueue(encoder.encode(message));
-                } else if (error) {
-                  logger.error(
-                    session,
-                    { message: (error as Error).message, data },
-                    request,
-                  );
-                  controller.error(error);
-                  controller.terminate();
-                }
-              }
-            }
-            if (buffer.trim()) {
-              const { message } = parseLine(buffer.trim());
-              if (message) {
-                buffer = '';
-                controller.enqueue(encoder.encode(message));
-              }
-            }
+            maxChunkSize = Math.max(data.length, maxChunkSize);
+            controller.enqueue(encoder.encode(data));
           },
         }),
       );

components/chat/ChatMessage.tsx

@@ -3,8 +3,9 @@
 
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
+import rehypeRaw from 'rehype-raw';
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { CodeBlock } from '@/components/ui/CodeBlock';
 import { MemoizedReactMarkdown } from '@/components/chat/MemoizedReactMarkdown';
@@ -18,12 +19,144 @@ import {
 import Img from '../ui/Img';
 import { getCleanedUpMessages } from '@/lib/messageUtils';
 import Loading from '../ui/Loading';
+import {
+  Table,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/Table';
+import { Button } from '../ui/Button';
+import { Dialog, DialogContent } from '../ui/Dialog';
 
 export interface ChatMessageProps {
   message: MessageBase;
   isLoading: boolean;
 }
 
+const Markdown: React.FC<{
+  content: string;
+  setDetails?: (val: string) => void;
+}> = ({ content, setDetails }) => {
+  return (
+    <>
+      <MemoizedReactMarkdown
+        className="break-words overflow-auto"
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeRaw] as any}
+        components={{
+          table({ children, ...props }) {
+            return <Table {...props}>{children}</Table>;
+          },
+          thead({ children, ...props }) {
+            return <TableHeader {...props}>{children}</TableHeader>;
+          },
+          th({ children, ...props }) {
+            return <TableHead {...props}>{children}</TableHead>;
+          },
+          tr({ children, ...props }) {
+            return <TableRow {...props}>{children}</TableRow>;
+          },
+          td({ children, ...props }) {
+            return <TableCell {...props}>{children}</TableCell>;
+          },
+          button({ children, ...props }) {
+            if ('data-details' in props && setDetails) {
+              return (
+                <Button
+                  {...props}
+                  onClick={() =>
+                    setDetails(decodeURI(props['data-details'] as string))
+                  }
+                >
+                  {children}
+                </Button>
+              );
+            }
+            return <Button {...props}>{children}</Button>;
+          },
+          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) {
+            if (props.src?.endsWith('.mp4')) {
+              return (
+                <video src={props.src} controls width={500} height={500} />
+              );
+            }
+            return (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Img
+                    src={props.src ?? '/landing.png'}
+                    alt={props.alt ?? 'answer-image'}
+                    quality={100}
+                    className="cursor-zoom-in"
+                    sizes="(min-width: 66em) 25vw,
+            (min-width: 44em) 40vw,
+            100vw"
+                  />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <Img
+                    className="m-2"
+                    src={props.src ?? '/landing.png'}
+                    alt={props.alt ?? 'answer-image'}
+                    quality={100}
+                    width={500}
+                  />
+                </TooltipContent>
+              </Tooltip>
+            );
+          },
+          code({ node, inline, className, children, ...props }) {
+            // if (children.length) {
+            //   if (children[0] == '▍') {
+            //     return (
+            //       <span className="mt-1 cursor-default animate-pulse">▍</span>
+            //     );
+            //   }
+
+            //   children[0] = (children[0] as string).replace('`▍`', '▍');
+            // }
+
+            const match = /language-(\w+)/.exec(className || '');
+            // if (inline) {
+            //   return (
+            //     <code className={className} {...props}>
+            //       {children}
+            //     </code>
+            //   );
+            // }
+
+            return (
+              <CodeBlock
+                key={Math.random()}
+                language={(match && match[1]) || ''}
+                value={String(children).replace(/\n$/, '')}
+                {...props}
+              />
+            );
+          },
+        }}
+      >
+        {content}
+      </MemoizedReactMarkdown>
+    </>
+  );
+};
+
 export function ChatMessage({
   message,
   isLoading,
@@ -35,6 +168,7 @@ export function ChatMessage({
       role: message.role,
     });
   }, [message.content, message.role]);
+  const [details, setDetails] = useState<string>('');
   return (
     <div className={cn('group relative mb-4 flex items-start')} {...props}>
       <div
@@ -48,98 +182,15 @@ export function ChatMessage({
         {message.role === 'user' ? <IconUser /> : <IconOpenAI />}
       </div>
       <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
-        {logs && (
-          <MemoizedReactMarkdown
-            className="break-words"
-            remarkPlugins={[remarkGfm, remarkMath]}
-            components={{
-              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) {
-                if (props.src?.endsWith('.mp4')) {
-                  return (
-                    <video src={props.src} controls width={500} height={500} />
-                  );
-                }
-                return (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Img
-                        src={props.src ?? '/landing.png'}
-                        alt={props.alt ?? 'answer-image'}
-                        quality={100}
-                        className="cursor-zoom-in"
-                        sizes="(min-width: 66em) 25vw,
-                      (min-width: 44em) 40vw,
-                      100vw"
-                      />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <Img
-                        className="m-2"
-                        src={props.src ?? '/landing.png'}
-                        alt={props.alt ?? 'answer-image'}
-                        quality={100}
-                        width={500}
-                      />
-                    </TooltipContent>
-                  </Tooltip>
-                );
-              },
-              code({ node, inline, className, children, ...props }) {
-                // if (children.length) {
-                //   if (children[0] == '▍') {
-                //     return (
-                //       <span className="mt-1 cursor-default animate-pulse">▍</span>
-                //     );
-                //   }
-
-                //   children[0] = (children[0] as string).replace('`▍`', '▍');
-                // }
-
-                const match = /language-(\w+)/.exec(className || '');
-                // if (inline) {
-                //   return (
-                //     <code className={className} {...props}>
-                //       {children}
-                //     </code>
-                //   );
-                // }
-
-                return (
-                  <CodeBlock
-                    key={Math.random()}
-                    language={(match && match[1]) || ''}
-                    value={String(children).replace(/\n$/, '')}
-                    {...props}
-                  />
-                );
-              },
-            }}
-          >
-            {logs}
-          </MemoizedReactMarkdown>
-        )}
+        {logs && <Markdown content={logs} setDetails={setDetails} />}
         {/* <ChatMessageActions message={message} /> */}
         {isLoading && <Loading />}
       </div>
+      <Dialog open={!!details} onOpenChange={open => !open && setDetails('')}>
+        <DialogContent className="w-11/12">
+          <Markdown content={details} />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

components/ui/Dialog.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-3xl max-h-[85vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

components/ui/Table.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

lib/messageUtils.ts

@@ -38,10 +38,250 @@ export const cleanAnswerMessage = (content: string) => {
   return content.replace(/!\[answers.*?\.png\)/g, '');
 };
 
+const generateJSONArrayMarkdown = (
+  message: string,
+  payload: Array<Record<string, string | boolean>>,
+) => {
+  if (payload.length === 0) return '';
+  const keys = Object.keys(payload[0]);
+  message += '\n';
+  message += '| ' + keys.join(' | ') + ' |' + '\n';
+  message += new Array(keys.length + 1).fill('|').join(' :- ') + '\n';
+  payload.forEach((obj: any) => {
+    message +=
+      '| ' +
+      keys
+        .map(key => {
+          if (key === 'documentation') {
+            const doc = `\`\`\`\n${obj[key]}\n\`\`\`\n`;
+            return `<button data-details=${JSON.stringify(encodeURI(doc))}>Show</button>`;
+          } else {
+            return obj[key];
+          }
+        })
+        .join(' | ') +
+      ' |' +
+      '\n';
+  });
+  message += '\n';
+  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: {
+    code: string;
+    test: string;
+    result?: string;
+  },
+) => {
+  let Details = 'Code: \n';
+  Details += `\`\`\`python\n${payload.code}\n\`\`\`\n`;
+  Details += 'Test: \n';
+  Details += `\`\`\`python\n${payload.test}\n\`\`\`\n`;
+  if (payload.result) {
+    Details += 'Execution result: \n';
+    Details += `\`\`\`python\n${payload.result}\n\`\`\`\n`;
+  }
+  message += `<button data-details=${JSON.stringify(encodeURI(Details))}>View details</button> \n`;
+
+  return message;
+};
+
+const generateFinalCodeMarkdown = (
+  message: string,
+  payload: {
+    code: string;
+    test: string;
+    result: string;
+  },
+) => {
+  message += 'Final Code: \n';
+  message += `\`\`\`python\n${payload.code}\n\`\`\`\n`;
+  message += 'Final test: \n';
+  message += `\`\`\`python\n${payload.test}\n\`\`\`\n`;
+  message += `Final result: \n`;
+  message += `\`\`\`\n${payload.result}\n\`\`\`\n`;
+  return message;
+};
+
+const generateFinalResultMarkdown = (
+  message: string,
+  payload: {
+    success: boolean;
+    reach_max_retries: boolean;
+  },
+) => {
+  if (payload.reach_max_retries) {
+    message += 'Reach max debug retries!\n';
+  } else if (payload.success) {
+    message += 'Success!';
+  }
+  message += '\n';
+  return message;
+};
+
+type PlansBody =
+  | {
+      type: 'plans';
+      status: 'started';
+    }
+  | {
+      type: 'plans';
+      status: 'completed';
+      payload: Array<Record<string, string>>;
+    };
+
+type ToolsBody =
+  | {
+      type: 'tools';
+      status: 'started';
+    }
+  | {
+      type: 'tools';
+      status: 'completed';
+      payload: Array<Record<string, string>>;
+    };
+
+type CodeBody =
+  | {
+      type: 'code';
+      status: 'started';
+    }
+  | {
+      type: 'code';
+      status: 'running';
+      payload: {
+        code: string;
+        test: string;
+      };
+    }
+  | {
+      type: 'code';
+      status: 'completed' | 'failed';
+      payload: {
+        code: string;
+        test: string;
+        result: string;
+      };
+    };
+
+type FinalCodeBody = {
+  type: 'final_code';
+  status: 'completed' | 'failed';
+  payload: {
+    code: string;
+    test: string;
+    result: string;
+  };
+};
+
+// this will return if self_reflection flag is true
+type ReflectionBody =
+  | {
+      type: 'self_reflection';
+      status: 'started';
+    }
+  | {
+      type: 'self_reflection';
+      status: 'completed' | 'failed';
+      payload: { feedback: string; success: boolean };
+    };
+
+type MessageBody =
+  | PlansBody
+  | ToolsBody
+  | CodeBody
+  | ReflectionBody
+  | FinalCodeBody;
+
+const getMessageTitle = (json: MessageBody) => {
+  switch (json.type) {
+    case 'plans':
+      if (json.status === 'started') {
+        return '🎬 Start generating plans...\n';
+      } else {
+        return '✅ Going to run the following plan(s) in sequence:\n';
+      }
+    case 'tools':
+      if (json.status === 'started') {
+        return '🎬 Start retrieving tools...\n';
+      } else {
+        return '✅ Tools retrieved:\n';
+      }
+    case 'code':
+      if (json.status === 'started') {
+        return '🎬 Start generating code...\n';
+      } else if (json.status === 'running') {
+        return '🎬 Code generated, start execution... ';
+      } else if (json.status === 'completed') {
+        return '✅ Code executed successfully. ';
+      } else {
+        return '❌ Code execution failed. ';
+      }
+    case 'self_reflection':
+      if (json.status === 'started') {
+        return '🎬 Start self reflection...\n';
+      } else if (json.status === 'completed') {
+        return '✅ Self reflection completed: \n';
+      } else {
+        return '❌ Self reflection failed: \n';
+      }
+    case 'final_code':
+      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';
+      }
+    default:
+      throw 'Not supported type';
+  }
+};
+const parseLine = (json: MessageBody) => {
+  const title = getMessageTitle(json);
+  if (json.status === 'started') {
+    return title;
+  }
+  switch (json.type) {
+    case 'plans':
+      return generateJSONArrayMarkdown(title, json.payload);
+    case 'tools':
+      return generateJSONArrayMarkdown(title, json.payload);
+    case 'code':
+      return generateCodeExecutionMarkdown(title, json.payload);
+    case 'self_reflection':
+      return generateJSONArrayMarkdown(title, [json.payload]);
+    case 'final_code':
+      return generateFinalCodeMarkdown(title, json.payload);
+    default:
+      throw 'Not supported type';
+  }
+};
+
 export const getCleanedUpMessages = ({
   content,
   role,
 }: Pick<MessageBase, 'role' | 'content'>) => {
+  if (role === 'user') {
+    return {
+      logs: content,
+    };
+  }
   if (content.split(CLEANED_SEPARATOR).length === 2) {
     return {
       logs: content.split(CLEANED_SEPARATOR)[0],
@@ -49,39 +289,30 @@ export const getCleanedUpMessages = ({
     };
   }
   const [logs = '', answer = ''] = content.split('<ANSWER>');
-  // console.log(logs);
-  // const cleanedLogs = [];
-  // let left = 0;
-  // let right = 0;
-  // while (right < logs.length) {
-  //   if (Object.keys(PAIRS).includes(content[right])) {
-  //     cleanedLogs.push(content.substring(left, right));
-  //     left = right++;
-  //     while (
-  //       right < content.length &&
-  //       PAIRS[content[left]] !== content[right]
-  //     ) {
-  //       right++;
-  //     }
-  //     if (content[left] === MIDDLE_STARTER) {
-  //       // add the text alignment so it can be shown as a table
-  //       const separators = logs
-  //         .substring(left, right)
-  //         .split(MIDDLE_SEPARATOR).length;
-  //       if (separators > 0) {
-  //         cleanedLogs.push(
-  //           Array(separators + 1)
-  //             .fill('|')
-  //             .join(' :- '),
-  //         );
-  //       }
-  //     }
-  //     left = ++right;
-  //   } else {
-  //     right++;
-  //   }
-  // }
-  // cleanedLogs.push(content.substring(left, right));
+  const lines = logs.split('\n');
+  let formattedLogs = '';
+  const jsons: MessageBody[] = [];
+  for (let line of lines) {
+    if (!line.trim()) {
+      continue;
+    }
+    try {
+      const json = JSON.parse(line) as MessageBody;
+      if (
+        jsons.length > 0 &&
+        json.type === jsons[jsons.length - 1].type &&
+        json.status !== 'started'
+      ) {
+        jsons[jsons.length - 1] = json;
+      } else {
+        jsons.push(json);
+      }
+    } catch (e) {
+      console.error((e as Error).message);
+      console.error(line);
+    }
+  }
+  jsons.forEach(json => (formattedLogs += parseLine(json)));
   const [answerText, imagesStr = ''] = answer.split('<VIZ>');
   const [imagesArrayStr, ...rest] = imagesStr.split('</VIZ>');
   const images = imagesArrayStr
@@ -89,7 +320,7 @@ export const getCleanedUpMessages = ({
     .map(str => str.replace('<IMG>', ''))
     .slice(0, -1);
   return {
-    logs: logs,
+    logs: formattedLogs,
     content:
       answerText.replace('</</ANSWER>', '').replace('</ANSWER>', '') +
       '\n\n' +

package.json

@@ -18,6 +18,7 @@
     "@aws-sdk/credential-providers": "^3.556.0",
     "@aws-sdk/s3-presigned-post": "^3.556.0",
     "@prisma/client": "5.14.0",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-separator": "^1.0.3",
@@ -54,6 +55,7 @@
     "react-textarea-autosize": "^8.5.3",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "sharp": "^0.33.3",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@prisma/client':
         specifier: 5.14.0
         version: 5.14.0(prisma@5.14.0)
+      '@radix-ui/react-dialog':
+        specifier: ^1.0.5
+        version: 1.0.5(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.6
         version: 2.0.6(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -128,6 +131,9 @@ importers:
       react-window:
         specifier: ^1.8.10
         version: 1.8.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      rehype-raw:
+        specifier: ^7.0.0
+        version: 7.0.0
       remark-gfm:
         specifier: ^3.0.1
         version: 3.0.1
@@ -773,6 +779,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.0.5':
+    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-direction@1.0.1':
     resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
     peerDependencies:
@@ -1277,6 +1296,9 @@ packages:
   '@types/hast@2.3.10':
     resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/http-cache-semantics@4.0.4':
     resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
 
@@ -1292,6 +1314,9 @@ packages:
   '@types/mdast@3.0.15':
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/ms@0.7.34':
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
 
@@ -1325,6 +1350,9 @@ packages:
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
+  '@types/unist@3.0.2':
+    resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
+
   '@types/uuid@9.0.8':
     resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
 
@@ -1784,6 +1812,9 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -2221,18 +2252,36 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-from-parse5@8.0.1:
+    resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
+
   hast-util-parse-selector@2.2.5:
     resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
 
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-raw@9.0.3:
+    resolution: {integrity: sha512-ICWvVOF2fq4+7CMmtCPD5CM4QKjPbHpPotE6+8tDooV0ZuyJVUzHsrNX+O5NaRbieTf0F7FfeBOMAwi6Td0+yQ==}
+
+  hast-util-to-parse5@8.0.0:
+    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
+
   hast-util-whitespace@2.0.1:
     resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
 
   hastscript@6.0.0:
     resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
 
+  hastscript@8.0.0:
+    resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
+
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   http-cache-semantics@4.1.1:
     resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
 
@@ -2585,6 +2634,9 @@ packages:
   mdast-util-to-hast@12.3.0:
     resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==}
 
+  mdast-util-to-hast@13.1.0:
+    resolution: {integrity: sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==}
+
   mdast-util-to-markdown@1.5.0:
     resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
 
@@ -2646,6 +2698,9 @@ packages:
   micromark-util-character@1.2.0:
     resolution: {integrity: sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==}
 
+  micromark-util-character@2.1.0:
+    resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
+
   micromark-util-chunked@1.1.0:
     resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
 
@@ -2664,6 +2719,9 @@ packages:
   micromark-util-encode@1.1.0:
     resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
 
+  micromark-util-encode@2.0.0:
+    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
+
   micromark-util-html-tag-name@1.2.0:
     resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
 
@@ -2676,15 +2734,24 @@ packages:
   micromark-util-sanitize-uri@1.2.0:
     resolution: {integrity: sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==}
 
+  micromark-util-sanitize-uri@2.0.0:
+    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
+
   micromark-util-subtokenize@1.1.0:
     resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
 
   micromark-util-symbol@1.1.0:
     resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
 
+  micromark-util-symbol@2.0.0:
+    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
+
   micromark-util-types@1.1.0:
     resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
 
+  micromark-util-types@2.0.0:
+    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
+
   micromark@3.2.0:
     resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
 
@@ -2899,6 +2966,9 @@ packages:
   parse-entities@2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
 
+  parse5@7.1.2:
+    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -3199,6 +3269,9 @@ packages:
     resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
     engines: {node: '>= 0.4'}
 
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
   remark-gfm@3.0.1:
     resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
 
@@ -3562,18 +3635,33 @@ packages:
   unist-util-is@5.2.1:
     resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
 
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
   unist-util-position@4.0.4:
     resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==}
 
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
   unist-util-stringify-position@3.0.3:
     resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
 
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
   unist-util-visit-parents@5.1.3:
     resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
 
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
   unist-util-visit@4.1.2:
     resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
 
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
   update-browserslist-db@1.0.13:
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -3643,12 +3731,21 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  vfile-location@5.0.2:
+    resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==}
+
   vfile-message@3.1.4:
     resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
 
+  vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+
   vfile@5.3.7:
     resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
 
+  vfile@6.0.1:
+    resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
+
   vue@3.4.23:
     resolution: {integrity: sha512-X1y6yyGJ28LMUBJ0k/qIeKHstGd+BlWQEOT40x3auJFTmpIhpbKLgN7EFsqalnJXq1Km5ybDEsp6BhuWKciUDg==}
     peerDependencies:
@@ -3657,6 +3754,9 @@ packages:
       typescript:
         optional: true
 
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
   web-streams-polyfill@3.3.3:
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
@@ -4644,6 +4744,29 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.79
 
+  '@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      aria-hidden: 1.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.79)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.79
+      '@types/react-dom': 18.2.25
+
   '@radix-ui/react-direction@1.0.1(@types/react@18.2.79)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
@@ -5284,6 +5407,10 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.10
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 2.0.10
+
   '@types/http-cache-semantics@4.0.4': {}
 
   '@types/json5@0.0.29': {}
@@ -5298,6 +5425,10 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.10
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.2
+
   '@types/ms@0.7.34': {}
 
   '@types/node-fetch@2.6.11':
@@ -5338,6 +5469,8 @@ snapshots:
 
   '@types/unist@2.0.10': {}
 
+  '@types/unist@3.0.2': {}
+
   '@types/uuid@9.0.8': {}
 
   '@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5)':
@@ -5841,6 +5974,10 @@ snapshots:
 
   detect-node-es@1.1.0: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   didyoumean@1.2.2: {}
 
   diff@5.2.0: {}
@@ -6434,8 +6571,49 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-from-parse5@8.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.2
+      devlop: 1.1.0
+      hastscript: 8.0.0
+      property-information: 6.5.0
+      vfile: 6.0.1
+      vfile-location: 5.0.2
+      web-namespaces: 2.0.1
+
   hast-util-parse-selector@2.2.5: {}
 
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-raw@9.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.2
+      '@ungap/structured-clone': 1.2.0
+      hast-util-from-parse5: 8.0.1
+      hast-util-to-parse5: 8.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.1.0
+      parse5: 7.1.2
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-parse5@8.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
   hast-util-whitespace@2.0.1: {}
 
   hastscript@6.0.0:
@@ -6446,8 +6624,18 @@ snapshots:
       property-information: 5.6.0
       space-separated-tokens: 1.1.5
 
+  hastscript@8.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+
   highlight.js@10.7.3: {}
 
+  html-void-elements@3.0.0: {}
+
   http-cache-semantics@4.1.1: {}
 
   http2-wrapper@1.0.3:
@@ -6824,6 +7012,18 @@ snapshots:
       unist-util-position: 4.0.4
       unist-util-visit: 4.1.2
 
+  mdast-util-to-hast@13.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.2.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.0
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+
   mdast-util-to-markdown@1.5.0:
     dependencies:
       '@types/mdast': 3.0.15
@@ -6969,6 +7169,11 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
+  micromark-util-character@2.1.0:
+    dependencies:
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+
   micromark-util-chunked@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
@@ -6997,6 +7202,8 @@ snapshots:
 
   micromark-util-encode@1.1.0: {}
 
+  micromark-util-encode@2.0.0: {}
+
   micromark-util-html-tag-name@1.2.0: {}
 
   micromark-util-normalize-identifier@1.1.0:
@@ -7013,6 +7220,12 @@ snapshots:
       micromark-util-encode: 1.1.0
       micromark-util-symbol: 1.1.0
 
+  micromark-util-sanitize-uri@2.0.0:
+    dependencies:
+      micromark-util-character: 2.1.0
+      micromark-util-encode: 2.0.0
+      micromark-util-symbol: 2.0.0
+
   micromark-util-subtokenize@1.1.0:
     dependencies:
       micromark-util-chunked: 1.1.0
@@ -7022,8 +7235,12 @@ snapshots:
 
   micromark-util-symbol@1.1.0: {}
 
+  micromark-util-symbol@2.0.0: {}
+
   micromark-util-types@1.1.0: {}
 
+  micromark-util-types@2.0.0: {}
+
   micromark@3.2.0:
     dependencies:
       '@types/debug': 4.1.12
@@ -7247,6 +7464,10 @@ snapshots:
       is-decimal: 1.0.4
       is-hexadecimal: 1.0.4
 
+  parse5@7.1.2:
+    dependencies:
+      entities: 4.5.0
+
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
@@ -7562,6 +7783,12 @@ snapshots:
       es-errors: 1.3.0
       set-function-name: 2.0.2
 
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-raw: 9.0.3
+      vfile: 6.0.1
+
   remark-gfm@3.0.1:
     dependencies:
       '@types/mdast': 3.0.15
@@ -8023,25 +8250,48 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.10
 
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.2
+
   unist-util-position@4.0.4:
     dependencies:
       '@types/unist': 2.0.10
 
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.2
+
   unist-util-stringify-position@3.0.3:
     dependencies:
       '@types/unist': 2.0.10
 
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.2
+
   unist-util-visit-parents@5.1.3:
     dependencies:
       '@types/unist': 2.0.10
       unist-util-is: 5.2.1
 
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-is: 6.0.0
+
   unist-util-visit@4.1.2:
     dependencies:
       '@types/unist': 2.0.10
       unist-util-is: 5.2.1
       unist-util-visit-parents: 5.1.3
 
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
   update-browserslist-db@1.0.13(browserslist@4.23.0):
     dependencies:
       browserslist: 4.23.0
@@ -8099,11 +8349,21 @@ snapshots:
       kleur: 4.1.5
       sade: 1.8.1
 
+  vfile-location@5.0.2:
+    dependencies:
+      '@types/unist': 3.0.2
+      vfile: 6.0.1
+
   vfile-message@3.1.4:
     dependencies:
       '@types/unist': 2.0.10
       unist-util-stringify-position: 3.0.3
 
+  vfile-message@4.0.2:
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-stringify-position: 4.0.0
+
   vfile@5.3.7:
     dependencies:
       '@types/unist': 2.0.10
@@ -8111,6 +8371,12 @@ snapshots:
       unist-util-stringify-position: 3.0.3
       vfile-message: 3.1.4
 
+  vfile@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+
   vue@3.4.23(typescript@5.4.5):
     dependencies:
       '@vue/compiler-dom': 3.4.23
@@ -8121,6 +8387,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.4.5
 
+  web-namespaces@2.0.1: {}
+
   web-streams-polyfill@3.3.3: {}
 
   web-streams-polyfill@4.0.0-beta.3: {}