Custom-formatter

frontend/app/api/projects/[projectId]/queues/[queueId]/move/route.ts

@@ -60,14 +60,14 @@ export async function POST(
       .limit(1);
 
     if (nextItem.length === 0 || stats.length === 0) {
-      return Response.json(null);
+      return Response.json([]);
     }
 
-    return Response.json({
+    return Response.json([{
       ...nextItem[0],
       count: stats[0].count,
       position: stats[0].position
-    });
+    }]);
 
   } else if (direction === 'prev') {
     // return the previous item in the queue before the refDataId
@@ -106,14 +106,14 @@ export async function POST(
       .limit(1);
 
     if (prevItem.length === 0 || stats.length === 0) {
-      return Response.json(null);
+      return Response.json([]);
     }
 
-    return Response.json({
+    return Response.json([{
       ...prevItem[0],
       count: stats[0].count,
       position: stats[0].position
-    });
+    }]);
   }
 
   return Response.json({ error: 'Invalid direction' }, { status: 400 });

frontend/app/api/projects/[projectId]/render-templates/[templateId]/route.ts

@@ -0,0 +1,55 @@
+import { and, eq } from "drizzle-orm";
+import { NextResponse } from "next/server";
+
+import { db } from "@/lib/db/drizzle";
+import { renderTemplates } from "@/lib/db/migrations/schema";
+
+export async function GET(request: Request, { params }: { params: { projectId: string, templateId: string } }) {
+  const { projectId, templateId } = params;
+  const template = await db.query.renderTemplates.findFirst({
+    where: and(
+      eq(renderTemplates.id, templateId),
+      eq(renderTemplates.projectId, projectId)
+    )
+  });
+
+  if (!template) {
+    return NextResponse.json({ error: 'Template not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(template);
+}
+
+export async function POST(request: Request, { params }: { params: { projectId: string, templateId: string } }) {
+  const { projectId, templateId } = params;
+  const body = await request.json();
+
+  const template = await db.update(renderTemplates).set({
+    name: body.name,
+    code: body.code
+  })
+    .where(and(eq(renderTemplates.id, templateId), eq(renderTemplates.projectId, projectId)))
+    .returning();
+
+  if (!template.length) {
+    return NextResponse.json({ error: 'Template not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(template[0]);
+}
+
+export async function DELETE(request: Request, { params }: { params: { projectId: string, templateId: string } }) {
+  const { projectId, templateId } = params;
+  const template = await db.delete(renderTemplates)
+    .where(and(
+      eq(renderTemplates.id, templateId),
+      eq(renderTemplates.projectId, projectId)
+    ))
+    .returning();
+
+  if (!template) {
+    return NextResponse.json({ error: 'Template not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(template);
+}

frontend/app/api/projects/[projectId]/render-templates/route.ts

@@ -0,0 +1,40 @@
+import { eq } from 'drizzle-orm';
+import { NextResponse } from 'next/server';
+
+import { db } from '@/lib/db/drizzle';
+import { renderTemplates } from '@/lib/db/migrations/schema';
+
+export async function GET(
+  req: Request,
+  { params }: { params: { projectId: string } }
+): Promise<Response> {
+  const projectId = params.projectId;
+
+  const templates = await db.query.renderTemplates.findMany({
+    where: eq(renderTemplates.projectId, projectId),
+    columns: {
+      id: true,
+      name: true,
+    }
+  });
+
+  return NextResponse.json(templates);
+}
+
+
+export async function POST(req: Request, { params }: { params: { projectId: string } }) {
+  const projectId = params.projectId;
+  const body = await req.json();
+
+  const result = await db.insert(renderTemplates).values({
+    projectId,
+    name: body.name,
+    code: body.code
+  }).returning();
+
+  if (!result) {
+    return new Response('Failed to create template', { status: 500 });
+  }
+
+  return new Response(JSON.stringify(result[0]));
+}

frontend/components/queue/queue.tsx

@@ -18,6 +18,7 @@ import { Label } from '../ui/label';
 import MonoWithCopy from "../ui/mono-with-copy";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable";
 import { ScrollArea } from '../ui/scroll-area';
+import { Skeleton } from "../ui/skeleton";
 import { Switch } from '../ui/switch';
 import { Labels } from './labels';
 
@@ -34,7 +35,7 @@ export default function Queue({ queue }: QueueProps) {
     span: Span,
     count: number,
     position: number
-  } | null>(null);
+  }[] | null>(null);
 
   const [isRemoving, setIsRemoving] = useState(false);
   const [addedLabels, setAddedLabels] = useState<Array<{
@@ -53,6 +54,7 @@ export default function Queue({ queue }: QueueProps) {
       if (data.ok) {
         const json = await data.json();
         setData(json);
+        console.log(json);
       }
     });
   };
@@ -61,16 +63,16 @@ export default function Queue({ queue }: QueueProps) {
     setIsRemoving(true);
 
     // TODO: refactor when we have structured actions
-    let action = data?.queueData.action as { resultId: string, datasetId?: string };
+    let action = data?.[0]?.queueData.action as { resultId: string, datasetId?: string };
     if (datasetId) {
       action.datasetId = datasetId;
     }
 
     fetch(`/api/projects/${projectId}/queues/${queue.id}/remove`, {
       method: 'POST',
       body: JSON.stringify({
-        id: data?.queueData.id,
-        spanId: data?.span.spanId,
+        id: data?.[0]?.queueData.id,
+        spanId: data?.[0]?.span.spanId,
         action,
         addedLabels
       })
@@ -101,66 +103,78 @@ export default function Queue({ queue }: QueueProps) {
       <div className="flex-1 flex">
         <ResizablePanelGroup direction="horizontal">
           <ResizablePanel className="flex-1 flex" minSize={20} defaultSize={50}>
-            {data?.span ? (
+            {data?.[0]?.span && (
               <div className="flex h-full w-full">
                 <ScrollArea className="flex overflow-auto w-full mt-0">
                   <div className="flex flex-col max-h-0">
                     <div className="flex flex-col p-4 gap-4">
                       <div className="flex items-center space-x-2">
-                        <Label className="text-xs text-secondary-foreground font-mono">Span id</Label>
+                        <Label className="text-sm text-secondary-foreground font-mono">Span</Label>
                         <MonoWithCopy className="text-secondary-foreground">
-                          {data.span.spanId.replace(/^00000000-0000-0000-/g, '')}
+                          {data?.[0]?.span.spanId}
                         </MonoWithCopy>
                       </div>
                       <div className="w-full h-full">
                         <div className="pb-2 font-medium text-lg">Input</div>
-                        {isChatMessageList(data.span.input) ? (
-                          <ChatMessageListTab messages={data.span.input} />
+                        {isChatMessageList(data?.[0]?.span.input) ? (
+                          <ChatMessageListTab messages={data?.[0]?.span.input} />
                         ) : (
                           <Formatter
                             className="max-h-1/3"
                             collapsible
-                            value={JSON.stringify(data.span.input)}
+                            value={JSON.stringify(data?.[0]?.span.input)}
+                            presetKey={`input-${queue.id}`}
                           />
                         )}
                       </div>
                       <div className="w-full h-full">
                         <div className="pb-2 font-medium text-lg">Output</div>
                         <Formatter
                           className="max-h-[600px]"
-                          value={JSON.stringify(data.span.output)}
+                          value={JSON.stringify(data?.[0]?.span.output)}
                           collapsible
                         />
                       </div>
                     </div>
                   </div>
                 </ScrollArea>
               </div>
-            ) : (
-              <div className="h-full flex items-center justify-center text-secondary-foreground">
-                No items in queue
+            )}
+            {
+              data && data.length === 0 && (
+                <div className="h-full p-4 flex w-full flex-col gap-2">
+                  <span className="text-secondary-foreground">No items in queue.</span>
+                </div>
+              )
+            }
+            {!data && (
+              <div className="h-full p-4 flex w-full flex-col gap-2">
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
               </div>
             )}
+
           </ResizablePanel>
           <ResizableHandle withHandle className="z-50" />
           <ResizablePanel className="flex-1 flex" minSize={20} defaultSize={33}>
             <div className="w-full flex flex-col">
               <div className="flex-none p-4 py-2 border-b text-secondary-foreground flex justify-between items-center">
-                {data && <span>Item {data?.position} of {data?.count}</span>}
+                {data && <span>Item {data[0]?.position} of {data[0]?.count}</span>}
                 <div></div>
                 <div className="flex items-center space-x-2">
                   <Button
                     variant="outline"
-                    onClick={() => data?.queueData && next(data.queueData.createdAt, 'prev')}
-                    disabled={!data || data.position <= 1}
+                    onClick={() => data?.[0]?.queueData && next(data[0].queueData.createdAt, 'prev')}
+                    disabled={!data || data[0]?.position <= 1}
                   >
                     <ArrowDown size={16} className="mr-2" />
                     Prev
                   </Button>
                   <Button
                     variant="outline"
-                    onClick={() => data?.queueData && next(data.queueData.createdAt, 'next')}
-                    disabled={!data || data.position >= (data.count || 0)}
+                    onClick={() => data?.[0]?.queueData && next(data[0].queueData.createdAt, 'next')}
+                    disabled={!data || data[0]?.position >= (data[0]?.count || 0)}
                   >
                     <ArrowUp size={16} className="mr-2" />
                     Next
@@ -242,7 +256,7 @@ export default function Queue({ queue }: QueueProps) {
           <ResizableHandle withHandle className="z-50" />
           <ResizablePanel className="w-1/3 p-4 border-l" minSize={10} defaultSize={17}>
             <Labels
-              span={data?.span}
+              span={data?.[0]?.span}
               onAddLabel={(value, labelClass) => {
                 const isDuplicateClass = addedLabels.some(
                   label => label.labelClass.id === labelClass.id

frontend/components/traces/chat-message-list-tab.tsx

@@ -7,15 +7,17 @@ import PdfRenderer from '../ui/pdf-renderer';
 
 interface ContentPartTextProps {
   text: string;
+  presetKey?: string | null;
 }
 
-function ContentPartText({ text }: ContentPartTextProps) {
+function ContentPartText({ text, presetKey }: ContentPartTextProps) {
   return (
     <div className="w-full h-full">
       <Formatter
         collapsible
         value={text}
         className="rounded-none max-h-[50vh] border-none"
+        presetKey={presetKey}
       />
     </div>
   );
@@ -49,7 +51,6 @@ interface ContentPartsProps {
 }
 
 function ContentParts({ contentParts }: ContentPartsProps) {
-  console.log(contentParts);
   return (
     <div className="flex flex-col space-y-2">
       {contentParts.map((contentPart, index) => (
@@ -73,10 +74,12 @@ function ContentParts({ contentParts }: ContentPartsProps) {
 
 interface ChatMessageListTabProps {
   messages: ChatMessage[];
+  presetKey?: string | null;
 }
 
 export default function ChatMessageListTab({
-  messages
+  messages,
+  presetKey
 }: ChatMessageListTabProps) {
   return (
     <div className="w-full h-full flex flex-col space-y-4">
@@ -87,7 +90,10 @@ export default function ChatMessageListTab({
           </div>
           <div>
             {isStringType(message.content) ? (
-              <ContentPartText text={message.content} />
+              <ContentPartText
+                text={message.content}
+                presetKey={`${presetKey}-${index}`}
+              />
             ) : (
               <ContentParts contentParts={message.content} />
             )}