feat: Assistant Chat (#68)


app/chat/page.tsx

@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+export interface PageProps {}
+
+export default async function Page({}: PageProps) {
+  redirect('/');
+}

app/globals.css

@@ -75,35 +75,6 @@
   }
 }
 
-table {
-  border-spacing: 0;
-  border-collapse: collapse;
-  display: block;
-  margin-top: 0;
-  margin-bottom: 16px;
-  width: max-content;
-  max-width: 100%;
-  overflow: auto;
-}
-
-tr {
-  border-top: 1px solid #21262d;
-}
-
-td,
-th {
-  padding: 6px 13px;
-  border: 1px solid #21262d;
-}
-
-th {
-  font-weight: 600;
-}
-
-table img {
-  background-color: transparent;
-}
-
 h1 {
   font-size: 3.75rem; /* 48px */
   font-family: var(--font-geist-sans);

components/chat/ChatClient.tsx

@@ -38,7 +38,7 @@ const ChatClient: React.FC<ChatClientProps> = ({ chat }) => {
       className="h-full overflow-auto mx-auto w-[1024px] max-w-full border rounded-lg relative"
       ref={scrollRef}
     >
-      <div className="overflow-auto h-full pt-6 px-6" ref={messagesRef}>
+      <div className="overflow-auto h-full pt-6 px-6 z-10" ref={messagesRef}>
         {messages
           // .filter(message => message.role !== 'system')
           .map((message, index) => (

components/chat/ChatMessage.tsx

@@ -9,25 +9,39 @@ import { useMemo, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { CodeBlock } from '@/components/ui/CodeBlock';
 import { MemoizedReactMarkdown } from '@/components/chat/MemoizedReactMarkdown';
-import { IconLandingAI, IconUser } from '@/components/ui/Icons';
-import type { ChatMessage } from '@/lib/db/types';
+import {
+  IconCheckCircle,
+  IconChevronDoubleRight,
+  IconCodeWrap,
+  IconCrossCircle,
+  IconLandingAI,
+  IconListUnordered,
+  IconTerminalWindow,
+  IconUser,
+} from '@/components/ui/Icons';
+import { MessageBase } from '../../lib/types';
 import Img from '../ui/Img';
-import { getFormattedMessage } from '@/lib/messageUtils';
-import Loading from '../ui/Loading';
+import { ChunkBody, CodeResult, formatStreamLogs } from '@/lib/messageUtils';
 import {
   Table,
+  TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
 } from '../ui/Table';
 import { Button } from '../ui/Button';
-import { Dialog, DialogContent } from '../ui/Dialog';
-import { Message } from 'ai';
-import { MessageRole } from '@prisma/client';
+import { Separator } from '../ui/Separator';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+
+import { Dialog, DialogContent, DialogTrigger } from '../ui/Dialog';
 
 export interface ChatMessageProps {
-  message: Message;
+  message: MessageBase;
   isLoading: boolean;
 }
 
@@ -82,9 +96,7 @@ const Markdown: React.FC<{
                 <p className="flex flex-wrap gap-2 items-start">{children}</p>
               );
             }
-            return (
-              <p className="mb-2 last:mb-0 whitespace-pre-line">{children}</p>
-            );
+            return <p className="mb-2 whitespace-pre-line">{children}</p>;
           },
           img(props) {
             if (props.src?.endsWith('.mp4')) {
@@ -104,24 +116,7 @@ const Markdown: React.FC<{
             );
           },
           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
@@ -141,39 +136,161 @@ const Markdown: React.FC<{
 };
 
 export function ChatMessage({ message, isLoading }: ChatMessageProps) {
-  const { content } = useMemo(() => {
-    return getFormattedMessage({
-      content: message.content,
-      role: message.role as MessageRole,
-    });
-  }, [message.content, message.role]);
-  const [details, setDetails] = useState<string>('');
+  const { role, content } = message;
+
+  return role === 'user' ? (
+    <UserChatMessage content={content} />
+  ) : (
+    <AssistantChatMessage content={content} />
+  );
+}
+
+const UserChatMessage: React.FC<{
+  content: string;
+}> = ({ content }) => {
   return (
-    <div
-      className={cn(
-        'group relative mb-6 flex rounded-md bg-muted p-4',
-        message.role === 'user' ? 'ml-auto mr-0 w-3/5' : 'w-4/5',
-      )}
-    >
-      <div
-        className={cn(
-          'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
-          message.role === 'user'
-            ? 'bg-background'
-            : 'bg-primary text-primary-foreground',
-        )}
-      >
-        {message.role === 'user' ? <IconUser /> : <IconLandingAI />}
+    <div className="group relative mb-6 flex rounded-md bg-muted p-4 ml-auto mr-0 w-3/5">
+      <div className="flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow bg-background">
+        <IconUser />
       </div>
       <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
-        {content && <Markdown content={content} setDetails={setDetails} />}
-        {isLoading && <Loading />}
+        {content && <Markdown content={content} />}
       </div>
-      <Dialog open={!!details} onOpenChange={open => !open && setDetails('')}>
-        <DialogContent className="w-11/12">
-          <Markdown content={details} />
+    </div>
+  );
+};
+
+const ChunkStatusToIconDict: Record<ChunkBody['status'], React.ReactElement> = {
+  started: <IconChevronDoubleRight className="text-cyan-500" />,
+  completed: <IconCheckCircle className="text-green-500" />,
+  running: <IconTerminalWindow className="text-teal-500" />,
+  failed: <IconCrossCircle className="text-red-500" />,
+};
+const ChunkTypeToTextDict: Record<ChunkBody['type'], string> = {
+  plans: 'Creating instructions',
+  tools: 'Retrieving tools',
+  code: 'Generating code',
+  final_code: 'Final result',
+};
+const ChunkPayloadAction: React.FC<{
+  payload: ChunkBody['payload'];
+}> = ({ payload }) => {
+  if (Array.isArray(payload)) {
+    // [{title: 123, content, 345}, {title: ..., content: ...}] => ['title', 'content']
+    const keyArray = Array.from(
+      payload.reduce((acc, curr) => {
+        Object.keys(curr).forEach(key => acc.add(key));
+        return acc;
+      }, new Set<string>()),
+    );
+
+    return (
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <IconListUnordered />
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-5xl">
+          <Table className="border rounded-lg bg-zinc-700 overflow-hidden">
+            <TableHeader>
+              <TableRow className="border-primary/50">
+                {keyArray.map(header => (
+                  <TableHead key={header}>{header}</TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {payload.map((line, index) => (
+                <TableRow className="border-primary/50" key={index}>
+                  {keyArray.map(header => (
+                    <TableCell key={header}>{line[header]}</TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
         </DialogContent>
       </Dialog>
+    );
+  } else {
+    return (
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <IconCodeWrap />
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-5xl">
+          <CodeResultDisplay codeResult={payload as CodeResult} />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+};
+
+const CodeResultDisplay: React.FC<{
+  codeResult: CodeResult;
+}> = ({ codeResult }) => {
+  const { code, test, result } = codeResult;
+  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>
+      <CodeBlock language="output" value={result} />
     </div>
   );
-}
+};
+
+const AssistantChatMessage: React.FC<{
+  content: string;
+}> = ({ content }) => {
+  const [formattedSections, codeResult] = useMemo(
+    () => formatStreamLogs(content),
+    [content],
+  );
+
+  return (
+    <div className="group relative mb-6 flex rounded-md bg-muted p-4 w-full">
+      <div className="flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow bg-primary text-primary-foreground">
+        <IconLandingAI />
+      </div>
+      <div className="flex-1 px-1 space-y-4 ml-4 overflow-hidden">
+        <Table className="border rounded-lg bg-zinc-700 overflow-hidden w-[400px]">
+          <TableBody>
+            {formattedSections.map(section => (
+              <TableRow className="border-primary/50" key={section.type}>
+                <TableCell>{ChunkStatusToIconDict[section.status]}</TableCell>
+                <TableCell className="font-medium">
+                  {ChunkTypeToTextDict[section.type]}
+                </TableCell>
+                <TableCell className="text-right">
+                  <ChunkPayloadAction payload={section.payload} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {codeResult && <CodeResultDisplay codeResult={codeResult} />}
+      </div>
+    </div>
+  );
+};
+
+export default UserChatMessage;

components/chat/Composer.tsx

@@ -75,7 +75,7 @@ const Composer = forwardRef<ComposerRef, ComposerProps>(
       <div
         {...getRootProps()}
         className={cn(
-          'w-full mx-auto max-w-2xl px-6 py-4 bg-zinc-600 rounded-xl relative shadow-lg shadow-zinc-600/40',
+          'w-full mx-auto max-w-2xl px-6 py-4 bg-zinc-600 rounded-xl relative shadow-lg shadow-zinc-600/40 z-50',
           isDragActive && 'bg-indigo-700/50',
         )}
       >

components/ui/CodeBlock.tsx

@@ -92,7 +92,7 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
     copyToClipboard(value);
   };
   return (
-    <div className="relative w-full font-sans codeblock bg-zinc-950 rounded-lg overflow-hidden">
+    <div className="relative w-full codeblock bg-zinc-900 overflow-hidden">
       <div className="flex items-center justify-between w-full pl-8 pr-4 pt-2 text-zinc-100">
         <span className="text-xs lowercase">{language}</span>
         <div className="flex items-center space-x-1">

components/ui/Dialog.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
+import { Cross2Icon } from '@radix-ui/react-icons';
 
 import { cn } from '@/lib/utils';
 
@@ -38,14 +38,14 @@ const DialogContent = React.forwardRef<
     <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',
+        'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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" />
+        <Cross2Icon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
@@ -112,8 +112,8 @@ export {
   Dialog,
   DialogPortal,
   DialogOverlay,
-  DialogClose,
   DialogTrigger,
+  DialogClose,
   DialogContent,
   DialogHeader,
   DialogFooter,

components/ui/Icons.tsx

@@ -198,6 +198,46 @@ function IconArrowRight({ className, ...props }: React.ComponentProps<'svg'>) {
   );
 }
 
+function IconCheckCircle({ 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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM11.5303 6.53033L12.0607 6L11 4.93934L10.4697 5.46967L6.5 9.43934L5.53033 8.46967L5 7.93934L3.93934 9L4.46967 9.53033L5.96967 11.0303C6.26256 11.3232 6.73744 11.3232 7.03033 11.0303L11.5303 6.53033Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
+
+function IconCrossCircle({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      height="16"
+      stroke-linejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM5.5 11.5607L6.03033 11.0303L8 9.06066L9.96967 11.0303L10.5 11.5607L11.5607 10.5L11.0303 9.96967L9.06066 8L11.0303 6.03033L11.5607 5.5L10.5 4.43934L9.96967 4.96967L8 6.93934L6.03033 4.96967L5.5 4.43934L4.43934 5.5L4.96967 6.03033L6.93934 8L4.96967 9.96967L4.43934 10.5L5.5 11.5607Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
+
 function IconUser({ className, ...props }: React.ComponentProps<'svg'>) {
   return (
     <svg
@@ -577,6 +617,117 @@ function IconImage({ className, ...props }: React.ComponentProps<'svg'>) {
   );
 }
 
+function IconChevronRight({
+  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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.50001 1.93933L6.03034 2.46966L10.8536 7.29288C11.2441 7.68341 11.2441 8.31657 10.8536 8.7071L6.03034 13.5303L5.50001 14.0607L4.43935 13L4.96968 12.4697L9.43935 7.99999L4.96968 3.53032L4.43935 2.99999L5.50001 1.93933Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
+
+function IconChevronDoubleRight({
+  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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.8536 8.7071C13.2441 8.31657 13.2441 7.68341 12.8536 7.29288L9.03034 3.46966L8.50001 2.93933L7.43935 3.99999L7.96968 4.53032L11.4393 7.99999L7.96968 11.4697L7.43935 12L8.50001 13.0607L9.03034 12.5303L12.8536 8.7071ZM7.85356 8.7071C8.24408 8.31657 8.24408 7.68341 7.85356 7.29288L4.03034 3.46966L3.50001 2.93933L2.43935 3.99999L2.96968 4.53032L6.43935 7.99999L2.96968 11.4697L2.43935 12L3.50001 13.0607L4.03034 12.5303L7.85356 8.7071Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
+
+function IconTerminalWindow({
+  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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 2.5H14.5V12.5C14.5 13.0523 14.0523 13.5 13.5 13.5H2.5C1.94772 13.5 1.5 13.0523 1.5 12.5V2.5ZM0 1H1.5H14.5H16V2.5V12.5C16 13.8807 14.8807 15 13.5 15H2.5C1.11929 15 0 13.8807 0 12.5V2.5V1ZM4 11.1339L4.44194 10.6919L6.51516 8.61872C6.85687 8.27701 6.85687 7.72299 6.51517 7.38128L4.44194 5.30806L4 4.86612L3.11612 5.75L3.55806 6.19194L5.36612 8L3.55806 9.80806L3.11612 10.25L4 11.1339ZM8 9.75494H8.6225H11.75H12.3725V10.9999H11.75H8.6225H8V9.75494Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
+
+function IconCodeWrap({ 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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.22763 14.1819L10.2276 2.18193L10.4095 1.45432L8.95432 1.09052L8.77242 1.81812L5.77242 13.8181L5.59051 14.5457L7.04573 14.9095L7.22763 14.1819ZM3.75002 12.0607L3.21969 11.5304L0.39647 8.70713C0.00594559 8.31661 0.00594559 7.68344 0.39647 7.29292L3.21969 4.46969L3.75002 3.93936L4.81068 5.00002L4.28035 5.53035L1.81068 8.00003L4.28035 10.4697L4.81068 11L3.75002 12.0607ZM12.25 12.0607L12.7804 11.5304L15.6036 8.70713C15.9941 8.31661 15.9941 7.68344 15.6036 7.29292L12.7804 4.46969L12.25 3.93936L11.1894 5.00002L11.7197 5.53035L14.1894 8.00003L11.7197 10.4697L11.1894 11L12.25 12.0607Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
+
+function IconListUnordered({
+  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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 4C3.19036 4 3.75 3.44036 3.75 2.75C3.75 2.05964 3.19036 1.5 2.5 1.5C1.80964 1.5 1.25 2.05964 1.25 2.75C1.25 3.44036 1.80964 4 2.5 4ZM2.5 9.25C3.19036 9.25 3.75 8.69036 3.75 8C3.75 7.30964 3.19036 6.75 2.5 6.75C1.80964 6.75 1.25 7.30964 1.25 8C1.25 8.69036 1.80964 9.25 2.5 9.25ZM3.75 13.25C3.75 13.9404 3.19036 14.5 2.5 14.5C1.80964 14.5 1.25 13.9404 1.25 13.25C1.25 12.5596 1.80964 12 2.5 12C3.19036 12 3.75 12.5596 3.75 13.25ZM6.75 2H6V3.5H6.75H14.25H15V2H14.25H6.75ZM6.75 7.25H6V8.75H6.75H14.25H15V7.25H14.25H6.75ZM6.75 12.5H6V14H6.75H14.25H15V12.5H14.25H6.75Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
 export {
   IconEdit,
   IconLandingAI,
@@ -610,4 +761,11 @@ export {
   IconDiscord,
   IconExclamationTriangle,
   IconImage,
+  IconCheckCircle,
+  IconCrossCircle,
+  IconChevronRight,
+  IconChevronDoubleRight,
+  IconTerminalWindow,
+  IconCodeWrap,
+  IconListUnordered,
 };

lib/hooks/useVisionAgent.ts

@@ -1,7 +1,6 @@
 import { useChat, UseChatHelpers } from 'ai/react';
 import { toast } from 'react-hot-toast';
-import { useEffect } from 'react';
-import { useSearchParams } from 'next/navigation';
+import { useEffect, useRef } from 'react';
 import { ChatWithMessages } from '../db/types';
 import { dbPostCreateMessage } from '../db/functions';
 import {
@@ -42,8 +41,15 @@ const useVisionAgent = (chat: ChatWithMessages) => {
   /**
    * If case this is first time user navigated with init message, we need to reload the chat for the first response
    */
+  const once = useRef(true);
   useEffect(() => {
-    if (!isLoading && messages.length === 1 && messages[0].role === 'user') {
+    if (
+      !isLoading &&
+      messages.length === 1 &&
+      messages[0].role === 'user' &&
+      once.current
+    ) {
+      once.current = false;
       reload();
     }
   }, [isLoading, messages, reload]);

lib/messageUtils.ts

@@ -1,3 +1,4 @@
+import toast from 'react-hot-toast';
 import type { ChatMessage } from '@/lib/db/types';
 import { Message } from 'ai';
 
@@ -325,3 +326,51 @@ export const convertMessageToDbMessage = (
     result,
   };
 };
+
+export type CodeResult = {
+  code: string;
+  test: string;
+  result: string;
+};
+
+export type ChunkBody = {
+  type: 'plans' | 'tools' | 'code' | 'final_code';
+  status: 'started' | 'completed' | 'failed' | 'running';
+  payload: Array<Record<string, string>> | CodeResult;
+};
+
+/**
+ * Formats the stream logs and returns an array of grouped sections.
+ *
+ * @param content - The content of the stream logs.
+ * @returns An array of grouped sections and an optional final code result.
+ */
+export const formatStreamLogs = (
+  content: string,
+): [ChunkBody[], CodeResult?] => {
+  const streamLogs = content.split('\n').filter(log => !!log);
+
+  let parsedStreamLogs: ChunkBody[] = [];
+  try {
+    parsedStreamLogs = streamLogs.map(streamLog => JSON.parse(streamLog));
+  } catch {
+    toast.error('Error parsing stream logs');
+    return [[], undefined];
+  }
+
+  // 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) {
+      acc[acc.length - 1] = curr;
+    } else {
+      acc.push(curr);
+    }
+    return acc;
+  }, [] as ChunkBody[]);
+
+  return [
+    groupedSections.filter(section => section.type !== 'final_code'),
+    groupedSections.find(section => section.type === 'final_code')
+      ?.payload as CodeResult,
+  ];
+};