Add Support for Guardrails

components/shared/vendor-metadata.tsx

@@ -150,6 +150,10 @@ export function vendorColor(vendor: string) {
     return "bg-green-200";
   }
 
+  if (vendor.includes("guardrails")) {
+    return "bg-green-200";
+  }
+
   return "bg-gray-800";
 }
 
@@ -497,8 +501,24 @@ export function VendorLogo({
       <Image
         alt="MongoDB Logo"
         src="/mongodb.png"
-        width={50}
-        height={50}
+        width={30}
+        height={30}
+        className={cn(
+          `${color} p-[3px]`,
+          variant === "circular" ? "rounded-full" : "rounded-md"
+        )}
+      />
+    );
+  }
+
+  if (vendor.includes("guardrails")) {
+    const color = vendorColor("guardrails");
+    return (
+      <Image
+        alt="Guardrails Logo"
+        src="/guardrails.png"
+        width={30}
+        height={30}
         className={cn(
           `${color} p-[3px]`,
           variant === "circular" ? "rounded-full" : "rounded-md"

components/traces/trace_graph.tsx

@@ -124,6 +124,8 @@ const SpanItem: React.FC<SpanItemProps> = ({
     color = "bg-blue-500";
   else if (span.name.includes("mongodb") || serviceName.includes("mongodb"))
     color = "bg-green-500";
+  else if (span.name.includes("guardrails") || serviceName.includes("guardrails"))
+    color = "bg-green-500";
   const fillColor = color.replace("bg-", "fill-");
 
   const vendor = getVendorFromSpan(span as any);

lib/utils.ts

@@ -833,6 +833,8 @@ export function getVendorFromSpan(span: Span): string {
     vendor = "litellm";
   } else if (span.name.includes("mongodb") || serviceName.includes("mongodb")) {
     vendor = "mongodb";
+  } else if (span.name.includes("guard") || serviceName.includes("guard")) {
+    vendor = "guardrails";
   }
   return vendor;
 }