Support for Image inputs (#119)

* Pagination bug

* Bug fix

* Support image inputs

components/project/traces/logs-view.tsx

@@ -5,6 +5,8 @@ import { correctTimestampFormat } from "@/lib/trace_utils";
 import { cn, formatDateTime, parseNestedJsonFields } from "@/lib/utils";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useState } from "react";
+import { JsonView, allExpanded, defaultStyles } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
 import {
   serviceTypeColor,
   vendorBadgeColor,
@@ -88,9 +90,11 @@ export const LogsView = ({
         )}
       </div>
       {!collapsed && (
-        <pre className="text-xs bg-muted p-2 rounded-md whitespace-pre-wrap">
-          {parseNestedJsonFields(span.attributes)}
-        </pre>
+        <JsonView
+          data={JSON.parse(parseNestedJsonFields(span.attributes))}
+          shouldExpandNode={allExpanded}
+          style={defaultStyles}
+        />
       )}
       <Separator />
     </div>

lib/utils.ts

@@ -444,6 +444,26 @@ export function safeStringify(value: any): string {
   if (typeof value === "string") {
     return value;
   }
+
+  // if its a list, check type and stringify
+  if (Array.isArray(value)) {
+    const stringifiedList = value.map((item) => {
+      if (item?.type === "text") {
+        return item?.text;
+      } else if (item?.type === "function") {
+        return prettyPrintJson.toHtml(item);
+      } else if (item?.type === "image_url") {
+        if (typeof item?.image_url === "string") {
+          return `<img src="${item?.image_url}" />`;
+        } else if (typeof item?.image_url === "object") {
+          return `<img src="${item?.image_url?.url}" />`;
+        }
+      }
+      return item;
+    });
+    return stringifiedList.join("");
+  }
+
   // If it's not a string, stringify it
   return prettyPrintJson.toHtml(value);
 }

package.json

@@ -89,6 +89,7 @@
 		"react-diff-view": "^3.2.1",
 		"react-dom": "^18",
 		"react-hook-form": "^7.49.3",
+		"react-json-view-lite": "^1.4.0",
 		"react-markdown": "^9.0.1",
 		"react-query": "^3.39.3",
 		"react-syntax-highlighter": "^15.5.0",