Merge branch 'main' into OPIK-41-show-ui-link-in-pytest-integration

apps/opik-backend/config.yml

@@ -1,8 +1,8 @@
 ---
 logging:
-  level: INFO
+  level: ${GENERAL_LOG_LEVEL:-INFO}
   loggers:
-    com.comet: DEBUG
+    com.comet: ${OPIK_LOG_LEVEL:-INFO}
 
 database:
   url: ${STATE_DB_URL:-jdbc:mysql://localhost:3306/opik?createDatabaseIfNotExist=true&rewriteBatchedStatements=true}

apps/opik-backend/entrypoint.sh

@@ -5,7 +5,13 @@ echo $(pwd)
 jwebserver -d /opt/opik/redoc -b 0.0.0.0 -p 3003 &
 
 echo "OPIK_VERSION=$OPIK_VERSION"
+echo "NEW_RELIC_ENABLED=$NEW_RELIC_ENABLED"
+echo "NEW_RELIC_VERSION=$NEW_RELIC_VERSION"
 
+if [[ "${NEW_RELIC_ENABLED}" == "true" && "${NEW_RELIC_LICENSE_KEY}" != "" ]];then 
+    curl -o /tmp/newrelic-agent.jar https://download.newrelic.com/newrelic/java-agent/newrelic-agent/${NEW_RELIC_VERSION}/newrelic-agent-${NEW_RELIC_VERSION}.jar
+    JAVA_OPTS="$JAVA_OPTS -javaagent:/tmp/newrelic-agent.jar"
+fi
 
 # Check if ENABLE_VIRTUAL_THREADS is set to true
 if [ "$ENABLE_VIRTUAL_THREADS" = "true" ]; then

apps/opik-frontend/src/components/shared/TraceDetailsPanel/TraceDataViewer/InputOutputTab.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useMemo } from "react";
+import get from "lodash/get";
+import isString from "lodash/isString";
 import { Span, Trace } from "@/types/traces";
 import {
   Accordion,
@@ -8,19 +10,81 @@ import {
 } from "@/components/ui/accordion";
 import SyntaxHighlighter from "@/components/shared/SyntaxHighlighter/SyntaxHighlighter";
 
+export type ImageContent = {
+  type: "image_url";
+  image_url: {
+    url: string;
+  };
+};
+
+const isImageContent = (content?: Partial<ImageContent>) => {
+  try {
+    return content?.type === "image_url" && isString(content?.image_url?.url);
+  } catch (error) {
+    return false;
+  }
+};
+
+function extractImageUrls(messages: unknown) {
+  if (!Array.isArray(messages)) return [];
+
+  const images: string[] = [];
+
+  messages.forEach((message) => {
+    const imageContent: ImageContent[] = Array.isArray(message?.content)
+      ? message.content.filter(isImageContent)
+      : [];
+
+    images.push(...imageContent.map((content) => content.image_url.url));
+  });
+
+  return images;
+}
+
 type InputOutputTabProps = {
   data: Trace | Span;
 };
 
 const InputOutputTab: React.FunctionComponent<InputOutputTabProps> = ({
   data,
 }) => {
+  const imagesUrls = useMemo(
+    () => extractImageUrls(get(data, ["input", "messages"], [])),
+    [data],
+  );
+
+  const hasImages = imagesUrls.length > 0;
+
+  const openTabs = useMemo(() => {
+    return hasImages ? ["images", "input", "output"] : ["input", "output"];
+  }, [hasImages]);
+
   return (
-    <Accordion
-      type="multiple"
-      className="w-full"
-      defaultValue={["input", "output"]}
-    >
+    <Accordion type="multiple" className="w-full" defaultValue={openTabs}>
+      {hasImages && (
+        <AccordionItem value="images">
+          <AccordionTrigger>Images</AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-wrap gap-2">
+              {imagesUrls.map((imageUrl, index) => {
+                return (
+                  <div
+                    key={index + imageUrl.substring(0, 10)}
+                    className="h-[200px] max-w-[300px] rounded-md border p-4"
+                  >
+                    <img
+                      src={imageUrl}
+                      loading="lazy"
+                      alt={`image-${index}`}
+                      className="size-full object-contain"
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      )}
       <AccordionItem value="input">
         <AccordionTrigger>Input</AccordionTrigger>
         <AccordionContent>