fix: render Anthropic base64 images in request viewer (#5555)

* fix: render Anthropic base64 images in request viewer

The Anthropic parser was extracting raw base64 data from message.source.data
without including the data: URL prefix or mime_type. The ChatMessage ImageContent
component requires either a proper data URL (with 'base64,' in it) or an http(s) URL.

Changes:
- Extract mime_type from message.source.media_type (default to image/png)
- Format base64 data as proper data URL: data:{mimeType};base64,{data}
- Store base64 data in content field and mime_type for fallback rendering

Fixes image rendering in browser automation sessions and other Anthropic multimodal requests.

* debug: add logging for Anthropic image parsing

* fix: add unoptimized flag for data URL images and debug logging

* fix: move useMemo hook before early return to fix React hooks order violation

The groupedItems useMemo was being called after an early return statement,
which violated React's rules of hooks (hooks must be called in the same order
every render). This caused 'Rendered more hooks than during the previous render'
error when clicking on requests in the detail panel.

* chore: remove debug logging from Anthropic image parser and ImageContent component

Cleanup after verifying the parser correctly generates data:image/png;base64 URLs
for Anthropic image messages.

* fix: render Anthropic images in request viewer

- Fix contentArray filtering to include image types (was checking content.content but images use image_url)
- Add unoptimized flag for data URL images in Next.js Image component
- Remove debug logging

* test: add mime_type field to Anthropic image test expectations

Update test assertions to include the mime_type field that was added
to image content objects in the Anthropic request parser fix.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* fix: make mime_type optional and only set for base64 source data

The mime_type field should only be set when we have actual base64 data
from the source field. For images that are already URLs (http/https or
data URLs), the mime_type is not relevant and should be omitted.

Changes:
- Updated requestParser to conditionally include mime_type only when
  base64Data exists
- Updated existing test expectations to not include mime_type for URL
  images
- Added new test case specifically for base64 source images that verifies
  mime_type is correctly included with the proper media type

This addresses the AI review feedback about mime_type being optional
and ensures we only set it when it's actually needed for base64 content.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Justin Torre <justin@Justins-MacBook-Pro.local>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: 3 people

packages/__tests__/llm-mapper/anthropic.test.ts

@@ -302,6 +302,56 @@ describe("mapAnthropicRequest", () => {
     });
   });
 
+  it("should handle images with base64 source data and include mime_type", () => {
+    const result = mapAnthropicRequest({
+      request: {
+        messages: [
+          {
+            role: "user",
+            content: [
+              {
+                type: "text",
+                text: "What's in this image?",
+              },
+              {
+                type: "image",
+                source: {
+                  type: "base64",
+                  media_type: "image/jpeg",
+                  data: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+                },
+              },
+            ],
+          },
+        ],
+      },
+      response: {
+        type: "message",
+        role: "assistant",
+        content: [
+          {
+            type: "text",
+            text: "I see an image",
+          },
+        ],
+      },
+      statusCode: 200,
+      model: "claude-3-sonnet",
+    });
+
+    const contentArray = result.schema.request.messages![0].contentArray!;
+    expect(contentArray).toHaveLength(2);
+
+    // Image with base64 source should include mime_type
+    expect(contentArray[1]).toMatchObject({
+      role: "user",
+      _type: "image",
+      content: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+      mime_type: "image/jpeg",
+      image_url: "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+    });
+  });
+
   it("should handle streamed responses with undefined values", () => {
     const result = mapAnthropicRequest({
       request: {

packages/llm-mapper/mappers/anthropic/requestParser.ts

@@ -54,14 +54,17 @@ const anthropicMessageToMessage = (message: any, role?: string): Message => {
     };
   }
   if (message.type === "image" || message.type === "image_url") {
+    const imageUrl = message.image_url?.url;
+    const base64Data = message.source?.data;
+    const mimeType = message.source?.media_type || "image/png";
+    const generatedImageUrl = imageUrl || (base64Data ? `data:${mimeType};base64,${base64Data}` : undefined);
+
     return {
-      content: getMessageContent(message),
+      content: base64Data || "",
       role: messageRole,
       _type: "image",
-      image_url:
-        message.type === "image" || message.type === "image_url"
-          ? message.image_url?.url || message.source?.data
-          : undefined,
+      image_url: generatedImageUrl,
+      ...(base64Data && { mime_type: mimeType }),
       id: randomId(),
     };
   }

web/components/templates/requests/components/ChatOnlyView.tsx

@@ -358,17 +358,8 @@ export default function ChatOnlyView({ mappedRequest }: ChatOnlyViewProps) {
     (item) => item.type === "message"
   ).length;
 
-  if (messageCount === 0) {
-    return (
-      <div className="flex h-full items-center justify-center p-8">
-        <p className="text-sm text-muted-foreground">
-          No user or assistant messages found in this request.
-        </p>
-      </div>
-    );
-  }
-
   // Group consecutive tool calls together
+  // NOTE: This useMemo must be called BEFORE any early returns to comply with React's rules of hooks
   const groupedItems = useMemo(() => {
     const result: (
       | { type: "message"; message: Message; isUser: boolean }
@@ -398,6 +389,16 @@ export default function ChatOnlyView({ mappedRequest }: ChatOnlyViewProps) {
     return result;
   }, [chatItems]);
 
+  if (messageCount === 0) {
+    return (
+      <div className="flex h-full items-center justify-center p-8">
+        <p className="text-sm text-muted-foreground">
+          No user or assistant messages found in this request.
+        </p>
+      </div>
+    );
+  }
+
   let messageIndex = 0;
 
   return (

web/components/templates/requests/components/chatComponent/ChatMessage.tsx

@@ -192,6 +192,7 @@ const ImageContent: React.FC<{
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   let imageSrc = message.image_url;
+
   if (message.content && message.mime_type?.startsWith("image/")) {
     imageSrc = `data:${message.mime_type};base64,${message.content}`;
   } else if (message.content && !message.mime_type) {
@@ -204,16 +205,23 @@ const ImageContent: React.FC<{
     imageSrc = `data:image/png;base64,${message.content}`;
   }
 
-  if (!imageSrc) return null;
+  if (!imageSrc) {
+    return null;
+  }
 
   const processedImageSrc = imageSrc.includes("base64,")
     ? base64UrlToBase64(imageSrc)
     : imageSrc.includes("https://") || imageSrc.includes("http://")
       ? imageSrc
       : null;
 
-  if (!processedImageSrc) return null;
+  if (!processedImageSrc) {
+    return null;
+  }
 
+  // Use unoptimized for data URLs to avoid Next.js image optimization issues
+  const isDataUrl = processedImageSrc.startsWith("data:");
+  
   const imageElement = (
     <div className="relative w-full max-w-md">
       <Image
@@ -225,6 +233,7 @@ const ImageContent: React.FC<{
         sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
         onClick={() => setIsModalOpen(true)}
         title="Click to view full size"
+        unoptimized={isDataUrl}
       />
     </div>
   );
@@ -822,8 +831,9 @@ export default function ChatMessage({
           <div className="flex flex-col gap-4">
             {message.contentArray?.map((content, index) => {
               const contentType = getMessageType(content);
+              // Images have data in image_url, not content
               const shouldShowContent =
-                chatMode === "PLAYGROUND_INPUT" || content.content;
+                chatMode === "PLAYGROUND_INPUT" || content.content || content.image_url || (content._type === "image");
 
               return shouldShowContent ? (
                 <div key={index}>