fix: parse stream log and add result display (#69)

<img width="896" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/4db20e09-adca-4c48-9452-35f6e1b8deca">

components/chat/ChatMessage.tsx

@@ -18,6 +18,8 @@ import {
   IconListUnordered,
   IconTerminalWindow,
   IconUser,
+  IconOutput,
+  IconLog,
 } from '@/components/ui/Icons';
 import { MessageBase } from '../../lib/types';
 import Img from '../ui/Img';
@@ -203,9 +205,28 @@ const ChunkPayloadAction: React.FC<{
             <TableBody>
               {payload.map((line, index) => (
                 <TableRow className="border-primary/50" key={index}>
-                  {keyArray.map(header => (
-                    <TableCell key={header}>{line[header]}</TableCell>
-                  ))}
+                  {keyArray.map(header =>
+                    header === 'documentation' ? (
+                      <TableCell key={header}>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="size-8 ml-[40%]"
+                            >
+                              <IconTerminalWindow className="text-teal-500 size-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <CodeBlock language="md" value={line[header]} />
+                          </TooltipContent>
+                        </Tooltip>
+                      </TableCell>
+                    ) : (
+                      <TableCell key={header}>{line[header]}</TableCell>
+                    ),
+                  )}
                 </TableRow>
               ))}
             </TableBody>
@@ -233,27 +254,65 @@ const CodeResultDisplay: React.FC<{
   codeResult: CodeResult;
 }> = ({ codeResult }) => {
   const { code, test, result } = codeResult;
+  const getDetail = () => {
+    if (!result) return {};
+    try {
+      const detail = JSON.parse(result);
+      return {
+        results: detail.results,
+        stderr: detail.logs.stderr,
+        stdout: detail.logs.stdout,
+      };
+    } catch {
+      return {};
+    }
+  };
+
+  const { results, stderr, stdout } = getDetail();
+
   return (
     <div className="rounded-lg overflow-hidden relative max-w-5xl">
       <CodeBlock language="python" value={code} />
       <div className="rounded-lg relative">
         <Separator />
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-8 absolute left-1/2 -translate-x-1/2 -top-4 z-10"
-            >
-              <IconTerminalWindow className="text-teal-500 size-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <CodeBlock language="python" value={test} />
-          </TooltipContent>
-        </Tooltip>
+        <div className="absolute left-1/2 -translate-x-1/2 -top-4 z-10">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8">
+                <IconTerminalWindow className="text-teal-500 size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <CodeBlock language="python" value={test} />
+            </TooltipContent>
+          </Tooltip>
+          {Array.isArray(stdout) && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-8">
+                  <IconOutput className="text-blue-500 size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <CodeBlock language="vim" value={stdout.join('').trim()} />
+              </TooltipContent>
+            </Tooltip>
+          )}
+          {Array.isArray(stderr) && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-8">
+                  <IconLog className="text-gray-500 size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <CodeBlock language="vim" value={stderr.join('').trim()} />
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
       </div>
-      <CodeBlock language="output" value={result} />
+      <CodeBlock language="output" value={results} />
     </div>
   );
 };

components/ui/CodeBlock.tsx

@@ -24,6 +24,7 @@ export const programmingLanguages: languageMap = {
   javascript: '.js',
   python: '.py',
   java: '.java',
+  vim: '.txt',
   c: '.c',
   cpp: '.cpp',
   'c++': '.cpp',

components/ui/Icons.tsx

@@ -728,6 +728,47 @@ function IconListUnordered({
     </svg>
   );
 }
+
+function IconLog({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3 2.5C3 2.22386 3.22386 2 3.5 2H9.08579C9.21839 2 9.34557 2.05268 9.43934 2.14645L11.8536 4.56066C11.9473 4.65443 12 4.78161 12 4.91421V12.5C12 12.7761 11.7761 13 11.5 13H3.5C3.22386 13 3 12.7761 3 12.5V2.5ZM3.5 1C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V4.91421C13 4.51639 12.842 4.13486 12.5607 3.85355L10.1464 1.43934C9.86514 1.15804 9.48361 1 9.08579 1H3.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5H7.5C7.77614 5 8 4.77614 8 4.5C8 4.22386 7.77614 4 7.5 4H4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H10.5C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10H4.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function IconOutput({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
 export {
   IconEdit,
   IconLandingAI,
@@ -768,4 +809,6 @@ export {
   IconTerminalWindow,
   IconCodeWrap,
   IconListUnordered,
+  IconLog,
+  IconOutput,
 };

lib/messageUtils.ts

@@ -350,14 +350,26 @@ export const formatStreamLogs = (
 ): [ChunkBody[], CodeResult?] => {
   const streamLogs = content.split('\n').filter(log => !!log);
 
-  let parsedStreamLogs: ChunkBody[] = [];
+  const buffer = streamLogs.pop();
+  const parsedStreamLogs: ChunkBody[] = [];
   try {
-    parsedStreamLogs = streamLogs.map(streamLog => JSON.parse(streamLog));
+    streamLogs.forEach(streamLog =>
+      parsedStreamLogs.push(JSON.parse(streamLog)),
+    );
   } catch {
     toast.error('Error parsing stream logs');
     return [[], undefined];
   }
 
+  if (buffer) {
+    try {
+      const lastLog = JSON.parse(buffer);
+      parsedStreamLogs.push(lastLog);
+    } catch {
+      console.log(buffer);
+    }
+  }
+
   // Merge consecutive logs of the same type to the latest status
   const groupedSections = parsedStreamLogs.reduce((acc, curr) => {
     if (acc.length > 0 && acc[acc.length - 1].type === curr.type) {