DSPy support (#144)

* Pagination bug

* Bug fix

* Bugfixes

* DSPy support

* Update README

README.md

@@ -131,6 +131,7 @@ Langtrace automatically captures traces from the following vendors:
 | Groq         | LLM             | :x:                | :white_check_mark: |
 | Langchain    | Framework       | :x:                | :white_check_mark: |
 | LlamaIndex   | Framework       | :white_check_mark: | :white_check_mark: |
+| DSPy         | Framework       | :x:                | :white_check_mark: |
 | Pinecone     | Vector Database | :white_check_mark: | :white_check_mark: |
 | ChromaDB     | Vector Database | :white_check_mark: | :white_check_mark: |
 | QDrant       | Vector Database | :x:                | :white_check_mark: |

components/project/traces/trace-row.tsx

@@ -6,7 +6,7 @@ import {
   convertTracesToHierarchy,
   correctTimestampFormat,
 } from "@/lib/trace_utils";
-import { calculatePriceFromUsage, formatDateTime } from "@/lib/utils";
+import { calculatePriceFromUsage, cn, formatDateTime } from "@/lib/utils";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useState } from "react";
 import { JsonView, allExpanded, defaultStyles } from "react-json-view-lite";
@@ -104,11 +104,10 @@ export const TraceRow = ({
   return (
     <div className="flex flex-col gap-3">
       <div
-        className={
-          importTrace
-            ? "grid grid-cols-12 items-center gap-6 cursor-pointer"
-            : "grid grid-cols-11 items-center gap-6 cursor-pointer"
-        }
+        className={cn(
+          importTrace ? "grid-cols-12" : "grid-cols-11",
+          "grid items-center gap-6 cursor-pointer"
+        )}
         onClick={() => setCollapsed(!collapsed)}
       >
         <div className="flex flex-row items-center gap-2">
@@ -149,14 +148,22 @@ export const TraceRow = ({
           </p>
         </div>
         <p className="text-xs font-semibold">{model}</p>
-        <HoverCell
-          values={prompts?.length > 0 ? JSON.parse(prompts[0]) : []}
-          className="flex items-center max-w-fit text-xs h-10 truncate overflow-y-scroll font-semibold col-span-2"
-        />
-        <HoverCell
-          values={responses?.length > 0 ? JSON.parse(responses[0]) : []}
-          className="flex items-center max-w-fit text-xs h-10 truncate overflow-y-scroll font-semibold col-span-2"
-        />
+        {prompts?.length > 0 ? (
+          <HoverCell
+            values={JSON.parse(prompts[0])}
+            className="flex items-center max-w-fit text-xs h-10 truncate overflow-y-scroll font-semibold col-span-2"
+          />
+        ) : (
+          <p className="text-xs font-semibold col-span-2"></p>
+        )}
+        {responses?.length > 0 ? (
+          <HoverCell
+            values={JSON.parse(responses[0])}
+            className="flex items-center max-w-fit text-xs h-10 truncate overflow-y-scroll font-semibold col-span-2"
+          />
+        ) : (
+          <p className="text-xs font-semibold col-span-2"></p>
+        )}
         <p className="text-xs font-semibold">{userId}</p>
         <p className="text-xs">
           {tokenCounts?.input_tokens || tokenCounts?.prompt_tokens}
@@ -199,6 +206,25 @@ export const TraceRow = ({
                 )}
               </Button>
             )}
+            <Button
+              disabled={prompts.length === 0 || responses.length === 0}
+              onClick={() => setSelectedTab("llm")}
+              variant={"ghost"}
+              className="flex flex-col justify-between pb-0"
+            >
+              <p
+                className={
+                  selectedTab === "llm"
+                    ? "text-xs text-primary font-medium"
+                    : "text-xs text-muted-foreground font-medium"
+                }
+              >
+                LLM Requests
+              </p>
+              {selectedTab === "llm" && (
+                <Separator className="bg-primary h-[2px]" />
+              )}
+            </Button>
             {!importTrace && (
               <Button
                 onClick={() => setSelectedTab("logs")}
@@ -212,7 +238,7 @@ export const TraceRow = ({
                       : "text-xs text-muted-foreground font-medium"
                   }
                 >
-                  Logs
+                  {`Logs  (${trace?.length ?? 0} total)`}
                 </p>
                 {selectedTab === "logs" && (
                   <Separator className="bg-primary h-[2px]" />
@@ -233,32 +259,13 @@ export const TraceRow = ({
                       : "text-xs text-muted-foreground font-medium"
                   }
                 >
-                  Events
+                  Events/Errors
                 </p>
                 {selectedTab === "events" && (
                   <Separator className="bg-primary h-[2px]" />
                 )}
               </Button>
             )}
-            <Button
-              disabled={prompts.length === 0 || responses.length === 0}
-              onClick={() => setSelectedTab("llm")}
-              variant={"ghost"}
-              className="flex flex-col justify-between pb-0"
-            >
-              <p
-                className={
-                  selectedTab === "llm"
-                    ? "text-xs text-primary font-medium"
-                    : "text-xs text-muted-foreground font-medium"
-                }
-              >
-                LLM Requests
-              </p>
-              {selectedTab === "llm" && (
-                <Separator className="bg-primary h-[2px]" />
-              )}
-            </Button>
             {langgraph && !importTrace && (
               <Button
                 onClick={() => setSelectedTab("langgraph")}

components/shared/vendor-metadata.tsx

@@ -46,8 +46,16 @@ export function vendorBadgeColor(vendor: string) {
     return "bg-grey-500";
   }
 
-  if (vendor.includes("qdrant")) {
-    return "bg-grey-500";
+  if (vendor.includes("dspy")) {
+    return "bg-red-500";
+  }
+
+  if (vendor.includes("weaviate")) {
+    return "bg-green-500";
+  }
+
+  if (vendor.includes("pg")) {
+    return "bg-blue-500";
   }
 
   return "bg-gray-500";
@@ -98,6 +106,18 @@ export function vendorColor(vendor: string) {
     return "bg-slate-200";
   }
 
+  if (vendor.includes("dspy")) {
+    return "bg-red-200";
+  }
+
+  if (vendor.includes("weaviate")) {
+    return "bg-green-200";
+  }
+
+  if (vendor.includes("pg")) {
+    return "bg-blue-200";
+  }
+
   return "bg-gray-800";
 }
 
@@ -279,6 +299,54 @@ export function VendorLogo({
     );
   }
 
+  if (vendor.includes("dspy")) {
+    const color = vendorColor("dspy");
+    return (
+      <Image
+        alt="DSPy Logo"
+        src="/dspy.png"
+        width={50}
+        height={50}
+        className={cn(
+          `${color} p-[3px]`,
+          variant === "circular" ? "rounded-full" : "rounded-md"
+        )}
+      />
+    );
+  }
+
+  if (vendor.includes("weaviate")) {
+    const color = vendorColor("weaviate");
+    return (
+      <Image
+        alt="Weaviate Logo"
+        src="/weaviate.png"
+        width={50}
+        height={50}
+        className={cn(
+          `${color} p-[3px]`,
+          variant === "circular" ? "rounded-full" : "rounded-md"
+        )}
+      />
+    );
+  }
+
+  if (vendor.includes("pg")) {
+    const color = vendorColor("pg");
+    return (
+      <Image
+        alt="Postgres Logo"
+        src="/pg.png"
+        width={50}
+        height={50}
+        className={cn(
+          `${color} p-[3px]`,
+          variant === "circular" ? "rounded-full" : "rounded-md"
+        )}
+      />
+    );
+  }
+
   return (
     <div className="flex items-center bg-muted p-2 rounded-sm">
       <StackIcon

lib/constants.ts

@@ -84,6 +84,10 @@ export const OPENAI_PRICING: Record<string, CostTableEntry> = {
     input: 0.0005,
     output: 0.0015,
   },
+  "gpt-3.5-turbo-0613": {
+    input: 0.0005,
+    output: 0.0015,
+  },
   "gpt-3.5-turbo-instruct": {
     input: 0.0015,
     output: 0.002,

lib/utils.ts

@@ -572,6 +572,8 @@ export function getVendorFromSpan(span: Span): string {
     vendor = "weaviate";
   } else if (span.name.includes("pg") || serviceName.includes("pg")) {
     vendor = "pg";
+  } else if (span.name.includes("dspy") || serviceName.includes("dspy")) {
+    vendor = "dspy";
   }
   return vendor;
 }